【課題】WEBページトレース&分析｜2025.6

＜制作物＞

①Webページのトレース（PCのみ）

②スタイルガイド

配色でサイト全体のイメージが変わる。第一印象に関わるので重要なポイント。

余白は背景色での区切りがあるかないかで若干余白を調節している。

③PCとスマホでレイアウトが異なる箇所の分析

＜トレースしたサイトの「ターゲット・目的」の分析＞

（１）ターゲット

・「即戦力」の人材が欲しい　企業の採用担当者

・IT、クリエイティブ系の人材が欲しい　企業の採用担当者

・人材不足で採用のミスマッチを出来るだけ避けたい　企業の採用担当者

（２）目的

・現役シーメイトと、企業をマッチングして採用に繋げる

・企業の採用担当者に、「即戦力」の人材が雇用できる、とサービスを信頼してもらう

・“人材のマッチング”から”初期安定稼働までのサポート”まである事を訴求し、他社サービスとの違いをアピール

・実際の制作物等も載せることで、求めている人材のイメージと合っているか問いあわせる前からイメージしやすくする

＜工夫した点＞

• 今後のLP制作の基礎として、課題の意図をきちんと汲み取って制作に取り組んだ。
• スタイルガイドやPC/スマホの比較分析においても、ただ数値の書き出しやキャプチャーの比較をするのではなく、“意図”があってこのデザインになっている、というのを意識して分析したので、自分でWEBページを作るにあたってもベースになる知識を習得できた。
• 特にPC/スマホの比較分析については、「レスポンシブ対応」への理解を深めるために疑問点は調べてまとめたので、より深く分析・学習できた。

＜学んだこと＞

• サイトの制作にあたって、「配色・文字・余白」のスタイルガイドを作っておくことで、複数人の作業でもトンマナの統一ができる。また、一人で作業するとしても最初にデザインコンセプトをまとめておくことで、サイトの目的にあったデザインになっているかの指標になることを学んだ。
• 検証ツールを使ったサイトの内容（HTNLやCSS）の分析をしたことで、WEBデザインやコーディングのイメージがよりしやすくなった。

• レスポンシブ対応を前提とした、サイト制作の知識がついた。