Inside cmn!

辻 竜二

Webデザインの参考集めに役立つ4つのギャラリーサイト

UI/UXデザインTips

こんにちは、commono株式会社Webデザイナーの辻です。

Webデザインを作るとき、目的のデザインや、完成系のイメージが上手くできない時があると思います。

そんなときに行うのが、リファレンス集めです。リファレンスという言葉は少し難しく聞こえますが、簡単に言えば、これから作るデザインを考えるための、参考例を集めることです。

今回は、Webデザインの参考を探せるギャラリーサイトを4つご紹介します。

この記事はどんな人向け?

・デザイナーを目指している学生
・とりあえず手を動かしてみるが上手くできない
・思い通りのデザインにならない

まず、リファレンスって何...?

リファレンスとは、デザインを考える前に集める参考例のことです!
リファレンス(reference)= 参考・参照・情報源

完成したデザインの正解や答えを探す作業ではなく、デザインを考え進めていくための手がかりを集める作業と考えてください。

例えば、カフェのWebサイトを作るとします。いきなり色やフォントを決めるのではなく、まずは実際のカフェのWebサイトをいくつか見てみましょう。

すると、次のような共通点が見つかるかもしれません。

・店内や商品の写真が大きく使われている
・メニューや営業時間が見つけやすい
・茶色やベージュなど、落ち着いた色が多い
・手書き文字や、やわらかい書体が使われている

こうした共通点を見つけることで、「カフェらしいWebサイトって、どのように作られているのか」が少しずつ見えてくるはずです。

この、「らしさ」「それっぽさ」を感じる、一定のルールを探すために行う作業がリファレンス集めです。

では、なぜ実際にデザインを作り始める前に、リファレンスを集める必要があるのでしょうか?

その理由は、これから作るデザインに必要な「型」と「文脈」を知るためです。

「型」と「文脈」について

デザインの話では、「型」や「文脈」という言葉がよく使われます。少し分かりにくい言葉なので、ここでは簡単に説明します。

———

💡型とは:

型とは、どうすれば、その業界やサービスらしく見えるのかという基本的なルールです。

・文字のサイズ感や使っているフォント
・色の使い方とその割合
・レイアウトの仕方
・写真や画像素材の配置・その内容

世の中で目にするありとあらゆるものに、「それらしさ」の印象を与えるルールが必ず存在します。「化粧品広告っぽい」「ファッション誌っぽい」「求人募集っぽい」「パンフレットっぽい」そう感じさせる、ある程度決まったルールのことを指します。

どれだけ個性的でおしゃれなデザインでも、見た人から「何のサービスか分からない」と思われてしまえば、予約や問い合わせにはつながりにくくなります。

型を知らずにデザインを作ると、そのサービスらしさや、利用する人の安心感を失ってしまうリスクがあります。

 

💡文脈とは:

ユーザー(見る人)がこれまでに体験してきたことや、そこから生まれるイメージのことです。

例えば、スマートフォンの操作に慣れていない年齢層の人が多く利用するサイトで、ボタンや説明を減らしすぎると、「どこを押せばよいのか分からない」デザインになるかもしれません。

一方で、スマートフォンやSNSを日常的に使っている若い世代に向けたサービスで、古い印象の装飾や操作方法を使うと、「使いにくそう」「少し古そう」と感じられることもあります。

このように、見る人がどのような体験や知識を持っているのかを知らずに作ると、ユーザーの感覚とずれたデザインが生まれてしまいます。

———

型は、必ず守らなければならない正解ではありません。
実際あえて型から外す場合も少なくないです。しかし、あえて型を外す場合は、その業界の型や文脈を熟知したうえで、明確なコンセプトや意図がある場合に行うことがほとんどです。

リファレンスを集めることで、「この業界では、どのような見せ方がよく使われているのか」「このサービスを使う人は、どのようなデザインなら理解しやすいのか」を、実際の事例から考えられるようになります。

つまり、リファレンス集めは、素敵な見た目を探して模倣するための作業ではなく、見る人にきちんと伝わり、安心して使ってもらえるデザインを作るための準備でもあります。

まず基本の型を知ることで、「どこにそれっぽさを出して、どこに独自の個性を出すのか」を考えやすくなります。

ギャラリーサイトって何?

そんな型や文脈を知るために便利なものがギャラリーサイトです。
ギャラリーサイトとは、さまざまなWebサイトの事例を、一か所に集めて紹介しているサイトです。本屋さんにたくさんの本が並んでいるように、ギャラリーサイトには多くのWebデザインが並んでいます。

Screenshot

業界、色、デザインの雰囲気、サイトの種類などから絞り込めるため、検索エンジンで一つずつ探すよりも、効率よく参考を集められます。ただし、何となく眺めているだけでは、「かっこいい」「おしゃれ」で終わってしまいます。ギャラリーサイトを見る前に、まずは探したいものを一つ決めてみましょう。

例えば、次のように目的を具体的にします。

  • カフェのWebサイトで、写真がどのように使われているか知りたい
  • 採用サイトで、会社の雰囲気を伝える方法を探したい
  • スクロールしたときの動きを探したい
  • 信頼感があるけれど、堅すぎないデザインを探したい

目的を決めるだけで、同じギャラリーサイトを見ても、見つけられる情報が増えていきます。

用途別!参考集めに役立つ4つのギャラリーサイト

1.SANKOU!

どんなサイト?

SANKOU!は、国内のWebサイトを幅広く探せるギャラリーサイトです。

コーポレートサイト、採用サイト、ブランドサイト、ECサイトなど、さまざまな種類の国内事例が掲載されています。

業種だけでなく、色、書体、デザインの雰囲気、レイアウト、動きなどから細かく検索できることも特徴です。掲載事例の更新も頻繁なため、現在の国内Webデザインを調べる入口として使いやすいサイトです。

こんなときにおすすめ!

  • 日本国内の事例を探したい
  • 同じ業界のWebサイトをまとめて見たい
  • 初めてリファレンスを集める
  • 業界ごとの定番表現を知りたい
  • 色や雰囲気から参考を探したい

2.Awwwards

3.1GUU

どんなサイト?

1GUUは、国内外の優れたWebデザインを集めたギャラリーサイトです。

大きな特徴は、動きに特徴のあるサイトの場合、一覧画面のサムネイルでもアニメーションを確認できることです。PC版では、実際のサイトを一つずつ開かなくても、動きの雰囲気をある程度つかめます。

国、業種、色、デザインの雰囲気などからも検索できます。

こんなときにおすすめ

  • 動きのあるWebサイトを探したい
  • スクロールアニメーションを見たい
  • ページを開く前に動きの雰囲気を確認したい
  • 国内外の事例をまとめて見たい
  • ファーストビューの演出を探したい

4.S5-Style

どんなサイト?

S5-Styleは、幅広いジャンルのWebデザインが集まる、共有型のギャラリーサイトです。

運営側が質の高い事例を選ぶ「Good Web Designs」のほか、ユーザーがデザインをまとめる「Design Sets」や、制作の背景を紹介するインタビューなどがあります。

定番として参考になるサイトだけでなく、少し個性が強いものや、思い切った表現の事例にも出会いやすいことが特徴です。

こんなときにおすすめ

  • 質の高い事例を中心に見たい
  • 定番から少し外れた表現を探したい
  • 自分では選ばないデザインにも触れたい
  • ほかのデザイナーが集めた事例を見たい
  • デザインが作られた背景も知りたい

リファレンスを集めた後に考えること

参考をたくさん保存しただけでは、まだリファレンス集めは終わっていません。保存したデザインを見ながら、次の3つを考えてみましょう。

 

1.どこがよいと思ったのか

「何となく好き」で終わらせず、写真、色、文字、余白、動きなど、よいと思った場所を具体的にします。

 

2.複数のサイトに共通しているものは何か

同じ業界のサイトを見比べ、共通して使われている写真、情報、色、レイアウトなどを探します。

 

3.今回のデザインに何を取り入れられるか

見た目をそのまま真似するのではなく、目的に合う考え方や工夫だけを取り入れます。例えば、「このサイトを真似する」ではなく、「商品写真を大きく見せることで、商品の魅力が伝わりやすくなっている。この考え方を今回のデザインにも使えそう」と考えます。

 

 

おわりに

ギャラリーサイトは、完成したデザインの答えを探す場所ではありません。

さまざまな事例を見ながら、

  • なぜこの色が使われているのか
  • なぜこの写真が大きく置かれているのか
  • なぜこの順番で情報が並んでいるのか
  • なぜこの動きが使われているのか

を考えるための場所です。

最初から難しく考える必要はありません。まずは、気になったデザインを一つ保存して、「自分は、このデザインのどこがよいと思ったのか」を一言だけ書いてみてください。

「写真が大きくて、商品の魅力が伝わりやすい」
「文字が少なくて、落ち着いて見える」
「動きが多くて、今っぽさを感じる」

その小さな言葉の積み重ねが、デザインを見る力につながっていきます。この記事が、自主制作や授業、実際の仕事で参考を集める際のヒントになれば嬉しいです!

もし制私たちの作事例にも興味を持っていただけましたら、ぜひWORKもご覧ください!
pageWorks札幌のデザインブランディング | commono inc. コモノ株式会社

Written by

辻 竜二 Ryuji Tsuji

designer

札幌市出身、2016年3月に北海道芸術デザイン専門学校卒業。
映像制作会社、広告代理店勤務を経て2020年1月入社。
Webデザイン・ECオペレーターをメインに、映像制作、CGモデリング、DTPなど、クリエイティブ全般の業務に広く携わらせていただいています。

Q1. commonoに参加した理由
きっかけは知人の紹介です。"ブランディング"というクリエイティブの手法に縛られずに企業の課題解決に取り組む姿勢に魅力を感じ、デザインに関わる様々な経験を積めると感じ入社させていただきました。
Q2. わたしの偏愛
白黒の動物が好きでグッズ収集をしています。
Q3. 今後commonoというフィールドでやりたいこと
北海道のクリエイティブの価値を高めていくため、たくさんの人に愛されるブランディングのため、コモノの一員として日々自分がすべきことを考え努力していきたいです。

Recommend

お問い合わせ

    個人情報利用目的への同意

    ※このサイトはCloudflare Turnstileよって保護されています。
    ※お客様が入力した個人情報はSSL暗号化信号によって保護されています。

    COMMONO株式会社
    E-mail:info@commono.co.jp
    個人情報保護方針、個人情報の取扱いについて
    PRIVACY POLICY

    お気に入り

    お気に入りから削除

    選択したアイテムをお気に入りから削除しますか?