Web Design

【初心者向け11選】Webデザインギャラリー・参考サイトをまとめました

2021年6月28日

Webデザイン参考サイト
  • 「Webデザインの参考サイト、特徴を知りたい」
  • 「参考サイトはたくさんあるけれど、使いやすく見やすいのはどれ?」

この記事はそんなWebデザイン初心者へ向けて書いています。

 本記事の内容

・Webデザインの参考サイト、ギャラリー11選

 本記事の信頼性

・2019年1月からWordPressで当ブログ開設(最高で月間62,000PV)
・2021年6月からWebデザインの職業訓練に通っています(6ヶ月間)
・使用テキスト:Webデザイン良質見本帳

優れたWebサイトを作るためには、ギャラリーサイトでトレンドやレイアウトを日々チェックするのが重要です。

本記事では、最新のデザインや技術のトレンド、情報設計の参考になるWebデザインギャラリー、参考サイトをまとめました。

更新頻度の高いサイトもあり、デザインを見る目を養いたい方にも最適。
職業訓練校の先生おすすめのサイトも1つ掲載しています(MUUUU.ORG)。

この記事を読むことで、初心者でも使えるWebデザインの参考サイト11選がわかります。

なお、Webデザイン基礎知識は下記記事で詳しく解説しています。
»【初心者向け】Webデザインの基礎知識をまとめました【入門から色彩、配色まで】

こーいち
参考になるWebサイトは自分なりにまとめておくと、サイト制作時に重宝します。

【初心者向け11選】Webデザインギャラリー・参考サイトをまとめました

Webデザイン参考サイト

 参考サイト11選

上記サイトはプロのWEBデザイナーならほとんど知っているものばかり。
初心者の方はWEBデザインの練習やインスピレーションのために知っておいて損しません。

順番に解説します。

1.ズロック

ズロック

かっこいいWebデザインのリンク集。

左上のタグマークを選択すると業種やレイアウト、カラー・イメージ、種類別に絞り込めます。

» ズロック

2.IKESAI

イケサイ

Webサイトをカテゴリやカラー別に検索できます。

 IKESAIの特徴

・多様なデザイン
・1,400以上の事例数
・サイト一覧の画像サイズが小さめ

全国のWebサイト制作会社がまとめられています。

こーいち
各地のWeb制作会社を探している人には便利です。

» IKESAI

3.SANKOU!

sankouサイト

Webデザイン制作の参考になる国内だけのステキなサイト集。

・Webサイト
・ECサイト
・ランディングページ
・コンテンツページ

事例数は2,200以上で、更新頻度も高いです。

右上のタグマークからあらゆるジャンルやスタイル、カラー、動きなどでサイトを絞り込めます。

使いやすく、サイト一覧も見やすいです。

下記などでも検索できるので重宝します。

・1カラム+2カラム
・ステキな下層ページ
・ステキなレイアウトあり
・シズル感、訴求力のある写真

» SANKOU!

4.I/O 3000

Webデザイン

Webデザインに関わる人のためのギャラリーサイト。
少しサムネイルが大きめです。

更新頻度が高く、国内外を問わず毎月20件ほど追加されています。

検索にはカテゴリ・タグ・色のほかに「テキスト検索」も可能。

「シャッフル機能」もあります。
インスピレーションを得たいときや、新しい視点が欲しいときに使えます。

事例数は5,500以上。

こーいち
投稿日が掲載されているのも珍しいですね。

» I/O 3000

5.Pinterest

pinterest

気に入ったデザインのアイデアを集めて、自分のアカウントのボードに保存できます。
センスが良いものが多い気がします。

» Pinterest

6.Awwwards

Web Design参考サイト

世界のWebデザインを各国のデザイナーが採点し、優秀作品を紹介しています。
高品質でクリエイティブなデザインが集まっています。

サムネイルも大きく見やすい。
投稿日も掲載されています。
掲載数は9,900以上。

毎月、200万以上のユニークユーザーがサイト訪問しています。

こーいち
有料ですが、サイト投稿も可能。

» Awwwards

7.bookma! v3

Webデザイン参考サイト一覧

Webデザインに特化したブックマークサイト。
どのサイトも独自性が強く、ひとつひとつチェックしたくなります。

 特徴は以下のとおり。

・サムネイルが大きい
・文字検索しかできない
・PC、スマホの両方が見れる

PC、スマホビューの両方を同時に見れるのが大きな特徴。
フィルターでどちらかに絞ることもできます。

更新数も高く、1日5つ前後の更新もあります。

こーいち
スマホビューにして一気に閲覧もありです。

» bookma! v3

8.81-web.com

Webデザイン参考サイト

Webサイト制作に役立つ、デザイン性に優れたWebデザインを集めたサイトギャラリーとリンク集です。

 81-web.comの特徴

・5,000以上の事例
・掲載日の表示あり
・サムネイルも大きめで見やすい
・PCビュー、スマホビューを閲覧可
・日本国内のWebサイト集めたギャラリー
・検索はカテゴリ、カラー、タグ、Webフォントで絞り込み可

掲載日が表示されているので、いつ頃のサイトなのか確認できます。
気に入ったデザインは、サムネイル下の「+ボタン」で保存できます。

更新頻度も高く、1日1サイトのペース。

こーいち
見やすいサイトです。
» 81-web.com

9.MUUUUU.ORG

Webデザイン参考サイト

縦に長いレイアウトで、クオリティの高いWebデザインのリンクを集めたサイトです。

「製作者の立場に立って、実務の参考にしやすいサイトだけを集める」というコンセプトでつくられたギャラリー。
左の「CATEGORY」にカーソルを合わせると、絞り込み検索ができます。

 MUUUUU.ORGの特徴

・4,800以上の事例
・サムネイルは大きめで見やすい
・デザイン性やユーザビリティ、UXも重視したサイト集
・検索はINDUSTRY、DESIGN、TYPE、COLORで絞り込み可

フラットデザインやタイポグラフィ、シズル感、パララックス(視差効果)など、デザイン目線のキーワード検索もできます。
Webサイトのイメージ段階では便利です。

職業訓練校の先生もおすすめされていました。

トレンドを意識したハイクオリティなWebデザインを集められているサイトです。

こーいち
「MUUUUU」の検索でヒットするので、ラク&覚えやすいですね。

» MUUUUU.ORG

10.straightline bookmark

Webデザイン参考サイト

Webデザインの参考・お手本となるサイトを集めた、Webデザイナー向けのサイトギャラリー・リンク集。

 straightline bookmarkの特徴

・26,000以上の事例数
・1日に2〜3サイトを更新
・サムネイルサイズを変更できる
・国内外の優れたWebデザインを収録
・ユーザーのブックマークやいいねの数が見れる

サムネイルサイズの変更は珍しい機能。
サイズを小さくして、たくさん閲覧するのに便利。

絞り込み検索は、カラーや業種、言語、レイアウトなどのタグでできます。

こーいち
格段の掲載数を誇ります。

» straightline bookmark

11.Responsive Web Design JP

Webデザイン参考サイト

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト。

 Responsive Web Design JPの特徴

・5,200以上の事例集
・サムネイルにはスマホ、タブレット、PCが一覧表示
・検索は、カテゴリやカラー、技術仕様で絞り込み検索可

スマホ、タブレット、PC表示を一度に確認できる珍しいギャラリーサイト。

「+MORE」を押すと、サイト概要がわかります。

高品質のサイトが多く、趣向もさまざま。
参考サイトを見つけやすいはずです。

こーいち
ザッピング感覚で3画面のデザインをチェックしてみるのもありです。

» Responsive Web Design JP

【まとめ】Webデザインギャラリー・参考サイトでデザインセンスを養おう

Webデザイン参考サイト

本記事ではWebデザインの参考になるギャラリーサイト11個をまとめました。

それぞれ特徴や掲載サイトの傾向、検索方法などが違います。
以下のように用途や目的に合わせて各サイトを使い分けるのが吉。

SANKOU! ※1つのサイトで完結できるバランス型
81-web.com ※日本国内のサイトだけを見たい
MUUUUU.ORG ※客観的な評価、人気を知りたい
Responsive Web Design JP ※レスポンシブデザインを見たい

良いデザインのWebサイトはインスパイアーの材料になります。
どのようにコーディングするのか考えつつ閲覧していくのも勉強になるはず。

たとえば、ブログ上達のコツは、成功しているブロガーの記事を全部読むこと。

Webデザインも同じです。

Webデザインを学ぶには、良いデザインをたくさん見ること。

こーいち
優れた先人のデザインを見ることは、デザインセンス上達に欠かせません。

こーいちより

P.S. Webデザインのギャラリーサイトでデザインセンスを養おう。

関連記事Webデザイン科・職業訓練の日記をブログに書く3つ理由【12日目に学んだHTML、CSS】
関連記事【未経験】Webデザインの独学は難しいと感じた3つの理由【職業訓練9日目に勉強したCSS】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.