講座終了実習
この講座のまとめとしてページをデザインしてみましょう。
“TOKYO WEB”という架空のWEBスクールをクライアントとし、「WEB業界へ就職サポートプラン」のLPページをデザインします。
なお、実習の提出は不要です。
ストーリー
“TOKYO WEB”さんからLPデザインの案件を受注しました。
LPページはレスポンシブデザインで制作します。 クライアントの要望をまとめた下記のデザイン要件を参考に、以下２つのデザインを作成してください。
- パソコン幅のデザイン
- スマートフォン幅のデザイン
なお、ページに使用する写真・図版は現段階では一切ありません。
クライアントが用意出来るものがあれば、後々差し替えたいそうです。 初期（納品）段階ではロイヤリティフリーのストックフォトからイメージに合う写真を選んで入れてください。クライアントが写真を用意できない箇所は、そのままデザインカンプに使った写真が利用されることもあると考えて選択しましょう。
デザイン要件
①ページの目的
「WEB業界へ就職サポートプラン」の販売。
ただし、いきなり申し込まれるユーザーは少ないので、プランに興味を持ってお問合せからコンタクトしてきてくれることをメインに考えます。お問い合わせフォームへの誘導・問い合わせを送信してもらいやすい形を考えて下さい。
②ターゲット層とペルソナ
「WEB業界へ就職サポートプラン」のメインターゲット層は、WEB業界への転職を考えている20代～30代の女性です。WEB制作については完全未経験、もしくは初心者。
ペルソナは下記のとおりです。
③ヘッダーとフッター
【ヘッダー】
- TOKYO WEBとは
- プラン紹介
- 講座一覧
- ブログ
- お問い合わせ
５つのリンクを入れたグローバルメニューを設置。
【フッター】
コピーライトのみで良いです。
④掲載内容について
クライアントが載せたい！と仰っているテキストをブロックにまとめました。 下記URLにあるスプレッドシートから、コピーして使って下さい。
【スプレッドシートの使い方】
ヘッダーとフッターの内容は決まっています。 コンテンツ部分に、スプレッドシートにある各パーツを配置して下さい。
シートにあるパーツはクライアントの思いつき順に並んでいます。 ゾーンニングと見出しの設計レッスン・実習で作成した美容室サイト（詳細ページ）等を参考に、各パーツの並び順も考えて配置していきましょう。
配置する順番が決まったら、各パーツごとにレイアウト（見出し・テキスト・画像挿入位置など）を決めていきましょう。 ワイヤーフレーム作成実習の流れと同様です。
レイアウトが決まったら、デザインを作り込み、完成させて下さい。
⑤テイストの要望
女性がメインターゲットですが、あまり可愛い系に寄り過ぎないようにして欲しい。 （男性でも躊躇わずに使えるように）
分かりやすさ・使いやすさを重視してシンプルめにして下さい。
作成のポイント
全体
- デザインの４原則を意識する
- ユーザーの期待感を高める構成とデザイン
- テキストの可読性を保つ
- ページの一貫性を保つ
写真・図版について
写真・イラスト・図版などを入れて、Webページを視覚的にも分かりやすくします。ユーザーを期待・ワクワクさせ、コンバージョンに繋がるような画像を選定もしくは作成して下さい。
注意点としては、1枚のページとして眺めた際に、テイストや色味に違和感がないよう写真・図版を選定もしくは作成することを意識して下さい。画像編集ソフトを使って露光や色調などを調整し、その画像を使用して頂いても良いです。
また、余裕のある方はTOKYO WEBのロゴも考えてみて下さい。 ※ロゴを使わずにテキストで入れても構いません。
テイスト・カラーリング
ターゲット層、ペルソナに合わせたデザインテイストを意識します。 配色もデザインテイストに沿うように設定して下さい。
スマホ向けデザイン
スマートフォンで見た際にも、読みやすく使いやすいようデザインしてください。 下記を意識して頂くと良いでしょう。
- 内容が分かりやすい
- テキストが読みやすい
- リンクをタップしやすい(誤タップしにくい)
※実習の提出は不要です。