LPトレース

目次

① トレースしたLP
② トレースしたサイトの分析（情報設計）
③ トレースしたサイトの分析（デザイン）
④ トレースを通して学んだこと

① トレースしたLP

SHE株式会社が提供する「SHE WORKS（法人向け）」のLPをトレースしました。

（ 使用ツール：Photoshop ｜ 制作時間：約10時間 ）

② トレースしたサイトの分析（情報設計）

▼ ターゲット

・デジタル・クリエイティブ領域の即戦力となる人材を求める企業法人。

・特に事業拡大中のスタートアップやベンチャー企業。

・採用課題を抱えており、単なる人材紹介に留まらず、より手厚いサポートを求める企業。

▼ 目的

・認知獲得：まずは、「企業とSHElikes会員をマッチングする人材紹介サービス」であるということを認識してもらうこと。

・訴求と信頼構築：サービスの提供価値を最大限に伝え、企業の担当者が「このサービスは自社の課題解決に繋がりそうだ」「ここでなら求める人材が見つかりそうだ」と魅力を感じ、信頼を抱くよう促すこと。

・コンバージョン：「資料請求」または「問い合わせ」へと繋げること。

▼ ユーザーストーリー

③ トレースしたサイトの分析（デザイン）

▼ デザインガイドライン

デベロッパーツールを使いながら、題材として選んだWebサイト内で使われている色、タイポグラフィ、余白を確認し、分析をまとめました。

▼ PCとスマホの画面分析

Webサイトは閲覧するデバイスのサイズによって異なるので、PCとスマホのレイアウトで異なる部分を分析し、どのような変化が見られるか気付いた箇所について言語化しました。

④ トレースを通して学んだこと

・検証ツールの見方：使用されているフォントやフォントサイズ、余白、CSSの書き換えなど、検証ツールのさまざまな活用方法について学ぶことができました。今後は自分でデザイン制作に取り組む際に、既存のウェブサイトをより詳細に分析し、参考にできるようになりました。

・レスポンシブデザインの考え方：PCとSPのレイアウト展開パターンについて理解を深めた。画面幅に合わせたデザインの考え方についても、具体的なイメージを持つことができるようになりました。

・LPユーザーストーリー設計の流れ：

　↓ ファーストビューでの関心喚起と、ユーザーに取ってほしいアクションの提示

　↓ ユーザーの抱える課題の提示

　↓ その課題に対する解決策の提示

　↓ 解決策の信頼性を高める根拠

　↓ 具体的な行動を促すCTA

　↓ より詳細な説明

　↓ プッシュメッセージ

　↓ フッターとCTA再提示