WEBサイトトレース（人材マッチングサービス）

Sayuri Iwata
WEBマーケター、デザイナー

OVERVIEW

SHElikes MULTI CREATOR COURSE designerでSHE worksという実在するWEBサイトのトレース課題に取り組みました。（2024.03）

トレース元はこちら https://sheworks.shelikes.jp/

課題を通して学んだこと

1. デザインの統一感

サイト全体の統一感を生む背景にカラーとタイポグラフィが大きく関係していると学びました。メインカラーは2色・フォントも2種類のみと想像以上にシンプルな作りで驚きました。メインカラーの透明度を変えたり、ロゴのフォントとサイトのフォントを合わせることで統一感が生まれているという構造が分かり、勉強になりました。

↓トレース内容

2. スタイルガイドの作成方法

HTMLやCSSに記載のある部分はなるべくそのまま情報を活用できるようにデベロッパーツールを用いてコードの分析まで行いました。

3. PCとSPの違い分析

PCとSPの違いを分析することでデバイス毎の特徴を学ぶことができました。