LPトレース | ZHANG Zixin

① 制作概要

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

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

② トレースしたLPの戦略分析（情報設計）

▼ ターゲット

・デジタル・クリエイティブ領域の即戦力となる人材を求める企業法人。
・特に事業拡大中のスタートアップやベンチャー企業。
・採用課題を抱えており、単なる人材紹介に留まらず、より手厚いサポートを求める企業。

▼ 目的

・認知獲得：「企業とSHElikes会員をマッチングする人材紹介サービス」であることを明確に認識させる。
・訴求と信頼構築：サービスの提供価値を最大限に伝え、「自社の課題解決に繋がりそうだ」「ここで求める人材が見つかりそうだ」と担当者に魅力を感じさせ、信頼を醸成する。
・コンバージョン：「資料請求」または「問い合わせ」への行動を促す。

▼ ユーザーストーリー

トレースを通して、ユーザーの心理と行動に合わせた次のストーリー構成が設計されていることを理解しました。

③ トレースしたLPのデザイン・レイアウト分析

▼ デザインガイドライン

デベロッパーツールを使用し、Webサイトで使われている色、タイポグラフィ、余白などのデザインガイドラインを分析し、まとめました。これにより、デザインの一貫性がどのように保たれているかを明確に理解できました。

▼ PCとスマホのレイアウト分析

閲覧デバイスによるレイアウトの変化を分析し、PCとスマホでレイアウトがどのように異なるか、特にブレイクポイントにおける要素の扱い方や優先順位の変化について気づいた点を言語化しました。

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

・検証ツールの活用

使用されているフォントやフォントサイズ、余白、CSSの書き換えなど、検証ツールのさまざまな活用方法を習得できました。今後は、自作のデザイン制作において、既存のWebサイトをより詳細に分析し、インプットとして活用できるようになります。

・レスポンシブデザインの考え方

PCとSPのレイアウト展開パターンについて深く理解し、画面幅に応じたデザインの考え方について、具体的なイメージを掴めるようになりました。要素の優先順位付けや、効率的なレイアウト展開のロジックを習得できたことが大きな学びです。

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

トレースを通じて、ユーザーに伝わるLPのストーリー構成の型を学びました。
　↓ ファーストビューでの関心喚起と、ユーザーに取ってほしいアクションの提示
　↓ ユーザーの抱える課題の明確化
　↓ その課題に対する解決策の提示
　↓ 解決策の信頼性を高める根拠（実績や事例）
　↓ 具体的な行動を促すCTA
　↓ サービス内容のより詳細な説明
　↓ クロージングメッセージ
　↓ フッターとCTA再提示

今後のLPデザインにおいても、この型に基づいた、ユーザーに響くストーリー構成を意識し、より効果的な制作を目指します。