【実践課題】Webサイトトレース_SHEworks
OVERVIEW
SHElikes PRO Designerの実践課題として実施。対象のWebサイトをトレースしたうえで、スタイルガイドの制作、パソコンとスマートフォンで異なる箇所を分析した。トレースの際は検証ツールを使いCSSの記述からビジュアルデザイン要素を忠実に抽出するよう試みた。
- 制作時間：6日間
- 制作範囲：Webサイトトレース、スタイルガイド制作
- 制作ツール：Photoshop
制作物
- Webサイトトレース
- スタイルガイド
- パソコン（PC）とスマートフォン（SP）で異なる箇所の分析
制作過程
【STEP1】Webサイトトレース
見本となるWebサイト（SHE WORKS for BIZ（シーワークス）｜https://sheworks.shelikes.jp/）について、検証ツールを使用してフォントや文字サイズ、色調、影の大きさ等を調査しながら遜色がないようトレースをした。なお、Webサ取り組んだる読みやすい文字のサイズやレイアウトの組み方、色の使い方はどのようなものかを観察しながら取り組んだ。
【STEP2】スタイルガイド制作
まずサイト全体に対し、使用されている文字のサイズ、余白の大きさを調査した。その後、頻繁に使用されている代表値を選定しスタイルシートに集約した。
【STEP3】パソコン（PC）とスマートフォン（SP）で異なる箇所の分析
見本となるWebサイト（SHE WORKS for BIZ）について、PCとSPそれぞれの画面を横に並べてデバイスサイズによってどのようにレイアウトを組み替えているかを観察した。
見本となるWebサイト以外にも、参考Webサイト2点（芦谷書店、カフェラウンジ大宮）選定し、分析することで理解を深めた。
制作を通しての学び
- Webサイト全体をトレースしたことで、Webサイトではフォントや余白の大きさに一定のルール従い設計されていることを学んだ。
- Webサイトは制作側の意図を明確に伝えるだけでなく、ユーザーがヘッダーからフッターまで離脱しない構成にすることすることも重要であると感じた。メリハリや可読性を意識・リズムによる心地よさ、といった要素も盛り込みたいと感じた。
- デバイスに応じたビジュアルデザインを設計することも重要であると感じた。表示幅が狭い場合はタップしやすいボタンサイズに変更する等、UIの視点も取り入れて設計することが必要であることを学んだ。