🐱制作物
▼ トレース比較
SHE株式会社が提供する「SHE WORKS」のLPをトレースしました。
▼ スタイルガイド
▼ PCとスマホでレイアウトが異なる箇所の分析
🐱工夫したポイント
LP全体の色・タイポグラフィ・余白設計を丁寧に観察し、構成ルールを可視化しました。
🐱分析・考察
ターゲットは「女性人材の採用に課題を感じているWeb業界の企業」で、目的はお問い合わせフォームへの導線強化です。フォームをPCでは右サイド、スマホでは下部に固定している構成から、デバイスごとにCVポイントを意識して設計されていることが読み取れました。
また、ファーストビューのコピーとビジュアルが「信頼感」「親しみ」を両立しており、ターゲット企業に安心感を与える設計になっていると感じました。
🐱学び・振り返り
実際のLPでは、フォントサイズや余白が完全に揃っているわけではなく、「基準を持ちながらも視覚的に最適化している」ことを実感。
デザインデータを整理する中でグルーピングの重要性にも気づき、レイヤー構成を意識的に整理することで作業効率が向上しました。
見本を忠実に再現することにこだわり、不明点は都度リサーチしながら丁寧に仕上げたことで、特に余白やタイポの細部を整える過程で、実装を意識した再現力が身につきました。トレース自体は半日ほど時間がかかりましたが、構成の意図やデザインルールを分析しながら作業を進めることで、自分の中に「デザインを見る目」を育てる課題になりました。