WEBディレクター必見!WEBデザインの参考になるサイト20選

Webデザインの参考になるサイト

あなたは、Webデザイナーやプログラマーに作ってほしいWebサイトのイメージを指示する際に、どのようにしていますか?Webデザインやプログラミングをある程度知っていれば、明確な指示が出来るかもしれませんが、多くの人がそうではないと思います。

そんなときに、役立つのがWEBデザインのギャラリーサイト(参考サイト)です。デザイン的にも秀逸な色々なサイトを一覧で眺める事が可能ですので、イメージに近いWebサイトがあれば、ひとこと添えてWebデザイナーに指示すれば簡単にイメージを共有できます。

今回はWebデザインの参考サイトを20サイトご紹介します。これから自社もしくは自分のWebサイトを制作していこうと考えている方にはイメージを膨らませる参考になるでしょう。また、特別興味がなくても見ているだけで楽しいWebサイトばかりになっています。ぜひご覧ください。

1.MUUUUU.ORG

MUUUUU.ORG

左サイドバーにカテゴリーバーが設置してあります。クリックするとメニューが開くのですが、背面にブラー(ぼかし)がかかるのも小気味良いです。INDUSTRY、DESIGN、TYPE、COLORの4つのカテゴリーからさらに細かく分けて分類されているので、探しているデザインのジャンルや色などから検索することができとても便利です。

http://muuuuu.org/

2.straightline bookmark

straightline_bookmark

ユーザー登録を行うと、こちらのウェブサイト内で気に入ったページなどを自分用に保存しておくことができ、一種のウェブサービスとなっています。また、各ページのサムネイル下にはユーザーが何人お気に入り登録しているかなどの情報も見ることができ、どんなデザインが人気なのかも一目でわかります。

http://bm.straightline.jp/

3.I/O 3000

IO3000

カテゴリーやタグをうまく利用して掲載しているウェブサイトのデザインに応じて分類してあるので、探しやすくなっています。また、こちらのウェブサイト自体が素敵なデザインでシンプルですがしっかりと見やすいと評判です。定期的に更新されているので、毎日チェックしたいウェブサイトです。

http://io3000.com/

4.bookma!

bookma

ゴリラのマークがインパクトのあるブックマークサービスです。ユーザー登録することによって自分のお気に入りを記録しておくこともできますし、自ら気に入ったデザインのウェブサイトをアップすることもできます。新着デザインにはゴリラのNEWマークが付いているのでわかりやすいです。

http://bookma.org/

5.ズロック

zrokku

サムネイル一覧の左上に「S M L」とサムネイルのサイズを選べる機能があり、たくさんのデザインを見たいときにはS、しっかり見たいときはLなどといった感じで使い分けると見やすいです。もっと詳しくみたい場合はサムネイルをクリックすれば該当ページへ移動することができます。

http://www.zzrock.net/

6.web selection

web_selection

こちらもしっかりとカテゴリー分けされているので求めているデザインのジャンルから簡単に探すことができます。ブラックとグリーンの印象的なウェブデザインに仕上がっていてインパクトがあります。

http://web-selection.com/

7.WPデザインギャラリー

WP_design_gallery

kachibito.netを運営されている方が運営されているWordPressに特化したギャラリーサイトです。サムネイルをマウスオンすると運営者さんの解説を読むこともできます。ウェブ制作者目線で嬉しいカラム別の分類もあり重宝します。

http://wpgallery.kachibito.net/

8.イケサイ

ikesai

ウェブデザインのギャラリーサイトといえば「イケサイ」を思い浮かべる方も多いのではないかと思うくらい知名度の高いサイトです。ストックされている情報量はとても多く、日々追加されていっているので毎日チェックしても飽きることはありません。サイドバーにカテゴリー分けしてあるカテゴリー以外でもサイト内検索でキーワードを入力して検索することも可能です。

http://www.ikesai.com/

9.Good Design Web

Good Design Web

タイル状に配置されたサムネイルがとてもきれいなギャラリーサイトです。サムネイルにマウスオンすると気持ち良いアニメーションから、該当サイトを見るか詳細情報を見るかを選択できます。比較的シンプルなサイトを選んでいる傾向を感じました。

http://gooddesignweb.com/

10.AWWWARDS

Awwwards

ユーザーが人気投票をすることで掲載しているサイトの評価を決めるという参加型のサイトになっています。評価する項目もデザインだけでなく、ユーザビリティやクリエイティビティ、コンテンツの内容をそれぞれ評価されています。こちらのギャラリーサイトで上位にランキングされているウェブサイトを見れば海外のウェブデザインの流れを垣間見ることができるでしょう。

http://www.awwwards.com/

11.site inspire

siteInspire

ロゴマークが日の丸に見えてどうしても親しみを持ってしまうギャラリーサイトです。

StylesやTypes、Subjectsなどといった項目から自由にデザインを絞り込んでいくことができます。集められているデザインはどちらかというと、デザイン<アートというような雰囲気を持ったウェブデザインが多いです。

http://www.siteinspire.com/

12.High Floater

High_Floater

最近なかなか見ることが少なくなったFlashで作成してあるギャラリーです。ページを開いた際のアニメーションにも注目してください。

http://www.highfloater.com/

13.WordPress Gallery

WordPress_Gallery

WordPressで構築されているウェブサイトを集めたギャラリーサイトになります。左上に「THEME」と書いてあるものはWordPressテーマを紹介しているページにリンクされています。テーマの販売やPRを考えている方にはアップロードしてトライしてみる価値はあるかもしれません。

http://welovewp.com/

14.Siiimple

siiimple

タイトルが示す通りシンプルなデザインのウェブサイトをたくさん集めているギャラリーサイトになります。最近、海外のUX/UI業界では「Less is more」と言われ、とことん装飾を剥ぎ取るべきだという考えも流行っているそうです。味気ないと感じてしまう部分もあるかもしれませんが、こういった機能を絞ったデザインもあるということは勉強になります。

http://www.siiimple.com/

15.FOLIO FOCUS

Folio_Focus

ポートフォリオサイトを集めたギャラリーサイトです。ポートフォリオですから内外にアピールするためのデザインになりがちで、とても個性が強いものも多くあります。しかし、そんなデザインの中からアイデアをもらえることはとても多くあります。インスパイアされるデザインが必ず見つかるウェブサイトです。

http://foliofocus.com/

16.One Page Mania

One_Page_Mania

最近では1ページで全ての内容を説明するような構成をもったデザインを見かけることが多くなりました。ランディングページのような形にも見えますが、少し訴求の仕方が違う点も見受けられます。画像イメージにインパクトを持たせるデザインの参考になるウェブサイトが多く見られます。

http://www.onepagemania.com/

17.Best Web Design

Best_Web_Design_websites

ドメイン名からもコンセプトの察しがつきそうですが、「nice one I like」ということで運営者の好きな素敵なウェブデザインを提供してくれるギャラリーサイトです。パララックスサイトやランディングページ、キャンペーンサイトなど様々なジャンルから素敵なウェブデザインをピックアップしています。

http://www.niceoneilike.com/

18.ランディングページ集めました。

landing_page_atsumemashita

タイトルの通りランディングページを集めたギャラリーサイトになります。ランディングページの構成を分析したり比較したりする際にとても重宝するサイトです。ジャンルによっても訴求するタイミングや場所が違っていたりするので見ていて飽きることはありません。

http://lp-web.com/

19.見出しデザイン.com

midashi_design

「見出し」のデザインに特化したギャラリーサイトです。見出しとはh1とかh2タグに代表されるものです。記事の小タイトルになったり、メニューのタイトルになったりもします。そういった部分にフォーカスしてデザインを収集している珍しいギャラリーサイトです。見出しのデザインに迷ったらここに来れば解決します。

http://midashi-design.com/

20.レトロバナー

retro_banner

バナーデザインに特化したギャラリーサイトになります。様々なジャンルのバナーが数多くストックされているので見ごたえがあります。サイズや色、業種などからも検索することができるので、バナーデザインに困ったらネタ探しに大活躍してくれるウェブサイトです。

http://retrobanner.net/

まとめ

全部で20のギャラリーサイトを紹介してきましたがいかがでしたでしょうか?

Webデザインに関係する仕事をされていない方々は、こういったギャラリーサイトをどのように利用したら良いのかと疑問に思う部分もあるかもしれませんが、自分がウェブサイトの制作を発注する側になった場合にとても大切な情報となります。というのも、どんなデザインを求めているのか、どんな配色をイメージしているのかを言葉で説明するのは慣れていないと難しい作業になります。ですのでそういった際に、サンプルとして提示できるようなストックを自分で持っているかどうかという点が、制作を含むプロジェクトを進める上で大きなパワーとなります。

また、Webデザインに関わらず紙媒体のデザインへ活かせるポイントなども多く含まれています。そういった発想のきっかけにするという使い方もあります。

ぜひ、たくさんの素敵なWebデザインを見てイメージを膨らましてみましょう。