【実践課題】LP トレース分析

＊制作データ・情報

【制作期間】２週間

分析/トレース/UI考察/スタイルガイド作成

【使用ツール】

Illustrator:デザイン制作、スタイルガイド他

Chrome DevTools:カラーコード、セクション等分析

制作目的：LP構造・余白設計・配色ルールの理解

デバイス：PC/SP

＊ターゲット・目的

【ターゲット】

人材不足や業務負荷に課題を抱える企業担当者

【サイトの目的】

企業が抱える人的課題に対して、SHE WORKS人材サービスの価値を伝え、問い合わせや資料請求につなげること。

＊分析内容

【COLOR】

• ベースカラーはホワイト〜淡色グレーで統一されている
• メインカラーはブルー系で信頼感・知的さを演出
• アクセントカラーにパステルカラーを使用し、多様性や柔らかさを表現
•  グレースケールでは #232847 をベースに透明度違いを使用していた

【TYPOGRAPHY】

• 日本語：Noto Sans JP 
• 英字：Brandon Grotesque

気づき

• 日本語と英数字でフォントを使い分けている
• 強調部分は太字でメリハリを作っている
• 8px / 4px ベースでサイズ設計されていた
• フォントサイズは視覚バランスを優先して微調整されていた

【SPACING】

• セクション余白が広めに設計されており、情報を整理して見せている
• 同カテゴリ要素は一定余白で統一されている
•  SPでは縦スクロールを意識した余白設計になっていた

＊工夫したこと

• サイトに使用されているカラーに近い配色でスタイルガイドを制作し、世界観の統一感を意識した
• 比較注釈では、サイト配色と被らない色を使用し視認性を向上させた
• PC/SPの差分が分かりやすいよう、比較箇所を近づけて配置した
• コメントは簡潔にまとめ、分析ポイントが一目で伝わるよう工夫した

＊学んだこと

検証ツールを使用しながら分析することで、配色・余白・フォントサイズには一定のルールが存在することを学んだ。また、不透明度を活用したカラー設計や、視線誘導を意識した余白設計など、実務でも活用できるUI設計の考え方を理解することができた。