【課題】LPトレース

【対応範囲】LPトレース・スタイルガイド作成・PCとSPのレイアウトの違い分析　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【制作期間】1週間　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　【制作時期】2025年10月
【使用ツール】Photoshop　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

目次

• トレースしたLP
• スタイルガイド
• PCとSPのレイアウトの違い分析
• 要件分析
• 工夫したポイント
• 制作を通して学んだこと

▶︎トレースしたLP

▶︎スタイルガイド

▶︎PCとSPのレイアウトの違い分析

▶︎要件分析

・ターゲット　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　業務量が逼迫していたり人手不足で悩んでいる／専門スキルを持つ人材を探しているが、採用に難航している企業担当者

・目的　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　「SHE WORKS for Biz」という人材マッチングサービスがあることを認知してもらい、顧客からのお問い合わせ・サービス利用に繋げること。

・ユーザーストーリー

▶︎工夫したポイント

・どんな工夫がされているのか細かく学ぶため、できるだけ正確に観察・トレースするよう心掛け、「なぜこの余白・サイズ・配置なのか」を考えながら再現しました。

・また、画像要素はデベロッパーツールでサイズを確認し、Photoshop上でpx単位の調整を行いました。

▶︎制作を通して学んだこと

・フォントサイズや余白は、規則的に揃えられているだけでなく、セクションの役割や情報の重要度に応じて、1px単位で微調整されていることを学びました。
今後は数値だけに頼らず、最終的な見え方を確認しながら調整する意識を持ちたいと感じています。

・一見シンプルに見えるLPでも、実際には多くの要素が画像として使用されており、レイアウトの自由度やデバイスごとの調整を考慮した設計がされていることに気付きました。

・PCとSPで情報の見せ方が大きく異なり、PCでは常時表示されているCTAが、SPでは配置や表示タイミングを変えることで、「押しやすさ」「見つけやすさ」を優先している点が印象的でした。
今後はレスポンシブ対応を前提に、デバイスごとの体験を意識したデザインを心掛けたいです。