【課題】LP トレース

株式会社エイチーム（Ateam）さんのWebサイトトレースに取り組みました。
トレース元のサイトはこちら 　

⚫︎制作物

⚫︎スタイルガイド

⚫︎PCとSPの違いについて観察

⚫︎工夫したところ

《トレース》
・ブラウザ上で検証ツールを使いながらフォントの大きさや種類を確認し、忠実にトレー　
　スしました。
・写真と文字の重なり方をよく観察し見本通りの配置となるようトレースしました。

《スタイルガイド》
・どのようなカラー、フォント、余白が使用されているかをまとめるだけではなく
　それによってどういう気づきがあったのか併せて記載しました。
・スタイルガイド自体をトレースしたサイトのトンマナに合わせ、余白を意識し整列さ
　せることで見やすい資料となるようにしました。

《PCとSPの違いについて観察》
・異なる箇所を同じ色ごとで分け、どこを比較しているのかすぐに分かるよう意識
　しました。
・「サイトマップ」についてタップした先ではどう表示されるのか、実際に自身で
　検証をした内容を記載しました。

⚫︎学んだこと

・同じように見えるフォントでも、検証すると日本語と英語で異なるフォントを使用して
　いることが分かりました。
・グレーの背景を使うことで白枠が目立つようになることもありますが、PCには適用し
　スマホには適用しないなど、加える作業だけではなく引くことも大切であるということ
　を学びました。