WEBサイトトレース

■目次

1.　トレースしたLP

2.　デザインガイドラインの作成

3.　PCとデザインの比較

4.　工夫した事

5.　制作を通じて学んだ事

1.　トレースしたLP

Open Street株式会社さんが運営する、スクーターシェアリングサービス「HELLO SCOOTER」のLPをIllustratorでトレースしました。（実際のサイトはこちらです。）

2.　デザインガイドライン

3.　PCとスマホのデザイン比較

4.　工夫したこと

4-1.　トレースでは文字感覚や画像サイズ・位置を正確に真似る

文字はカーニングを細かく行い、どれくらいの文字感覚であれば読みやすいかを意識しながらトレースを行いました。またトレースで画像を配置する際は、お手本のスクリーンショット画像を下に置き、トレース素材を透過させてズレがないように正確にトレースしました。

4-2.　Google Chromeの検証ツールを活用したデザインガイドラインの作成

実際のサイトを検証ツールで細かく分析しました。見た目だけではなく、HTMLとCSSの一行一行をしっかり見て、色・フォント・余白を調べました。特に余白は規則性を調べるために、セクションごとに細かく検証しました。文字色は、カラーだけでなくopacityも色に影響するため、CSSをよく分析するようにしました。ガイドラインをまとめる際は、デザインの原則である「近接・整列・強弱・反復」を意識して、カラーもサイトのイメージと合うように選びました。

4-3.　PCとスマホのレイアウトはなぜ異なるのか考えながら比較表を作成

比較的自由なレイアウトが組めるPCデザインと、PCに比べて画面サイズに制限があり自由度が低いスマホ画面の特徴を考えながら、両者の違いを分析しました。例えば、「スマホでは文字が左揃えになっているが、真ん中揃えにするよりも整列した印象があり、スクロールする際に読みやすい」「PCデザインはZ型に視線を動かせるが、スマホ画面は下に視線が動くため、画像は中央寄せにしている」などの気づきを得ながら分析をしました。

5.　制作を通じて学んだこと

5-1.　読みやすいフォントの種類やサイズについて

PCの本文はゴシック体の16pxが読みやすいことがわかりました。またタイトルになる英語フォントは70pxと大きく、逆に補足情報であるコピーライトは10pxなど、情報の優先順位が明確になっていることに気がつきました。文章を目立たせるときに色を使いがちになってしまっていたが、情報の優先位に合わせて文字フォントも使えるようになりたいです。

5-2.　まとまりのある配色

今回トレースしたサイトは多くの色を使っているように見えましたが、分析してみると、まとまりのある配色であることがわかりました。ピンクやブルー、ブラウンはグラデーションのように色が分かれており、それらを随所で使うことでカラフルで楽しげな印象でありつつも、まとまりのあるデザインに見えると思いました。

5-3.　カーニングの重要性

文字間隔を意識することで、可読性が上がるだけでなく、サイトの雰囲気も変わることがわかりました。文字間隔が狭いと堅苦しい印象ですが、間隔を広めに取ると軽やかな印象となり、今回のサイトのように楽しげで爽やかな印象になると感じました。文字を打ったら必ずカーニングをする習慣をつけたいと思います。

制作過程についてはこちらのブログ記事にまとめています。