【初めてのLPデザイン】コレジャナイ感を払拭するアイデアが凄すぎた。

## 初めて予算案件のLPデザインをしてみて
今までLPのデザイン・コーディングを一度もしたことない私が、
* ワイヤー
* デザイン
* コーディング
をまさかの>>>**1ヶ月**<<<でやらないといけないことになりました。

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

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

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

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

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

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

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

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

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

ユーザーによって読む順番が変わってしまうと、
* ユーザーの視線が迷子になる
* 意図した内容が伝わらない
* まとまりのないFVになる
* 離脱率が上がる

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

:::note info
ユーザーの視線を誘導するためには…
**文字サイズやコンテンツの位置を見直してみましょう！**
ブロックのまとまりをはっきりさせることで、ユーザーが迷子になりにくく、デザイン的にも締まります！
* 文字量がスッキリしてるFV
* コンテンツブロックのまとまりがあるFV
* テキストのジャンプ率が高いFV
* FVのコンテンツがタイトルに馴染んでるFV
→テキストの色を黒じゃなくしたり、文字サイズに強弱をつけたりしてデザインに溶け込ませると◎

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

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

:::note info
テキストのジャンプ率とは**本文の文字サイズに対する大きさの比率のこと。** 
本文の文字サイズに対して、見出しが大きければジャンプ率が高く、小さければジャンプ率が低い。
**ジャンプ率が高いと文書のメリハリがつき、最も重要な情報を見る人に伝えることができる。**
:::
最初に本文を`16px`、タイトルの1番目立たせたい文字のサイズを`24px`にしてデザインを作ってみたのですが、**どこを1番伝えたいのかが分からない！**
修正後は`48px`になりましたが、場合によってはも〜っと高くても効果的ですよ◎
▼ジャンプ率の参考
[クロネコメンバーズのLPタイトル](https://jp.pinterest.com/pin/84372193008283681/ "ジャンプ率の高いLPタイトルの参考")

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

 :::note info
**⚫フラットデザイン**：立体感や奥行き、質感などの表現があまりなく、平面的なデザイン。グラデーションやシャドウは使用しない。
▶︎シンプルで洗練された印象を与えることができる。レイアウトしやすいので作業効率もアップする。
[フラットデザインの例](https://baito.mynavi.jp/entrypocket/ "エントリーポケットのLP")

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

今回、私が最初に作成したデザインはフラットデザインで、
**全体的にメリハリがない**というアドバイスを頂きました。
そこで、マテリアルデザインを参考に、
* CTAボタンや目立たせたいコンテンツにドロップシャドウをつける
* 背景やボタンにグラデーションを使う

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

### ⚫︎コンテンツごとに背景色・デザインを変える
LPはユーザーの思考に先回りして、ユーザーの態度変容を起こす必要があります！
そのため、コンテンツのトピックは正しく認識させる必要があります。
そのためには、コンテンツの切り替えをはっきりさせるために背景は変えた方が良いです！
* **背景色を変える**
* **背景に画像をうっすら入れる**

もしくは**インパクトのある見出しにする**など、コンテンツの切り替えはわかりやすくした方が読む人を飽きさせない（＝離脱率が下がる）
▼インパクトのある見出しの例①
![スクリーンショット 2024-09-30 19.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3896340/d5531c3b-6d3f-63e6-7639-78c78f753e0e.png)
▼インパクトのある見出しの例②
![スクリーンショット 2024-09-30 19.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3896340/9013e41f-954c-1c23-25f1-0c058eb2edca.png)


### ⚫︎テキストの行間は狭すぎても開きすぎてもダメ！❌
行間は狭いと読みづらいのは、なんとな〜く理解できるけど、じゃあどのくらいが適切なのか？
* 普通の文字 = font-size * 1.6~5
* タイトル文字 = font-size * 1.3

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

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

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


### ⚫︎背景に程よくグレーやベージュを使って、ゴチャゴチャ感をなくす！
サイトカラーを決めた時に、primaryとsecondaryを決めると思うのですが、
私は、「secondaryにしたなら、コンテンツの背景にもどんどん使わないと！」と思ってたくさん使ってました。

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

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