【課題】LPトレース・分析

OVERVIEW

SHE PROデザイナーコース(旧SHElikes MULTI CREATOR COURSE)の課題にてWebページトレースを行いました。合わせてスタイルガイドの作成、PCとスマホ画面の分析も行いました。

YEAR 2025

1.webサイトトレース画像


2.制作情報

制作時間:2週間

使用ツール:Photoshop

3.スタイルガイド

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

5.工夫したところ

・見本通りに制作するために検証ツールを活用してピクセルや幅の調整を細かく行いました。

・スタイルガイドの作成は単に作成するのではなく、LPのトンマナに合わせてデザインの原則を意識して作成しました。

6.制作を通して学んだところ

見出しや、ボタンなどが調べていく上で統一されていることがわかりました。検証ツールを意識することで、CSSやレスポンジブの仕組みや作成の仕方を細かく学ことができました。また、Webデザインの細かい仕組みなども確認することができました。