| 英語名 | Border Gray |
|---|---|
| カタカナ | ボーダーグレー |
| HEX | #D1D5DB |
| RGB | 209, 213, 219 |
| デザインテーマ | UIシステム＆アラートカラー |
なぜトレンドなのか？（背景と理由）
近年のWebデザインは、ミニマリズムとクリーンなインターフェースが主流です。多くの情報を整理し、ユーザーがコンテンツに集中できる環境を作るため、派手な装飾よりも構造的な美しさが重視されるようになりました。ボーダーグレーは、要素間の境界をさりげなく、しかし明確に示すことで、このトレンドを支える重要な役割を担っています。
また、ダークモードの普及もボーダーグレーが注目される一因です。ライトモードでもダークモードでも、その中立的な明るさによって視覚的な分断を生むことなく、UIの区切り線として機能します。どちらのテーマでも破綻しないデザインシステムを構築する上で、非常に汎用性の高い色と言えるでしょう。
デザインシステムやコンポーネントベースの開発が一般化する中で、一貫性のあるUIを保つための「システムカラー」の重要性が増しています。ボーダーグレーは、境界線、区切り線、非アクティブな状態、控えめな背景など、システム全体で繰り返し利用されるパーツに最適なため、多くのデザインシステムで採用されています。
デザインが与える心理効果・UX
ボーダーグレーは、主張が少なく「中立」「穏やか」「機能的」といった印象を与えます。この控えめな性質が、UI/UXデザインにおいて重要な心理的効果をもたらします。
この色は、ユーザーの認知負荷を軽減するのに役立ちます。視界のノイズとならず、コンテンツや主要なインタラクション要素（CTAボタンなど）に自然と意識を向けさせることができます。ユーザーは無意識のうちに情報の構造を理解し、ストレスなくサービスを利用できるのです。
また、要素間の境界を引くことで、視覚的な階層を明確にします。これにより、関連する情報がグループ化されていることを直感的に伝え、インターフェース全体の理解を助けます。非アクティブなボタンなどに使えば、「ここは今は操作できない」という状態をユーザーに優しく伝えることができます。
視認性テスト（UIコンポーネント例）
実践的な使い方（ベストプラクティス）
最も一般的な使い方は、カード型UIやテーブルレイアウトの境界線（border）です。黒い線ほど強く主張せず、しかし要素同士をしっかりと区別してくれるため、圧迫感のないクリーンなレイアウトを実現できます。
フォームの入力フィールドやセレクトボックスのデフォルトの枠線としても最適です。ユーザーがフィールドにフォーカスした際に、プライマリーカラーなどに色を変化させることで、どこを操作しているかが明確になり、インタラクティブな体験を提供できます。
クリックできない「非アクティブ（disabled）」状態のボタンやリンクにも活用されます。操作不能であることを色で示すことで、ユーザーの誤操作を防ぎ、UIの現在の状態を直感的に伝えます。
コンテンツのセクションを区切る水平線（
タグなど）にも適しています。ページの大きな流れを妨げることなく、話題の区切りを視覚的に示し、長いページの可読性を向上させます。
サイドバーやヘッダー、フッターといった補足的なエリアの背景色として使うことで、メインコンテンツとの間に穏やかな境界を作り、ページの構造を整理する効果も期待できます。
おすすめの配色提案
Royal Blue (#4169E1)
ボーダーグレーがUIの構造を静かに支え、鮮やかなロイヤルブルーが主要なアクションを引き立てます。信頼性と機能性を両立させたいSaaSのダッシュボードやビジネスサイトに最適な、王道の組み合わせです。
Deep Pink (#FF1493)
ニュートラルなボーダーグレーを基盤に、活気のあるディープピンクをアクセントとして加えることで、デザインに楽しさと現代的な雰囲気が生まれます。クリエイティブなポートフォリオサイトなどで効果的です。
Charcoal (#36454F)
ボーダーグレーの境界線に、より濃いチャコールをテキストカラーとして組み合わせることで、優れた可読性と落ち着いた階層構造が生まれます。ミニマルで洗練された、読みやすさを重視するデザインに最適です。
