こんにちは、にっしーです。
今回はちょっと大掛かりなことをやりました。国内の主要デザインギャラリー15サイトに掲載されている2,555サイト分のデータを収集して、日本のWebデザインの「型」を分析したんです。LPも574本含みます。
なんでそんなことをしたのか。理由が2つあるので、先にそこから話させてください。
理由1:「参考サイト、2〜3個持ってきてください」には深いワケがある
僕らが制作の打ち合わせでほぼ必ずお願いすることがあります。「いいなと思うサイトを2〜3個、持ってきてもらえませんか」です。
これ、制作側の手抜きじゃないんです。むしろ逆で、ベンチマークサイトが数点あるだけで制作の精度と速度が劇的に変わります。「シンプルで温かい感じ」という言葉は人によって想像がバラバラですが、サイトを2〜3個見せてもらえば、言葉にできない好みが正確に伝わる。完成イメージのすり合わせが最初にできるので、デザインの手戻りが減って、その分の時間を中身の作り込みに回せます。つまり、参考サイトを持ってきてもらえると、同じ予算でもいいものが作れるんです。
ただ、そうお願いすると「どこで探せばいいの?」となりますよね。そこで、探し場所は後編の「Webデザイン参考サイト95選(全部生存確認済み)」にまとめました。この記事はその前段として、「そもそも日本のWebデザインってどういう特徴があるのか」をデータで見ていきます。
理由2:AIは、日本語のサイトを作るのがまだ苦手
もうひとつの理由はAIです。僕らも制作にAIを使いますが、使い込むほどはっきり分かることがあります。AIは英語圏向けのサイトを作るのは得意なのに、日本語のサイトを作らせると「なんか違う」ものが出てくるんです。
英語のフォントとレイアウトで組めばサマになるデザインが、日本語に置き換えた瞬間に間延びする。余白の取り方、情報の密度、お知らせ欄や会社概要みたいな「日本のサイトにあって当たり前のもの」の扱い、業種ごとの空気感——このあたりの暗黙のルールが、AIの学習の中では英語圏に比べて言語化されていないんですね。
だったら、日本のWebデザインの「型」をデータで言語化して、それをAIに渡してあげればいいのでは?というのが今回の試みです。感覚ではなく数字で「日本のサイトはこうなっている」と示せれば、人間のデザイナーにもAIにも効く共通言語になります。
何をどう分析したか
MUUUUU.ORG、イケサイ、LPアーカイブ、Responsive Web Design JP、URAGAWAなど、稼働中の国内ギャラリー15サイトから掲載サイトのメタデータ2,817レコード(ユニーク2,555サイト)を収集。業種・配色・タグ・批評文を集めたうえで、業種バランスを取った279サイトは実際に中身まで精読して、キャッチコピー原文257本、ナビ構成、CTA、信頼要素を記録しました。ギャラリーの批評文も110本・約15,000字分析しています。作業はAI(Claude)に手伝ってもらいました。人力では多分1ヶ月かかります。
※CSSの実測はできないため、色や縦書きの一部はギャラリー側の分類タグを根拠にしています。数字は「傾向の強さ」として読んでください。
特徴1:日本のWebは、圧倒的に「白い」
配色データの最頻値はぶっちぎりで白でした。国内最大級ギャラリーMUUUUU.ORGの色分類ではホワイト系2,260件が最大カテゴリ(2位ブラック系1,254、3位ブルー系1,204、4位グレー系1,017)。僕らが集めたデータ全体でも白・グレー・ベージュの低彩度が上位を独占です。
しかも単に白いだけじゃなく、「白い紙にアクセント1色」という型が業種を問わず規範になっています。日本のWebデザインの基本は、雑誌やチラシの紙面文化の延長にある「白い誌面」なんですよね。AIに日本語サイトを作らせるときも、まずここから外れないことが第一歩です。
特徴2:「ベージュ」が第5勢力なのは日本くらい
個人的に一番面白かったのがこれ。ベージュ系が931件で、色カテゴリの第5勢力なんです。海外ギャラリーでベージュが独立カテゴリになることはほぼありません。
生成り・砂色・薄茶は、和紙・木・麻といった日本の素材感の翻訳で、カフェ・工芸・住宅・保育系に特に濃く出ます。さらにMUUUUU.ORGには「和レトロな配色」「高級感がある配色」という情緒がそのまま色カテゴリになった分類軸まであります。色をムードで指定する日本の発注文化が、ギャラリーの分類にまで染み出してるわけです。
特徴3:縦書きは「本文」ではなく「見出しの演出」
「日本のデザイン=縦書き」というイメージ、半分正解で半分誤解でした。ギャラリーのタグでは縦書き・縦組み関連が57件付与されているのに、実際に279サイトを精読して本文が縦書きだったケースはほぼゼロ。縦組みが使われるのはタイトル・ナビ・雅趣の演出だけです。
出現場所も旅館・和菓子・酒蔵・寺社などの「和」文脈にほぼ限定されていて、明朝体・広めの字間・漢数字(創業 明治元年、みたいな)とセットで運用されます。縦書きはスパイスであって主食ではない。AIに「和風で」と頼むと全部縦書きにしがちなので、ここは要注意ポイントです。
特徴4:英語ラベルは「意味」じゃなくて「飾り」
精読したサイトのうち、NEWS / ABOUT / RECRUIT のような英語のセクションラベルを使っていたのは86%。でもナビの実務項目は「お問い合わせ」「採用情報」と日本語なんです。
つまり意味は日本語が運び、英語は「抜け感」を作るという二層構造が日本のWebの標準文法。逆に老舗和菓子系は全部日本語表記を貫いていて、それ自体が格式の表現になっています。この使い分け、まさにAIが知らない「コツ」の代表格です。
特徴5:信頼は「物量」で可視化する
コーポレートサイト30件を精読したら、ニュース・お知らせ欄があるのは29件(97%)。ほぼ必須要素です。更新が止まったお知らせ欄は「この会社、生きてる…?」に直結するので、事実上の生存証明として機能しています。
他にも日本のサイトは信頼を物量で見せます。飲食・宿系の「こだわり語り」保有率は97%(産地の固有名詞+製法名+「職人がひとつひとつ」の三点セット)。BtoBのSaaSは料金非公開が87%で、代わりに資料請求ボタンと導入企業ロゴが並ぶ。LPでは「No.1」表記に必ず調査機関の注記が付く。情報を出し尽くすことが誠実さの証明という商習慣が、そのまま画面になっています。英語圏のミニマルなサイトの感覚で情報を削ると、日本では「怪しいサイト」になってしまうんです。
特徴6:日本のWebには「ハレとケ」がある
ふだんの常設サイト(ケ)は白く静的に、信頼重視で。いっぽう周年記念・キャンペーン・採用の特設サイト(ハレ)ではWebGL・音・スクロール演出で一気に「作品」化する。この祝祭的な使い分けは、かなり日本特有です。
面白いのは、周年サイトを58件調べたら26件がすでに閉鎖されていたこと。周年サイトは「おかげさまで」を公に述べる儀礼の場で、お祭りと同じく会期が終われば撤収される。意図的に消える祝祭空間なんです。
特徴7:「良いデザイン」の基準は、足し算じゃなく引き算
ギャラリーの批評文110本を分析すると、称賛の語彙トップは「設計」「構成」「シンプル」「余白」。最上級の褒め言葉は「削ぎ落とした」「控えめ」「抑えた」でした。
評価軸は4つ。①余白と抑制の美学(余白は空きではなく画面の強度)、②文脈の必然性(銭湯×縦書きのように「その表現である理由」が問われ、必然性のない流用は「チグハグ」と一刀両断)、③動きの節度(称賛には必ず「やりすぎ注意」が併記される)、④機能の破綻のなさ(美しくても迷うサイトは評価されない)。
日本のWebデザインで迷ったときは、「何を足すか」じゃなく「文脈に合わないものをどう削るか」を考えるのが正解に近い、ということです。
で、この「型」をAIに渡すと何が起きるのか
ここまでが今回の調査の成果、つまり「日本のWebデザインの暗黙知を、データで言語化したもの」です。配色の規範、縦書きの正しい使いどころ、英語ラベルの二層構造、業種ごとの必須要素、評価の4軸——これらは全部、そのままAIへの指示書に変換できます。
次のステップとして、僕はこの分析データを丸ごとAIに渡して、「何も教えないAI」と「日本の型をインストールしたAI」で日本語サイトの出来がどう変わるかを実際に試してみるつもりです。結果は追って記事にするので、うまくいってもいかなくても報告します。お楽しみに。
まとめ:クライアントのあなたにお願いしたいこと
最後に、制作を依頼する側の方へ。この記事で伝えたかったことはシンプルで、日本のWebデザインには業種ごとの「型」がちゃんとあって、良し悪しは感覚ではなくかなり言語化できるということです。
だからこそ、打ち合わせの前に「いいな」と思うサイトを2〜3個ピックアップしてみてください。理由は言葉にできなくて大丈夫。それを見ながら「どの型がお好みか」を読み解いて言語化するのは、僕ら制作側の仕事です。探し場所は後編の「Webデザイン参考サイト95選」にまとめてあります。
調査概要:2026年8月実施。国内ギャラリー15サイトからメタデータ2,817レコード(ユニーク2,555サイト、うちLP574件)を収集し、279サイトを精読。文中の比率は精読サンプル内の実測値、大きな件数はギャラリー公表の分類付与数です。