【習作】WEBサイトトレース

目次

1．制作情報
2．Webサイトトレース画像
3．スタイルガイド
4．PC版とSP版のレイアウト分析
5．トレースしたサイトの考察（ターゲット、目的）
6．学んだこと
7．著作権・クレジット

1．制作情報

制作時間 │トレース（10時間）、スタイルガイド（4時間）、レイアウト分析（2時間）
使用ツール │ Photoshop

2．Webサイトトレース画像

3．スタイルガイド

4．PC版とSP版のレイアウト分析

5．トレースしたサイトの考察

ターゲット
即戦力となるクリエイティブ人材を探している企業（特にIT関連のスキルを持っているかつトレンドに敏感な人材を探している）

目的
ターゲットにSHE WORKSの魅力を理解してもらい、お問い合わせフォームを通じて接点を持つこと。

ユーザーストーリー

6．学んだこと

・Webサイトにおいて適切な文字サイズ・余白・配色
Webサイトにおける適切な文字サイズ・余白・配色について理解することで、デザインカンプからWebサイトを作成する際の迷いが減り、よりスムーズに作業を進めることができると感じました。Web上での最適なサイズ感に慣れるため、日常的にWebサイトの分析を行い感覚を身につけていきたいです。

・PCサイズをSPサイズに切り替えた際の適切なレイアウト
SP版では全体的に縦のレイアウトが意識されていることがわかりました。余白やフォントサイズも調整されており、レスポンシブ対応の際は細かい調整が必要だということを学びました。

7．著作権・クレジット

サムネイルに使用しているモックアップの一部のモックアップは MockUPhone で作成しました。