WEBデザイン

Webデザイン参考ギャラリーサイト13選とおまけ

Webサイト制作でどうしてもデザインに詰まってしまうことってありませんか、、、?
私はそんな時、色んなサイトからインスピレーションをいただいてるのですが、ここで私が参考にしてるサイトを紹介いたします。

・インスピレーションとして、サイトを参考にするも良し!
・お客様との打ち合わせやイメージのすり合わせに使うも良し!

多くのサイトを見て、インプットし、デザインの引き出しを増やしていくのにぜひ活用してください^^

Webギャラリーサイト

SANKOU!

SANKOU!

日本国内のみのサイトが見れます。
「STUDIOで制作」のものも見れるため、ノーコード実装を行なっている私は、STUDIOのデザイン – 実装までのお仕事の際によく使用してます。
また、細かく分類もされているので、複数検索もできるのが嬉しいポイント!

cms design

cms design

WordPressをメインとしたCMSで構築されたギャラリーサイト。
日本語サイトのみ。クオリティの高いデザインが勢揃いです!
こちらのギャラリーサイト自体が真っ黒でかっこいい感じのデザインで好きです(嗜好入りました

Brilliant Design Collect

Brilliant Design Collect

「機能的で美しい」をテーマにしているギャラリーサイト。
クオリティが高く、デザインも最先端なので新感覚なデザインに刺激を受けること間違いなし!

URAGAWA

URAGAWA

各シングルページでは、「同一業界」・「同一サイトタイプ」が表示されるので、業界を絞ってデザインを見たい時などによく見ています。
こちらのギャラリーサイトの制作者の言葉で「今日も経済は、誰かのアウトプットによって動かされている」という言葉があります。ぜひ、URAGAWAでインプットし、新たなアウトプットで経済回していきましょう ☺︎!

1GUU

1GUU

サムネイルが既に動きがあるので、アニメーションのあるデザインにはイメージが湧きやすく探しやすいギャラリーサイト。
左側にカーソルを合わせると他国(国)のサイトを選ぶことができ、右側にカーソルを合わせるとカテゴリーが出てきます。初見の時、その多さにびっくりしました。

Good Web Design

Good Web Design

多くのサイトが続々と更新されていくので、見るたびにサイト数が増えていていつも目を奪われるデザインと出会えているギャラリーサイト。現時点(2023.2.20)の段階で5000件以上が登録されています。
ギャラリーサイトのデザイン自体もシンプルで見やすいのもお気に入り。
下にはデザイナー・クリエイターの求人情報もあるので、気になる方は要チェックです!

現代デザイン

現代デザイン

クリックせずとも、下層ページのデザインも確認できるのがポイント。
国内のサイトを中心に多くのサイトが登録されてます。
クリックした先には、似たようなサイトも下に紹介されるので参考になります!

81-web.com

81-web.com

カテゴリー、色、フォントなど細かくタグ分けされているので絞り込みの検索が強いリャラリーサイト。
他ジャンルのサイトが登録されているので、私はデザインの勉強をする時間などで見ることが多いです。

Web Design Clip

Web Design Clip

メインカラーだけでなく、サブカラーやレイアウトまでも検索にかけられるので色んな角度からインプットが可能。ランディングページのご依頼が多かった時期に、かなりお世話になりました!最新のトレンドも押さえてるので今風のデザインのご依頼にはもってこいです。
更新頻度も高いので新しいデザインのインプットには困りません。

MUUUUU.ORG

MUUUUU.ORG

縦に長いサイトデザインが多く掲載されているギャラリーサイト。
長いサイトには離脱率をも考えないといけないなどレイアウトにより気を使う際に、よく参考にしてます。
カテゴリーには、業種の検索の他にも、「TOPページにJS多様」、「サークル(円)を使ったデザイン」など言葉だけでもインスピレーションが湧くほどのカテゴリーで検索できるのでおすすめ。

マネるデザイン研究所

マネるデザイン研究所

駆け出しさんなどにはもってこいのギャラリーサイトかもしれません!!
「マネしたいポイント」や「応用できそうな場面」など、自分が見ただけでなく既にデザインの研究がされているので、一度自分でサイトを見て、新しいデザインの視点に後に気づくことができます。
デザインには正解がなく、独学の方は迷子になることもあると思うので、気持ち、寄り添ってくださるギャラリーサイトさんではないでしょうか^^

S5 Sty!e

S5 Sty!e

右上のフィルターから検索フィルターをかけられ、複数検索ができるギャラリーサイト。
CSS・WordPress・音ありなど多くの機能や制作方法から造られたサイトが見ることができ、私はこちらで何時間も見入ってしまったことだあります笑
お気に入りもできますので、たくさんコレクションして、インプットからアウトプットに繋げてください!

Awwwards

Awwwards

こちらは世界中のサイトを見ることが可能。
ただのギャラリーサイトではなく、世界中のWebサイトからの応募を受け、最もクリエイティブなデザインを投票で決めるサイト。
インタラクティブなアニメーションに強いサイトが多い印象を持ちます。
自分のデザインも応募が可能なので、こちらに応募することも目標に掲げて腕を上げていくのも良い刺激になるのでは!

バナーギャラリーサイト

BANNER LIBRARY

BANNER LIBRARY

今のシーズンにおすすめのタグからも検索が可能。
テイストや色やメディア(Twitter / instagram)などの幅広いカテゴリーでデザインを見れるので重宝してます。

Bannnner.com

Bannnner.com

バナーサイズからも検索が可能。
他ジャンルのバナーが数多く掲載されているので、新しい発見もできるかもしれません!

retrobanner

retrobanner

こちらも他ジャンル、他サイズのバナーがありますが、なんといってもすごいの登録数。
13,000件 (2023.2.20時点) も超えるバナー数がありシンプルな仕様も気に入ったいます。

スマホ参考ギャラリーサイト

Responsive Web Design JP

Reponsive Web Design JP

一度にPC、タブレット、スマートフォンのデザインがチェックできるギャラリーサイト。
業種検索はもちろん、技術面からの検索もできるのもポイント。
タブレットのデザインはあまり掲載してないところも多いので、重宝してます!

bookma!

bookma!

PC画面+スマホでも一目瞭然に確認ができますが、上部アイコンでスマホのみのデザインに切り替えることも可能。
各サイトに使用されているカラーも確認ができるのもポイントです。

sps collection

sps collection

業種と配色によって絞り込み検索が可能。
お気に入りを簡単にできる仕様になっているので、後で見返しやすいです。
また、スマホサイズのサムネイルがずらっと並んでいるので、イメージもかなりしやすいのではないでしょうか。

AGT smartphone design gallery

sps collection

サムネイルをホバーすると、自動でスクロールされ全体デザインが見える仕様に。
時間のない時などにサラッと見ることができるので短時間で多くのデザインを見たい方におすすめのギャラリーサイトです。

その他おすすめギャラリーサイト

Pinterest

Pinterest

こちらは多くの方が使ってるかもしれませんね!CMでもお馴染みのピンタレストは、Webデザイン以外にも、名刺、バナーなどでお世話になってます。
「おしゃれ」「スタイリッシュ」「シンプル」など、イメージしてるデザインを検索にかけることができるのもポイント。

Parts.

Parts.

パーツごと(セクションごとに)デザインの確認ができるギャラリーサイト。
セクションで迷ってる際に、とっても役に立ちます!
「お問合せ」、「CTA」、「エラー・404」と他セクションでのデザインが勢揃い。

フッターデザイン.com

フッターデザイン.com

フッターのみのデザインに特化したギャラリーサイト。
ロゴメイン、イラストのヘッダーなどメニューから検索が可能。

いかがでしたでしょうか?
まだまだこの世にはたくさんのギャラリーサイトがありますが、私がよくお世話になっているサイトを集めてみました!
ぜひ、インプットで引き出しを増やし、理想のデザイナーの一歩へ共に頑張っていきましょ〜!!

WEBデザイン × プログラミングで理想の生活を!