LPトレース

目次

1.トレースしたLP

2.デザインガイドライン

3.スマホとの比較分析まとめ

4.工夫したポイント

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

１．トレースしたLP 

JALさんが実施する次世代育成プログラム空育®のLPをトレースしました。（実際のサイトはこちらです）

２．デザインガイドライン

３．スマホとの比較分析まとめ

４．工夫したポイント

①キービジュアルの背景

キービジュアルの背景はグラデーションを用いて作成し、タイトルの「空育ってなに？」　の陰影は、ドロップシャドウを用いて作成しました。

②pixel単位の微調整

全体的にテキストが多くフォントサイズも様々であったため、見本との文字間にずれがないように一文字単位でカーニングを行い、細かく調整しました。

③開発ツールやデザイン原則を活用したガイドライン制作

スタイルガイドを作成する際、LPで使用されているカラーを取り入れることで、デザイ　ンの基本原則を意識し、統一感のあるデザインでまとめました。また、Chromeの開発ツールを使用して、htmlやCSSの一行一行をしっかり見て分析しました。

④スマホとのデザインの違いの理由を考えながら分析

PCとスマホのデザインの違いを分析する際に、スマホでのLPは実際にスマホの画面をみながら、PCとの違いを分析しました。PCでは横並びであったものが、スマホでは縦並びになっていたり、デバイスに応じたデザインの違いを、何故このデザインにしたのか理由を考えながら分析を行いました。 

５．制作を通して学んだこと

①色について

・ブランドカラーの赤と白をアクセントカラーとして使用し、シンプルで洗練されたデザ　インでまとめている。 JALらしさを感じられるデザイン。

・多くのグレースケール活用することで奥行きを意識し、薄い赤やトップ画像と写真の色合　いで柔らかく優しい印象になるように工夫している。

②文字について

・大きく2種類のフォントでまとめることで、統一感のある印象を演出している。

・タイトルなどの伝えたい情報によってテキストのフォントサイズを統一し、繰り返し使用することで、内容のまとまりが意識され、可読性や認識性を高めている。

・文字幅を約物半角にすることで、文字のバランスを細かく調整している。

③余白について

・基本的に５の倍数で統一されている。また、伝えたい情報によって余白の規則性があり、ユーザーが情報のまとまりを認識しやすいようなバランスが調整されている。

④デザインについて

・文字や図形に丸みをもたせたりすることで、地味な印象にはならず、優しい雰囲気や可愛らしさを感じることのできる工夫が施されている。また、HPとSPでレイアウトを変えることで離脱率を低くすることが意識されたデザインとなっている。