【Webデザインのまとめサイト集】参考におすすめ！

Webデザインのまとめサイトは素晴らしい！

参考サイトとして、特にWebデザイナー初心者にとってはお手本になること請け合いです。基本やトレンドを知るうえでおすすめできるものばかり。
一方で経験豊かな玄人にさえも大いに役立つと考えます。
Webプロデューサー、プランナー、ディレクター、マーケター、つまるところサイト制作に関わってくる職種全ての方にとって、いわゆるキュレーションメディアでもあるまとめサイトは有益な参考資料になり得ます。
シンプルで分かりやすいのも特徴的。素直に重宝したいところですね。

さて、本記事では上述したようにどうしたって美味しいまとめサイトをさらに美味しくまとめてみました（笑）。
そんなメタ的サイト集。さながらバイキングのように色々と取り合わせてみるのも一興です。

それでは、ぜひご賞味あれ！

【2020年8月更新】

初心者に告ぐ！まとめサイト参考の心得

優れたUI、レイアウト設計、配色の妙に加え、惹きつけては離さないキャッチコピー……等々。まず初心者に伝えたいのは、デザインと対峙した時、いずれも大枠で捉え、学んでいくことの重要性です。
極力ユーザーの負荷・ストレスにならないように、ページスピード（読み込みの速さ）やサイト内検索・カテゴリの使い勝手の良さ、グローバルナビゲーションをはじめ自然で明確な導線。こうした要素もデザインを考えていくなかでは悩ましく、大勢を左右してきます。意識しないわけにはいきません。
さらに述べると、サムネイルのチョイスは、ページ内での見やすさだけでなく、検索結果に表示される画像にもなるがゆえ、クリック率の向上という成果においても一役買うほど大事なものとなっています。となればユーザーの関心を手繰り寄せるべく、デザイナー（orプロデューサー、プランナー、ディレクター）は、いわばマーケティングの領域にも踏み込まなければならないわけです。

さすがにWebデザインで初心者の方がこれらをすべて押さえるのは厳しいですよね。
確かにオリジナリティ、ユニーク性は大切です。
とはいえ、それらを生むための出発点としてお手本にするサイトはあった方がよいでしょう。逆に参考サイトを持たない場合、着手の機会を作れず経験という糧を蓄えることができなくなる可能性が孕んできます。

学ぶことは真似ること。型やパターン、果ては細部に宿るニュアンスまで、他人の制作物から教わるものや、そこに潜むヒントは無限大です。幸運なことに、そういったサイトは数多くあり、しかも親切なメディアがまとめてくださっている現状があります。スキルアップのために使わない手はありません。
本稿では、リスペクトを表し、そうした価値あるメディアをピックアップしています。とはいえ、ただ漠然と引っ張ってきたわけではありません。優れたデザインは目的を重視します。
したがって、Webデザインを考える際のお手本にしたいまとめサイトを、そのメディアの特性に応じてタイプ別に分け、セレクトしました。
あなたのキャリアに影響を及ぼすサイトとの出会いを、以下、きっと後押しできるはずです。

表現の引き出しが多いまとめサイト「straightline bookmark」

謳い文句通りの大きなサムネイルに加え、表現の引き出しの多さも特徴に挙げられる、参考サイトにうってつけの「straightline bookmark」。
新世代のwebデザイナーがこぞってチェックしたくなるのも頷けます。
重宝したくなる点は無尽蔵。そのなかでも更新頻度の高さは実にありがたいポイントです。あらゆるパターンのデザインが毎日ドロップ。新鮮な感慨で目の当たりにすることができます。
ヒント多数。インスピレーションの宝庫。
アイデアにお困りなら、まさしくブックマークすべきです。
描いていた理想をも凌駕するかもしれません。
ここなら、既存の価値をアップデートしてくれるお手本にきっと出会えます。
スタートダッシュを図りたい初心者にもおすすめです。

表現の引き出しが多いまとめサイト「straightline bookmark」はこちら

カテゴリやタグから選べるまとめサイト「siteInspire」

「siteInspire」はロンドンのデジタルスタジオが運営しており、世界中から優れたデザインのWebサイトを集めているまとめサイトです。
掲載するサイトはスタッフ自らが厳選しています。すべてのサイトがレスポンシブデザインであることもそうですが、チョイスにこだわりや特徴がところどころうかがえます。
なかでも特筆すべきはタイプ・スタイル・サブジェクトといったカテゴリ検索です。これによって、目的に合ったWebサイトを見つけやすくなっています。
タグの種類も実に豊富。「ナビゲーションが凝っているサイト」や「背景に動画素材を用いている」といった指定で検索することが可能です。パーツごとに参考とするにはもってこいといえそうです。

海外のまとめサイトであるため英語での利用が求められるものの、キーワードでの検索ができるので特に問題なく使えるはずだと考えます。
法人サイトやショップサイト、ポートフォリオなど様々。
詳細ページを開くと関連するWebサイトまで紹介されるので、イメージに合ったサイトを探すのにわかりやすくて役立ちます。

カテゴリ、タグから選べる「siteInspire」はこちら

投票で掲載が決まるまとめサイト「AWWWARDS」

「AWWWARDS」は海外において有名なWebデザインのまとめサイトであり、アメリカ・フランス・イギリス・日本などからWebサイトは選ばれています。
多様的であらゆる立場にいる人と審査員からの投票によって厳選されているとあって、そのクオリティは間違いないもの。
なお、投票はデザイン（40％）・ユーザビリティ（30％）・クリエイティビティ（20％）・コンテンツ（10％）の4つの評価軸に対し、10点満点で行われます。

加えて言及したいのは、「Site of the Day」という賞が設けられていること。その日に注目されているWebサイトをユーザー視点で確認することが可能です。
月・年単位でも様々な賞が授与されているため、受賞しているものを調べてみるだけでも充実しています。多くのデザインに生かせることができるでしょう。
客観的に高い評価を得ているWebデザインを知りたい人にとって、メリットが大きいまとめサイトです。

最新のトレンドを世界規模で意識することは、Webデザインにおいて非常に重要です。
日本国内だけではなく、海外のWebサイトが豊富に比較できる「AWWWARDS」を活用して、ユーザーを引きつけるワールドワイドなデザインを探してみましょう。

投票で掲載サイトが決まる「AWWWARDS」はこちら

保存やチェックがしやすいまとめサイト「81-web.com」

「81-web.com」では、日本の優れたWebデザインをギャラリー＆リンク集という形で取り上げています。
サイト画面で「＋」のボタンを押すとお気に入りとして保存することができるなど、操作性に優れているのが特徴です。
ログインをしなくても保存できるので、いったん保存をして後からチェックし直すといった使い方ができます。
そして、画面に表示されているアイコンをタップすると、Webサイトのレイアウト全体をすぐに確認することが可能です。
表示されるサムネイルだけでもサイトデザインのイメージはわかります。ファーストインプレッションだけで気になるものを探すとき、とても便利な仕様となっています。スピーディーに参考サイトを見つけたいなら重宝したいまとめサイトです。

保存やチェックが簡単な「81-web.com」はこちら

PCとスマホの表示比較が簡単なまとめサイト「bookma! v3」

「bookma! v3」は、レスポンシブデザインを比較するのに向いているWebデザインのまとめサイトです。
PCとスマホでの表示画面が並んで掲載されているので、一目でモバイルのイメージを確認することができます。
また、サイト画面の上部にはPCとスマホのアイコンがあるのですが、タップすればそれぞれの表示に絞れる設計となっています。ありそうで意外と珍しいかもしれません。いずれにせよありがたい機能だと思います。実際、使うシーンによって膨らむアイデアは異なります。デバイスでフィルターを掛けておいてデザインを考えれば、タスク管理、整理においても効率的なのではないでしょうか。

あらためてお伝えすると「bookma! v3」は、全体的に仕様はシンプルで、キーワード検索も可能。多くのWebデザインを視覚的、直感的にチェックできるため、比較検討する際に有効に活用できるまとめサイトです。

PCとスマホ表示の比較が快適な「bookma! v3」はこちら

Webページをランダム表示できるまとめサイト「I/O 3000」

「I/O 3000」は、日本国内だけでなく海外のWebサイトも掲載されているため、豊富な種類のWebデザインを比較することができます。
カラー・タグ・カテゴリから検索することが可能なので、思いついたキーワードでどんどん検索できるでしょう。
また、アーカイブも確認できるため、特定の時期のトレンドを探ることにも役立てられます。
さらにはオートスクロール機能が備わっているので、一覧ページを下方向にスクロールしていくと続きが自動的に読み込まれる仕様となっています。いわゆる遅延ロードのサポートとしても、ユーザーに負荷を掛けない親切なつくりです。

また、「シャッフルボタン」を押すことによって、掲載されているサイトのなかからランダムで表示することもできます。これが案外使えるのです。
デザインの考案に行き詰まってしまったときや、インスピレーションを得たいときに活用してみてください。気分転換のごとく、凝り固まった考えが時にクリアになり、フレッシュな気持ちで作業がはかどります。
これまでの発想にとらわれずにデザインを見つけたいときにはぜひ！
思いがけないWebデザインを発見できる可能性が高いです。

ランダムにWebページが表示可能な「I/O 3000」はこちら

クリエイティブ豊かなまとめサイト「WebDesignClip」

「WebDesignClip」はサイトの読み込みが速いため、ストレスを感じることなくWebデザインを探すことができます。
サムネイルも大きめに表示されるため、視覚的に利用しやすいサイトだといえるでしょう。
日本国内のデザインと海外のデザインが分けられているので、それぞれ目的にあわせてチェックできます。
また、ほかのまとめサイトに見られない特徴としては、LP（ランディングページ）だけでの閲覧も可能となっていることが挙げられます。
スマホ版のWebページの絞り込みもできるため、モバイル端末を重視したWebデザインを考えるときに活用できるでしょう。

カラー・レイアウト・カテゴリ・タグといったいくつもの切り口で検索でき、マイクリップに追加をするとログインしなくても気に入ったWebサイトを保存できます。
サブカラーでもカラー検索ができるのが特徴です。メインカラーに合わせる色を探す場面、多いと思います。アクセントカラーも含めて活用してみてはどうでしょう。
配色を変えるだけでも、Webサイト全体のイメージを一新できることがあります。まさしく色々なパターンを試してみるのをおすすめします。

クリエイティブの種類が多い「WebDesignClip」はこちら

WordPressのデザイン参考まとめサイト「WeLoveWP」

「WeLoveWP」は、WordPressで作成されたサイトがメインとなっています。
そのため、個人のブログやポートフォリオなどが中心に掲載されているのが特徴です。
Webデザインを考える目的だけでなく、WordPressのテーマ探しにも活用できます。
一見してとてもじゃないけれども、いわゆるCMSの範疇で作られたものだとはわからないものもあり、WordPressをメインプラットフォームとしデザインを考えるならば、参考サイトとして非常にありがたい存在です。機能してくれること請け合い。心底、太鼓判を押したくなる優れものです。
もちろん、WordPressには初期設定の時点からテンプレートが備わっているものの、いまひとつデザインが気に入らないというケースも少なくないはず。
ゆえに、「WeLoveWP」を活用すれば、引き出しがより増え、普段何気なく感じていたモヤモヤを解消させるきっかけにもなるでしょう。

WordPress向けにおすすめしたい「WeLoveWP」はこちら

どのまとめサイトがいい？困ったときのワンポイント

さて、ここまで紹介してきたメディアも含め、Webデザインに関するまとめサイトは数多く存在します。そうなってくると結局どのサイトを参考にすべきか迷ってしまうこともあるでしょう。
だからこそタイプ別に分けたのですが、それだけではまだ指針として決定打にかけるといった声が聞こえてきそうなのも正直なところです（笑）。
それでは、判断基準、ポイントをもう少しだけ。
まず、基本的に押さえておきたい点として、更新頻度が高いまとめサイトを参考にしてください。
Webデザインのトレンドは固定化されたものではなく、常に変化しているものです。
トレンドとは無情なもの。今イケてるデザインも1年後には適さないものになっている可能性は十二分にあります。
1つの形式にこだわるのではなく、世の中の流れに合わせて柔軟に構築していくことが大切です。そこで説得力を帯びてくるのが更新頻度の高いまとめサイト。定期的に更新が行われているなら、それはきっと最新版でしょう。そう考えるのが自然です。

そしてWebデザイン同士で比較するなら業種をマークしてください。同じ業種はもちろん、関連業種も参考にしてみましょう。競合する企業や個人がどのようなデザインを採用しているのかをチェックすることは、それこそ上述したトレンドをおさえることにもなります。業界全体の傾向を把握し、そこで真っ向勝負、時に差別化を図り、といった具合に明確な戦略が生まれれば、必要なまとめサイトは自ずと絞られてくるのではないでしょうか。
一方で、斬新なアイデアを求めている場合には、異なる業種の方が効果的です。マッチするかしないかはまず度外視してください。そこには突破口がいくつも見え隠れしています。視点を変えた先に正解があるという話も、決してフィクションではなく現実にあります。いずれにせよ、挑戦的なデザインを欲するなら取り入れる参考サイトも冒険してみましょう。

まとめサイト内で見るべきポイントは人それぞれだと思います。その前提を踏まえ強いて挙げるならば、カラーや画像の位置、フォントに目を向けてみることは、とても重要です。
例えばメインカラーとサブカラーの組み合わせは実物のサイトを見てみないとわからないもの。どのペアが一番イメージに近いのか、その観点を持っていると俯瞰したセンスが身に付けられます。画像の位置やフォントの種類・大きさも同様。一つの要素でWebサイトの印象は違ってくるというのをまざまざと実感させられます。そういうわけで、まとめサイトは有効なのです。数々の事例を実際に見ながら学ぶことができるメリットだけでも十分な根拠でしょう。
そこから自分のイメージにあわせてカスタマイズすることで、オリジナリティが加わり、魅力も増すという好循環。目指すスキームはここだと思います。

Webデザインを初めて学ぶ人は、公開する気のないWebページを1から作ろうとしても、途中で挫折してしまうケースがあります。
再三お伝えしますが、まとめサイトに掲載されているWebデザインを参考にすれば懸念される事態は回避しやすいです。まずは経験すること。そこからどんどんデザインに関するスキルを磨くことができます。
そこからさらに前へと進むには、SEOやアクセス解析についても学んでみましょう。まとめサイトに選ばれているものは、良質なデザインはもちろん、検索順位で上位表示されやすい傾向があったり、PV数が多かったりすることも特徴的です。ゆえに、その構造を参考にしている方々もいます。
いずれにせよ、Webに関する知識は常に変化しているので、コツコツとタイムリーに身につけていく必要があります。Webデザインを変更したときには、合わせてアクセス状況などを見てユーザーの反応をチェックしてみましょう。この結果こそが、より良いサイトを構築するための貴重な情報源になりえるかもしれません。

Webデザインを有効に活用するためには、単に多くの事例に触れるだけではなく、どういったデザインが支持されているのかを踏まえたうえで、分析し考えることが大切です。

まとめサイトを参考にすることで、オリジナリティも生まれていく！

まとめサイトをチェックしておけば、いざWebデザインを変更する際にもヒントが得られるでしょう。気になるデザインを基盤とし、自分ならどのようにアレンジするか、普段からシミュレーションして考えておくと尚良いと思います。
結果的にオリジナリティが生まれるわけですから面白いですよね。
したがってまとめサイトに対して抵抗があるというのは、勿体ないという見方もできます。
加えて、そこにはトレンドも内包されていることが多いです。
先述した通り、デザインは流行や最新の技術などによって日々変化していきます。乗り遅れてはいけません。

サイト制作の入門として機能し、オリジナリティが発生し、トレンドも押さえられる。
やはり、Webデザインの参考サイトは、まとめサイトがうってつけですね。