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