Webデザインの学習では、参考サイトを見ながらWebサイトやバナーを制作する課題に取り組むことがあります。
しかし、参考サイトをいくつか見ても「おしゃれだな」「きれいだな」と感じるだけで、実際に自分のデザインにどう取り入れればよいのか分からないことはありませんか？
参考サイトを活用するときに大切なのは、見た目をそのまま真似することではありません。プロのデザイナーは、色や文字の使い方だけでなく、情報の配置や余白、写真の選び方など、デザインの裏側にあるルールを観察しています。
今回は、参考サイトを見るときに意識したいポイントと、観察した内容を自分の制作に活かす方法を紹介します。
1. まずは、誰に何を伝えるサイトなのかを考える
参考サイトを開いたら、最初に確認したいのは、そのサイトの目的とターゲットです。
例えば、同じ美容室のWebサイトでも、若い世代向けのサロンと、落ち着いた大人向けのサロンでは、デザインの方向性が異なります。前者は明るい色や動きのある写真を使って親しみやすさを表現し、後者は落ち着いた配色や余白を活かして上質な雰囲気を表現しているかもしれません。
デザインの表現には、それぞれ理由があります。参考サイトを見たときは「なぜこの色を使っているのか」「なぜこの写真を大きく見せているのか」と考えてみましょう。
サイトの目的やターゲットを意識すると、単に見た目を真似するのではなく、デザインの意図を読み取れるようになります。
2. 最初に目に入る情報と、視線の流れを確認する
次に確認したいのは、ページを開いたときに最初に目に入る情報です。
参考サイトのトップページを開いたとき、最初に大きな写真が目に入るのか、キャッチコピーが目立つのか、それともサービス内容やキャンペーン情報が強調されているのかを観察してみましょう。
例えば、オンラインスクールのサイトなら、メインビジュアルに「未経験からWebデザイナーを目指す」といったメッセージを大きく掲載し、その下に講座内容や受講の流れを配置している場合があります。
このような構成には、見る人に最初に伝えたい情報を理解してもらい、その後に詳しい内容を読んでもらうという意図があります。
参考サイトを見るときは、次の点を確認してみましょう。
- 最初に目に入るのは写真、キャッチコピー、ボタンのどれか
- 見出しと本文はどのような順番で配置されているか
- 重要な情報はどのような方法で目立たせているか
- ページを下にスクロールすると、どのような順番で情報が続くか
視線の流れを意識すると、参考サイトのレイアウトや情報の優先順位を理解しやすくなります。
3. レイアウトと余白の使い方を観察する
写真や文字のデザインだけでなく、要素の配置にも注目してみましょう。
例えば、メインビジュアルでは写真の左側に文字を配置しているのか、右側に配置しているのか。サービス紹介では画像と文章を横並びにしているのか、上下に並べているのか。こうした配置の違いによって、ページの印象や情報の伝わり方は変わります。
また、セクションとセクションの間にどれくらい余白を取っているかも確認したいポイントです。余白が広いサイトはゆったりとした印象になり、情報を整理して配置したサイトは内容を追いやすくなります。
参考サイトを観察するときは、画面全体を眺めるだけでなく、各セクションの構成を一つずつ見てみましょう。どの要素をまとめ、どこで区切っているのかを把握すると、自分の制作にも取り入れやすくなります。
4. 色・文字・写真の組み合わせを確認する
参考サイトの雰囲気を形づくっているのは、色や文字、写真の組み合わせです。
例えば、信頼感を重視する企業サイトでは、青や白を中心にした配色や、読みやすいゴシック体が使われていることがあります。一方、ファッションブランドのサイトでは、写真を大きく見せたり、余白を広く取ったりすることで、ブランドの世界観を表現している場合があります。
ここで大切なのは、色やフォントを一つずつ真似するのではなく、全体の組み合わせを観察することです。
次のような点を確認してみましょう。
- メインカラーとアクセントカラーには何色が使われているか
- 見出しと本文でフォントや文字の太さをどう使い分けているか
- 写真は人物、商品、風景のどれを中心に使っているか
- 写真の明るさや色味は、サイト全体の配色と合っているか
色や文字、写真の組み合わせを観察すると、そのサイトらしい雰囲気をどのように作っているのかが見えてきます。
5. 観察したルールを自分の制作に取り入れる
参考サイトの特徴を把握できたら、次は自分の制作に取り入れてみましょう。
ただし、参考サイトのデザインをそのまま再現する必要はありません。制作するサイトの目的や掲載する情報に合わせて、参考にする部分を選ぶことが大切です。
例えば、参考サイトの「写真の横にキャッチコピーを配置するレイアウト」が気に入った場合、自分の制作でも同じ配置を試してみます。一方で、色やフォントは制作するサイトのターゲットに合わせて変更します。
また、参考サイトを一つに絞る必要もありません。レイアウトはAのサイト、配色はBのサイト、写真の見せ方はCのサイトというように、参考にする要素を分けて考える方法もあります。
制作を始める前に、参考サイトから取り入れたい特徴をメモしておくと、作業中に方向性を見失いにくくなります。
まとめ
参考サイトを見るときは、単に「おしゃれ」「きれい」と感じるだけで終わらせず、なぜそのデザインになっているのかを考えることが大切です。
サイトの目的やターゲット、情報の優先順位、レイアウト、余白、色や文字の組み合わせなど、見るポイントを決めて観察すると、デザインの意図を読み取れるようになります。
Webデザインを学んでいる人は、普段から気になるサイトを見つけたら、気に入った部分とその理由をメモしてみましょう。最初は一つのポイントに注目するだけでも構いません。
参考サイトを観察する習慣を身につけることで、デザインの引き出しが増え、自分の制作に合った表現を選べるようになっていきます。
