グラフィック制作で直面する高い高い壁。それが「色選び」DEATH！　同人誌の表紙を作りたい非絵師にも同じことが言える！　フンッ（鼻息）。

お世辞にもセンスが良いとは言えない私（@saosaoyamayama）は現在、センスの代わりに地道に信頼を拾い集め、とある大企業のメディアでせっせと画像制作を継続しています。

日々画像と向き合っている皆さん、こんな状況に陥りませんか？

使いたい色が2色ある。これに調和する「あと1色」が欲しい。でも何色が合うんだろう……。

私はよくあります。こんな時はカラーコードをChatGPTに渡して、合う色を考えてもらっていました。

今回はこの動きを、Macのショートカットアプリで簡単にまとめてみました！　ショートカットボタンを押して、色コードを2つ指定するだけ。あとはMacとChatGPTがイイ感じに動いて、色を2色提案してくれます。

なお、OSはMacのみです。それでは行ってみよう！

※本記事はPRを含みます。

あと1色ちょうだいショートカット｜用意するもの・準備

今までショートカットアプリをいくつか作ってきましたが、ChatGPT用のアクションが追加されたことにより、かなり自由度の高いショートカットが作れるようになったな〜と感じております。

今回作る「あと1色ちょうだい」も、ChatGPTありきのショートカットです。ショートカットを作る前に、以下を揃えて置いてください。

• ChatGPTアプリ：ログインしておく
• ショートカット.app（Mac標準搭載）
• Digital Color Meter（Mac標準搭載）

以上です。なお、今回はCanvaでグラフィックを作っていることを想定しながら説明しますが、私が仕事で使っているのはAdobe Expressですし、MacのプレビューでもClip Studio Paintでも同様に使えます。

このショートカットはアプリを問わず、色コード（HEXコード）がわからないブラウザ上の画像からでも、イラストからでも写真からでも色コードを取得して使用できるのがウリなのでございます。

Digital Color Meterの初期設定

Digital Color MeterはMacに標準搭載されているアプリです。何をしてくれるかというと、Macの画面上に表示されているあらゆるものの「色」を、各種コードで取得してくれます。

たとえばChromeに表示されている素敵なWebサイトの背景色。友人から送られてきた写真の青空。Musicアプリのアイコンの赤。Macの画面にある色なら何だって取得してくれる、超高機能アプリです。無料で使えるのが意味わからん。

今回のショートカットでは、色情報を「HEXコード」という形で取得します。「#FFFFFF」のようにシャープ＋6桁の英数字からなるコードがHEXコードです。

そのため、Digital Color Meterで検出した色を、HEXコードで取得できるように設定する必要があります。

Digital Color Meterを立ち上げたら、上部メニューの「表示」から「値を表示→16進」を選べばOKです。

必要に応じて：画面収録の設定

Digital Color Meterを使った時、色を取得したい画像ではなく、その後ろにあるアプリや壁紙の色を取得してしまう場合に確認してほしい設定です。

たとえば、Canva上の色を取得したいのに、そこをすり抜けてMacの壁紙の色を取得してしまう、みたいな状況です。

Macのシステム設定から「プライバシーとセキュリティ→画面収録とシステムオーディオ録音」に、Digital Color Meterが入っているか確認してみてください。

実は、入っていなくてもDigital Color Meterは動きます。でも、うまく動かない時はここにDigital Color Meterを追加することで、正確に動くようになるようです。

※セキュリティ関連になるので、自己責任でお願いします。

ショートカットのレシピ

こちらが今回のショートカットのレシピです。めっちゃ簡単！

どんなアクションを使うか、どのように設定するかを以下に書いておくので、ぜひ丸パクリ真似して作ってみてください。

1. アプリを開く

まずは「アプリを開く」アクションを追加し、Digital Color Meterを指定しましょう。

ショートカットボタンを押した時に、このアプリが自動的に立ち上がります。

2. 入力を要求

続いて「入力を要求」アクションを3つ追加します。初期値は『「プロンプト」で「テキスト」を要求』です。

このアクションが指す「プロンプト」とは、入力用のポップアップウインドウに表示される説明文のこと。今回は「【1色目】Shift＋Command＋Cで色取得→Command＋Vでコードを貼り付ける or HEXコードを手入力」としました。

こんなに説明臭くしなくても「色コードを入力」だけで大丈夫です。また、2つ目のアクションは【2色目】として同じテキストを入れています。

アクション右側の「表示を増やす」をクリックし、デフォルトの回答を「例）#FFFFFF」と書きましたが、ここについても何も書かなくてOKです。

3つ目には「全体イメージ・要望」というテキストを入れました。

この項目では、たとえば「教育関連のメディアに使う画像」「女性ターゲットのイラストに使いたい」など自然言語で入力することを想定しています。そのため入力が長くなることを考慮して、「表示を増やす」から「複数行を許可」にチェックを入れました。

3. テキスト

テキストアクションを追加し、ChatGPTに渡す指示文（一般的に「プロンプト」と呼ばれるもの）を入力しましょう。

このテキストは皆さんが希望する内容に変更してくださいね。アクセントカラーだけしか使わないならサブカラーは要らないし、アクセントカラーを2色提案してくれ、とかでも大丈夫。このあたりを柔軟性高く指定できるのは、ChatGPTならではだと思います。

さて、指示文だけではChatGPTに「HEXコード」や「要望」が渡せないので、下に色コード2色分と全体イメージを変数としてセッティングしています。

変数は「マジック変数」を使うと簡単です。まずは「色1：」と入力した後ろで右クリックし「変数を挿入→変数を選択」と進むと、青いバーが付いた表示に切り替わります。

この状態で、1色目なら「1色目はコレをクリック」と書かれている「入力を要求」をクリックすればOK。2色目、全体イメージについても同様に操作してみてくださいな。

4. アプリを閉じる

「アプリを終了」アクションを追加し、Digital Color Meterを指定します。

Digital Color Meterが開きっぱなしになっていると、メニューバーの入力監視アイコンに色が付いていて気になるので、アプリを閉じるようにしました。

5. Ask ChatGPT

「Ask ChatGPT」アクションを追加し、プロンプトには工程3の「テキスト」を指定しました。指定する時はマジック変数を使うとわかりやすいです。

Ask ChatGPTは待望のアクションですね！　APIなしでChatGPTにつないでくれるのは嬉しいし、自然言語が使えると幅が広がるヨネ〜。

なお「表示を増やす」をクリックすると「実行時に表示」にチェックが入っていると思います。これは外して、Start〜かContinuous〜のいずれかにチェックを入れておきましょう。「実行時に表示」にすると、ショートカットを動かすたびに許可画面が出てくるようで、めんどくさい。

私は「Start New Chat」を選択しています。これだとショートカットを動かす度に新しいチャットが立ち上がってしまうんですが、チャットごと丸っと削除しやすいのが利点です。「あと1色考えて」のチャットって、未来永劫残しておく必要がないので、削除しやすさを優先しました。

ChatGPT側の表示

ショートカット経由で立ち上げたチャットには、青い印が付きます。

6. 結果を表示

最後に「結果を表示」アクションを追加します。すると、自動的に工程5の「Ask ChatGPT」が変数として入ります。もし入らなければ、マジック変数を使って指定しましょう。

「結果を表示」アクションを使うことにより、ChatGPTやブラウザを開かずに、ショートカット画面で結果を表示してくれます。ただし、表示までにちょっとだけ時間がかかります。

あと1色ちょうだいショートカットの使い方

ほんでは、どのように動くのか、どのように使うのか、解説します。

今回はこの2色に合うアクセントカラー・サブカラーをChatGPTに考えてもらいましょう。

ということで、さっそくショートカットボタンを押します。

このように、Digital Color Meterと、HEXコード入力用のウインドウが開きました。

HEXコードを手入力したい場合は、入力ウインドウの「例）#FFFFFF」のところに入力しましょう。

HEXコードを手入力せずDigital Color Meterに吸い取ってもらいたい人は、必ずやることが1つあります。Digital Color Meterのウインドウを、どこでもいいのでクリックして「アクティブ」な状態にしましょう。

「Digital Color Meter」という文字が黒になっていればアクティブです！

この状態で、マウスのポインタ（矢印など）を1色目の上に乗せます。

ポインタは「乗せる」だけで、クリックはしないでください。このキャプチャでは、ポインタを乗せた箇所と、Digital Color Meterの四角いボックスが同じ紫色になっていますよね。これでOKです。

この状態で「Shift＋⌘＋C」を押しましょう。これでHEXコードが取得できます（クリップボードに入る）。

ポインタを乗せた時に間違えてクリックしてしまった場合は、もう一度「Digital Color Meter」をアクティブな状態にして、ポインタを乗せ直しましょう。

なお、Digital Color Meterはデスクトップ上に表示されている色を馬鹿正直に取得するので、アプリのウインドウが重なってできた影の部分は、少し暗い色番号が検出されてしまいます。

ポインタを置く時は、影がかかっていない場所を選びましょう。

ショートカットのウインドウに⌘＋Vで貼り付けて、「完了」を押します。これで1色目のHEXコードが取得できました。

もう1色も同じように取得→貼り付けを繰り返します。必ずDigital Color Meterがアクティブになっていることを確認してから、Shift＋⌘＋Cでコードを取得してくださいね。

次に「全体イメージ・要望」を指定します。ここは自然言語、自由記述です。

• 子育て記事のイメージに合う色がほしい
• マッチョを目指す男性がターゲット 等

好きなように書いてください。特になければ空欄で大丈夫。汎用性の高い色セットを考えてくれます。終わったら「完了」をクリックしましょう。

そうすると、Digital Color Meterのアプリが自動的に終了し、ChatGPTが動き始めます。これらは勝手に進んでいくので、ウインドウを切り替えなくてOKです。

このままちょっと待っていると……。

ChatGPTからの提案が表示されました！

スクロールして読んでみると、アクセントカラーとサブカラーそれぞれのHEXコードと、それを選んだ理由も書いてありました。

では、どのような色を選んでくれたのか確認してみましょうか。

「アクセント」の赤、「サブカラー」のグレーがChatGPT提案色でございます。

今までChatGPTにカラーパレットの作成を何度も頼んでいますが、下手をこいたことはありません。色の調和を考えたうえで提案してくれているな〜と感じますし、自分では使わない・考えつかないであろう色味を出してくれるので、とても勉強になります。

注意点

Digital Color Meterで取得するHEXコードと、Canva等で指定している実際のHEXコードにズレが生じる場合があります。

HEXコードが1つや2つズレていたとしても、ChatGPTに提案してもらうのはあくまで「合う色」なので、提案色が大幅に変わることはないと思っています。そのため私は気にしません。

ズレがどうしても気になる方は、Digital Color Meterは使わずに、HEXコードを調べて手入力したほうがいいですかね……。

あとね、ChatGPTのAPIに課金している方は、もっと別のやり方があるかもしれません。そういう方は、ぜひご自身好みのアプリを作ってください。

今回は、ChatGPT無料版ユーザーや、APIに課金していない人でも使える仕組みを目指して作っております。

センスに頼らない色選びの新常識

「あと1色ちょうだい」ショートカットを使えば、プログラム知識ナシでも、ChatGPT無料版だけで、色選びの悩みをそこそこ解決できます。

HEXコードは手入力も、Digital Color Meterでの取得にも対応しているので、グラフィック制作で色選びに悩んでいる人や、センスに自信がないけれど「イイ感じのカラーパレットが使いたい！」な人にもおすすめです。

このショートカットは、CanvaやAdobe Express、Clip Studio Paintなど、どんなアプリでも使える汎用性の高さも魅力。ブラウザ上の画像、イラスト、写真からでも色を取得できるので、色選びの幅がぐっと広がります。

「センス」はテクノロジーで補え！　これが、これからのグラフィック制作の新常識だ！（大げさ）