LP TRACE

OVERVIEW

SHElikesマルチクリエイターコースの課題で、Webページトレースの課題に取り組みました。 スタイルガイドの作成、PC用サイトとスマートフォン用サイトの異なる箇所をまとめました。 ◇使用ツール:Photoshop

YEAR 2022

◆トレースしたLP

 マネータップ株式会社様のWebページをトレースしました。

◆スタイルガイド

◆PC/SP異なる箇所の分析

◆制作を通して気づいたこと

 ◇配色

  グレイスケールが細かく使い分けられている。

  メインカラーの青は一色ではなく、様々な青が使われている。

  反対色(ブルーとイエロー)のグラデーションを使うことで、

  よりオリジナリティが出る。

  メインカラーをブルー、ベースカラーを白にすることで爽やか、清潔、

  誠実な印象を与える。

  所々に薄いグレイの背景を入れることで単調にならない。

 ◇フォント

  和文と英数字とでフォントを使い分けている。

  ゴシック体が使用されいて視認性が良い。安定感のある印象を与える。

  フォントのサイズ、太さを細かく使い分けていて、ぱっと見で重要な情報が

  認識しやすい。

 ◇余白

  たっぷりと余白がとられていて、落ち着いた印象を与える。

   規則的に余白が使用されていて、情報の塊が分かりやすい。

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

 ◇Webページでのフォントサイズ

  見出し、本文などでどれくらいのサイズを使用したらいいかが分かりました。

 ◇スタイルガイド

  スタイルガイドを作る目的・メリット・作り方を学びました。