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

使用ツール：Photoshop

制作期間：2週間

［ 目次 ］

1.  制作物

2. 分析したスタイルシート

3. PCとSPの比較

4. 工夫した点

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

1.  制作物

杜のいちご株式会社様のWEBサイトをトレースしました。

2. 分析したスタイルシート

3. PCとSPの比較

4. 工夫した点

⑴ トレース

デベロッパーツールを上から下まで展開して、色、フォント、スペーシングを注意深く調べました。また、配置が規則的なもの、不規則的なものを捉え、それぞれがサイト内でどのように機能しているのか考えながらトレースを行いました。

⑵ スタイルシート

ガイド線を引き、余白を揃えることで見やすくするように心掛けました。サイトに合わせた色合いで作成し、制作物に統一感を持たせるように意識しました。

⑶ PCとSPの比較

PC版とSP版で項目ごとに見出しを付けて書き分け、読みやすくなるように心掛けました。該当部分をカラフルな色で囲い、どの部分を説明しているのか分かるよう工夫しました。

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

サイトの世界観を表現するために、色、フォント、スペーシングなどの要素を綿密に考える必要があると感じました。一見、不規則に配置された要素も、サイト全体のバランスを見てどの位置に配置すればより動きを感じられるか、メリハリを付けられるかなど計算されたものであると気付きました。特に余白の必要性について、ブランドの雰囲気にもよりますが、ゆったりと取ったほうがユーザーは読みやすいことを学びました。