はじめに
「designing webって検索すると出てくるけど、これはサイトの名前なの？それともWebデザインのこと？」
「参考になるWebデザイン事例を見たいけど、どのサイトを見ればいいのか分からない…」
そんなふうに、Webデザインの参考サイトを探そうとして検索したものの、言葉の意味や見るべきサイトがはっきりせず、悩んでいませんか。
実際に「designing web」という検索は、特定のサイトを探しているケースと、デザイン事例をまとめて見たいケースが混ざっているため、最初に整理しないと遠回りになりやすい状態です。
この記事では、「designing web」とは何を指しているのかを整理したうえで、実際にWebデザイン事例が見れる代表的な参考サイトを紹介していきます。どのサイトを開けばいいのか迷わず選べるように、順を追って説明していきます。
Webデザイン事例が見れるサイト
Webデザインの事例を探すとき、「どのサイトを見れば効率よく参考になるのか」が分からず、複数のサイトを行き来して時間がかかっていませんか。
同じ“事例サイト”でも、掲載数や更新頻度、カテゴリ分けの細かさ、探しやすさは大きく異なり、目的に合わないサイトを見てしまうと必要なデザインにたどり着くまでに無駄な時間が増えます。
ここでは、実際にデザイン事例を探す際に使われる代表的なサイトを厳選し、それぞれの特徴を踏まえながら、順を追って確認していきます。
Web Designing Web
Web Designing Webは、国内外のWebサイト事例を一覧で確認できる参考サイトです。
トップページにはサムネイル形式で複数のサイトが並び、1画面あたり約20〜30件の事例をスクロールしながら確認できます。
各事例をクリックすると詳細ページに遷移し、デザイン全体のスクリーンショットを縦長で確認できるため、ファーストビューからフッターまでの構成を一度で把握できます。
また、「業種」「カラー」「レイアウト」などの条件で絞り込みができるため、たとえば「コーポレートサイト×青系デザイン」のように目的に合わせて事例を数十件単位で比較できます。
このように一覧性と絞り込み機能が揃っているため、短時間で複数のデザインを横断的に確認できる構造になっています。
webdesignclip
webdesignclipは、国内のWebサイト事例を中心に掲載している参考サイトです。
トップページにはサムネイルが縦に連続して表示され、スクロールするだけで1ページあたり約40〜60件の事例を確認できます。
各サムネイルをクリックすると個別ページに移動し、サイト全体のスクリーンショットを縦長で確認できるため、ページ構成や余白の取り方、パーツ配置を一度で把握できます。
また、「業種」「カラー」「サイトタイプ」などの条件で絞り込みができるため、たとえば「美容×白系デザイン」のように条件を固定して事例を20件前後まとめて確認できます。
条件を絞ることで比較対象が揃い、レイアウトや配色の違いを短時間で判断できる構造になっています。
MUUUUU.ORG
MUUUUU.ORGは、国内外のWebサイトを大きなサムネイルで一覧表示する事例サイトです。
トップページでは1画面に6〜9件の事例がグリッド形式で並び、スクロールするごとに新しい事例が追加表示されるため、連続して数十件のデザインを確認できます。
各サムネイルをクリックすると対象サイトへ直接遷移し、実際の動きやアニメーションをそのまま操作して確認できます。
また、「縦長サイト」「1カラム」「グリッドレイアウト」などレイアウト単位で絞り込みができるため、同じ構造のサイトだけを10〜20件単位で比較できます。
実際のサイトに遷移して操作できる構造になっているため、静止画像では把握できない動きや遷移を含めて確認できる点が特徴です。
S5-Style
S5-Styleは、国内のWebサイト事例をカテゴリ別に整理して掲載している参考サイトです。
トップページではサムネイルが縦に並び、スクロールするごとに約30〜50件の事例を連続して確認できます。
各サムネイルをクリックすると個別ページに移動し、サイト全体のスクリーンショットを縦長で表示できるため、ファーストビューから下層までの構成を一度で把握できます。
また、「業種」「色」「デザインテイスト」など複数条件で絞り込みができるため、同じ条件の事例を20件前後に絞って並べて確認できます。
条件を固定して比較できる構造になっているため、レイアウトや配色の違いを短時間で判断できます。
まとめ
この記事では、「designing web」という検索が、特定のサイト名を探しているケースと、Webデザイン事例をまとめて見たいケースの2つに分かれることを整理したうえで、実際に使える参考サイトを紹介しました。
紹介した4つのサイトは、それぞれ掲載数や絞り込み方法、確認できる情報の粒度が異なりますが、いずれも1ページ内で20〜60件程度の事例を一覧で確認でき、条件を絞ることで10〜20件単位で比較できる構造になっています。
そのため、「何となく探す」のではなく、「業種・色・レイアウト」を固定して見ることで、短時間で必要なデザインにたどり着けます。
「designing web」で迷ったときは、まずどのサイトを開くかを決めてから探し始めるだけで、無駄な行き来を減らせます。
今回紹介したサイトの中から1つ選び、条件を絞って10件ずつ比較する流れで見ていくと、必要なデザインがスムーズに見つかるはずです。
