【SHElikes マルチクリエイターコース課題】LPトレース

JALさんが実施する次世代育成プログラム空育®のLPをトレースしました。(https://www.jal.com/ja/csr/soraiku/concept/)

LPで使用しているフォント、色、余白(paddingやmargin)を調べ、まとめました。

PCデザインとSPデザインを比較し、分析しました。

●今回の課題を通して学んだこと

約物にはYakuhanJP、それ以外にはNoto Sansが使われていました。約物を半角にすることで、句読点の後の余白が空きすぎて気になることがなくなるので細かいところまで考慮されていると感じました。

文字のカーニングや行間を広くすることでWebサイト全体が柔らかい雰囲気になるとわかりました。また、写真を横幅いっぱいに配置しその下に文章を配置することでみていて飽きないWebサイトになっていると学びました。

●頑張ったポイント

文字のカーニングを正確に合わせることです。letter-spacingの値に1000をかけた値を設定しても綺麗に揃わなかったところがあったので細かく調整しました。

グレースケールは同じ色のように見えても実際には微妙に違うことがあったので、取りこぼしがないように抽出しました。FVのグラデーションは自分で作成したのですが、見本の空に近く再現することができたと思います。

●所感

実際にフォント、文字間、行間、色、全体の構造を分析することで、シンプルな美しさがあるサイトがどのようにして作られているのかを知ることができました。

ベースカラー、メインカラー、アクセントカラーの定義が自分の中で曖昧だったのですが、色を使っている面積の割合で考えれば良いという考えに落ち着きました。

写真は横幅いっぱいに配置して、文章は中心に小さく配置することでメリハリがあるWebサイトになると学べたので自分の制作物にも取り入れようと思います。