LPトレース

■課題概要

Webページのトレースと分析をし、Webサイトにおける読みやすい文字のサイズや、レイアウトの組み方、色の使い方などの感覚を養う。

スタイルガイドの作成もして、一定のルールに則ってデザインを作ることについて学ぶ。

■トレースしたLP

■スタイルガイド

■PCとスマホでデザインが異なる箇所の分析

■工夫したPOINT

デベロッパーツールを使い慣れていなかったので、フォントや余白の検証に時間がかかってしまいましたが、その分隅々までサイトを観察することができました。

トレースは、見本と出来るだけズレがないよう、カーニングを丁寧に行ったのと、図形や写真も見本と同じサイズ感になるように調整しました。

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

トレースだけでなく、スタイルガイドの作成やスマホとPCでのレイアウトの違いまで観察することで、より細かく色々な視点でWebサイトを見ることができました。

今回使用したサイトではグレースケールが多く使われており、使用されているメインカラーやアクセントカラーの色数は少ないけど見やすく纏まりがあることが分かりました。ブランドカラーをアクセントカラーに用いることで、本当に目立たせたい箇所を絞り、サイト全体に統一感が出せると知りました。また、スマホとPCの違いでは、画面の横幅に合わせてデザインを変えるのはもちろんですが、操作するのがマウスなのか指なのか、というところまで考えてデザインやボタンのサイズ感が決められている事を学びました。

■課題の感想

スタイルガイドを作ることで、ただトレースするだけでは気付かない余白などにも目を向けることができました。

スマホとPCでのレイアウトの違いについては、見てみるとなんとなく違いや理由については分かるけど、それを言語化して見やすいようにまとめる作業が難しかったです。

今回の課題を通して、Webサイトを見る際の視点が増えたように感じるので、今後も気になるサイトはデベロッパーツールを活用してじっくり観察してみたいと思いました。