1.お題を確認しよう
コーポレートサイトのトップページのデザインを制作してみましょう。
Webサイトを制作する際の大まかな流れはこちらのレッスンで紹介しています。
7-3. Webサイトをデザインする
お題はこちらです。
「コーポレートサイトのトップページをデザイン」です。
レッスンではトップページのデザインのみとします。
どんな会社なのかを確認しよう
まずは会社の情報を確認します。
今回は以下のような会社としています。
- 自動車部品を作っている会社
- 自動車の外から見えない部分（エンジンの部品など）の部品を作っている会社
- 技術に自信がある
- 創業50周年
- 海外にも輸出している
Webサイトを作る理由を知ろう
次にWebサイトを作る理由を確認します。
会社がWebサイトを制作したいと思う理由はさまざまなものがあります。
- どんな業務を行なっている会社か知ってもらいたい
- 新製品などの情報を詳しく掲載する場所が欲しい
- 競合他社と差をつけたい
- 販路を拡大するためにお問い合わせを増やしたい
などです。
今回は「どんな業務を行なっている会社か知ってもらいたい」とします。
ターゲット
Webサイトを作る理由が「どんな業務を行なっている会社か知ってもらいたい」とありますが、特に誰に向けて知ってもらいたいのかを確認します。
今回は
- 製造している部品を使う自動車メーカー
- 製造業に就職したいと思っている人
とします。
仕上がりのイメージ
どんな雰囲気のデザインにしたいのかを確認します。
今回は
- 誠実なイメージ
とします。
2.ワイヤーフレームを確認
ワイヤーフレームを確認します。ワイヤーフレームは自分で制作する場合もありますが、今回はこのワイヤーフレームをもとに進めていきます。
ワイヤーフレームはこの通りデザインしてください。という意味ではなく、このようなコンテンツをこのページに入れてください。という指示書です。
そのためデザイン前に確認する部分は
- ページ内に素材写真やイラストがどの程度必要なのか
- ボタンやテキストリンク先の遷移先
を確認します。
ページ内に素材写真やイラストがどの程度必要なのか
素材写真やイラストは支給されることもあれば素材サイトを利用する場合もあります。
素材サイトから使用する画像を検索する必要がある場合、複数の素材を準備しておくと、実際に当てはめた時に表示したい部分がうまく入らないなどの時に検索し直す必要がなくなります。
ボタンやテキストリンク先の遷移先
リンクの遷移先をあらかじめ確認しておきましょう。
遷移先がわからないと、
- どの程度リンクを目立たせるのか
- 外部リンクなら外部サイトへ遷移することがわかりやすいようにする必要がある
という部分がデザインに直接関係してくるのでリンク先のURLまでその時点で分からなくてもどのページに遷移するのかということを確認しておきましょう。
ワイヤーフレームを確認し、必要な素材、情報が揃っているか確認してから作業に入りましょう。
次はファーストビューからデザインを制作していきます。
