Webデザイン制作の参考サイトおすすめ11選

参考になるWebデザインをまとめて確認したい

Webデザインで参考になるサイトを知っていると、Webデザインの勉強になるだけでなく、ヒラメキや気付きが得られます。

今回は、数ある国内外のWebデザインの参考になるサイトを集めたギャラリーサイトの中から、これだけは押さえておきたいという11サイトを厳選し、まとめてご紹介します。

とくに次の点に重点を置いて厳選しました。

  • サイト自体の見やすさ、使いやすさ
  • 紹介されているWebサイトのクオリティの高さ

株式会社SAMURAI

SAMURAI ENGINEER Blog編集部

日本初の現役エンジニア講師によるマンツーマン専門プログラミングスクールを運営。卒業生は累計28,000名以上。挫折しないプログラミングスクールNo.1にも選ばれています。2013年創業以来の運営で得た知見をもとに、プログラミング学習・スクールの選び方・エンジニアのキャリアについて専門的な立場から解説します。

Webデザインとは?

Webデザインとは

Webデザインとは、WebサイトやWebページの見た目をデザインすることをいいます。

今見ているサイトを例にすると、サイトの色合いやメニューの表示位置などのレイアウトを決めることがWebデザインです。

ユーザーの使いやすさを形にするには、視覚的なデザイン性だけでなく機能性も必要です。そのためHTML、CSSやJavaScriptなどの言語を駆使するスキルも必要になります。

また、Webデザインを担当する人をWebデザイナーと呼びます。Webデザイナーの仕事に興味がある方は、こちらの記事を参考にしてください。

Webデザイナーの仕事内容は?働き方や年収、未経験で目指す方法
更新日 : 2021年6月15日

Webデザイナーへの転職を考えている方は、こちらの記事を参考にしてください。

Webデザイナーになるには?必要なスキルや未経験で転職する方法
更新日 : 2021年5月23日

編集部おすすめの国内外Webデザインのギャラリーサイト一覧

国内外Webデザインのギャラリーサイト一覧

SAMURAI ENGINEER編集部がおすすめする、国内外のWebデザインのギャラリーサイトを紹介します。

種類ギャラリーサイト名
国内のWebデザインのギャラリーサイトI/O 3000
bookma! v3
ズロック|Webデザインのリンク集
Web Design Clip
Responsive Web Design JP
S5-style
海外のWebデザインのギャラリーサイトMUUUUU.ORG
AWWWARDS
WebDesignFile
CSS mania
Siiimple

国内のWebデザインおすすめサイトまとめ

国内のWebデザインおすすめサイト

まずは、国内のWebデザインのギャラリーサイトでおすすめのサイトを紹介します。

ギャラリーサイトの鉄板「I/O 3000」

国内、海外どちらも含めて、Webデザインの参考になるサイトが揃えられています。サイト自体もオシャレで見やすく、スムーズに使えて使い心地は抜群です。

おすすめポイント

  • 色やキーワードなどでサイトを絞れる
  • アーカイブ式になっていて最新のWebサイトをチェックできる
  • 更新頻度が多い

検索機能が充実している「bookma! v3」

出典:bookma!

日本、海外問わずおしゃれなWebサイトを閲覧できるWebデザイン参考サイトです。テイストや、背景色などにチェックをしていきながら、簡単にWebサイトを絞っていけるようになっています。

おすすめポイント

  • お気に入り登録機能が使える
  • 自身で投稿もできるのでアウトプットの場としても良し

サイトの操作性が抜群な「ズロック|Webデザインのリンク集」

これも世界中のおしゃれなWebサイトを参考にすることができます。豊富な検索カテゴリと、スムーズな操作性が光ります。

おすすめポイント

  • ギャラリーのサイズ変更をして一度に大量のサイトを見比べられる
  • ナビゲーションがわかりやすい

幅広いサイトを検索可能な「Web Design Clip」

1000個を超える豊富な紹介Webサイト数を誇っていますので、このサイトを使えばきっと参考になるWebサイトが見つかるでしょう。カテゴリ検索や、お気に入り機能もかなり充実していて、使い勝手が素晴らしく良いです。

おすすめポイント

  • キーワードやレイアウトなどでサイト検索できる
  • ユーザー登録しなくてもお気に入り機能が使える
  • スマホ対応・LPなども幅広く検索可能

サイズ別に見る「Responsive Web Design JP」

スマートフォンやタブレット、PCの画面に対応した国内Webサイトに特化したギャラリーサイトです。端末毎に表示した時の状況が並べて表示されているので、デザインにどのような変化をつけるといいのかが、一目でわかります

おすすめポイント

  • PCサイズ・タブレットサイズ・スマートフォンサイズの見た目を比較して見比べられる
  • MOREで詳細を表示すると、似たWebデザインを見る

ログイン不要でお気に入り登録できる「S5-style」

ログインせずに、デザインが気に入ったWebサイトをお気に入り登録できるギャラリーサイトです。また、検索カテゴリが細かくわかれており、検索しやすく便利です。

おすすめポイント

  • ログイン不要でデザインが気に入ったWebサイトをお気に入り登録できる
  • 検索カテゴリが細かくわかれ、検索しやすい

海外のWebデザインおすすめサイトまとめ

海外のWebデザインおすすめサイト

次に海外のWebデザインのギャラリーサイトでおすすめのサイトを紹介します。

細かいカテゴリ別に検索可能な「MUUUUU.ORG」

カテゴリがデザイン別、色別などと豊富で、検索がしやすい仕様になっています。数あるWebサイトの中でも、クオリティの高いものが厳選されて紹介されています。

おすすめポイント

  • 縦長なサイトが特に多く紹介されている
  • サイト自体がとてもシンプルで使い易い

Webサイト総選挙で掲載サイトを決定する「AWWWARDS」

ユーザーが投票からギャラリーに掲載するWebサイトを決定する、という面白い方法を取っているギャラリーサイトです。

毎日その日の投票で1番になったWebサイトを表彰しています。ユーザー視点が養われるので、毎日チェックしてみてはいかがでしょうか。

おすすめポイント

  • 掲載サイトをユーザーの投票で決定する
  • 毎日総選挙No.1のサイトが選ばれる

大胆なデザインが多数「WebDesignFile」

スタイリッシュなデザインを多く掲載するギャラリーサイトです。大胆なデザインを使ったサイトが多いため、クリエイティブなWebサイトを参考にしたい方におすすめです。

おすすめポイント

  • 大胆なデザインを使ったサイトが見たい
  • カテゴリーや色合い、キーワードなどで検索できる

海外のユーザーの集客にぴったり「CSS mania」

海外のユーザーがよく利用するギャラリーサイトです。

ギャラリーサイトに10ドル支払うことで自分のサイトを掲載できます。自分のサイトに海外のユーザーを集約したい方におすすめです。

おすすめポイント

  • 自分のサイトをギャラリーサイトに掲載したい
  • お気に入り登録したい(要ログイン)

シンプルなデザイン多数「Siiimple」

シンプルなWebデザインを多く掲載しているギャラリーサイトです。シンプルなデザインを探している方は、ぜひ訪れてみてください。

おすすめポイント

  • シンプルなWebデザインを見たい
  • カテゴリ検索がしやすい

参考になるWebデザインポートフォリオ3選

参考になるWebデザインポートフォリオ

続いて、Webデザインをするうえで参考になるポートフォリオ(制作実績)を紹介します。

キャッチーな色使いの参考にしたい「TNGC GRAPHICS」

フリーランスのWebデザイナーとして活躍されているTNGC GRAPHICSさんです。制作実績にTNGC GRAPHICSさんのキャッチーな色使いやイラストから、得意な分野がよくわかるポートフォリオが掲載されています。

おすすめポイント

  • ポートフォリオが多く、キャッチャーな色使いを参考にできる
  • FAQがWeb制作でのお困りごとの参考としても利用できる

大企業で採用されるWebデザインを学べる「maima.me」

出典:maima.me

Webディレクター・Webデザイナーで活躍されている、Mai Imakitaさんのポートフォリオを集めたWebサイトです。

シンプルなデザインが特徴的で、過去の制作物にはUNIQLOなど大手企業のWebサイトもあり、非常に参考になります。

おすすめポイント

  • シンプルなWebデザインが多数
  • 大手企業で採用されるWebデザインを学べる

写真・動画もプロデュースする「UNDERLINE」

出典:UNDERLINE

Webディレクター・Webデザイナーで活躍されている徳田 優一さんのWebサイトです。Worksに徳田さんが携わったシンプルで洗練された過去の成果物が紹介されています。

おすすめポイント

  • シンプルで落ち着いたWebデザインが多数
  • 写真や動画も担当したWebデザインも紹介

Webデザインの学習法

Webデザインの学習法

Webデザインに興味が湧いた方、ぜひWebデザインを勉強してみてはいかがでしょうか。

Webデザインを学習する方法には、次の3つの方法があります。

  • 学習サイトを使う
  • 本を購入する
  • スクールでプロに学ぶ

それぞれの学習法を詳しく紹介します。

学習サイトを使う

学習サイトは一部コンテンツを無料で勉強できるため、気軽に勉強を始めたい方におすすめです。

学習のコツは、複数の学習サイトで勉強しないことです。1つのサイトを集中的に勉強し、合わなかったら他のサイトといった形で進めると、効率がいいでしょう。

無料で学習できるサイトについてもっと知りたい方は、こちらの記事を参考にしてください。

Webデザインを無料で独学するためのサービスをまとめてみた!
更新日 : 2021年4月7日

本を購入する

本を使う

Webデザインを体系的に学びたい方は、本がおすすめです

学習のコツは、本に書いてあるサンプルコードをPCに打ち込み、実際に動かすことです。そのため、サンプルコードが豊富な本を選ぶといいでしょう。

Webデザインを本で勉強しようと思った方は、こちらの記事を参考にしてください。

Webデザインを基礎から学べるおすすめ本20選【2021年版】
更新日 : 2021年8月20日

スクールでプロに学ぶ

学習サイトと本でWebデザインを独学で学ぶのは大変です。

Webデザインでは次のような知識が必要になるので、スキルを身につけるには手間がかかります。

  • デザインの基礎
  • HTML、CSSなどの言語
  • PhotoshopなどのWebデザインツール

スクールなら全部まとめて学べるので、独学で勉強する自信がない方におすすめです。

Webデザイン関連のスクールは次のリンク先にまとめていますので、あわせて参考にしてください。

【徹底比較】Webデザインスクールおすすめ10校を4つの観点から分析
更新日 : 2021年4月30日

効率よくWebデザインを学ぶならスクールがおすすめ

効率よく学ぶならスクールがおすすめ

効率よくWebデザインを学ぶにはどうしたらいいの?

独学では、困った時に相談できる人がいなくて、時間がかかるケースが多いです。そのため効率よくWebデザインを学びたい方は、スクールを利用して学習するのがおすすめです。

スクールの受講費は、本や学習サイトに比べると高額です。しかしながら本や学習サイトと違い、学習サポートやカリキュラムで実践的なスキルを習得できます。

SAMURAI ENGINEERなら、経験が豊富なプロのWebデザイナーやエンジニアを中心とした講師陣が、あなたの目的やレベルに合わせてカリキュラムの作成から指導までをマンツーマンで行います。

独学が続かない理由としてあげられる「相談する人がいない」「何を勉強したらわからない」や「モチベーションが続かない」という3つを解決します。

これからWebデザインを学んでプロとして仕事をしたい方は、プログラミングスクールの活用を検討してみてはいかがでしょうか?当「SAMURAI ENGINEER」ではオンラインで無料カウンセリングを実施していますので、まずはお気軽にお問い合わせください。

無料カウンセリングはこちら

まとめ

SAMURAI ENGINEER編集部がおすすめする、国内外のギャラリーサイトを11サイトご紹介しました。

Webデザインは奥が深いものです。参考になるヒントをたくさん持っているか否かで、クオリティや生産スピードが格段に変わってきます。

この記事があなたのWebデザインの参考になれば嬉しいです。

この記事のおさらい

Webデザインとは?

WebサイトやWebページの見た目をデザインすることをいいます。今見ているサイトを例にすると、サイトの色合いやメニューや記事を表示する位置を決めることがWebデザインです。

おすすめの国内外ギャラリーサイトは?

10サイトあります。詳細は、本記事「編集部おすすめの国内外Webデザインのギャラリーサイト一覧」で紹介しています。

Webデザインの学習法は?

「学習サイトを使う」「本を使う」「スクールでプロに学ぶ」の3つの方法があります。

Writer

侍エンジニア編集部

株式会社SAMURAI

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら