【デザインについて】
●制作の流れ…ペルソナ・トンマナの設定をして、訴求ポイントを整理。Figmaでワイヤーフレーム制作→STUDIOでLP制作の順で制作しました。セクションごとにレイアウト・テキスト量の調整をしました。ファーストビューはヒーロー画像での制作指示あり。ファーストビューを先行して制作し、全体的なイメージを確認しながら制作しました。
●カラー…ベースカラーは明るく、透明感のある白(#ffffff)にしました。メインカラーは見やすく視認性の良いダークグレー(#333333)、アクセントカラーは女性らしく、目をひくピンク(#fe339c)にしました。
●タイポグラフィ…馴染みがあり読みやすいNoto sans JPを使用しました。
●情報設計…忙しい世代なので、PCとスマホのレスポンシブにしました。ヒーロー画像でのFV制作の指示があり、夢に向かって努力する、キラキラした女性の画像(STUDIOのフリー画像)を使用しました。分かりやすく、ロゴ+ナビゲーション、キャッチコピーと簡単な説明文+CTAボタンを設置しました。2ndビューにはWebDスクールの特徴について、3rdビューには無料説明会の内容とCTAボタン、フッターには著作権のテキストを配置しました。2ndビューはのこだわりポイントをしっかりと伝えるために、CTAボタンは設置していません。その代わり、他のビューに設置し、無料説明会への誘導を行っています。
【工夫したポイント】
実際にWebページとして制作したので、ナビゲーションは各セクションへ、ボタンには他ページまたは架空のメールアドレスへ飛ぶように連携させたり、ファビコンなどを設定してリアリティを出しました。使用画像はすべてSTUDIOのフリー画像を使用し、説明に合った画像・洗練された画像にしました。絵文字やリストの数字は統一感と見やすさを意識してアイコンを使用しました。また、全体的なデザインもすっきり見せるために統一させました。
