LPトレース(課題)

OVERVIEW

課題でWebページのトレースと分析に取り組みました。Webサイトにおける読みやすい文字のサイズや、レイアウトの組み方、色の使い方を学びました。

YEAR 2022 - 2022

JALさんの空育®のLPをトレースしました。 

◆トレースしたLP◆


◆デザインガイドライン◆


◆スマホとの比較分析◆


◆工夫したところ◆

1.デベロッパーツールに慣れる

デザインガイドラインを制作するにあたってフォントや文字の大きさをデベロッパーツールで調べましたが、本文のサイズや見出しのサイズはどのくらいなのか?機能ごとの文字のサイズ感覚を掴むことを意識しながら取り組みました。


2.正確なトレース

時間はかかってしまいましたが、見本と同じになるように"正確さ"を意識してトレースしました。パーツを配置するときは不透明度を下げ、見本の位置が分かるようにしました。見本との少しの差にも敏感になり、細かなところに気が付く力がついたと思います。


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

1.一定のルールに従って作成されているということ

セクションごとの余白や、見出し、サブタイトルの間の余白など、一定の規則性があることを学びました。規則性があるからこそ、Webページ全体が綺麗にまとまっているのだと感じました。


2.デザインが与える印象について

グレースケールを細かく使い分けていたり、写真を多く使っていたり、企業ロゴの色である赤をアクセントカラーとして使用したり、長方形の角を丸くしてやわらかい印象にしていることでシンプルなのにどこか優しく、かわいらしいサイトのデザインになっているのだと思いました。