LPトレース

✴︎ トレースしたLP ✴︎

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

✴︎ デザインガイドライン ✴︎

✴︎ スマホとの比較分析まとめ ✴︎

✴︎ 工夫したこと ✴︎

1. 文字や余白のサイズ感覚を掴むことを意識

見出しや本文の文字のサイズや行間、コンテンツとコンテンツの間の余白のサイズなどの感覚を掴むことを意識しながらトレースしました。

2. pixel単位の微調整

見本のページの表示非表示を繰り返し、ずれがないようにトレースをしました。小さな円はpixel単位で大きさの調整をし、写真は少し透明にして下敷きとズレが出ないように調整しました。

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

デザインガイドを制作する際、Chromeの開発ツールを使用して、htmlやCSSの一行一行をしっかり見て分析しました。まとめる際はデザイン原則である近接・整列・強弱・反復を意識しました。

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

PCとスマホのデザインの違いを分析する際に、実際にスマホでLPを見ながら分析をしました。「PCでは中央寄での文章がスマホでは左揃えになっている。スマホは横幅が小さいから文字量が多く感じるので、左揃えのほうが見やすいな。」といったように、PCのデザインと変えている理由は何故なのを考えながら分析しました。

✴︎ 制作を通して学んだこと ✴︎

1. 開発ツールの活用方法

最初は使い方がわからなかった開発ツールでしたが、活用方法を理解することができました。開発ツール上でCSSを書き換えると、実際にどう画面が変化するのかを見ることができるという便利な使い方も知ることができました。

2. 余白や文字の大きさの法則性

余白は8の倍数と5の倍数が使われていて、セクションの切り替え部分や、見出しと本文の間隔などで同じサイズの余白が使われていました。文字の大きさも同様に、各セクションのタイトルと本文の文字の大きさが同じでした。

文字や余白の大きさに法則性を持たせることで、全体的に違和感がない綺麗なデザインになることを学びました。また、実装する際もわかりやすいと思いました。

3. 色合いや形が与える印象

「空育」のサイトは初めてみた時に「柔らかく、かわいらしい」という印象を受けたが、実際に分析することでその理由がわかりました。

トップページに使用しているアニメーションの色合いや飛行機のロゴ（飛行機と鉛筆が組み合わさったロゴが可愛いらしく、かつ全体のコンセプトに合っている）、角を丸くしていること、薄いピンクを使っていること、グレースケールの色のバランス等の工夫より柔らかい印象になっており、子供や学生向きのやさしいデザインになっていることがわかりました。