名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

WEBデザインを初めてみたいけど何から始めたら良いか分からないという方におすすめの勉強方法にWEBデザインのトレースが挙げられます。WEBデザインのトレースとは、インターネット上に公開されている優れたデザインのホームページのデザインをPhotoshopやXD、Figmaなどのデザインソフトを使ってそっくりそのまま模写することです。しかし、ただデザインをトレースするだけでは実のある時間の使い方とは言えません。
今回のコラムではWEBデザインをトレースする際に気をつけたいポイントを4つ紹介していきます。WEBデザイン初学者の方は、ぜひ参考にしてみてください。

プロが製作したWEBデザインをトレースするメリット

プロが製作したWEBデザインを模写することで、さまざまなメリットが得られます。
例えば、テキストのサイズや文字間、行間の使い方が分かる事です。WEBデザインをパッとみただけでは、どのような文字サイズや行間を使っているかが分かりません。デザインソフトを通して同じようにデザインを製作することで、細かな行間の数値や文字サイズが明らかになります。WEBデザインを製作する上で、テキストスタイルの使い分けは非常に重要です。どういった場面で、どのテキストスタイルを使用しているかなど細かく分析してみましょう。
テキストスタイルだけでなく、パッとみただけでは分からない細かな画像の使い方、シャドウの使い方、背景色の使い方、マージンの使い方などが分かります。このような要素の細かなデザインの施し方は、自分がオリジナルのWEBデザインを製作する上で必ずヒントになるはずです。
またデザインをトレースする事で、デザインソフトの使い方も一緒に学ぶ事ができます。WEB制作会社の採用ではPhotoshopやIllustratorなど、デザインソフトの知識が必須の場合があるので、WEBデザインをトレースする際にはadobe系のデザインソフトを活用して製作するのをおすすめします。

WEBデザインをトレースする際に気をつけたいポイント

ここからはWEBデザインをトレースする際に気をつけたいポイントを4つ紹介していきます。

テキストスタイルの使い方

テキストスタイルの使い方は、テキストの種類によって以下のように異なる場合があります。

■あるサイトの例
・メッセージ系のテキストスタイル：明朝体・文字間広め・行間広め・テキスト大きめ
・本文のテキストスタイル：ゴシック体・文字間普通・行間普通・テキスト普通
・短めの文章：ゴシック体・文字間狭め・行間狭め・テキスト小さめ

テキストスタイルの使い方は文章を読ませやすくするためにも非常に重要です。パッと見ただけでは違いが分からないテキストスタイルでも、デザインをトレースしてみると若干行間が違うなんてこともあるので気をつけてトレースするようにしましょう。また、フォントの使い分けには規則性を持たせている場合があります。どういった場合にどのフォントを使用しているか気をつけてみましょう。

マージンの使い方

要素間のマージンの使い方も細かく見るようにしましょう。例えばh3の下から何ピクセル空けて本文が始まっているかなど、細かなピクセルの単位で見るようにします。「この場合は何px空けている」などの規則性がわかるようになるはずです。また、規則から外れているマージンの使い方をしている場合は「なぜマージンが違うのか」と疑問を持つことも重要です。中には人が見た時に等間隔に見えるよう、ピクセル単位で視覚調整をしている場合もあります。

使用しているカラーの配色割合

使用するカラーはサイトの印象を決める大きな要因の一つです。どの要素にメインカラー・アソートカラー・アクセントカラーを使用しているか意識してトレースしましょう。特にアクセントカラーは重要な要素を目立たせるために使用される色です。オリジナルのWEBデザインを製作する上で重要となるので、特に注意することをおすすめします。

デザイン要素の構成

デザイン要素の構成は文字の読みやすさや、情報の伝えやすさを左右します。プロが製作しているWEBデザインは、自然な視線の流れになっていたり、ワンビューで全ての情報が見えやすくなっています。画像やテキストなどの要素の配置場所やサイズ感によって情報の伝わりやすさは異なってきます。なぜ分かりやすくなっているかを考えながらトレースするようにしましょう。

今回のまとめ

今回はWEBデザインをトレースする際に気をつけたいポイントを紹介しました。プロが製作するWEBデザインをトレースする事で、細かなデザインの工夫を数値として可視化する事ができます。自分でオリジナルのWEBデザインを製作する前に「WEBデザインのセオリー」を学ぶためにも、今回紹介したポイントに注意して学習することをおすすめします。