WebサイトやアプリケーションのUIをデザインする際、テキストの色や背景色にどのような「黒」を使っていますか？ CSSでとりあえず color: #000000; や color: black; と指定しているエンジニアの方も多いかもしれません。しかし、多くのサービスでは、テキストや背景に「完全な黒（#000000）」が使われていません。黒に近いグレーが使われています。 一見すると些細な違いに思えますが、実はこの「黒の選び方」には、人間の視覚や画面の特性に基づいたロジックが存在します。 今回は、なぜUIデザインにおいて「真っ黒」を避けるのか、その論理的な理由と、「良い黒」の作り方、そして例外的な使われ方を解説します。 理由1：コントラストが強すぎると目が疲れる 紙に印刷された黒い文字を読むのとは異なり、私たちが普段見ているPCやスマートフォンのディスプレイは「発光体」です。 真っ白な背景（#FFFFFF）に真っ黒なテキスト（#000000）を配置すると、画面の輝度の最大値（100%の光）と最小値（0%の光）が隣り合うことになります。この極端なコントラストは、目に対して強い刺激を与えます。 アクセシビリティの観点から「コントラスト比は高い方が良い」とされていますが、高ければ高いほど良いというわけではありません。視覚過敏を持つユーザーや、乱視のユーザーにとっても、100%のコントラストは逆に可読性を下げてしまうのです。 理由2：現実世界に「純粋な黒」はほとんど存在しない 色彩心理学や物理学の観点からも、#000000 は特異な色です。 現実世界を見渡してみてください。アスファルト、カラスの羽、黒いスマートフォンケース……私たちが日常で「黒」と認識しているもののほとんどは、光をわずかに反射しており、環境光の影響を受けてかすかに色味を持っています。光の反射率が完全に0%の「純粋な黒」は、光吸収素材のような特殊な状況にしか存在しません。 そのため、人間の脳は画面上の #000000 を見たとき、無意識に「不自然さ」や「重苦しさ」、あるいは画面に穴が空いているような「圧迫感」を感じ取ります。 UIデザインが目指すのは、現実世界の物理法則に寄り添った自然な認知です。自然界に存在しない完全な黒を避けることで、UI全体から人工的な違和感を取り除くことができます。 理由3：ダークモードで「奥行き」が表現できなくなる 近年標準となった「ダークモード」の設計において、背景を #000000 にすることはUIに制約が発生する恐れがあります。 UIデザインは、ボタンやカードなどの要素に「ドロップシャドウ（影）」をつけることで、要素が重なり合っている「Z軸（奥行き）」を表現します。手前にある要素ほど影が大きく、背景から浮き上がって見えます。 しかし、背景色が #000000（これ以上暗くならない色）の場合、その上に要素を置いて影をつけても、背景と同化してしまい影が見えません。結果として、どの要素が手前で、どれがクリック可能なのかといった階層構造（エレベーション）を視覚的に伝えることが難しくなります。 UIの「黒」の作り方 では、実際にコーディングやデザインをする際、どのような「黒」を使えばよいのでしょうか。 1. 無彩色のダークグレー 最もシンプルで失敗がないのは、明度を10パーセント程度上げたダークグレーです。 2. ブランドカラーを混ぜた「リッチブラック」 純粋なグレー（RGBの値がすべて同じ色）ではなく、ブランドのメインカラー（プライマリーカラー）をわずかに混ぜた黒、通称「リッチブラック」を使用する方法です。 例えば、上記の「Jira」のようにプライマリーカラーが「青」のサービスなら、黒にも少しだけ青味を足します。 これにより、画面全体の色調が馴染み、統一感と高級感が生まれます。 あえて「完全な黒（#000000）」を利用するケース ここまで「使うべきではない」と解説してきましたが、 あえて #000000 を利用するケース も存在します。 OLED（有機EL）ディスプレイ機器でのバッテリー節約 有機ELディスプレイは、黒を表示する際に「そのピクセルの発光を完全にオフにする」という仕組みを持っています。例えばスマートフォンアプリにて背景色を#000000とすれば、該当の端末でバッテリー消費を抑えることができます。 ハイコントラストで世界観を伝える ブランドのコンセプトとして、意図的にエッジを効かせ、強烈なコントラストで強い印象を与えたい際に、あえて純粋な黒と白をぶつける場合があります。 アクセシビリティ要件（ハイコントラストモード） 視覚障害を持つユーザー向けにOSレベルで提供される「ハイコントラストモード」では、視認性を最優先するため、#000000 と #FFFFFF の組み合わせが意図的に使用されます。 まとめ：色の設計は、まず「ロジック」 「なぜその『黒』にするのか」を意識するだけで、UIのクオリティは向上します。 目の疲れを防ぐため（コントラストの調整） 自然な認知を促すため（現実世界とのリンク） 奥行きを表現するため（ダークモードの設計） UIデザインはサービスの固有性を表現する要素もありますが、前提として人間の特性やデバイスの仕様に基づいた「ロジック」があります。これにより、適切な配色が可能になります。 Photo by Ricardo Avelar , Kyaw Zay Ya , Wander Fleur , Michael Maasen Eva Wilcock , Jordi Vich Navarro , Vivek Doshi , Aaron Burden on Unsplash ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？ 役に立った 役に立たなかった 0人がこの投稿は役に立ったと言っています。 The post 配色ロジック：なぜ、UIの「黒」は黒ではないのか first appeared on SIOS Tech Lab .

はじめに 初めまして、2025年度新入社員の岡嵜健太です。 現在私は、HTMLやCSS、（極まれにJS）を用いてflexboxの便利さに感動しながらモック作成やエンハンス業務などを行っています。 さて、早速ですが皆さんは以下のようなレイアウトを組むときはどのように実装しますか？ Flexbox？CSS Grid？Marginで調整？ 私はFlexbox大好き人間でしたのでなんとなくFlexboxを使いがちでした。←よくない そんな私が、業務で１からCSS Gridを学び、Flexbox・CSS Grid大好き人間になったので、今回はFlexboxとCSS Gridを上手に使いこなすためにそれぞ…

はじめに セーフィー株式会社 開発本部 ソリューション開発部の土井 慎也です。 皆さん、他人のプロジェクトや、あるいは自社のサービスのリリースノートって、隅々まで読んでいますか？ 正直に告白すると、私は面倒くさくてしっかりとは読めていません。 「新機能が追加されました！詳細は以下の箇条書きをチェックしてください」 ……いや、文字が多くてパッと見で何が変わったのか分からないな。 そんな風にブラウザのタブを閉じてしまった経験は、誰しもあるのではないでしょうか。 せっかく開発者が心血を注いで実装した機能も、伝わらなければ存在しないのと同じです。テキストだけのリリースノートには、直感的な