【課題】LPトレース

⚪︎ トレースしたLP ⚪︎

JALさんが実施している『空育』のLPをトレースしました。

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

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

⚪︎ 工夫したところ ⚪︎

1.忠実な再現かつツールの利用

フォトショップ上のみで細かくトレースするより、コードの復習も兼ねて検証ツールを利用しフォントサイズ等を参考にしながらトレースをしました。

配色の部分ではスポイトを使用すると若干の差が出てしまったため、css上の色番号を探し当てはめることに少し時間がかかりました。

2.分析方法

webとスマホのレイアウトの違いについて分析しながら、UIデザインがないかどうか探してみました。どのように細かな工夫をすればいいUIデザインを考慮しながら全体のデザインに落とし込めるのかを細かく分析し、自分の中の無意識な動作や考えを言語化しました。

3.可読性の高さ

デザインガイドライン、比較分析共に誰がみても全体の流れ、各項目について見やすいように余白と整列を意識しました。特に比較分析では、文章ではなくパッと見るだけでどこに違いや共通点があるのかわかりやすいよう、概略としてまとめました。

⚪︎ 制作から学んだところ ⚪︎

1.webページ1つで多くの情報が入っている

印象を操作するフォント選択・文字間・配色・余白がとても細かくきれいに振り分けられており、制作の際のワイヤーフレーム・カンプを作っておく大切さを改めて学びました。

2.配色の印象付け

グレースケールを細かく使い分け、かつグレーの中でも少し温かみを感じるものを使用することにより優しい印象が着くと思いました。

また、ファーストビューの背景である空はライトトーンの明るい彩度の低いトーンが使用されているためそこでも優しさを感じる印象を持ってもらえるのだと感じました。

3.無意識を言語化していく重要さ

自分が無意識に「いいな」と思ったものやその印象などには理由があり、それらを言語化していくことで、今後制作の際検索ワードや説明の際の語彙力も鍛えることができると感じました。

言語化するだけでなく自然とキーワードや、微妙な色の違いに気づけるようになりとても勉強になりました。