トレースでWebデザイン力をアップさせるためにチェックしておくべき大事なポイント

masaca@Webデザイナー / 講師

フリーランスWebデザイナーのmasaca（@masaca_dApps）です。
Webデザイン力をあげる方法として、トレースはとても有効です。

ただし、何も考えずにただ形を真似るだけでは「なぜこのようなデザインにしているのか？」ということはなかなか見えてきません。

デザインの意味が理解できると、自分の引き出しとして自由に使うことができ仕事のときも複数のアイデアがパッと浮かぶようになります。

PhotoshopやIllustratorなど、ツールの操作が身についたら次のステップとしてトレース時にこれから紹介するポイントを意識してみてください。

使用されているフォント

基本のフォント、アクセント、種類を考えてみる
和文の基本フォント、欧文の基本フォントは何でしょうか？
それらをベースとしてタイトルやキャッチでアクセントとして使っているフォントは何でしょう。

また、フォントは何種類使われているでしょうか。初心者の方はたくさんのフォントを使いがちですが、そんなに多くのフォントを使っていないことに気づくと思います。

配色について考えてみる

ベースカラー、メインカラー、アクセントカラーは何か考えてみましょう。
多くのサイトでは基本的な配色方法が使われています。
（同系色やモノトーン、たくさんの色を使った配色方法ではその限りではありません。）

配色についての基本は以下の記事にまとめました。

そしてなぜその色を使っているのかを考えてみてください。ターゲットやサービスのイメージにあったものが選ばれていることが多いでしょう。

レイアウトについて

まず全体のレイアウトを把握しましょう。メインビジュアル、導入部分、ニュース、ステップやサービスの特徴はざっくりとどのように配置されているでしょうか。また、どのような見せ方のパターンがあるでしょうか。

あえてはみ出させていたり、大きくしたり、小さくしたりいろんなことが読み取れると思います。

余白について考えてみるのも重要です。
上下左右の余白はそろえているのか、差をつけているのか、全体を通して規則性があるのかないのか考えてみてください。余白を詰めれば緊張感が増し、ゆとりを持たせるとゆったりとした雰囲気が出ます。

イメージ（使用画像・写真）について

Webサイトに使用されている画像について考えてみましょう。

装飾やブランドイメージのための画像か？それともわかりやすく伝えるための画像か？など何のために使用されているのかという視点を持って見てみてください。

自分がデザインするときも、画像の選定にしっかりと根拠を持つことができるようになります。

情報設計

最後にとても大事な情報設計についてです。購入やサービス登録、来店してもらうためにどんな情報の優先度や伝え方をしているのか、トップページの構成を読み取ってみましょう。

目の前のビジュアルだけにとらわれることなく、情報としてWebサイトを観察してみてください。

※この部分は初めは理解しづらい部分なので初心者の方は考えすぎるよりも、トレースの数をこなすことをオススメします。

まとめ

Webサイトは「フォント」、「配色」、「レイアウト」、「イメージ」で構成されています。

トレース時にどこを見たり何を考えたらいいかがわからないという人は今回紹介したポイントを意識してみてください。かなり学習の効果が違ってくるはずです。

この記事が気に入ったらサポートをしてみませんか？