ここあです。
あなたはWEBデザインを制作する際、
プロが作っているデザインを参考にしていますか？
僕はプロのデザイナーとして
これまで23年間デザイン制作に携わってきてますが、
いつ何時、自分以外のプロが作ったデザインを
参考にしなかった日はありません。
もちろん僕以外にプロの現場では、日々さまざまなプロが作ったデザインを見て
クライアントのために「より効果のあるデザイン」を提案しようと
世の中のデザイナーはみんな知恵を振り絞って頑張っています。
なので、きちんと世間からの反応が取れる
訴求効果の高いWebデザインを作りたいと考えているあなたは、
例え自分がプロのデザイナーでなくとも、
少なくともプロでない人が作ったデザインを参考にするのではなく、
できるだけ良いモノ、本物のデザインを見て
プロのデザインと何が違うのか？
冷静に分析しながら、少しでも訴求効果の高いデザインを
目指していただけたらと思います。
ということで、多くのWebデザイナーが
すでに参考にしているであろうWebデザインの
参考サイトをいくつかご紹介致しますので、
特にWebデザインを作っていたり、
ブログのトップページをサイト型にしたいと
考えているあなたはぜひ参考にしてくださいね。
GENDAI DESIGN（現代デザイン）
こちらのサイト「現代デザイン」はアーカイブが2010年8月から始まっており、
それからずっと更新し続けられているギャラリーサイトです。
ギャラリーサイトのカテゴリーは全部で35、
色のイメージは全14色、
写真イメージメインのサイトも集められていて
業種や色、素材によって非常に調べやすく、
参考にしやすいサイトです。
また、トップページと同時に下層ページも表示されてますので、
下層ページを見るために毎回サイトURLをクリックする必要がなく、
本当に見たいサイトだけをチェックできますので、
検索に無駄な時間が取られません。
さらにサンプルとして集まっているデザインの傾向としては
比較的ごちゃごちゃせず、ゆったりとした間をうまくとっている
洗練されたデザインがたくさん集められてますので、
スッキリとゆとりのある居心地の良いサイトデザインを
作りたい方には参考になるギャラリーサイトです。
SANKOU!
続いてこちらのサイト「SANKOU!」です。
こちらのサイトがおすすめの理由は、Webサイトのページだけではなく
画面右側にある、3本のメニューアイコンをクリックすると、以下のメニュー部分から
ランディングページのデザイン、コンテンツページのデザインも
同時に見ることができます。
しかも画面右側にあるスマホのマークをクリックすると、
そのままWeb画面がこのように、スマホのサイト集に切り替わりますので、
このサイト1つで
- 通常のWebサイト
- スマホ用のサイト
- ランディングページ
これらを同時に調べることができますので、非常に便利です。
サイトのカテゴリーもかなり細かく分けてありますので、
自分が参考にしたいサイトは見つけやすいと思います。
なので、ぜひブックマークしておきましょう！
Web Design Clip
3つ目のおすすめギャラリーサイトは「Web Design Clip」。
こちらのサイトがおすすめの理由は
- 国内Webサイト
- 海外Webサイト
- ランディングページ
- スマホサイト
これらが一度にチェックできるという点です。
実際、国内サイトと海外サイトではやはりデザインのテイストが全然違っていたり、
海外から新しいトレンドが入ってきたりしますので、
海外サイトを見ていると、より早くトレンドなんかにも気付けたりします。
なので、僕が仕事で行き詰まった時はよく
海外サイトや海外のデザインを見てヒントを得たりしていました。
また1クリックでスマホサイトのデザインサンプルに切り替わりますので、
スマホサイズの縦長のレイアウトで悩んだ時にも
すごく参考になるサイトです。
RESPONSIVE WEB DESIGN JP
Webデザインをする際に、特に意識しないといけないのは、
スマホやタブレットで見た際のレスポンシブ対応です。
こちらの「RESPONSIVE WEB DESIGN JP」というサイトではご覧の通り、
Webサイト、タブレット、スマホと一度に3画面同時に見ることができ、
レスポンシブのレイアウトで悩んでいる時に、非常に重宝します。
ワードプレスを使うとあらかじめテーマの方で
レスポンシブ対応になってますが、
テーマによってはPC版とスマホ版でメインビジュアルの設定を
変えられる有料テーマなどもありますので、そうした各メディアごとに
イメージを調整したい場合の参考にしてください。
Bookma!
5つ目は「bookma!」というサイトです。
こちらのWebサイト参考ギャラリーもWebサイトとスマホ、同時に2画面見ることができ
トップページのレイアウトで悩んでいる時の参考になります。
ただカテゴリーや色などで細かく選ぶことができないため、
自分が調べたい業種のデザインは検索キーワードで調べるしかありませんが、
いずれにしても、画面スクロールすると、どんどんいろんなサイトが出てきますので、
画面下にスクロールしていくだけでも色々と楽しめると思います。
あえてカテゴリー分けされてないのは、サイト訪問者がどんなキーワーで検索するか？
もしかすると運営側の意図があるのかもしれません。
Webデザインを参考にする時のポイント
ここまでWebサイト（国内外）、ランディングページ、スマホサイトなど
いろんなWebデザインの参考になる
ブックマークしておくとすごく便利なサイトを5つほどご紹介しました。
だからと言って、ただ眺めていても、
Webデザインは上手くなりませんし、良くもなりません。
なので、せっかくプロのWebデザインを参考にするなら、
いろんな角度からチェックしてデザインのブラッシュアップや
勉強に役立てていただきたいと思います。
ということで、Webデザインを参考にする際のチェックポイントを
いくつかまとめておきますので、ぜひ参考にしてください。
配色
デザインで最も重要なのは「色」と言っても過言ではありません。
実際、見た目を少しでも綺麗にするため、ライバルよりも自分を目立たせるために
ついついド派手な配色やカラフルな配色をしてしまいがちですが、
色数は増えれば増えるほどターゲットが曖昧になってしまいます。
プロは必ず色数をきちんと絞った上で
ターゲットに合う世界観を作ってますので、
どんなサイトがどんな配色で構成さているのか、
ぜひチェックしてみてください。
どんな配色で構成されているか分からない場合は
- たくさん使われている色
- ベースに使われている色
- 大きい面積に使われている色
- 文字に使わている色
こうした部分の色を見ながら分析すると分かりやすいです。
書体（フォント）
書体は基本的にフォントデザイナーの手によってデザインされています。
なので、適当に書体を選んでしまうと世界観がうまく作れず
「なんか違うなぁ」と思う違和感ありありのデザインになってしまったり、
ターゲットにも見てもらいにくくなってしまいます。
つまり書体も色数と同じで、
いろんなフォントを使えば良いということではなく
目的やターゲットの世界観に合わせたフォントを選ぶというのが重要です。
デザインを考える際に重要なのは、
- なぜその色なのか？
- どうしてその書体を選んだのか？
ということです。
特にプロの世界では、クライアントからの要求に応えるための
デザインを作ることになりますので、
「なぜそのデザインなのか？」説明できないものはデザインとは言えません。
むしろそれは単なるアート作品と言うべきです。
ですから、プロが作ったWebサイトを確認する際にも
どうしてそのサイトがその書体を使っているのかを考えることが大事です。
そうした見方をしていくと、いろんなサイトを見ていく中で
「ある共通点」が見つかったり、きちんとルールが分かることで、
デザインがしやすくなってきます。
目的
今のご時世、webサイトは「ただあれば良い」というものではありません。
ネットが普及し出した頃はWebサイトがあるだけで
他社とも差別化することができましたが、
今ではどの企業も、個人ですら当たり前のように
自分のサイトやブログ、SNSアカウントを持っており
もはや「ただある」だけでは何の役にも立ちません。
なので、自分が何を目的にしてWebサイトやブログ、SNSを運営するのか？
そうした目的が必要で、そうした目的を達成するには、
各企業がどんな目的を達成するために
- どんなコピーで
- どんなイメージで
- どんなサイト構成で
- どんな商品やサービスをいくらで提供しているのか？
様々な情報を分析することが大事です。
そうしたことが理解できて初めて自分のビジネスに活かせます。
そもそもプロが作ったデザインはどれも当たり前のように
見た目も綺麗に整っています。
だからと言って、
プロの仕事はただ見た目を綺麗に整えることではありません。
プロのデザイナーはクライアントの目的を果たすためだったり、
クライアントが抱えている問題を解決するために仕事をしています。
もちろん、ただWebサイトを見ただけでは
各企業の内情までは分からないかもしれませんが、
それでも冷静に分析していくことで、
ある程度見るべきものは見えてきます。
大事なのは、ただ漠然と見て上辺だけをパクろうとしないこと。
そもそもデザインは上辺だけパクっても何の意味もありません。
なぜなら意図のないデザインは誰にも興味が惹かれないからです。
つまり、訴求効果の高いデザインというのは、
何かしらサイト訪問者にフックとなる仕掛けを作り、
興味を持たせることで、商品やサービスへと誘導しています。
そして、それが何かは各企業によっても違いますので、
「どれも綺麗で良いサイトだなぁ」と眺めるのではなく、
- なぜこのコピーなんだろう？
- なぜこのイメージなんだろう？
- このサイトのメインターゲットは誰だろう？
こうしてお客様目線ではなく、逆に発信している企業側の目線になることで
必ず見えてくるものがありますので、
ぜひ様々な視点から各企業サイトを見るようにしてみてください。
そうすれば、そのサイトが
何をポイントに強調要素を入れてるかで
「サイト運営の目的」が見えてくると思います。
ユーザービリティ
ユーザービリティというのは使いやすさ。
例えば、
- 必要な情報がきちんと手に入れられるか？
- 購入ボタンは分かりやすいか？
など
それこそ一昔前のWebサイトは
自分が欲しい情報までたどり着けないごちゃごちゃしたものだったり、
延々ループで繋がっているユーザーのことを一切考えていない
詐欺まがいのものだったり、ひどいサイトも多かったわけです。
（特にアダルト系）
今は、そうした悪質なサイトも減ってはきていますが、
いずれにしても色を使いすぎていたり、
フォントを使いすぎていたり、レイアウトがまとまってないと
サイト訪問者は何をどう見たら良いか分からず、
サイトを安心して見ることができません。
つまり大事なのは、
ユーザーが安心して欲しい情報が手に入るのが理想的で、
もちろん「知らなかった！」という補足情報を提供するのも大事ですが、
ユーザーが求めている情報に答えながらも
自分を必要としてもらえるように、ユーザーにとって有益な情報を
無理なく自然と知ってもらう。
逆にそうした流れではなく、ただ押し売りするかのように
無駄な情報を押し付けたり、不要な情報ばかり羅列したり、
それこそ不安を煽るようなコピーでは、不信感しか持たれなくなってしまいます。
ですから、サイト訪問者が購入ボタンまでたどり着き
安心してクリックしてもらうためには、
どういう見せ方や伝え方をするのがベストなのかを考え、
ユーザーには流れるように自然と出口まで誘導できる導線が、
Webでは重要になってきます。
特にWebの場合はいつでも好きなタイミングで
サイトから離脱することができますので、
いかに最後まで興味を持って見てもらえるか？そうした仕掛けも大事なわけです。
実際、WebサイトギャラリーでWebデザイナーが時間をかけ
丁寧にまとめてくれているWebサイトというのは、
そうした構成や何かしらの仕掛けがきちんとあるものばかりです。
なので、こうしたWebサイトギャラリーを活用する際には、
単に見た目だけを参考にするのではなく、
サイトの構成そのものもデザイン（設計）されてますので、
流れや構成、コピー（文章）なども全て参考にしながら、
自分が理想とするWebサイトがないかどうか、
ぜひ楽しみながら見ていただきたいと思います。
実際、ランディングページなどでも、
いろんなコンテンツがポンポンアニメーションで登場してきて
見てるだけでも楽しいですし、
そうしたページを作る方は大変だと思うんですけど（笑）
そうした動きもなぜわざわざ手間をかけて実装しているのか？
考えることで制作の裏側が見えてくると思います。
ということで、最後にもう１つデザインの制作会社がわかる
『URAGAWA』というWebサイトギャラリーもご紹介しておきますので、
Webサイトだけではなく、そのサイトをどんな制作会社が作ったのか？
制作会社の理念などを見ると、
何を大事にしてデザインしているのか？
そうした部分もよく分かると思います。
なので、特にこれからプロのWebデザイナーを目指したいと考えているあなたは、
デザインの仕上がりだけではなく、
制作会社や制作スタッフのことも知るとよりデザインが楽しめます。
僕は倒れるまで働かされたので、もう制作会社はゴメンですけど（笑）
この『URAGAWA』というサイトも非常に丁寧に作られていて
カテゴリーからサイトの特徴、ランキング（いる？笑）まであり、
自分が探したいサイトの雰囲気や特徴など
表面的な要素も探しやすいと思いますので、
ぜひ一度サイトをチェックしてみてください。
僕が今回、ご紹介したサイトは全て僕自身もブックマークしてあります。
こうして常にプロが作ったデザインに触れることで、自然と
プロが作っているデザインと、そうでない人が作っているデザインが
区別しやすくなりますので、
特にデザイン勉強中のあなたは参考にしてくださいね。
Webデザインの参考になるギャラリーサイトまとめ
今回はWebデザインの参考になるギャラリーサイトを
いくつかご紹介させていただきましたが、
ぶっちゃけブックマークしておくサイトは1つだけで十分です（笑）
なぜなら、似たようなギャラリーサイトをブックマークしておいても
自分が必ず見るサイトは限られますし、
色々と作業していく中で自分が必要な情報も限られてくるからです。
なので、最初はとりあえず５つ6つブックマークしておいても良いですが、
ある程度、閲覧するサイトが決まってきたら、
自分が最も使いやすいサイトを1つだけ絞っておくのもおすすめです。
僕が数マークしてあるのは人から「参考になるサイト教えて！」と
聞かれた時に、いくつか紹介するためです。
実際、こうしたギャラリーサイトはプロのWebデザイナーさんが厳選し、
綺麗にまとめてくれているので、どのギャラリーサイトを選んでも
それほどクオリティは変わりません。
なので、僕が今回紹介したギャラリーサイトは
単にWebサイトの寄せ集めではなく、あなたの用途に応じて
最も調べやすそうなギャラリーサイトだけを「プロの目で見て」
厳選してお伝えしました。
いずれにしても大事なのはデザインの「見た目や装飾」ではなく
「デザインの目的と意図」です。
つまり、意図のないデザインは訴求効果が出ませんし、
そもそもWebデザインは何のためにするのか？
目的が明確ではなく、デザインそのものが目的になっても
これだけネット上にWebサイトが溢れてるわけですから、
ほぼ意味をなさないものになってしまいます。
ですから、僕は少なくとも、単なるギャラリーサイトの寄せ集めではなく、
参考にする以上は、しっかりと活用して欲しいと思ってますので、
Webサイトのチェック項目も補足的にお伝えさせていただきました。
いずれにしてもこの先は、各個人でサイトデザインを作る機会も増えるでしょうし、
それに伴いどう考えてデザインすれば良いか分からない
そうした人も増えてくるんじゃないかと思います。
実際、まだ義務教育でもまともにデザインの本質までは教えてませんので、
これから先、AI時代が本流になってもデザイナーは確実に重宝されます。
だからこそ、今、デザインに興味を持ち始めたあなたは
確実に「先見の明」があると思ってますので、
ぜひこの機会にしっかりとデザインと向き合って
僕と一緒にAI時代で活躍しましょう（笑）
以上、最後までお読みいただきありがとうございました！
