LPページトレース

| 実施範囲

・LPトレース

・スタイルガイド作成

・レスポンシブデザインの分析

| 制作物

■LPトレース

OpenStreet 株式会社が提供する「HELLO SCOOTER」のLPをトレースしました。

実際のページはこちら

■スタイルガイド

Chromeの検証ツールを用いて、配色、フォント、余白の分析を行いました。

■レスポンシブデザインの分析

PCとSPを比較し、レスポンシブデザインの分析を行いました。

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

・色数が多い場合でも、隣接する色相を使用することで、統一感が生まれる。

・見出しのフォントサイズは50px以上、本文は10px後半を設定するのが適切である。

・余白についてはあまり規則性がなかった。ある程度規則性を持たせつつも、目視で調整することもあるということが分かった。

・SPでのレイアウトについて、PCのレイアウトをそのまま縦に並べると、スクロール量が多くなり、見にくくなってしまう。カルーセルなどを用い、縦スクロールの量を減らす工夫も必要。