LPの構造を理解し分析する
LPは、画像を使ってスマホファーストで作るのが基本。
基本的に縦は20,000〜50,000pxで、横幅は750px（スマホでは横幅100％表示、PCでは750px）。
LPはファーストビュー・お客さまの声・商品説明・お悩みなど、パーツごとにわけて制作されている。
「パーツの中で一番目立つところはどこか？」、「なにを伝えたいのか？」を意識しながら既存LPの分析をする。
ピンタレストや制作会社LPをトレースしながら、以下のことを分析する。
- お客様目線で上からスクロールして目立つところを研究する
- どんなデザインか分析する
デザインの4原則（近接・整列・反復・コントラスト） - Photoshopを使ってどのように再現できるか分析する
タイポグラフィ（フォントの太さ/大きさ・行間・文字間・位置・デザインとして文字を扱っているか）
画像（写真/イラスト・写真の構図/加工・トリミング・色調補正・図解・グラフ・わかりやすい・正確）
色彩（色相/色味・明度・彩度・色調/トーン）
配色（色の数・ベースカラー・メインカラー・アクセントカラー）
視線誘導（Z・F・N型の法則）
既存LPのパーツを確認する手順
- クロームでパーツを見たいLPを開く
- ⌘ + ⌥ + I
- ⌘ + ⇧ + M 「Toggle Device Toolbar」
- 左上のdimensionsをスマホに合わせる
- ⌘ + ⇧ + C
見本LPの探し方
- ピンタレストで「〇〇(商品ジャンル) LP デザイン」と検索
- ピンタレストで「LP制作会社」と検索
- Googleで「LP制作 実績」と検索
LPトレースの手順
有料素材をのぞいて、他の部分は完璧にトレースをおこなう。
- トレースの見本とするLPをChromeで開く
- デベロッパーツールを開く ⌘＋⌥＋I
- 「Toggle Device Toolbar」を開く ⌘ + ⇧ + M
- 左上のdimensionsをスマホに合わせる
- トレースする部分をスクショをおこなう
- Photoshopを使ってトレースをおこなう
- パーツごとに区切りながらLP1本分のトレースをおこなう（1パーツにかける時間の目安：30分〜1時間）
トレースをおこなう際、意識するポイント
- 自己流ではなくクライアントさんのイメージを再現する
- トレースをおこないデザインのクオリティを高める・引き出しを増やす
具体的には下記のようなポイントを分析する
- フォントのバランス
- 余白のバランス
- 背景の切り替え
- 写真画像の見せ方
- あしらいの選び方
- 要素の配置
トレースした記録
化粧品系LP メインビジュアル：3時間19分
