【課題】Webページトレース&分析

課題内容

• WebページのデザインをPhotoshopでトレースする
• デザインを分析しスタイルガイドを作成する
• PCとSPのサイトのレイアウトの違いを分析し資料にまとめる

制作物

▼Webページトレース

▼スタイルガイド作成

▼PSとSPのレイアウトの違い分析資料の作成

▼頑張ったポイント

• CSSを見る作業に苦戦しましたが、ディベロッパーツールをよく確認しながら、余白サイズ、文字間、行間などの正確さにこだわってトレースをしました。
• スタイルガイドでは、Webサイトに使用されている色の種類が多かったため、なるべく細かく色を抽出しました。
• PCとSPの違い分析では、なぜこのような配置になっているのか、情報の優先度、相手に伝えたい内容などを汲み取って分析をしました。

▼課題を通して学んだこと

• Webページの作成では、フォントやオブジェクトのサイズ、色、余白全て意図して配置することでデザインに統一感が出たり、情報が読みやすくなるという効果に繋がるということを理解しました。
• フォントは2〜3種類、色も3種類程度に抑え、色に差を出したい時は、不透明度を調節することで統一感を出せることができることを学びました。