制作期間：2週間
使用ツール：Photoshop
スタイルガイド
デベロッパーツールを使いながらWebサイト内で使用されている色 / タイポグラフィ(フォントの種類・サイズ) / 余白についてまとめたガイドラインを作成した。
トレース
PCとスマホのレイアウトで異なる箇所の分析
PCサイズとスマホサイズのスクリーンショットを配置し、レイアウトにどのような変化が見られるのかを分析し、言語化した。
頑張ったポイント
- 分析においては、デベロッパーツールを活用の上、Webサイト内で使用されている色 / タイポグラフィ / 余白等を細かく考察して言語化し、デザインの意図の理解に努めた
- トレースにおいては、フォントサイズ、余白の設定、画像の配置に至るまで、分析をもとに、見本を忠実に再現することを意識し取り組んだ
制作を通して学んだこと
- トレースを幅1440pxのスクリーンショットをなぞるようにして行うことによって、文字と画像のサイズ、配置、余白等の設計を体感的に学び、Webデザインについて理解を深めることができた
- 初めて行なったデベロッパーツールの操作(色/フォントの種類/サイズ/余白の分析)とスタイルガイドの作成全般も学びとなった