【簡単】Webサイトの配色提案ツール
そのWebサイト、色で損していませんか？
Webサイトの「第一印象」は、訪問者がコンテンツを読む前に、一瞬で決まってしまいます。その印象を大きく左右するのが**「配色」**です。
色がバラバラだったり、ブランドイメージに合っていなかったりすると、それだけで「素人っぽい」「信頼できない」という印象を与えかねません。
逆に、色が統一されているだけで、サイト全体が洗練され、プロフェッショナルな印象になります。
基本的な配色のルール
難しい色彩理論は不要です。まずは以下の3つの役割を意識するだけで、Webサイトの配色は格段に良くなります。
- メインカラー (70%): サイトの大部分を占める基本の色。ブランドのテーマカラーになります。
- サブカラー (25%): メインカラーを引き立て、サイト全体に深みを出す補助的な色です。
- アクセントカラー (5%): 最も目立たせたいボタンやリンクなどに使う「差し色」。メインカラーの反対色（補色）を選ぶと、ユーザーの注意を強く引くことができます。
配色提案ツール
「理屈はわかっても、実際に選ぶのは難しい…」という方のために、メインカラーを選ぶだけで、これらの配色パターンを自動で生成するツールを開発しました。
あなたのブランドイメージに合ったメインカラーを選ぶだけで、相性の良いサブカラー、アクセントカラー、さらには背景色やテキスト色まで提案します。表示されたカラーコードはクリックするだけでコピーできます。
このツールのソースコード
このツールは、JavaScriptを使って色情報を計算（HSL変換）し、配色を提案しています。ご自身のサイトに設置したい場合や、仕組みに興味がある方は以下のコードをご活用ください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>配色提案ツール</title> <style> /* ... CSS styles ... */ </style> </head> <body> <div class="container"> <h1>配色提案ツール</h1> <!-- ... Color picker and input ... --> <div class="palette" id="palette"></div> </div> <script> const colorPicker = document.getElementById('colorPicker'); const hexInput = document.getElementById('hexInput'); const paletteContainer = document.getElementById('palette'); // --- Event Listeners --- colorPicker.addEventListener('input', (e) => { hexInput.value = e.target.value; generatePalette(e.target.value); }); hexInput.addEventListener('change', (e) => { if (/^#[0-9A-F]{6}$/i.test(e.target.value)) { colorPicker.value = e.target.value; generatePalette(e.target.value); } }); // --- Color Conversion Functions --- function hexToRgb(hex) { let r = 0, g = 0, b = 0; if (hex.length == 4) { r = parseInt(hex[1] + hex[1], 16); g = parseInt(hex[2] + hex[2], 16); b = parseInt(hex[3] + hex[3], 16); } else if (hex.length == 7) { r = parseInt(hex.slice(1, 3), 16); g = parseInt(hex.slice(3, 5), 16); b = parseInt(hex.slice(5, 7), 16); } return { r, g, b }; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; let max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h * 360, s: s * 100, l: l * 100 }; } function hslToRgb(h, s, l) { s /= 100; l /= 100; let c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs((h / 60) % 2 - 1)), m = l - c/2, r = 0, g = 0, b = 0; if (0 <= h && h < 60) { r = c; g = x; b = 0; } else if (60 <= h && h < 120) { r = x; g = c; b = 0; } else if (120 <= h && h < 180) { r = 0; g = c; b = x; } else if (180 <= h && h < 240) { r = 0; g = x; b = c; } else if (240 <= h && h < 300) { r = x; g = 0; b = c; } else if (300 <= h && h < 360) { r = c; g = 0; b = x; } r = Math.round((r + m) * 255); g = Math.round((g + m) * 255); b = Math.round((b + m) * 255); return { r, g, b }; } function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } // --- Palette Generation --- function generatePalette(hex) { const { r, g, b } = hexToRgb(hex); const { h, s, l } = rgbToHsl(r, g, b); // 1. Main Color (Input) const mainColor = { name: 'メインカラー', hex: hex }; // 2. Shade (Darker Main color) const shadeLig = Math.max(0, l - 15); const shadeRgb = hslToRgb(h, s, shadeLig); const shadeColor = { name: 'メインカラー(濃)', hex: rgbToHex(shadeRgb.r, shadeRgb.g, shadeRgb.b) }; // 3. Sub Color (Analogous/Desaturated) const subSat = Math.max(0, s - 20); const subLig = Math.min(100, l + 15); const subRgb = hslToRgb(h, subSat, subLig); const subColor = { name: 'サブカラー', hex: rgbToHex(subRgb.r, subRgb.g, subRgb.b) }; // 4. Accent Color (Complementary) const accentHue = (h + 180) % 360; const accentRgb = hslToRgb(accentHue, s, l); const accentColor = { name: 'アクセント', hex: rgbToHex(accentRgb.r, accentRgb.g, accentRgb.b) }; // 5. Neutral Gray for borders/backgrounds const neutralSat = 5; const neutralLig = 90; const neutralRgb = hslToRgb(h, neutralSat, neutralLig); const neutralColor = { name: 'ボーダー/背景色', hex: rgbToHex(neutralRgb.r, neutralRgb.g, neutralRgb.b) }; // 6. Light Background const bgLigSat = Math.max(0, s - 40); const bgLigLig = 97; const bgLigRgb = hslToRgb(h, bgLigSat, bgLigLig); const bgColor = { name: '背景色（明）', hex: rgbToHex(bgLigRgb.r, bgLigRgb.g, bgLigRgb.b) }; // 7. Dark Text const textDarkSat = 10; const textDarkLig = 10; const textDarkRgb = hslToRgb(h, textDarkSat, textDarkLig); const textColor = { name: 'テキスト色（濃）', hex: rgbToHex(textDarkRgb.r, textDarkRgb.g, textDarkRgb.b) }; const palette = [mainColor, shadeColor, subColor, accentColor, neutralColor, bgColor, textColor]; displayPalette(palette); } function displayPalette(palette) { paletteContainer.innerHTML = ''; palette.forEach(color => { const card = document.createElement('div'); card.className = 'color-card'; card.style.backgroundColor = color.hex; // Determine text color based on background lightness const { l } = rgbToHsl(hexToRgb(color.hex).r, hexToRgb(color.hex).g, hexToRgb(color.hex).b); card.style.color = l > 60 ? '#333' : '#fff'; card.innerHTML = ``; card.querySelector('.hex-code').addEventListener('click', (e) => { e.stopPropagation(); copyToClipboard(color.hex, e.target); }); paletteContainer.appendChild(card); }); } function copyToClipboard(text, element) { navigator.clipboard.writeText(text).then(() => { const originalText = element.textContent; element.textContent = 'コピー完了！'; setTimeout(() => { element.textContent = originalText; }, 1500); }).catch(err => { console.error('Copy failed', err); }); } // Initial Palette generatePalette(colorPicker.value); </script> </body> </html>免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。