LPトレース

▼トレースしたLP

今回はOpenStreet社が提供する「HELLO SCOOTER」のLPをトレースしました。（現在はデザインが変更されています）

▼スタイルガイド

▼スマホとのレイアウトの違いについて

▼工夫したこと

１．正確にトレースするための微調整

写真やセクションの切り替わる部分が斜めに切り取られたデザイン性のあるページでしたが、見本の表示と非表示を何度も繰り返して、細かい部分まで忠実に再現できるよう時間をかけて丁寧にトレースしました。余白や文字の大きさなど細かい部分まで調整したため、お手本とほとんど差がないくらい忠実にトレースできたと思います。

２．デベロッパーツールの活用

デベロッパーツールを活用して行ごとに適用されているHtmlとCSSを細かく見てトレースを行いました。また、自分自身の感覚を身につけるためにもデベロッパーツールで見ていった文字のサイズや余白をスタイルガイドに忠実に反映できるようにまとめました。

３．デザインの四原則を意識したまとめの作成

スタイルガイドとまとめを作成する際に、デザインの四原則を意識して、同じ要素の情報がぱっと見でわかるように作成しました。

▼制作を通して学んだこと

１．配色について

今回は沢山の色が使用されているWEBページのトレースを行いましたが、系統が似た色を使っていることと、ルールを持って色を用いることで、まとまった印象のページになると思いました。また、ロゴなどに用いられている企業のカラーを用いることで、その企業らしさと統一感のあるデザインになると思いました。

２．フォントサイズや余白に一定のルールを持たせることについて

初めは慣れなかったChromeの開発ツールを使って細かく分析を行ったことで、1つのページに繰り返し使われている余白やフォントサイズを認識することができました。デザインの基本原則を用いて、余白やフォントサイズに一定のルールを持たせることで、綺麗にまとまっていて、ぱっと見で情報がわかりやすいデザインを作成できると思いました。

３．使用するフォントによる印象の違いについて

フォントもページの印象を左右すると学んだ。今回トレースしたページでは、本文には主に丸みのあるフォントが用いられ、可愛らしくポップな印象になっている。一方で、メインビジュアル下のキャッチコピーには明朝体が用いられ、爽やかな風に吹かれているような印象を持たせている。そのため、コンセプトとイメージに合わせてフォント選びも重要だと思った。