PREVIEW ON INSTAGRAM
思わず止まる。
この配色の視認性スコアは「0点」です
視認スコア
0%
コントラスト比
0
判定
改善推奨
Advertisement
バズり配色シミュレーターとは？
本ツールは、「視認性の高さ ＝ 認知のしやすさ」というマーケティングの原則に基づき、SNS投稿のメインカラーを最適化するツールです。 Instagram、TikTok、YouTube、X（旧Twitter）の各UI背景（ライト/ダーク）と、あなたの選んだ色が「どれだけ喧嘩せず、かつ目立つか」をWCAG（Webアクセシビリティ・ガイドライン）基準で判定します。
こんなシーンで便利です
YouTubeサムネイルの文字色選び
背景画像が暗い場合や、YouTubeのダークモードで見られた時に、タイトル文字が埋もれないかを確認。クリック率（CTR）に直結する配色を見つけます。
X（Twitter）の図解画像作成
タイムラインの背景色に対して、図解のメインカラーがボヤけていないかチェック。スクロールの手を止める「強い色」を科学的に選定できます。
Instagram投稿の表紙デザイン
発見タブに並んだ際、周囲の投稿よりも浮き立って見えるような、コントラストの高い色の組み合わせをシミュレートします。
TikTok/リールのテロップ調整
動画の上に重ねるテキストが、UIの要素や背景と混ざって読みにくくなるのを防ぎ、情報の伝達スピードを最大化します。
使い方は簡単 4ステップ
- シミュレートしたいSNSプラットフォームとテーマ（ライト/ダーク）を選択します。
- 使用したいメインカラーをカラーピッカーまたはHEXコードで入力します。
- 「視認スコア」と「コントラスト比」を確認し、判定が「合格」になるよう微調整します。
- 迷った時は「背景の補色を適用」ボタンを押し、最も目立つ反対色を自動生成します。
※コントラスト比が4.5:1以下の場合は「改善推奨」となります。バズを狙うなら7:1以上を目指しましょう。
ご利用時の注意点
- プラットフォームの仕様：各SNSの背景色はアップデートにより微増減する場合があります。本ツールでは最新の一般的な値を採用しています。
- 色の心理的影響：視認性スコアが高くても、ブランドイメージに合わない色は逆効果になる場合があります。数値と感性のバランスを大切にしてください。
- 補色について：生成される補色は「物理的に最もコントラストが高い色」ですが、彩度が高すぎる場合は少し明度を調整すると洗練された印象になります。
Advertisement
SNS別・背景色と理想のコントラスト比一覧
主要SNSのダークモード/ライトモードにおける16進数（HEX）カラーコードと、推奨されるコントラスト比の基準値です。
| プラットフォーム | 背景カラーコード | 視認性合格ライン | 推奨される用途 |
|---|---|---|---|
| X (Twitter) | #000000 / #FFFFFF | 7.0:1 以上 | タイムライン画像・図解 |
| YouTube | #0F0F0F / #FFFFFF | 4.5:1 以上 | サムネイル・テロップ文字 |
| TikTok | #121212 / #FFFFFF | 7.0:1 以上 | 全画面動画内の字幕・ロゴ |
| #000000 / #FFFFFF | 4.5:1 以上 | フィード表紙・ストーリー | |
| LINE (基本) | #7294C7 / #FFFFFF | 3.0:1 以上 | リッチメニュー・公式画像 |
【バズる配色の科学：コントラスト比とは】
コントラスト比とは、2つの色の「明るさの差」を数値化したものです。WCAG 2.1（Webアクセシビリティ基準）では、文字情報を確実に伝えるために「4.5:1以上」をレベルAA（標準）、より高い視認性が求められる場合に「7.0:1以上」をレベルAAA（非常に高い）と定義しています。
【SNSマーケティングにおける活用】
SNSのタイムラインは「情報の濁流」です。ユーザーがスクロールを止める時間はわずか0.2秒と言われています。 背景色に対して補色（反対色）を使い、コントラスト比を7.0:1以上に設定することで、脳が瞬時に情報を認識し、反射的に指を止める「バズりの初速」を生み出すことが可能になります。
※各SNSの背景色（ダークモード）は、完全な黒（#000000）を採用している場合と、目に優しいグレー寄りの黒（#0F0F0Fなど）を採用している場合があります。本シミュレーターではこれらの微細な差も計算に含めています。
よくある質問（FAQ）
Q.補色（反対色）を使うと、なぜバズりやすくなるのですか？
A. 人間には、隣接する色同士の差が大きいほど、その境界を強く認識する性質があります。背景の補色を使うことで、投稿が画面から「飛び出して見える」ような錯覚を生み出し、注目度を上げることができます。
Q.ダークモード対策はどこまで重視すべきですか？
A. 現在の主要SNSではユーザーの約3割〜5割がダークモードを利用していると言われています。どちらのモードでもスコアが安定する色を選ぶのが、現代のSNS戦略の定石です。
Q.色弱の方への配慮も確認できますか？
A. 本ツールのベースとなっているWCAG基準は、色覚多様性を持つ方にとっても読みやすい配色（ユニバーサルデザイン）の指標でもあります。合格判定であれば、多くの方にとって見やすい色と言えます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。