この記事の対象: 配色の方向性を決めかねているWeb制作者・デザイン発注を控えた事業担当者
読了時間: 約9分
白を基調にしたサイトは「無難だから選ばれている」と思われがちですが、実際の掲載事例を並べると事情が違います。Soreiine!!ギャラリーに掲載してきたホワイト系サイトを業界別に眺めると、建築・住宅・不動産、デザイン事務所、食品・飲料、採用サイトといった、扱う商材の「質感」や「人」を見せたい領域に偏っています。白は主役を消さない背景であり、同時に余白の取り方とアクセント1色の設計がそのままブランドの印象になる、逃げ場のない配色でもあります。この記事ではその傾向と8つの具体事例をもとに、白を選ぶ判断基準と配色の指定方法を整理します。
ホワイト系Webデザインが選ばれている業界の実際
業界の偏りから見えるもの
Soreiine!!ギャラリーのホワイト系サイトを業界で見渡すと、次のような顔ぶれが上位に来ます。
- 建築・住宅・不動産
- デザイン事務所・制作会社
- 食品・飲料
- 新聞・出版・書籍
- アパレル・ファッション
- 自動車・バイク・自転車
- 採用サイト・転職・求人
これらの業界に共通しているのは「見せたい対象が写真である」ことです。住宅の内観、制作実績のキャプチャ、料理や商品のパッケージ、書影。これらは色数を持つ被写体なので、背景に色を足すと画面全体の色数が一気に増えて散らかります。
一方、通信、学校、アプリ、医療、金融、ゲームといった業界では単発的な採用にとどまっています。ホワイト系が「使えない」のではなく、その業界ではブランドカラーを面で使う設計が主流だという読み方が妥当です。金融の紺、医療の水色、ゲームの原色。これらは業界の記号として機能しているので、あえて白へ振るなら理由を用意する必要があります。
採用サイトに複数入っているのが示すもの
注目したいのは採用サイトがこの上位に入っている点です。採用サイトは「人の写真」と「長い文章」が同居する媒体で、色を背景に敷くと写真も文字も両方読みづらくなります。白背景は、社員インタビューの写真をそのまま素材の色で見せられて、本文の可読性も落ちません。
白の中で差がつく3つの型と実例
ホワイト系といっても、掲載事例を眺めていると使われ方は同じではありません。3つの型に整理できます。
余白主導型
- コピーと余白で語る
- 装飾は極小
- 不動産・企業サイト向き
アクセント1色型
- 白＋鮮やか1色
- CTAと見出しに集中
- 採用・BtoBサービス向き
素材引き立て型
- 写真・イラストが主役
- 白は完全に背景に徹する
- 商品・タレント・施設向き
どの型を選ぶかで、白の明度とアクセントの彩度の設計が変わります。
同じ「白基調」でも、余白を主役にするのか、アクセント色を主役にするのか、写真を主役にするのかで、指定すべき数値がまったく変わります。以下、実例で見ていきます。
余白主導型｜プロパティエージェント
不動産投資を扱うプロパティエージェントの企業サイトは、白の面積を大きく取り、「あなたの未来を育む、一手を考えぬく。」というコピーをファーストビューの中心に置いています。不動産投資という、来訪者が慎重に判断する商材で装飾を足すと、そのぶん「売り込まれている」印象が強まります。装飾を削って余白を広げる選択が、そのまま誠実さの表現になっているサイトです。
見どころは背景に敷かれた細い線画のテクスチャ。完全な無地にすると安っぽく見えるリスクがありますが、視認できるかどうかのぎりぎりの濃度でテクスチャを入れることで、余白に質感が生まれています。ヘッダーの資料請求・無料相談のCTAだけが色を持っているので、目線が自然にそこへ落ちる構造です。
掲載ページ: https://soreiine.jp/?p=2705
余白主導型の配色指定は、白の階調をどう分けるかに尽きます。
:root {
/* 背景は純白より1段落とす。純白は画面のまぶしさが強い */
--c-bg: #ffffff;
--c-bg-alt: #f7f7f5; /* セクション交互の下地 */
--c-border: #e5e5e0; /* 罫線・カード枠 */
--c-text: #1a1a1a; /* 純黒にしない */
--c-text-sub: #6b6b66;
--c-accent: #0b5c4a; /* CTAと現在地のみ */
}
--c-bg-alt と --c-border を白からわずかに外して黄み方向へ振ると、純白・純グレーの組み合わせより紙に近い印象になります。彩度は2〜4%程度で十分です。ここを無彩色のまま #f5f5f5 #e0e0e0 にすると、同じ構成でも画面が冷たく感じられます。
アクセント1色型｜クラウドローン採用サイト
クラウドローンの採用サイトは、白背景にライムグリーンを1色だけ載せた構成です。「Facing PEOPLE Moving FORWARD」「今日も、人を向いて。」というコピーを大きなタイポグラフィで扱い、フィンテック企業につきまとう硬さを、色と文字組みの両面から崩しています。
金融系の採用サイトで紺やグレーを使うと、業界の記号としては正しいものの、求職者から見ると他社と区別がつかなくなります。ここでライムグリーンという明度の高い色を1色だけ持ち込むと、白背景との相性がよく、写真の中の人物の肌色とも競合しません。社員の自然な表情を捉えた写真が随所に置かれているのも、白背景だから成立している構成です。
掲載ページ: https://soreiine.jp/?p=2707
アクセント1色型で気をつけるのは、鮮やかな色を白地に置いたときのコントラスト比です。
:root {
--c-accent: #7dc400; /* 面（背景）に使う想定 */
--c-accent-text: #3d6200; /* 白地に文字として置くときはこちら */
}
/* 白地にライム色の文字を直接置かない。コントラスト比が足りない */
.lead-link { color: var(--c-accent-text); }
/* 面で使うときは文字を白ではなく濃色にして確保する */
.btn-primary {
background: var(--c-accent);
color: #11240a;
}
ライム、イエロー、水色のような明度の高い色は、白地に文字色として置くとWCAG AAの4.5:1を満たせません。「アクセント色は1色」と決めても、実装上は面用と文字用の2トーンを用意するのが現実的です。ここを1色で通そうとして、結局グレーの文字ばかりになるケースをよく見ます。
素材引き立て型｜SAS IRIAM事務所
SAS IRIAM事務所のサイトは、VTuber/VLiverタレントが横一列に並ぶメインビジュアルで、事務所の陣容を一目で伝える構成です。「Spice Up Your MIRAI」のコピーが前向きなトーンを添えています。
アニメ調のキャラクターはそれぞれが固有の色を持っているため、背景に色を置くと必ずどこかのキャラクターと干渉します。白とライトブルーの清潔感ある背景にすることで、どのキャラクターの配色とも喧嘩しない状態を作っている。素材引き立て型の典型です。Entryボタンが目立つ位置にあり、タレント募集という目的の導線も明確でした。
掲載ページ: https://soreiine.jp/?p=2713
素材引き立て型｜常願寺川公園BBQテラス
常願寺川公園BBQテラスのサイトは、手描きイラストと丸く切り抜いた写真を組み合わせ、BBQの楽しさを伝えています。白基調にパステルカラーのグリッド線とイラストを散らすレイアウトで、清潔感と開放感を同時に出しているのが特徴です。
アウトドア施設のサイトは、緑や茶色を背景に敷いて「自然」を表現する方向に流れやすい領域です。ここを白に振ると、料理や人の笑顔といった写真の色が素直に出ます。ヘッダーの予約ボタンも埋もれません。富山のローカル施設でこの完成度なのは、地域案件を担当する制作者にとって参考になるはずです。
掲載ページ: https://soreiine.jp/?p=2421
単一コンテンツ型｜太陽企画 ニュークリエイターズ2025
太陽企画のニュークリエイターズ2025は、白い画面の中央に「SCOOP!!」の文字だけを置いたローディング画面です。情報を極限まで削ることで、この先に何があるのかという期待感を作っています。
感嘆符の重ね方にメディア企業らしい遊び心があり、シンプルでありながら計算された設計であることが伝わります。白は情報量が少ないほど強くなる背景色で、逆に言えば要素が少ないページほど白の採用リスクが低いとも言えます。
掲載ページ: https://soreiine.jp/?p=2423
素材引き立て型｜日産サクラ プロモーション
日産サクラのプロモーションサイトは、軽EV「サクラ」の静粛性をテーマにした企画です。「静かなサクラできいてみた」というタイトルで、EVの走行音の静けさを、欠点ではなく体験価値として扱っています。
スペック訴求ではなく体験に軸を置いたコンテンツで、車名の「サクラ」を連想させる清潔感のあるカラーリングが企画全体のトーンと噛み合っています。白と淡いピンクの組み合わせは、車という重量のある商材のイメージを軽くする方向に働くため、軽EVという商品特性にも合っています。
掲載ページ: https://soreiine.jp/?p=2429
404ページで差がつく｜ブランド一貫性の実例2件
掲載事例を整理する過程で、404エラーページに行き当たる事例がいくつかありました。偶然ですが、白基調のブランド一貫性を考えるうえで示唆的な事例です。
SALONIA×NiziU特設ページ
SALONIAの特設ページは、NiziUとのコラボ企画のページでしたが、キャンペーン終了に伴い現在は404ページが表示されます。注目したいのはその404ページの作りです。白背景にロゴとナビゲーションを置き、「お探しのページは見つかりませんでした。」のメッセージを簡潔に配置。ヘッダーにはABOUT、TOPICS、PRODUCT、PICK UP、COLUMN、SUPPORT、HOW TO、ONLINE SHOPと充実したナビが並び、訪問者を他コンテンツへ流す設計になっています。
美容家電ブランドとしてのクリーンな印象が、エラーページでも崩れていません。
掲載ページ: https://soreiine.jp/?p=2723
URBAN RESEARCH ホリデー特集
URBAN RESEARCHのホリデー特集ページも同様に404ページとなっていますが、ブランドロゴを上部に置き、メッセージとトップページへの導線を簡潔に示す構成です。白背景にブラウンのロゴカラーという組み合わせが、ブランドのナチュラルで上品なトーンを保っています。
ここから読み取れること
キャンペーンページは期間終了で消えるものですが、そのあと404が返る期間のほうが実は長くなります。白基調のブランドは、ここで「システムのデフォルト404」が出た瞬間に印象が一気に崩れます。背景が白でロゴとナビだけあれば成立する、という設計にしておくと、テンプレートを1枚用意するコストで防げる領域です。
ECサイトの場合、キャンペーンページの整理は運用フェーズの話になります。テーマ側の改修とアプリでの対応をどう切り分けるかは、こちらで整理しています。
Shopifyはアプリとテーマ改修どちらを選ぶか｜制作会社の線引き
ホワイト系の配色を実装で詰める
白を3階調に分ける
ホワイト系が野暮ったくなる原因の大半は、白が1階調しかないことです。背景も、カードも、入力欄も全部 #fff にすると、境界線に頼るしかなくなり、罫線だらけの画面になります。
3階調で組む
- ベース #fff
- 下地 #f7f7f5
- 枠線 #e5e5e0
- 罫線を減らせる
1階調で組む
- すべて #fff
- 境界は罫線頼み
- 影を足して補う
- 画面が騒がしくなる
3階調に分けておくと、カードの区切りを罫線ではなく背景色の差で表現できます。結果として線の本数が減り、画面が静かになります。
ダークモード対応を最初から入れる
白基調のサイトは、OSのダークモード設定で反転させると読めなくなるケースが多い領域です。カスタムプロパティで組んでおけば、切り替えは1ブロックで済みます。
:root {
color-scheme: light;
--c-bg: #ffffff;
--c-bg-alt: #f7f7f5;
--c-border: #e5e5e0;
--c-text: #1a1a1a;
--c-text-sub: #6b6b66;
--c-accent: #0b5c4a;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--c-bg: #16171a;
--c-bg-alt: #1e2024;
--c-border: #32353b;
--c-text: #ececea;
--c-text-sub: #a3a39e;
--c-accent: #4fbfa3; /* 暗背景では明度を上げる */
}
}
body {
background: var(--c-bg);
color: var(--c-text);
}
実装のポイントは color-scheme の指定です。これを書いておくと、フォームコントロールやスクロールバーといったブラウザ標準UIも一緒に切り替わります。書かないと、背景だけ暗くなってセレクトボックスが白いまま残る状態になります。
つまずきやすい点は、アクセント色をライト/ダークで同じ値のまま使うことです。暗い背景では同じ色が沈むため、明度を上げた値を別に用意します。上の例では #0b5c4a を #4fbfa3 に振っています。
対応ブラウザ: prefers-color-scheme と color-scheme はモダンブラウザ全般でサポートされており、実務上は考慮不要な水準です。導入前に案件のターゲットブラウザで一度確認しておくと安心です。
白背景で影を使うときの指定
白基調では、要素の浮き上がりを影で表現する場面が出てきます。ここで黒の半透明をそのまま乗せると、灰色っぽく濁ります。
:root {
/* 影の色は無彩色の黒ではなく、背景と同系の暗い色を使う */
--shadow-color: 40 8% 20%; /* hsl の h s l を分解して持つ */
}
.card {
background: var(--c-bg);
border-radius: 12px;
box-shadow:
0 1px 2px hsl(var(--shadow-color) / 0.04),
0 4px 12px hsl(var(--shadow-color) / 0.06);
}
.card:hover {
box-shadow:
0 2px 4px hsl(var(--shadow-color) / 0.05),
0 12px 28px hsl(var(--shadow-color) / 0.09);
}
なぜこう書くのか。影を1本ではなく2本重ねると、接地感（近い影）と浮遊感（遠い影）を同時に表現でき、実物の影に近づきます。色相を持たせるのは、純黒の影が白地の上で「汚れ」に見えるためです。背景の色相（この例では黄み寄りの40）に寄せると、影が背景に馴染みます。
不透明度は白基調なら0.04〜0.10の範囲に収めます。0.15を超えると、画面全体が灰色がかって見え始めます。
罫線と余白のどちらで区切るか
白基調のレイアウトでは、セクションの区切り方が2択になります。
| 手法 | 向いている場面 | 注意点 |
|---|---|---|
| 余白で区切る | 情報量が少ない／ブランドサイト | セクション間120px以上必要。中途半端だと区切りに見えない |
| 下地色で区切る | セクション数が多い／サービス紹介 | 3セクション連続で色を変えない。交互までに留める |
| 罫線で区切る | 一覧・表・記事本文 | 濃度は #e5e5e0 程度。#ccc は白地では強すぎる |
余白で区切る方式は「余白が足りないと機能しない」のが厄介な点です。スマートフォン幅で80pxに縮めた結果、区切りとして成立しなくなる。SP幅で余白方式を使うなら最低でも64px、できれば80pxは確保します。
3カラム構成との組み合わせを検討している場合は、レイアウト側の判断も併せて読んでおくと設計が固まります。
白を選ぶべきでない場面
掲載事例を見ていると白の有効性ばかりが目につきますが、選ぶべきでない条件もはっきりしています。
写真の質が担保できないとき
白基調は写真をそのまま見せる配色です。つまり写真の粗さもそのまま出ます。スマートフォンで撮った照明条件のバラバラな写真を白背景に並べると、色温度の差が一目でわかってしまいます。素材撮影の予算が取れない案件では、背景に色や柄を敷いて写真の差を吸収するほうが、結果として仕上がりが安定します。
情報量が多く、更新頻度が高いとき
ニュースサイトのように毎日要素が増える媒体は、白基調だと「余白で整える」設計が運用で崩れます。想定していなかった長さのタイトル、想定していなかった数のバナー。こうしたものが入った瞬間に、余白の設計が意味を失います。この場合は下地色とカードで区切る前提で組むほうが耐久性があります。
ブランドカラーが強い色を持っているとき
コーポレートカラーが赤や青の彩度の高い色である場合、白基調にすると「ブランドカラーがロゴにしかない」状態になりがちです。この場合は白を背景に使いつつ、見出しの下線やセクションの帯にブランドカラーを面で入れるなど、色の出番を意図的に作る必要があります。
発注側として配色の方向性を決めるときは、こうした前提条件のほうが先に来ます。依頼内容の整理は先にやっておくと、デザイン案が出てからの手戻りが減ります。
発注前に決めておく3つのこと
ホワイト系で進める場合、デザイン着手前に決めておくと制作がスムーズになる項目があります。
この3つが決まっていれば、デザイン案が1回目から的を射たものになります。逆に「白っぽく、シンプルに」だけで発注すると、出てきた案を評価する軸がないため、やり直しが増えます。
制作会社側としては、この3点を最初のヒアリングで確認しておくと、後工程の手戻りを防げます。素材の目処は特に重要で、撮影が入らないなら白基調そのものを再検討する材料になります。
よくある質問
ホワイト系のWebサイトはどの業界に向いていますか
Soreiine!!ギャラリーにこれまで掲載してきた事例を業界別に見ると、建築・住宅・不動産、デザイン事務所・制作会社、食品・飲料、新聞・出版・書籍が上位に来る傾向があります。共通するのは、写真や実績そのものを見せたい業界という点です。素材が主役になる商材であれば、業界を問わず白は機能します。
白背景に使うアクセントカラーは何色までにすべきですか
面で使う色は1色に絞るのが基本です。ただし実装上は、面用と文字用で2トーン用意する必要があります。ライムグリーンや水色のような明度の高い色は、白地に文字として置くとコントラスト比4.5:1を満たせないため、文字用に明度を落とした値を別に持ちます。
純白の #ffffff をそのまま使ってよいですか
ベースの背景は #ffffff で問題ありません。ただしセクションの下地や罫線まで無彩色で揃えると画面が冷たく見えます。#f7f7f5 #e5e5e0 のように彩度を2〜4%だけ乗せると、紙に近い質感になります。文字色も純黒 #000000 を避け、#1a1a1a 程度に落とすと目が疲れにくくなります。
ホワイト系のサイトが安っぽく見えてしまう原因は何ですか
白が1階調しかないことと、余白が足りないことがほとんどです。背景・下地・罫線を3階調に分け、セクション間の余白をPC幅で120px以上、SP幅で64px以上確保するだけで印象が変わります。影を使う場合は不透明度を0.04〜0.10に収め、純黒ではなく背景と同系の色相を持たせます。
ダークモード対応は必須ですか
必須ではありませんが、白基調のサイトほど対応の恩恵が大きい領域です。カスタムプロパティで色を定義していれば、prefers-color-scheme のブロックを1つ足すだけで済みます。あわせて color-scheme プロパティを指定すると、フォーム部品やスクロールバーといったブラウザ標準UIも一緒に切り替わります。
まとめ
ホワイト系の配色は、これまでの掲載事例を見る限り「無難な選択」ではなく、写真や実績を主役にしたい業界が意図して選んでいる配色でした。建築・不動産、デザイン事務所、食品、出版が上位を占めたのも、扱う素材の性質から説明がつきます。
実装面では、白を1階調で通さないこと、アクセント色を面用と文字用の2トーンで持つこと、影に色相を持たせること。この3点を押さえるだけで、同じ構成でも仕上がりの質が変わります。そして白を選ぶべきでない条件——写真の質が担保できない、情報量が多く更新頻度が高い、ブランドカラーが強い——も判断材料として持っておくと、配色の選択そのものを説明できるようになります。
