LPトレース

ピンタレストや制作会社のLPを分析する

• お客様目線で上からスクロールして目立つところを研究する
• どんなデザインか分析する
  • デザインの4原則（近接・整列・反復・コントラスト）
  • タイポグラフィ（フォントの太さ/大きさ・行間・文字間・位置・デザインとして文字を扱っているか）
  • 画像（写真/イラスト・写真の構図/加工・トリミング・色調補正・図解・グラフ・わかりやすい・正確）
  • 色彩（色相/色味・明度・彩度・色調/トーン）
  • 配色（色の数・ベースカラー・メインカラー・アクセントカラー）
  • 視線誘導（Z・F・N型の法則）
• Photoshopを使ってどのように再現できるか分析する

見本LPの探し方

1. ピンタレストで「〇〇(商品ジャンル) LP デザイン」と検索
2. ピンタレストで「LP制作会社」と検索
3. Googleで「LP制作 実績」と検索

LPトレースの手順

有料素材をのぞいて、他の部分は完璧にトレースをおこなう。

1. トレースの見本とするLPをChromeで開く
2. デベロッパーツールを開く　⌘＋⌥＋I
3. 「Toggle Device Toolbar」を開く　⌘ + ⇧ + M
4. 左上のdimensionsをスマホに合わせる
5. トレースする部分をスクショをおこなう
6. Photoshopを使ってトレースをおこなう
7. パーツごとに区切りながらLP1本分のトレースをおこなう（1パーツにかける時間の目安：30分〜1時間）

トレースをおこなう際、意識するポイント

• 自己流ではなくクライアントさんのイメージを再現する
• トレースをおこないデザインのクオリティを高める・引き出しを増やす

具体的には下記のようなポイントを分析する

• フォントのバランス
• 余白のバランス
• 背景の切り替え
• 写真画像の見せ方
• あしらいの選び方
• 要素の配置

トレースした記録

化粧品系LP　メインビジュアル：3時間19分