ブレないデザインをつくる！参考サイトの集め方

こんにちは。Webデザイナーの木村です。

Webサイトを新規制作する際、欠かせないのが「参考サイト収集」。

しかし、参考サイトを探しているとだんだんイメージがブレてきて、「結局どれを参考にすればいいか分からない！」という事態に陥ってしまうことはありませんか？

今回は、私がイメージをブラさずに参考サイトを集めるために心がけている方法をお伝えします。

デザインの方向性を定めるための参考サイト収集

一言に参考サイトといっても、その目的はさまざまです。

「このアニメーションを参考にしよう」「このメニューの配置を参考にしよう」といったように、ポイントごとに参考にするということもあると思います。

今回お伝えする内容は、上記のようなポイントに絞った参考サイトではなく、デザインの方向性を定めるための参考サイトの集め方です。

これからデザインを作成しようとしている方や、新規デザイン提案をしようとしている方の参考になれば幸いです！

よくある参考サイト収集の落とし穴

参考サイトを集め終えた後に、いざデザイン作成・提案書作成に取り掛かると、結局どういう方向性で行くのか定まっていないということはありませんか？

何も考えずにいきなり参考サイトを探してしまうと、「このデザインなんかいいな」となんとなくで参考サイトを集めてしまうため、テイストなど一貫性がなくなってしまい、結局どれを参考にすればいいかわからないといった事態に陥ってしまいます。

そうならないためには、事前にどういうサイトを参考にするのか、ある程度頭の中でイメージを定めておくことが重要です。

参考サイトの集め方

では、イメージをある程度定めた上で、参考サイトを集めるにはどうすればよいのでしょうか？

それは、「本来のサイトの目的」を明確にしておくことです。

今回は、目的を明確にしつつ参考サイトを集めるために、私が実践している手順をご紹介します。

サイトの目標を明確にする

これはデザインに限らずですが、そもそも現在の課題を解決できるサイトを作る事を最優先に考える必要があります。

そのために、サイトを制作する目標を明確にしておくことが大事です。

いわゆるKGI・KPIと呼ばれる達成目標を念頭に置き、「その目標が達成できるデザインはどういうものか」

という点にいつでも立ち戻ることができるようにしておきましょう。

ターゲットを明確にする

上記で設定した目的・目標を達成するためには、どのようなターゲットに対して、どのような態度変容を生めばいいのかを明確にする必要があります。

そのためには、ペルソナを設定する方法が有効です。

ペルソナとは、その商品やサービスのターゲットとなるユーザー像のことです。

年齢・性別・職業・趣味・ライフスタイルなどの情報を、一人の人物像として詳細に落とし込むことで、ターゲットの行動心理などを明確にすることができます。

ペルソナは、架空の人物設定ではありますが、自分の知り合いなど、実在の人物を頭の中で設定しておくと、より解像度が上がるのでおすすめです。

ペルソナについてはこちらの記事も参考にしてみてくださいね。

イメージを言語化する

経験上、デザインがブレる最大の原因は、デザインイメージをしっかり言語化できていないことにあると思っています。

私もいきなり参考サイトを探し始めてしまい、テイストが定まらない沼にはまってしまった事は数知れず・・

そんな時に教えてもらったのが、「言語イメージスケール」を使って言語化する方法。

言語イメージスケールとは、「みずみずしい」「はつらつとした」「ダンディな」など、形容詞や形容動詞などの修飾語がちりばめられた表のことです。

イメージスケール：http://www.ncd-ri.co.jp/image_system/imagescale.html

（参照：株式会社日本カラーデザイン研究所）

洗い出した目標・ターゲットに沿ったサイトに近い言葉を、言語イメージスケールから見つけだし、キーワードをメモしておくと、参考サイトを探す際に、そのキーワードに合うサイトを探せばいいので、イメージが明確になります。

また、単色イメージスケール・配色イメージスケールと併せて使用することで、配色も考えやすくなります。

目的・ターゲット・イメージに沿ったビジュアルを集める

私が参考サイトを集める際によく利用するのは、ピンタレストです。

案件ごとにボードを作成し、先ほど洗い出したキーワードのイメージに近いデザインのピンをとにかく保存しまくります。

「参考サイト収集」と銘打ってはいますが、Webサイトに限らず、キーワードのイメージに近いデザインのピンは保存しておきましょう。チラシや雑誌などの紙物のデザインからも、見せ方の参考になる部分はたくさんあります。紙物のデザインをビジュアルベースでおすすめしてくれるのも、ピンタレストのいいところです。参考サイトを保存したボードは、ムードボードとしても使えるので便利です。

また、以下のようなデザインのアーカイブサイトでも、カテゴリ検索内にテイストごとのデザインがまとめられていて、方向性を定めるための参考サイト収集に便利です。

MUUUUU.ORG

SANKOU!

Web Design Clip

参考サイト収集能力がデザインの質に直結する

いかがでしたでしょうか。

参考サイト集めは、デザインの上達への第一歩。良質な参考サイトを集められるかどうかで、良いデザインを作れるかが決まるといっても過言ではありません。

より良いデザインを作る為に、良い参考デザインをたくさん集めましょう！