デザイナーの私がChatGPTとGASとちょっとだけ仲良くなった話

ユニファでプロダクトデザインを担当しているようがいです。この記事は Unifa Advent Calendar 2023の22日目の記事です。 adventar.org

皆さんは「仕様で色が50個必要だから決めておいてね！」と言われた経験がありますか？……私はあります！！(笑)

50色と聞くと多く感じるかもしれませんが、72色の色鉛筆セットや100色の折り紙セットが販売されているように色は本当にたくさんあり（「白って200色あんねん」の名言もあるように…）、その中から50個ピックアップする方法も色々ありそうです。今回私はChatGPTとGoogle App Scriptを使った方法を試してみたのでご紹介します。

色を50個決めた経緯

ルクミーでは、新たにルクミーアンケートというプロダクトをリリース予定です。

保育施設から保護者向けにアンケートを取る機能で、Google Formsなどの一般的なWebアンケートツールと同様、回答結果をグラフや表などで確認することができます。

保育施設の方がアンケートを作成する際、最大50個の選択肢を設定できるので、回答結果の円グラフで50色の色分けが必要になった次第です。

最初は自力で選ぼうと思っていた

HTMLやCSSを触ったことのある方はご存知かもしれませんが、私がまず思い至ったのは、Webで利用されているカラーネームでした。

CSSなどで色を指定するとき、16進数やRGBの数値を使わなくても"white""lavender"lightgray"などと書くことで表せる主要な色のことです。これらは全部で147色あります。

この147色の中から白・黒・グレー、極端に彩度が高いor低い色を省いて50個ピックアップすれば良さそう、でも少し時間がかかりそうだなあ……などと思いながら、とりあえず日報に「色を50個考えるタスク爆誕」と書いてその日は退勤しました。

そして翌日のことです。

さあ50色決めてやるぞ！と思いながら出勤すると、slackに同僚デザイナーからこんなメッセージが届いていました。

slackのスクリーンショットです。「アンケートで50色つくるの普通にやったらこれマジしんどいなーと思って、ChatGPTに50色を何回か提案してもらって、さらにそれをGASでスプシで色付きにしてみました」というメッセージが書いてあります。 — 実際に届いたslackのスクショ

……神か……？

私からお願いしたわけでもなくただ日報でぼやいただけなのに、このやさしさとスピード感…しかも解決方法がとてもスマート…ということで、自分でも真似してやってみることにしました！

ChatGPTとGASを使って、円グラフに適切な50色を選ぶ方法

1.ChatGPTに聞いてみる

「Webでカラーネームがついている147色の中から50色選んでほしいです。その際、彩度が高すぎる色と彩度が低すぎる色を除いてください。また、なるべく色相が偏らないようにしてください。」と聞いてみます。すると候補を出してくれました。

ChatGPTに「ブラウザでカラーネームがついている140色の中から50色選んでほしいです。その際、彩度が高すぎる色と彩度が低すぎる色を除いてください。また、なるべく色相が偏らないようにしてください。」と話しかけ、カラーネームのリストを作ってもらっています。彩度や色相を理解しているっぽいのもすごい（感想）

この後の工程のため、ついでに16進数のカラーコードに変換しておいてもらいます。 16進数のカラーコードを記載したリストのスクリーンショットです。

最初指示通りの色が出なかったので何度か質問し直したのですが、たまにこんなことも言ってくれます。やさしい… ChatGPTの回答の最後に「これらの色を活用して、美しいデザインを作成されることを願っています」と書かれています。

2.スプレッドシートを用意し、GASを実行

新しいスプレッドシートのA列に50個のカラーコードをコピペしてから、Apps Scriptを開いて以下のコードを実行します。

function bgInput() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("シートA");

  for (let i = 1; i <= 50; i++) {
    let bgColor = sheet.getRange("A" + i).getValue();  // カラーコードを入力したセルの範囲
    sheet.getRange("B" + i).setBackground(bgColor);  // 背景色を設定するセルの範囲
  }
}

するとこのように出力されます。スプレッドシートのスクリーンショットです。A列のセルに記載されたカラーコードが、隣のB列のセルの背景色として出力されています。

3.自力で微調整

ここから少し調整します。実際にグラフを出力し、以下に配慮して順序を並べ替えたり色を変更したりしました。

項目（色）の境目が判別しやすように、隣りあう色が似ないようにする
グラフを見ていて目が疲れてしまわないように、隣りあう色を補色にしない
よく使われそうな1〜15番目くらいまでは中明度で統一する
プロダクトで頻出するカラーアセット（プライマリーカラー/セカンダリーカラーなど）に似た色を避ける。カラーアセットの色には意味を持たせており、グラフで使用するのに適さないため

スプレッドシートのスクリーンショットです。実際に円グラフを作って色を確認しています。

4.アクセシビリティチェック

最後に、Photoshopで色校正をしました。PhotoshopではP型、D型の見え方を確認することができます。

P型色覚、D型色覚の見え方に変換した円グラフのスクリーンショットです。

ということで、ChatGPTやGAS、何よりチームメンバーのやさしさに助けてもらって効率的に50色定義することができました！ここまで読んでくださってありがとうございました！

ユニファでは一緒に働く仲間を募集しています。ご興味を持っていただけたらぜひ採用情報をチェックしてみてください！ unifa-e.com

ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。