この記事の対象: サイトの配色を検討中のWeb担当者・デザイナー
読了時間: 約9分
グレーは「無難な色」と思われがちですが、実際の掲載事例を見ると使われ方にはっきりした傾向があります。どの業界がグレーを選んでいるのか、明度をどう振り分けているのか、Soreiine!!ギャラリーに掲載された8サイトから読み解きます。
グレー系配色がWebデザインで選ばれる理由
グレーは主張しない色です。だからこそ、コピーや写真、ロゴといった「見せたい要素」を邪魔せずに引き立てる下地として機能します。今回集めた8事例を見渡すと、業界はデザイン事務所、美容・健康、医療・福祉、コーポレート、採用、旅行・交通、アート・美術館と幅広く分散しています。共通しているのは、どのサイトも「グレーそのものを主役にしていない」という点です。
明度の使い分けが与える印象の違い
グレーは一色ではなく、明度によって伝わる印象がまったく変わります。今回の事例でも、ライトグレーとダークグレーでは狙っている効果が違いました。
ライトグレー（背景寄り）
- 余白の広がりを感じさせる
- コピーやロゴを目立たせる
- 知的・ミニマルな印象
ダークグレー（背景全面）
- ハイエンド・高級感を演出
- 写真やロゴの発色を締める
- ブランドの拠点性を強調
ライトグレーは「余白で語る」サイトに向いていて、ダークグレーは「特別な場所・特別な体験」を示すサイトに向いています。実例を見ながら具体的に確認していきます。
業界別に見るグレー系サイトの実例8選
デザイン事務所：sukima（余白とコピーで魅せるミニマル構成）
sukima（Soreiine!!掲載ページ）は、ライトグレーの背景に「あなたの人生の隙間に笑顔を届けます。」というコピーを大きく置いた1カラム構成のサイトです。社名の「sukima」が指す“隙間”というコンセプトと、画面の余白の多さが噛み合っているのが巧妙なところ。「の」の一文字だけにイエローグリーンのアクセントを差し込む処理も見逃せません。全体を灰色で抑えているからこそ、たった一文字の差し色が効いてきます。ナビゲーションもWork、Who we are、Cultureといった構成で、単なる受託制作会社ではなく企業としての在り方を見せる設計になっています。
配色の目安: 背景は明度85〜90%程度のライトグレー、テキストはダークグレー〜黒、アクセントは彩度高めの黄緑を1点だけ。差し色は「全体の1%以下」に絞ると効果が保たれます。
美容・健康：美容室らふる（絵画タッチとグレーのコントラスト）
美容室らふる（掲載ページ）は、左に絵画のようなアートビジュアル、右にシンプルなテキストを配したスプリットレイアウトです。「Laugh」の文字を大きく見せ、サロン名の由来である“笑顔”を伝えています。一般的な美容室サイトが明るい写真とパステルカラーで攻めがちな中、あえて絵画タッチとグレーの落ち着いたテキストエリアを組み合わせることで、アートとビューティの融合という独自の立ち位置を作っています。下部の予約導線もきちんと確保されていて、世界観と機能性を両立させた例です。
医療・福祉：社会福祉法人功有会（ローディング画面までブランディングに使う）
社会福祉法人功有会（掲載ページ）は、グレーの背景中央に緑色のロゴと法人名だけを配置したローディング画面が特徴的です。ロゴは笑顔をモチーフにしたような温かみのある形状で、福祉法人らしい優しさが伝わってきます。グレーを主役ではなく“待ち時間の舞台”として使い、ロゴの緑を際立たせる。ページが表示されるまでの数秒間もブランド体験の一部にしている好例です。
コーポレート：コクヨ（節目の周年を機にした理念訴求）
コクヨ（掲載ページ）のファーストビューは、グレーの背景に「Curiosity is Life 好奇心を人生に」というブランドメッセージを大きく表示する構成です。節目の周年を伝えるメッセージとスライダーのページネーションが確認でき、歴史ある企業が新たなビジョンを打ち出しているのが分かります。余白を贅沢に使いテキストだけで見せる構成は、好奇心を大切にするというメッセージそのものと響き合っています。グレーの抑制された配色が、浮ついた印象を与えずに知的なトーンを保っています。
コーポレート・ショールーム：リンナイ青山ショールーム（ダークグレーで演出する上質空間）
Rinnai Aoyama（掲載ページ）は、ダークグレーの背景に「Rinnai Aoyama」の白いテキストを右寄せで配置し、住所とGoogle Mapsリンクを添えたミニマルな1ページです。南青山という立地情報がそのまま載ることで、ハイエンドなショールーム空間を想起させます。ガスコンロや給湯器のメーカーが、生活提案型のブランド拠点を構えるにあたって、あえて情報量を絞り込みダークグレーで“特別感”を演出しているのが分かる事例です。
採用：グローウィン・パートナーズ（毛筆風タイポグラフィとグレーのコントラスト）
グローウィン・パートナーズ 採用サイト（掲載ページ）は、ライトグレーの背景に「変えるために変わってゆけ。」という毛筆風の力強いタイポグラフィを画面中央に配置しています。英語のサブコピー「Grow with change, lead the future.」も添えられ、変革を推進する企業文化を端的に伝える構成です。書道的な文字の力強さと、グレーの落ち着いたミニマル構成のコントラストが印象に残ります。ENTRYボタンは右上に配置され、採用アクションへの導線も明快です。
旅行・交通：宿力（ビジネスと旅館を対比させるスプリットレイアウト）
宿力（掲載ページ）は、宿泊業経営支援を手がける企業のコーポレートサイトです。左にビジネスマンの写真、右に旅館の客室写真を配したスプリットレイアウトで、「共に悩み、汗をかく。宿の未来によりそう力。」というコピーがコンサルタントとしての姿勢を力強く伝えています。石川県での実績事例をファーストビューに置いている点も、信頼性の訴求として的確です。グレーを基調にすることで、対比させた2枚の写真それぞれの色味を邪魔しない下地になっています。
アート・美術館：阿寒アイヌアートウィーク2025（写真と文化を見開きで見せる）
阿寒アイヌアートウィーク2025（掲載ページ）は、木彫作家・岡田実氏のプロフィールと作品を見開きで紹介するプロモーションサイトです。左に経歴テキスト、右に木彫作品のギャラリーを配したスプリットレイアウトで、アイヌ文様と木彫文化の魅力が写真を通じて伝わってきます。モーダルウィンドウでの作家紹介という構成も没入感を高めています。グレーを背景に敷くことで、木彫作品の質感や色味がより際立って見える設計です。
業界別の傾向まとめ
8事例の業界内訳を整理すると、以下のようになります。
| 業界 | 件数 | グレーの使われ方の傾向 |
|---|---|---|
| デザイン事務所・制作会社 | 1 | 余白×コピーでコンセプトを語る |
| 美容・健康・化粧品 | 1 | アートビジュアルとの対比 |
| 医療・福祉 | 1 | ロゴの色を引き立てる下地 |
| コーポレートサイト・事務所 | 1 | 理念メッセージを大きく見せる |
| コーポレート・ショールーム | 1 | ダークグレーで上質な拠点感を演出（リンナイ青山） |
| 採用サイト・転職・求人 | 1 | タイポグラフィとのコントラスト |
| 旅行・交通 | 1 | 2枚の写真の対比を邪魔しない |
| アート・美術館・展覧会 | 1 | 作品の質感・色味を引き立てる |
件数はそれぞれ1件ずつと少数ですが、共通しているのは「グレーが主役の情報を引き立てる補助線として機能している」という点です。コピー、ロゴ、写真、タイポグラフィ——何を主役に据えるかでライトグレーかダークグレーかの選択も変わってきます。
この流れで見ていくと、グレーは「何色にするか」ではなく「何を目立たせないか」から逆算して選ぶ色だと分かります。
実装するときの配色指定の目安
グレー系サイトを実装する際は、CSSの変数として明度をはっきり分けておくと運用がしやすくなります。
:root {
--gray-bg-light: #f2f2f2; /* ライトグレー背景（余白訴求向け） */
--gray-bg-dark: #1c1c1c; /* ダークグレー背景（高級感訴求向け） */
--gray-text: #333333; /* 本文テキスト */
--gray-border: #d9d9d9; /* 区切り線・薄いボーダー */
}
グレー背景に文字を載せる場合、コントラスト比の確保が読みやすさに直結します。背景と文字の組み合わせによっては見づらくなることがあるため、実装段階でコントラストを確認しておくと安心です。文字をグラデーションで見せたい場合の実装は、以下の記事で対応状況まで含めて解説しています。
また、グレー系サイトはスプリットレイアウトとの相性が良く、写真とテキストを左右に分ける構成が今回の事例でも複数見られました（美容室らふる、宿力、阿寒アイヌアートウィーク2025）。写真の縦横比を揃えて見せたい場合は、次の実装が参考になります。
ボタンやENTRY導線にホバーアニメーションを添えたい場合は、やりすぎない基準を押さえておくと、グレーの落ち着いた世界観を崩さずに済みます。
よくある質問
グレー系のWebサイトはどんな業界に向いていますか
今回の事例ではデザイン事務所、美容、医療・福祉、コーポレート、採用、旅行・交通、アート・美術館と幅広い業界で使われていました。共通点は「グレーそのものではなく、コピーや写真、ロゴといった主役を引き立てたい」というサイトです。業種の縛りよりも、何を主役にしたいかで向き不向きが決まります。
ライトグレーとダークグレーはどう使い分ければいいですか
ライトグレーは余白を活かしてコピーや理念メッセージを見せたいサイトに向いています。ダークグレーは写真やロゴの発色を締めて、特別感や高級感を演出したいサイトに向いています。今回の事例ではsukimaやコクヨがライトグレー、リンナイ青山ショールームがダークグレーを採用していました。
グレー系サイトはアクセントカラーをどう選べばいいですか
sukimaの事例のように、グレーを基調にした場合はアクセントカラーを1点に絞ると効果的です。全体の分量の1%以下に抑えることで、控えめなグレーの中で差し色が際立ちます。彩度の高い色を1色だけ選び、ロゴや特定の文字など「一番見てほしい場所」にだけ使うのが基本です。
グレーは地味で無難な印象になりませんか
グレー単体では確かに主張が弱くなりますが、今回の事例が示すように、コピーライティングの強さ（グローウィン・パートナーズの毛筆風タイポグラフィ）や写真の質感（阿寒アイヌアートウィーク2025の木彫作品）と組み合わせることで、むしろ主役を際立たせる効果を持ちます。グレーを主役にしようとせず、脇役として設計するのがポイントです。
スプリットレイアウトとグレーの相性がいいのはなぜですか
グレーは彩度が低いため、左右に配置した写真同士の色味を邪魔しません。宿力の「ビジネスマン×旅館客室」、阿寒アイヌアートウィーク2025の「経歴テキスト×木彫ギャラリー」のように、対比させたい2つの要素を公平に見せたいときに、グレーの背景や区切り線が調整役として機能します。
