目次
①制作意図
②分析（情報設計の読み取り）
③分析（色/タイポグラフィ/余白）
④苦労した点＆感想
①制作意図
- 実在のWebページをトレースすることで情報設計＆デザイン性を学ぶ
（↑一部画像を抜粋。引用元：https://sheworks.shelikes.jp/）
②分析（情報設計の読み取り）
ターゲット：人材（クリエイティブ職種・事務職）を求めている会社・企業
目 的 ：人材の確保にマッチした最適人材の紹介（SHE人材の活躍）、認知
ユーザーストーリー（詳細は画像下）
（ ↑トレースしたものに分析情報を記載 ）
□ユーザーストーリー（閲覧者の引き付け～利用（問い合わせ）に至るまで）
引き付け：トップ画面
『我が社に即戦力がほしいなぁ…。むむ！即戦力人材マッチングサービスだと！？』
⇒同調、さらなる引き付け：お悩みのケースを掲示
『そうそう！こんな風に我が社も人材が足りないんだ』
⇒利用イメージの想起：ご利用イメージ、対応可能な業務の紹介
『こんな風に利用できるのか。
お試し期間があるのもありがたいし、色々が業務対応が可能なんだな。』
⇒もう一押し！：実例・制作物などの紹介
『あの企業さんも利用している！実際の制作物が見られるのはありがたいな。』
⇒お問い合わせ
『おおまかな内容はわかったから、詳しいことを聞いてみよう！』
ーユーザーストーリーに沿った情報設計をすることで、目的（人材の確保にマッチした最適人材の紹介（SHE人材の活躍）、認知）を達成できる仕組みを構築しているー
③分析（色/タイポグラフィ/余白）
（↓トレースするにあたって各要素を抽出。上記②の添付画像も併せて参照） ーページ全体のまとまりを良くするポイントー
・背景を白色系と水色系に統一。
・文字色＆問い合わせフォームの背景色を同一にする。
・背景色をセクションごとにグレイ・白・水色に切り替えている。
結果、立体感のあるページとなり、のっぺりせず見易くなっている。
・余白の大きさに規則性があるため、窮屈さや間延び感はない。
ー要素（文字、効果など）によるポイントー
・カラー数は２０色以上。（ほとんどはアクセントカラー）
・フォントの種類はさほど多くない。
ウェイトの違いでまとまりがありつつもバリエーションが豊かになっている。
・文字を紺色にすることで、硬くなりすぎない印象になっている。
・文章の一部を別のフォントや色にすることで、文章に立体感が出ている。
結果、大切な部分に、目が惹きつけられる仕様になっている。
・白色背景の上に置く要素は、若干シャドウをかけることで視認性を確保している。
・文章の一部を別のフォントにすることで、文章に立体感が出ている。
・さらに文章の一部の色を替えることで、目が惹きつけられる仕様になっている。
・文章の一部を別のフォントにすることで、文章に立体感が出ている。
・さらに文章の一部の色を替えることで、目が惹きつけられる仕様になっている。
④苦労した点＆感想
ー苦労した点ー
・シンプルに（デザインに忠実に！）トレースすることが大変でした。
・開発者（デベロッパー）ツールを初めて使ったので慣れずに苦労しました。
サイトの埋め込み画像を簡単に抽出できたことが、私的に衝撃でした。
ー感想ー
・大変でしたが"楽しかった"というのが実際です。
とくに制作者の意図を分析、理解する工程がとてもワクワクしました。
この課題に取り組んだおかげで、何気なく目についた広告やHPもその意図につい
て考えるようになりました。
（ ↑トレースしたものに分析情報を記載 ）
ーページ全体のまとまりを良くするポイントー