LP トレース

所要期間：約1週間

トレースしたLP

日本航空株式会社が提供する「空育®ってなに？」のLPをトレースしました。

スタイルガイド

PCとスマホでレイアウトが異なる箇所の分析

工夫したこと

■細かな位置調整

フォントのサイズ、写真や図形の位置などピクセル単位で調整を行いました。メインビジュアルのグラデーションやヘッダーのドロップシャドウなども細かく調整し、できるだけ見本に近づく様にトレースを行いました。

■フォントサイズや余白の感覚を知る

サイトで使用されているタイトルや本文のフォントサイズ、セクション間や文章間の余白がどのくらい取られているのかを分析し、なぜこのサイトが綺麗に見えるのかを考えながら取り組みました。

制作を通して学んだこと

■余白と整列

余白が広く、綺麗に整列されていることで見やすいサイトになっているのだと思いました。

5px、8pxの倍数で余白が設定されていることに気づきました。同じ規則で余白が設定されていること違和感を与えることなく見てもらえると思いました。

■シンプルかつ楽しい

色数が少なく使用しているフォントも少ないが写真が多く使われているため単調にならず楽しく見ることができると思いました。

■温かみ

アクセントカラーの赤、フォントのゴシック体、円や角丸の長方形を使用していることでシンプルなのに優しく暖かな印象を与えることができるのだと思いました。

■レスポンシブ対応

スマホの表示はPCと違い横幅がないためレイアウトを変更し1画面で見える範囲がPCと同じ状態になるように変更されており、スマホ画面になっても違和感がないようにデザインされていると気づきました。