初めて予算案件のLPデザインをしてみて

今までLPのデザイン・コーディングを一度もしたことない私が、

ワイヤー
デザイン
コーディング
をまさかの>>>1ヶ月<<<でやらないといけないことになりました。

デザインを作るにあたって、

これやって良かったな！
これに気をつけてもっと良くなった！
今回学んだデザインの基礎知識・アイデア

が多かったので、デザイ初心者の方のため、（1番は私の整理のため）にまとめてみることにしました。前置きが長すぎたけど、本編はこちら↓

やって良かった！（デザイン編）

ワイヤーがある程度できて、内容の確認をもらった後、真っ先にやったことが
参考のLP探しです！
自分がどんなLPを作りたいかイメージすら湧いてなかったので、とにかくLPを見まくりました。
通勤時間、歯磨きする時間、LINE漫画見る時以外はずっとPinterestで参考LPを見ました。

今回案件が特殊で、ペルソナ分析をスキップしましたが、
その他の案件では、順当にペルソナ決めから取り組んでください💦

デザインを進める前にLPの参考を見まくることで、頭の中で自分がどんなデザインにしたいかが形になり、アイデアが浮かんでくるようになりました！

やらなきゃ良かった！（デザイン編）

LPたくさん見て、参考を見つけて、よしデザインするぞ〜！
という段階で、私は参考のLPを1つのみに絞っていました。
しかし、参考を1つに絞ったことでデザインが似すぎるという問題が起きました。
元々引き出しが少ないので、参考というより模倣になってしまいました。

参考は1つだけじゃなく、複数用意するべきだった！
コンテンツごとに参考を用意することで、1つのLPに似すぎないオリジナリティのあるLPが作れたのかな〜と思います！

今回学んだLP制作の知識

⚫︎FVは1番大事！ユーザーに読ませたい順に視線を誘導する！

FVでは、ユーザーの思考に先回りして、ユーザーが知りたい順番で
読ませたいテキスト／見せたいイラストに視線を誘導させる必要があります。
メインコピー／サブコピー／オファー内容／権威性／イラスト・画像…
ユーザーに読んでほしい順序は？

また、その順序を決める際は、ユーザーにどのような態度変容を起こさせたいかまで考えられるとさらにgoodです！

ユーザーによって読む順番が変わってしまうと、

ユーザーの視線が迷子になる
意図した内容が伝わらない
まとまりのないFVになる
離脱率が上がる

など、悪いことがたくさん起きますよ〜〜

ユーザーの視線を誘導するためには…
文字サイズやコンテンツの位置を見直してみましょう！
ブロックのまとまりをはっきりさせることで、ユーザーが迷子になりにくく、デザイン的にも締まります！

文字量がスッキリしてるFV
コンテンツブロックのまとまりがあるFV
テキストのジャンプ率が高いFV
FVのコンテンツがタイトルに馴染んでるFV
→テキストの色を黒じゃなくしたり、文字サイズに強弱をつけたりしてデザインに溶け込ませると◎

は読了率が上がる傾向にあるので、意識してみると良いです！

⚫︎テキストのジャンプ率って？

急に出てきたテキストのジャンプ率って何？それを上げたらどうなるの？

テキストのジャンプ率とは本文の文字サイズに対する大きさの比率のこと。
本文の文字サイズに対して、見出しが大きければジャンプ率が高く、小さければジャンプ率が低い。
ジャンプ率が高いと文書のメリハリがつき、最も重要な情報を見る人に伝えることができる。

最初に本文を16px、タイトルの1番目立たせたい文字のサイズを24pxにしてデザインを作ってみたのですが、どこを1番伝えたいのかが分からない！
修正後は48pxになりましたが、場合によってはも〜っと高くても効果的ですよ◎
▼ジャンプ率の参考
クロネコメンバーズのLPタイトル

⚫︎フラットデザインとマテリアルデザインを理解する

⚫フラットデザイン：立体感や奥行き、質感などの表現があまりなく、平面的なデザイン。グラデーションやシャドウは使用しない。
▶︎シンプルで洗練された印象を与えることができる。レイアウトしやすいので作業効率もアップする。
フラットデザインの例

マテリアルデザイン：人が普段目にしている実世界の「物質」と同じ法則（影・質量感のある動き・立体感など）でデザインすることにより、ユーザーがストレスなく直感的に扱えるデザイン。
▶︎ユーザーにとってわかりやすい。メリハリのあるデザインになる。ルールは厳密だが覚えてしまえば作りやすいデザイン。
マテリアルデザインの例

今回、私が最初に作成したデザインはフラットデザインで、
全体的にメリハリがないというアドバイスを頂きました。
そこで、マテリアルデザインを参考に、

CTAボタンや目立たせたいコンテンツにドロップシャドウをつける
背景やボタンにグラデーションを使う

などをしてみた結果、見やすくまとまりの良いデザインになりました〜〜

⚫︎コンテンツごとに背景色・デザインを変える

LPはユーザーの思考に先回りして、ユーザーの態度変容を起こす必要があります！
そのため、コンテンツのトピックは正しく認識させる必要があります。
そのためには、コンテンツの切り替えをはっきりさせるために背景は変えた方が良いです！

背景色を変える
背景に画像をうっすら入れる

もしくはインパクトのある見出しにするなど、コンテンツの切り替えはわかりやすくした方が読む人を飽きさせない（＝離脱率が下がる）
▼インパクトのある見出しの例①

▼インパクトのある見出しの例②

⚫︎テキストの行間は狭すぎても開きすぎてもダメ！❌

行間は狭いと読みづらいのは、なんとな〜く理解できるけど、じゃあどのくらいが適切なのか？

普通の文字 = font-size * 1.6~5
タイトル文字 = font-size * 1.3

で計算するとスッキリするそうです！

⚫︎コンテンツの余白はしっかりとる！

コンテンツ全体：スマホの横幅いっぱいいっぱいだと読みづらいので、最低でも両サイド10pxは開けるようにします！

itemのや画像の余白：余白はゆったりと取っている方が見やすいです！また、左右上下の余白がitemごとに異なることがないようにしましょう！

⚫︎背景に程よくグレーやベージュを使って、ゴチャゴチャ感をなくす！

サイトカラーを決めた時に、primaryとsecondaryを決めると思うのですが、
私は、「secondaryにしたなら、コンテンツの背景にもどんどん使わないと！」と思ってたくさん使ってました。

それがごちゃごちゃの原因になっていました
secondaryだからと言って、たくさん使わなきゃ！というより、
全体的なバランスを意識して程よくグレーやベージュを使うとまとまりのあるデザインになりました。

まとめ

デザインは理に適ったルールがあり、知ってるのと知らないのとでは、仕上がりが全然違うんだな〜ということを学びました。
デザイン初学者は、こういう知識を少しでも多く学び取って、スキルアップしていきましょう！