Blogger

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

2021年6月28日

【初心者向け11選+α】Webデザインギャラリー・参考サイトまとめ
  • 「Webデザインの初心者向け参考サイト、特徴を知りたい」
  • 「参考サイトはたくさんあるけれど、使いやすく見やすいのはどれ?」

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

 本記事の内容

  • Webデザインの初心者向け参考サイト、ギャラリー11選+α

 本記事の信頼性

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

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

本記事では、最新のデザインや技術のトレンド、情報設計の参考になるWebデザインギャラリー、参考サイトをまとめました。
この記事を読むことで、初心者でも使えるWebデザインの参考サイト11選がわかります。

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

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

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

【初心者向け11選+α】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で勉強されている方は多いです。
Twitterから5つ、引用します。

忙しくてデザインする時間がとれない時のオススメ勉強法は「目を鍛える」です。今日は実際にぼくがやってる方法をご紹介しますね。pinterestで「サイト デザイン」で検索。気になるサイトがあれば画像をクリック。デザインをじっくり観察。いいなと感じた所を書き出すだけで引き出しが増えます。

出典:Twitter

PinterestでオシャレなWebサイトを色々集めてるんだけど、このオシャレサイトたちのワイヤーフレームも見てみたいなと思ったり。 デザイン演習課題が楽しいんだけどなかなか進まないのは引き出しがまだまだ少なすぎるからなんだろうな。

出典:Twitter

もし、僕が今からWeb制作を勉強するなら ・ProgateでHTMLとCSSを、基礎学習 ・pinterestとかで作れそうなLPを探す ・探したLPの中で3つくらい模写する ・クラウドソーシングで、案件を探す 案件を探すときは、参考サイトが模写と同じレベルか、作れそうなイメージが浮かぶものを選ぶ感じ

出典:Twitter

勉強当初から続けていること 
Pinterestで移動時間や空いた時間に 画像を集めています

デザインの引き出しを増やすため 常に分析を心がけています
 集めた画像はカテゴリー別で まとめて後から見返しています

出典:Twitter

突然ですが*parfum doux*創業前から保存し続けている"私の大好きなもの集"
いろんなサイトを日々見て勉強してますが、Pinterestが私の中で一番で、好きなものを見つけては保存し、そこから創作する時のインスピレーションを得ています
今では保存枚数が何千枚に 
こう見ると紙類好きみたい

出典:Twitter

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

+α.WP-Search

最後に「WP-Search」を紹介します。

「WP-Search」はWebデザインのギャラリーサイトではありません。
「WP-Search」は、URLからWordPressテーマ、プラグイン、サーバーなどを解析し、自動的に分類するサイトです。

気になるWebサイトが「どんなWordPressテーマやプラグインを使っているのか」気になるとき役立ちます。
ただし、WordPress限定です。

WP-Searchの概要

解析したいサイトやブログのURLを入力するだけで、WordPressのサーバー、テーマ、プラグインなどが解析され、カテゴリーごとの事例集に自動分類されます。
その他にも、コーポレートサイトやブログメディアにも自動分類されます。

 WP-Searchの使い方 (特定サイトを調べたいとき)

  1. 検索フォームに解析したいサイト・ブログのURLを入力する
  2. サーバー、テーマ、プラグインなどの分析結果が表示される

テーマ、プラグインなどに絞って調べたいときは、カテゴリーメニューから目的のテーマ、プラグインなどを選択します。
そのテーマ、プラグインなどを使用しているサイト一覧が表示されます。

詳しくは、下記リンクより確認できます。
» WP-Search

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

Webデザイン参考サイト

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

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

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

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

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

Webデザインも同じです。
優れた先人のデザインを見ることは、デザインセンス上達に欠かせません。

以上です。

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

関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由
関連記事Webデザインのかわいい参考サイトまとめ【女性や子ども向けもあり】

-Blogger

Copyright © Blog Chronicle , All Rights Reserved.