初級編の締めのLPデザインです。
webデザインコース
の肝であるデザインレビューについても紹介します。
レビューがこれからの方、デイトラ購入しようか迷っている方も参考になると思います。
DAY25～29 実践編！LPを作成しよう
課題は２パターン用意されています。
- 元々あったフィットネスジムの課題
- 後から追加されたスキンケアセットの課題
僕はスキンケアの方に取り組みました。
メンターさんの添削を受けて修正、完成したのがこちら。
最終的な完成品
メンターさんによるレビュー
Slack内のレビュー依頼部屋に自分のデザインを投稿。
５日後にレビュー完了の連絡がきました。
メンターさんの指摘と、それに対する僕の修正を一部紹介します。
ファーストビュー
メンターさんの指摘
画面にしめる女性の割合が多く、キャッチコピー（パーソナライズ診断で～）が目立たなくなっている。
写真の空いているところに「あなただけの3点セット」が配置してある。専属契約している芸能人でないならテキストの方が重要かもしれない。
修正内容
女性の写真を小さくした。
「パーソナライズ診断で～」の帯を大きくし、グラデーションでツヤをつけて強調した。
「あなただけの～」にも帯を追加。
化粧水、美容クリーム、乳液の３つの要素の配置変更、影をつけて強調した。
ユーザーの視線の動きがスムーズに、情報が理解しやすくなった気がします。
スキンケアの3点セットを紹介するページというのが、わかりやすくなりました。
商品セクション
メンターさんの指摘
化粧水→写真の視線の動きを「1」が邪魔している。
好みの話ではあるが、奥行きを感じさせるデザインが流行しているので、写真やあしらいに影をつけるのもオシャレ。
本文と内容量等の説明にアクセントがあった方がユーザーは見やすい。流し読み対策にもなるのでメリハリをつけましょう。
修正内容
「1」を「01」にして移動。
写真とあしらいに影をつけた。
内容量と仕様目安に背景色をつけた。
影のおかげで一気に高級感が出ました。
内容量、仕様目安にも目が留まりやすいように。
お知らせ
メンターさんの指摘
タイトルが２行以上になった時、日付は上揃えなのか、中央揃えなのか、コーダーさんがわかるようにする。
お知らせをつけるなら「もっと見るボタン」をつけましょう。
修正内容
２行以上になった時の処理をわかりやすくした。
無料診断のボタンより薄い色のボタンを追加。無料診断してもらうことが目的のLPな為。
日付のフォントの色をタイトルより少し薄くしてメリハリをつけた。
ボーダーカラーも薄くした。
白いボックスにも薄く影をつけてみた。
全部で２０項目ほどのアドバイスをいただきました。
ツイッター上での評判通り、すごく丁寧なレビューで、その後の質問にもすぐ返信していただきました。
Slack内では他の方の添削内容も見れて、こちらも大変勉強になります。
今回で初級編はおわり。中級へGO！