こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回はWebデザインを制作していく上で、
アイデアやインスピレーションを貰える
ギャラリーサイトを紹介したいと思います。
この記事の目次
- 1 Webデザインのギャラリーサイト
- 2 Webデザインの ギャラリーサイト・リンク集まとめ
- 3 ① 国内外の幅広いジャンルの Webデザインのギャラリーサイト
- 4 ② 国内の幅広いジャンルの Webデザインのギャラリーサイト
- 5 ③ 海外の幅広いジャンルの Webデザインのギャラリーサイト
- 6 ④ 縦長のWeb・LP系の Webデザインギャラリーサイト
- 7 ⑤ スマホ・レスポンシブ系の Webデザインギャラリーサイト
- 8 ⑥ WordPressが使われたサイトの Webデザインギャラリーサイト
- 9 ⑦ その他の優れたWebデザインの ギャラリーサイト
- 10 ⑧ 閉鎖したWebデザインの ギャラリーサイト
- 11 最後に
Webデザインのギャラリーサイト
長くデザインをやっている人でも、
「デザインを全て0から考え作るのは大変。」
ぼく自身、学生時代に美術大学へ4年通って、
グラフィックデザインを中心に学んできたので
Webデザインをフリーランスになり本格的に
勉強し始めた時にはそれを特に痛感しました。
Webデザインをする上で、
「どこまでのデザインが可能であるか。」
まだ、何もなしでは制作できない状態ならば、
既存するお洒落なサイトやカッコいサイト等を
参考にしつつWebの構成を考えるのが良いです。
そこでこの記事ではWebデザインを考える時、
ぼくが参考にするサイトをまとめてみました。
Webデザインの
ギャラリーサイト・リンク集まとめ
「Webデザインのサイト・リンク集一覧」
| ジャンル | サイト名 |
| ① 国内外の幅広いジャンルの Webデザイン |
I/O 3000 |
| 1GUU (イチグウ) | |
| ② 国内の幅広いジャンルの Webデザイン |
WebDesignClip |
| 81-web.com | |
| ③ 海外の幅広いジャンルの Webデザイン |
siteinspire |
| awwwards. | |
| ④ 縦長のWeb・LP系のWebデザイン | MUUUUU.ORG |
| WebDesignClip [L] | |
| ランディングページ集めました。 | |
| LP ARCHIVE (LP アーカイブ) |
|
| ⑤ スマホ・レスポンシブ系の Webデザイン |
RWD JP (RESPONSIVE WED DESIGN JP) |
| WebDesignClip [S] | |
| bookma! | |
| ⑥ WordPress使用のWebデザイン | WPesign Gallery |
| WeLoveWP | |
| ⑦ その他の優れたWebデザイン |
CSS Design Awards |
| S5-Style | |
| ブブンデザインアーカイブ | |
| ⑧ 閉鎖されたWebデザイン | straightline |
| ILLUST BOOKMARK (イラストブックマーク) |
|
| にじいろクリップ |
以下では、それぞれ詳しく紹介しています。
① 国内外の幅広いジャンルの
Webデザインのギャラリーサイト
「国内外の幅広いジャンルのサイト」
I/O 3000
I/O 3000は、国内外問わずにお洒落な
Webデザイン制作の参考になるサイトを
紹介しているギャラリーサイトの1つ。
| サイト名 | I/O 3000 |
| ジャンル | 国内外の幅広いジャンル |
| 特徴 | ・日本のWebだけでなく海外のWebの 最新トレンドも押さえることができる。 ・カテゴリー・タグなどからサイト検索や シャッフルボタンでランダム表示も可能。 ・オートスクロールが実装されている。 ・サイトの更新頻度も高め。 |
| おすすめの人 | ・幅広いジャンルやトレンドの Webデザインを見たい人 |
| その他 |
I/O 3000
1GUU (イチグウ)
1GUUは、Webデザイナーのために
様々な優れたWebサイトを集めている
ギャラリー・ポータルサイトの1つ。
| サイト名 | 1GUU (イチグウ) |
| ジャンル | 国内外の幅広いジャンル |
| 特徴 | ・サムネイルと実物サイトの印象が違いないよう 動きのあるWebサイトのサムネイルには、 アニメーションが設置 (PC版) されている。 |
| おすすめの人 | ・幅広いジャンルのWebデザインを見たい人 |
| その他 |
1GUU (イチグウ)
② 国内の幅広いジャンルの
Webデザインのギャラリーサイト
「国内の幅広いジャンルのサイト」
WebDesignClip
WebDesignClipは、
Webデザインの制作の上で参考になる
クリエイティブなWebデザインリンク集。
| サイト名 | WebDesignClip |
| ジャンル | 国内の幅広いジャンル |
| 特徴 | ・サムネイル大きめでページ読み込みも早い 使いやすいギャラリーサイトの１つ。 ・MyClipに追加でログインをしなくても、 お気に入りのページを保存できる。 ・検索も色・レイアウト・カテゴリなどで可能 |
| おすすめの人 | ・国内の幅広いジャンルやトレンドの Webデザインを見たい人 |
| その他 | ・姉妹サイトとして以下の2つのサイトあり 「WebDesignClip [L]」ランディングページ特化型 「WebDesignClip [S]」レスポンシブ特化型 |
WebDesignClip
81-web.com
81-web.comは、Web制作に役立つ
日本の優れたデザインのWebデザイン
Webサイトギャラリー&リンク集です。
| サイト名 | 81-web.com |
| ジャンル | 国内の幅広いジャンル |
| 特徴 | ・実際のWebページにアクセスしなくても ディスプレイのアイコンを押すことで、 実際のWebサイト画面を確認でき便利。 ・「＋」のボタンを押すとログイン無しで、 お気に入りとして保存することも可能。 |
| おすすめの人 | ・国内の幅広いジャンルのWebデザインを 見たい人 |
| その他 |
81-web.com
③ 海外の幅広いジャンルの
Webデザインのギャラリーサイト
「海外の幅広いジャンルのサイト」
siteinspire
siteInspireは、ロンドンにある
デジタルスタジオが運営している
外国のWebギャラリーサイトです。
| サイト名 | siteinspire |
| ジャンル | 海外の幅広いジャンル |
| 特徴 | ・「Styles」「Types」等のカテゴリから ストックされた素晴らしいWebを探せる。 |
| おすすめの人 | ・海外の幅広いジャンルのWebデザインを 見たい人 |
| その他 |
siteinspire
awwwards.
awwwards.は、Webデータ情報量が大量の
海外で有名なWebデザインギャラリーサイト。
「世界で最も優れたWebデザイナー、開発者、
エージェンシーの才能と努力を評価する賞」
| サイト名 | awwwards. |
| ジャンル | 海外の幅広いジャンル |
| 特徴 | ・色んな人からの投票でサイトの記載が決定、 ユーザーの視点でサイトが選ばれる。 ・選んだサイトのデザインやユーザビリティ、 コンテンなどを数値化したデータまで見れ 分析された様々なものをチェックできる。 ・「Site of the Day」という賞では、 毎日の注目のWebを見ることが可能。 |
| おすすめの人 | ・幅広いジャンルのWebデザインを見たい人 |
| その他 |
awwwards.
④ 縦長のWeb・LP系の
Webデザインギャラリーサイト
「縦長のWeb・LP系のサイト」
- MUUUUU.ORG
- ランディングページ集めました。
-
LP ARCHIVE
(LP アーカイブ)
MUUUUU.ORG
MUUUUU.ORGは、縦長のWebデザイン
ギャラリーのリンク集サイトです。
| サイト名 | MUUUUU.ORG |
| ジャンル | 縦長のWeb・LP系 |
| 特徴 | ・LP (ランディングページ) や企業公式ページの 1枚もののペラページを集めたサイトで、 「I/O 3000」と同じく最新トレンド確認可能。 ・クオリティの高いサイトを厳選してある。 ・カテゴリ分けがとても細かくできるので、 デザインのイメージを絞って検索しやすい。 |
| おすすめの人 | ・縦長のWebデザインを見たい人 |
| その他 | ・近年はペラページ制作依頼は多くあるので その際には特に役立ちそうなサイトの１つ。 |
MUUUUU.ORG
WebDesignClip [L]
WebDesignClip [L] は、前述で紹介した
WebDesignClipのLPに特化したサイト。
| サイト名 | WebDesignClip [L] |
| ジャンル | 縦長のWeb・LP系 |
| 特徴 | ・全体的にスタイリッシュで綺麗めの LPが多くUPされているように感じます。 |
| おすすめの人 | ・縦長のWebデザインを見たい人 |
| その他 |
WebDesignClip [L]
ランディングページ集めました。
「ランディングページ集めました。」は
これでもかと言うほどにLPを集めてある
WebデザイナーのためのLPのリンク集。
| サイト名 | ランディングページ集めました。 |
| ジャンル | 縦長のWeb・LP系 |
| 特徴 | ・LPの数がかなり豊富 ・カテゴリー分けがしっかりされている。 |
| おすすめの人 | ・多くのLPデザインを見たい人 |
| その他 |
ランディングページ集めました。
LP ARCHIVE (LP アーカイブ)
LP ARCHIVEもLPが閲覧可能サイトの1つ。
| サイト名 | LP アーカイブ (LP ARCHIVE) |
| ジャンル | 縦長のWeb・LP系 |
| 特徴 | ・登録LPデザインは40,000以上。 ・カラーやカテゴリから検索可能。 |
| おすすめの人 | ・多くのLPデザインを見たい人 |
| その他 |
LP ARCHIVE (LP アーカイブ)
⑤ スマホ・レスポンシブ系の
Webデザインギャラリーサイト
「スマホ・レスポンシブ系のサイト」
RWD JP
(RESPONSIVE WEB DESIGN JP)
RWD JPは、日本国内のレシポンシブ
Webサイトを集めたギャラリーサイト。
| サイト名 | RWD JP (RESPONSIVE WED DESIGN JP) |
| ジャンル | スマホ・レスポンシブ系 |
| 特徴 | ・国内の秀逸なレスポンシブWebサイトが 数多くストックされている。 ・モバイル・タブレット・パソコンと ３種類のサムネイルが一目でわかる。 |
| おすすめの人 | ・スマホ・レスポンシブ系のWebデザインを 見たい人 |
| その他 |
RWD JP (RESPONSIVE WED DESIGN JP)
WebDesignClip [S]
WebDesignClip [S] は前述で紹介した
WebDesignClipのスマホサイトと
レスポンシブWebに特化したサイト。
| サイト名 | WebDesignClip [S] |
| ジャンル | スマホ・レスポンシブ系 |
| 特徴 | ・WebDesignClipとWebDesignClip [L] 同様に数多くのスマホ・レスポンシブWebが ストックされている。 |
| おすすめの人 | ・スマホ・レスポンシブ系のWebデザインを 見たい人 |
| その他 |
WebDesignClip [S]
bookma!
bookma!は、感性を刺激する
Webデザインのギャラリーサイト
(ブックマークサイト) になります。
| サイト名 | bookma! |
| ジャンル | スマホ・レスポンシブ系 |
| 特徴 | ・パソコンとスマホの画面表示が並んでいて、 レスポンシブデザインを意識して確認できる。 ・画面上の部分のアイコンで切り替えて、 パソコンかスマホに限定し見ることも可能。 ・サムネイルに閲覧数を見ることができ、 |
| おすすめの人 | ・レスポンシブデザインも意識しながら、 幅広いジャンルのWebデザインを見たい人 |
| その他 |
bookma!
⑥ WordPressが使われたサイトの
Webデザインギャラリーサイト
「WordPress系のサイト」
WPesign Gallery
WPesign Galleryは、
WordPressを使用した国内外のWebサイトを
収集したWebデザインギャラリーになります。
| サイト名 | WPesign Gallery |
| ジャンル | WordPresss使用 |
| 特徴 | ・WebデザインでWordPressを使うなら 押さえておきたいサイトの１つ。 ・それぞれのWebサイトに対しても、 コメントが書かれているのが特徴的。 |
| おすすめの人 | ・WordPressで作られたWebデザインを 見たい人 |
| その他 |
WPesign Gallery
WeLoveWP
WeLoveWPは、WordPressで作られた
Webサイトを集めたギャラリーサイト。
| サイト名 | WeLoveWP |
| ジャンル | WordPress使用 |
| 特徴 | ・ブログ、ポートフォリオサイトなど数多く ストックされているWPギャラリーサイト。 ・WordPressのテーマも載っているので、 Webの参考だけでなくテーマ選びでも役立つ |
| おすすめの人 | ・WordPressで作られたWebデザインを 見たい人 |
| その他 |
WeLoveWP
welovewp.com
⑦ その他の優れたWebデザインの
ギャラリーサイト
「その他の優れたサイト」
CSS Design Awards
CSS Design Awardsは、
UI/UXやイノベーション等の観点から
優れているWebデザインを選んでいる
ギャラリーサイトの1つになります。
| サイト名 | CSS Design Awards |
| ジャンル | UI/UX・イノベーションが優れたサイト |
| 特徴 | ・他のギャラリーとは違う観点でWebをストック ・サイト特徴や色、分野等の色んなフィルターで Webデザインを閲覧できる。 |
| おすすめの人 | ・UI/UXが優れているようなWebデザインを 見たい人 |
| その他 |
CSS Design Awards
S5-Style
S5-Styleは、全ユーザーがキュレーターとなり
価値あるデザインをピックアップできる
共有型のWebデザインギャラリー。
| サイト名 | S5-Style |
| ジャンル | 共有型のWebデザインギャラリー |
| 特徴 | ・「Good Web Designs」は、 キュレーションオーナーがハイクオリティな Webデザインを厳選して紹介。 ・「All Designs」は、皆さんが登録した 全てのWebデザインが並ぶタイムライン。 |
| おすすめの人 | ・幅広いジャンルのWebデザインを見たい人 |
| その他 | ・近年、サイトリニューアルして 新しくなったギャラリーサイト |
S5-Style
S5-Style (リニューアル前サイト)
ブブンデザインアーカイブ
ブブンデザインアーカイブは、
国内のWebサイトのパーツデザインを
集めたギャラリーサイトになります。
| サイト名 | ブブンデザインアーカイブ |
| ジャンル | Webサイトのパーツデザイン |
| 特徴 | ・Webデザインを制作する際に参考になる ヘッダー、見出し、文字装飾、アクセント 様々な各Webパーツをまとめてあるサイト。 |
| おすすめの人 | ・様々な各Webパーツを見たい人 |
| その他 |
ブブンデザインアーカイブ
⑧ 閉鎖したWebデザインの
ギャラリーサイト
「閉鎖したサイト」
- straightline
-
ILLUST BOOKMARK
(イラストブックマーク) - にじいろクリップ
今まで大変お世話になった
Webデザインのギャラリーサイト。
本当にありがとうございました。
straightline
straightlineは、国内のトレンドの
Webサイトを集めたギャラリーサイト。
| サイト名 | straightline |
| ジャンル | 国内の幅広いジャンル |
| 特徴 | ・スクロールでサイトのトップページ画像を ずっと閲覧できるようになっているので、 簡単に参考になるWebサイトを探せる。 |
| おすすめの人 | ・国内のトレンドのWebデザインを見たい人 |
| その他 |
ILLUST BOOKMARK
(イラストブックマーク)
ILLUST BOOKMARKは、その名の通り
イラストが使用されているWebサイトを
紹介しているリンク集サイトになります。
| サイト名 | ILLUST BOOKMARK (イラストブックマーク) |
| ジャンル | イラスト・アニメ系 |
| 特徴 | ・可愛い系やナチュラル系のサイトが 多めにストックされている。 |
| おすすめの人 | ・イラストが使用されているWebサイトを 見たい人 |
| その他 |
にじいろクリップ
にじいろクリップは、
アニメとゲーム等のWebサイトを
まとめて見れるブックマークサイト。
| サイト名 | にじいろクリップ |
| ジャンル | イラスト・アニメ系 |
| 特徴 | ・アニメやゲーム関連のWebデザインの 参考になるサイト。 |
| おすすめの人 | ・アニメやゲーム関連のWebデザインを 見たい人 |
| その他 |
最後に
カッコいい・優れたWebデザインを作ったり
今よりデザインのアイデア力上げていくには、
Webデザインのギャラリーサイト・リンク集で
トレンドや最先端デザインを知ることが大切。
自分なりに参考になるサイトをまとめて、
Webデザイン制作に役立てみてくださいね。
Webデザインだけでなくデザインやイラスト
全般でアイデアの参考になるサイトは下記事。
