LPトレース

◇トレースしたLP

JALさんの実施する「次世代育成プログラム空育®」のLPをトレースしました。

◇スタイルガイド

◇PCとSPの比較分析

◇工夫したところ

1．スタイルガイド

LP全体の基礎になってくる部分なので細い部分まで抽出しました。また、スタイルガイド自体のアクセントカラーもLPのアクセントカラーと一緒にすることで統一感を出しました。

2．カーニング

大見出しや小見出し、本文など元のLPとズレのないように一文字ずつカーニングを意識して制作しました。

3．揃える

LP制作そのもの以外の「スタイルガイド」や「PCとSPの比較分析」のまとめもデザインの基礎である揃えるということを意識し、見ている人が見やすいように工夫しました。

◇学んだところ

1．規則性

フォントや余白などには規則性があり、サイトに訪れた人が見やすいように工夫されている。また、大きなセクション、小さなセクションで余白の大きさを変えることで自然とグループ化が計れる。

2．誘導性

アクセントカラーでボタンを作ることで目にと止まりやすく、次の行動に誘導する工夫がされている。

3．Googleディベロッパーツール

初めてディベロパーツールを使用し、最初は使い方が分からなかったが使っていくうちに見方がわかり身についた。また、PCで見た時の表示とSPで見た時の表示の両方が見られるので便利でした。LPのHTMLやCSSなど細かいところまで知ることが出来るのでこれからも使っていきたい。

4．デバイスでの表示の違い

今まであまり意識したことがなかったが、それぞれのデバイスによって表示の仕方が全然違った。それぞれのデバイスにあった余白やフォントの大きさ、メニューの表示の仕方で表示されている。使っているデバイスによってどのように行動し、誘導するのか考える必要があると感じた。

5．色の重要性

LPのアクセントカラーがJALさんのロゴの色と同じで統一感がある。沢山の色を使うのではなく同系色で少しずつ色を変えると、視認性を与えつつまとまりがあるように見える。ベースカラー/メインカラー/アクセントカラーに関しては色がそこまでごちゃごちゃしていないので、にぎやかというよりはスッキリ、信頼という印象になる