ふわっとした探し方から卒業!WEBデザインの参考サイトの探し方

  • 2022年01月24日
  • 2022年01月27日
  • もえこ

  • デザイン

「WEBサイトのデザインのお仕事を受注したけどどうやって探せばいいかわからない…」
「探すのに時間がかかってるのに、しっくりこない…」
「好みのサイトは見つかるけど、お客様にあまりささらない…」
などお困りの方へ。

参考サイトを探す際、漠然と好みのサイトを探していませんか。
この記事では、デザインを受注した際にどのような流れ・方法で参考サイトを探しているのかをご紹介します。

ぜひ、デザイン制作の際の参考にして頂けると嬉しいです!

参考サイトの探し方3ステップ

デザインを受注した際にどのような流れで参考サイトを探しているのかご紹介します。

  1. 決める
  2. 調べる
  3. 落とし込む(再度調べる)

こちらの流れで探すことによって、より具体的なサイトを見つけることができます。
では早速、具体的にご説明していきます。

決める

ステップ1では、ネットなどで参考サイトを探す前にすべきことをご説明します。
すぐに探し始めるわけではなく、どういうサイトを探すべきなのかを「決める」必要があります。

「決める」ためにヒアリングをする

クライアントがWEBサイトをどうして、誰に向けて、どのような内容で作りたいのか細かくヒアリングしていきます。

この時に大切なのは、クライアントの立場と、エンドユーザーの立場に両方立って考えてみることです。

  • 自分がクライアントだったらどういう情報を伝えていきたいのか
  • お客様だったらどのような情報を知りたいのか

そこにWebデザイナーとしての知見を加えることでより具体的な内容が見えてきます。

どんな内容を聞けばいいのか知りたい、という方にはヒアリングシートの内容をまとめた記事をご参考ください。

ペルソナを「決める」

ペルソナを決める(ペルソナ設定)とは、ターゲットを具体化していく際に架空のユーザー設定を作ることです。

具体的に言うと、

  • 性別
  • 年齢
  • 職業
  • 趣味/嗜好
  • 性格

など細かく定めていきます。

ペルソナ設定の有名どころで言うと、Soup Stock Tokyoの秋野つゆという架空の女性が有名ですので興味があればみてみてください。

ここはマーケティングやブランディングの話に関わる部分のため、具体化をどこまでデザイナー側でするのかは案件によって異なります。
20代〜40代の男女などだとふわっとしすぎていてターゲットが不明確なので、参考サイトを探す前にターゲットをさらに深掘りして、クライアントとすり合わせすることがとても大切です。

調べる

ステップ2では、実際に参考サイトを「調べて」探していくのですが、その時にどこで探しているのかをご紹介します。
また、その際に今調べているものが雰囲気の参考なのか、構成の参考なのか、なんのために調べているのかは明確にして調べると見つけやすいです。

ちなみに、私はお客様との認識合わせのために大まかな参考サイトを決めた段階で、一度方向性の確認をしています。そうすることでデザインを作成した後に大幅な変更が起こりづらくなります。

同業他社のサイトを「調べる」

他の競合がどのような打ち出しをするのかをみて、そこと被らないようにするのか(差別化)、活かせるところはないのかを調査します。

業界大手の有名なところはもちろん、同じ規模感の会社がどのようなサイトを持っているのかをみるのですが、私はいつもお客様に意識している競合他社はあるか聞き、そこのサイトは必ずチェックするようにしています。

WEBデザインまとめサイトを「調べる」

膨大な量が存在するWEBサイト。自分で検索して探すのは大変だと思うので、おすすめのまとめサイトをいくつか紹介します。

SANKOU!

国内のWEBサイトを集めたまとめサイトです。おしゃれさだけでなくユーザー目線でのわかりやすいサイトが多く、とても参考にしています。サイドにあるスマホマークをクリックすることでスマホのファーストビューから探すことも可能です。
また、制作された方の名前が載っているので自分の好きなテイストの企業やデザイナーの方を見つけることもできます。

https://sankoudesign.com/

WebDesignClip

国内・海外のサイトを集めたまとめサイトです。おしゃれなサイトが多く、参考サイト探しでない時も訪れています。こちらもスマホのサムネ切り替えが可能なのと、メインカラー、サブカラーでの検索がわかりやすい仕様になっています。

https://www.webdesignclip.com/

 MUUUUU.ORG

国内・海外のクオリティが高いサイトを集めたまとめサイトです。特徴として、縦に長いサイトが掲載されています。サービスカテゴリ別の検索も可能です。

https://muuuuu.org/

Stock

国内の、ユーザーが使いやすいサイトを集めたまとめサイトです。Twitterでも掲載したものを紹介されているため、自分でまとめサイトを見に行けない時に日常的にサイトをみることが出来、勉強になります。

https://stock.pulpxstyle.com/

Pinterestで「調べる」

デザイナーにはお馴染みPinterestです。構成というよりはあしらいや色などの参考に使用しています。
※実際の企業のWEBサイトと個人作成のデモページなども混在しているので構成の参考にする際は注意が必要です。

雑誌で「調べる」

各誌ターゲット設定が明確なので、その年代のその嗜好の人が好きなテイストの参考になります。

紙でみるのもいいのですが、毎回購入するのも高いと思うので、私は月額の読み放題サービスに加入しています。4〜500円ほどで色々な雑誌が読み放題なので、あしらいなどの参考にもしています。

落とし込む(再度調べる)

ステップ3では、調べたものなどを参考にしながら実際のデザインに反映して「落とし込んで」いきます。この段階でより細かい部分のパーツに関して調べたりもします。

この時には、調べたものをそのままつぎはぎにするのではなく、あくまで自分でデザインしてみて、悩んだところを参考にしていくのがいいと思っています。

ツギハギでも形にはなるのですが、あくまで最初に決めた設定に沿ったものになるよう全体のバランスを想定して作成していくことは後々力になると考えています。
例)ヘッダーのデザインはどれにするか、お客様の声はどの見せ方がいいか、など。

まとめ

以上、参考サイトの探し方を3ステップにしてご説明しました。
自分の好みのサイトを探したり、ふらっとWEBサイト検索の波に乗りにいくのだったら自由にみるので全く問題ないのですが、クライアントに出すものの場合は道筋が必要です。

ステップ1:どういうサイトが必要とされているのかを考えてまずは要件を「決める」
ステップ2:決めたものを一流のクリエイティブを参考にしながら「調べる」
ステップ3:調べたものを自分のデザインに「落とし込む」

もちろん必ずしもこの順番で進めるわけではなく、必要に応じて調べたり、お客様とすり合わせたりは必要になりますが、とりあえず探す、ではなくこの流れで進めることによって、検索迷子になったりお客様との大幅な認識の相違は起こりにくいのではないかと思います。

参考サイトQ&A

番外編ですが、参考サイトを探すにあたり、デザイナーとして仕事を始めた際に私自身が出会ったこと、感じたことをQ&A形式でまとめますのでよければ参考にしてみてください。

Q.クライアントから希望の参考サイトを提示されたらどうするか。

A.とても重要です。ただ、時としてそれが目的やターゲットとずれている場合もあるので、そのまま受け取るわけではなく、そのサイトの何がいいと思って選ばれているのかきちんと聞く必要があります。

Q.参考サイトそのままがいいと言われたらどうするのか。

A.あくまで参考に。そのまま作ったらただのパクリです。ただそれを無下にするわけではなく上の質問と同じく、そのサイトの何がいいと思ったのかを聞き、何を参考にするのかをすり合わせしていきます。

Q.参考サイトに引っ張られてしまう。

A.最初は引き出しも全然ないので、色々と参考サイトをみながら作成はアリだと考えています。私も先輩方のサイトを普段から参考にしまくっています。
ただ、もし参考にしたものに引っ張られてしまうというのであれば、そのままみながら、というよりもまずは手を動かしてみて、悩んだ箇所を確認するやり方もおすすめです。
自分で唸りながら作ったものも、きっとどこかで見たものからヒントを得ているのですが、見ながら作るのと捻り出して作るのとでは身につくものに大きな差があると考えています。

本記事のステップだと調べてからデザインする、ですが、デザインしてから調べる、でもOKだと思います。だた必ずステップ1の決めるは飛ばさずに行うことをおすすめします!

最後に

参考サイトの探し方3ステップ、いかがでしたでしょうか。

漠然と調べてデザインするのではなく、このステップを踏むことで

  • 調べるのにかかる時間の削減
  • デザインした後の変更が少なく、労力やスケジュールの後ろ倒しの削減
  • 認識の相違が少ないのでクライアントの満足度向上

という様々なメリットがあります。

もちろん、この流れでやったとしても、思っていたより目的が達成できなかった(想定よりお申し込みが入らなかったなど)、というのは起こります。
ですが、このステップを踏まずに漠然と調べてデザインするのではなくて、順序立てて考えておくことで次の手が打ちやすくなります。

ぜひ参考サイトを探す際に、参考にしてもらえたら嬉しいです!

最後まで読んでいただきありがとうございました。

この記事を書いた人

もえこ

神奈川のフリーランスWebデザイナー / 元インテリア商品開発&生産管理 → 2019年からWEB業界へ / 安心感のあるお取引がモットー / デザイン&コーディング / WordPress / FP2級 / インテリア、ねこ好き / 1歳児子育て奮闘中です。

記事一覧
GoTop