- 制作範囲 ： デザイントレース、スタイルガイド、レイアウト分析
- 制作時間 ： 約8時間（トレース）、約12時間（スタイルガイド、レイアウト分析）
- 制作時期 : 2025.10
- 使用ツール ：Photoshop
【トレースした制作物】
トレース元：https://sheworks.shelikes.jp/
【スタイルガイド】
【PCとスマホのレイアウト分析】
【要件分析】
▪️ターゲット 30〜40代のIT事業会社勤務の人事担当の女性
▪️目的 IT関連の経験豊富な人材を探している
▪️ユーザーストーリー
①クリエイティブを担う部署で1度に3名が退職するため、即戦力となるITに知見のある人材を探していたところ、「人材マッチングサービス」というものを知る。
②「人材紹介サービス デザイナー」と検索したら、「SHE WORKS for BIZ」 というサイトに出会う。
③スクロールしていくと、社内の問題点である悩みの事例があり共感した。解決の伴走をしてくれそうだと思った。利用に当たっての流れが4段階で紹介されていて、特徴や対応可能な一例も一覧になっている。
④求める人材像とマッチしていて、多くの企業で導入されているみたいだ。信頼性がある。活躍している人材の中には複数のスキルを持ち合わせている優秀な人材がいることがわかった。クオリティの高いものを作ってくれそうだ。
⑤まず、資料をダウンロードして問い合わせてみよう。
【工夫した点】
- デベロッパーツールを用いて、フォントサイズや余白、位置を確認しながら、トレースをおこなった。再現性の高いトレースになるように意識した。
- スタイルガイドや分析シートの作成では、実際のサイトで使用されているフォントに近いものを意識して選びました。日本語はNoto Sans JPが使われていたので游ゴシック体に、英数字はBrandon Grotesqueが使われていたのでSegoe UIを使用しました。
【今回の課題を通して学んだこと】
- フォントの大きさや太さの違いがたくさんあるページでもグルーピングやカーニング、行間に規則性あればバラツキを感じにくいページに仕上がることがわかりました。
- 見出しと本文の境を行間よりも少し広めに取ることで強弱がついて読みやすくなることを実感することが出来ました。