使い方(ツールリファレンス)
| 機能 | できること |
|---|---|
| ベースカラー | カラーピッカー・HEX入力・クイックカラーチップ・🎲おまかせ・日本の伝統色から、好きな方法でベースの1色を決められます |
| 配色パターン一覧 | ベース色から6種類の配色パレットを自動生成します。スウォッチをタップするとHEXコードをコピーできます |
| このパレットでプレビュー ▶ | その行の配色を、下のプレビュー(SNS風・名刺風・本の表紙風・ブログ風)に反映します |
| 微調整 | 選択中のパレットの5色を1色ずつ好きな色に変更できます(手動調整はベース色を変えるとリセットされます) |
| 💾 パレット画像を保存 | 選択中の配色をHEXコード・役割ラベル付きの画像(PNG)として保存します。SNS共有や作業メモに使えます |
| 📋 まとめてコピー | 選択中の5色のHEXコードを「#aabbcc, #ddeeff, …」の形式でまとめてコピーします |
| 🔗 URLをコピー | 今のベース色・選んだ配色パターンを復元できるURLをコピーします。人にシェアしたり、あとで見返したりできます |
| ⭐ お気に入り | 気に入った配色を保存しておけます(最大20件)。ミニ帯をタップで復元、✕で削除できます |
配色パレットメーカーの使い方と配色の考え方
1. 配色の基本「70:25:5」
配色に慣れていない場合、色数を増やしすぎると全体がまとまりにくくなります。まずは「ベースカラー70%・メインカラー25%・アクセントカラー5%」の比率で考えるのが基本です。背景など広い面積にはベースカラーを、ロゴや見出しなどにはメインカラーを、ボタンや差し色などごく一部にだけアクセントカラーを使うと、色数が多くてもうるさくなりません。このツールの「補色」「推しカラー実用セット」の2つは、この比率をそのまま5色に割り振った配色になっています。配色の考え方をもっと詳しく知りたい方は、コラム「配色の基本｜創作・同人で使える色の選び方とまとめ方」もあわせてご覧ください。
2. 補色・類似色・トライアドとは
- 補色(コンプリメンタリー) … 色相環で反対側にある色の組み合わせです。お互いを引き立て合うため、メリハリのある配色になります。ロゴのワンポイントや、目立たせたいボタンの色などに向いています。
- 類似色(アナロガス) … 色相環で隣り合う色同士の組み合わせです。色相が近いのでなじみやすく、失敗しにくい配色です。やわらかい印象に仕上げたいときにおすすめです。
- 分裂補色(スプリット・コンプリメンタリー) … 補色の代わりに、その両隣の色を使う組み合わせです。補色ほど強いコントラストにならず、少しやさしい印象になります。
- トライアド … 色相環を三等分した3色を使う組み合わせです。にぎやかでポップな印象にしたいときに向いています。
- トーン展開 … 同じ色相のまま、明るさ・彩度だけを変えて5色にする組み合わせです。もっとも失敗しにくく、統一感を出したいときにおすすめです。
3. 推しカラーの見つけ方
推し活のデザインに使う色に迷ったら、まずは公式サイトやグッズの「イメージカラー」を確認してみましょう。公式で色が明記されていない場合は、キャラクターの衣装・目の色・ロゴの色など、印象的なパーツの色をスポイトツールやスクリーンショットの拡大で確認し、近いHEXコードをベースカラーに入力するのがおすすめです。ベースカラーが決まったら、「推しカラー実用セット」の行を見てみてください。背景・文字色・メインカラーまでひとまとめになっているので、そのままSNSのヘッダーやアイコン枠、名刺代わりのカードなどに使えます。推し活のデザインの作り方は、コラム「推し活×デザイン｜推しカラーでSNS素材やアイコン背景を作るコツ」でも紹介しています。
4. HEXコードの使い方
スウォッチをタップしてコピーしたHEXコード(例: #2f80ed)は、多くのお絵かきソフトのカラーパレットにそのまま貼り付けられます。CSSで使う場合は color: #2f80ed; のようにそのまま指定できます。ブログやSNSのテーマカラー設定、バナー作成ソフトの配色にも同じHEXコードが使えます。
5. 印刷時のRGB→CMYK注意
このツールで作る色はディスプレイ表示用のRGB(HEX)です。同人誌やグッズなど印刷物に使う場合、印刷はCMYK(インクの4色)に変換されるため、画面で見た色と実際の印刷色が少し変わることがあります(特に鮮やかな青紫や蛍光系の色は差が出やすい傾向があります)。表紙まわりなど色の再現性が重要な箇所は、印刷所のカラープロファイルや色校正サービスで事前に確認することをおすすめします。
6. 商用利用と著作権について
このツールで作った配色パレット・パレット画像は、商用・非商用を問わず自由にご利用いただけます。同人誌・グッズ・SNS素材・販売用ロゴ等への使用にクレジット表記は不要です。特定の色の組み合わせ自体に著作権は発生しませんので、安心してお使いください。
このツールはすべての処理をブラウザ内で完結しています。入力した色やお気に入りのデータはどのサーバーにも送信されず、あなたのデバイスの外に出ることはありません。
よくある質問
Q. 作った配色は商用利用できますか?
A. はい。ご自身の作品・グッズ・同人誌・ロゴなどに自由にご利用いただけます(クレジット不要)。
Q. 白・黒・グレーをベースカラーにするとどうなりますか?
A. 「トーン展開」と「推しカラー実用セット」は通常どおり生成されます。「補色」「類似色」「分裂補色」「トライアド」は色相(色あい)が定まらないため、差し色に使う色相をランダムに補って生成します。狙った色味にしたい場合は「🎲 おまかせ」で色相のある色をベースにするのがおすすめです。
Q. 保存したお気に入りはどこに残りますか?
A. お使いのブラウザ内(localStorage)に保存されます。ブラウザやデバイスを変えると引き継がれない点にご注意ください。
Q. データはサーバーに送信されますか?
A. いいえ。ベース色の入力からパレット画像の書き出しまで、すべてブラウザ内で処理されます。
Q. スマホでも使えますか?
A. はい。スマホのブラウザでもそのままお使いいただけます。