【課題】WEBトレース（人材マッチングサービス）

＊トレース及びデザイン考察について＊

１．トレース

２．スタイルガイド

• ベースはロゴにも使用されている紺と青、その2色の不透明度違いの色で構成されているため、統一感がある。
• 全体的に彩度があまり高くない色（トーンマップのLight辺りと考察）を使用しているため、アクセントカラーがカラフルに見えるが、落ち着いた感じを受ける。
• 様々な色を使用した背景やアイコンが、十人十色の人材をマッチングするSHE WORKSの魅力を伝えている。
• 重要な文章の区別化の方法の一つとして、不透明度で文字色の濃淡をつけているため、ジャンプ率にしっかり差が出ている。

• 「WORK」の部分がセクションによって、フォントが違う。よりブランドとして伝えたい内容が視覚的に伝わるように、ロゴと同じフォントを使用していると推察。
• Brandon grotesqueとNoto sans JPは同じフォントサイズを設定しても、前者の方が小さく見えるため、Webページ作成時はフォントごとの大きさの設定にも注意が必要。

• 基本的にはコンテンツの両側に208px、上側は140px（±4px）、下側は150pxという余白が統一して設定されている。
• セクションの項目のさらに外側の左端68pxが固定となっており、右端は指定がなかった。これは、PCの画面サイズに対応して、右側を変化させるためと考察。
• 8の倍数も多いが、基本的に偶数の整数値での設定が大半をしめている（均等を考えると、その方が作りやすいと考えられる）

３．PC版・SP版の違いについて（レスポンシブルデザインについて）

＊目的、ターゲットの分析＊

・ターゲット
事業を行うにあたって、新たな人材の採用を検討している採用担当者
特に、IT・Web関連の業種で、女性の採用も検討している企業

・目的
SHE WORKSのサービス内容を知ってもらい、興味を持ってもらう。
人材の派遣につなげるために、相手側へアプローチするための企業情報を得る。

＊頑張ったポイント＊

１．サイトのトレースに関して
余白や色などはもちろんですが、コードに関しても、「どうしてこのようにしたか？」　　
という事を分析し、その結果、再現度高いトレースができました。

２．スタイルガイドとPC版・SP版の違いのまとめに関して

自分の考察をいかに分かりやすく言語化するように努めました。
PC版・SP版の違いに関しては該当箇所の比較ができるように数字と色を使用し、より内容が伝わりやすいように工夫を行いました。

＊課題を通して学んだこと＊

• 実際のページには様々なコードが使用されており、また色の指定の仕方に関しても、一つではないため、状況によって変わる事が分かりました。
• デバイスの種類で見せ方が変わったとしても、同じユーザーストーリーを描けるようにするためには、様々な見せ方の工夫がある事を改めて学びました。
  また、同じデバイスでも画面サイズが違う場合に、どのサイズでも同じように見せる画像のや文章の配置が重要であることを、検証ツールを使用した際に学びました。
• LP制作の段階から、フォントや余白のサイズをある程度統一できれば、実装を簡易化できるため、そのためのスタイルガイドの作成は重要と学びました。