Amazon Monitron による多拠点工場群設備の不良予知保全ダッシュボードデモを AWS Summit 2024 Japan で展示しました(Part 3: 生成 AI を活用した Grafana ダッシュボードデザイン改善 )

生成 AI の普及が進む中で、活用方法に関する相談が増えています。 AWS のソリューションアーキテクトは、自分の能力を補完することを目的に、お客様に生成AIの活用を提案することがあります。本ブログでは、デザインの専門知識がないソリューションアーキテクトの私が、生成 AI を活用してデザインの能力を補い、ダッシュボードのデザインを改善した事例とその方法をご紹介します。対象のダッシュボードは AWS Summit 2024 Japan で展示した Amazon Monitron による多拠点工場群設備の不良予知保全ダッシュボードデモです。

利用した生成 AI ソリューション

AWS Japan のソリューションアーキテクトが利用した生成 AI ソリューションは aws-samples に公開している generative-ai-use-cases-jp (略称: GenU ) のチャット機能です。今回、生成 AI サービスは Amazon Bedrock、大規模言語モデル（ LLM : Large language Models ）は Claude-3-Sonnet を利用しました。

(図：generative-ai-use-cases-jp のチャット機能のユーザーインターフェース)

generative-ai-use-cases-jp のソリューションは、 AWS アカウントに無料でデプロイできます。発生するコストは GenU で使用する AWS サービス料金のみです。

生成 AI を活用した UI デザイン改善の背景

Amazon Monitron による多拠点工場群設備の不良予知保全ダッシュボードデモにおいて、私の担当は、 Amazon Managed Grafana でダッシュボードを作り、 Amazon Monitron のデータを可視化することでした。AWS Summit 2024 Japan の開催2日前で残されたのは作業は、一部のデザイン改良です。さらにデザインを良くして、ご来場者の方々に関心を持っていただけるダッシュボードにしたいと考えていました。しかし、デザインの専門知識がない私が短期間で自力で改良することは困難だったので、生成AIの活用を試みました。

要件

今回のデザインの要件は 3 つでした。

要件 1 (必須要件)：プロジェクトビューの 4 つの円グラフの項目数の合計が 36 。しかし、それぞれに相関関係がなく、異なる36色を設定する。
要件 2 (必須要件)：プロジェクトビューの 4 つの円グラフでは、多くの暗い色が設定されており、明るい色に変更して視認性を高める。
要件 3 (推奨要件)：遠くからでも見えるように、フォントサイズや背景色を見直し、タイトルやサブタイトルの可読性を高める。

生成 AI を活用したダッシュボードデザイン変更 Before / After

約 2 時間の作業で、生成 AI の活用により要件を満たすデザインに変更できました。

結果

要件 1 ：要件を満たす。
要件 2：プロンプト実行で重ねることで、要件をほぼ満たす。
要件 3：要件を満たす。

ダッシュボードのデザインは以下のように変わりました。

(図：ダッシュボード Before )

(図：ダッシュボード After )

要件 1 : 4 つの円グラフで異なる 36 の色を設定する

要件 1 を実現するため、以下の手順を踏みました。改善前は、右上から時計回りで配置している「障害の原因」、「実施結果」、「障害モード」の 3 つの円グラフに同じ青色が設定されていました。さらに、「障害の原因」と「障害モード」には濃い緑色が使われていました。そこで、まず左上の「ステータス」円グラフの 5 色を手動で設定後、時計回りで「障害の原因」、「実施結果」、「障害モード」の 3 つの円グラフの配色を GenU で異なる色に変更しました。

(図: 要件 1 の実行順（オレンジの矢印） )

右上の円グラフ「障害の原因」の色を変更するため、 GenU に以下のプロンプトを実行しました。ポイントは、生成 AI にグラフィカルデザイナーという明確な役割を与えたことです。また、「障害の原因」円グラフは最大 9 つの値を表示します。そこで、左上の円グラフ「ステータス」の色と被らない 9 色を提示するよう生成 AI に求めました。

あなたはグラフィカルデザイナーです。円グラフで9つの値を表示します。以下の条件を踏まえて、各値を見えやすい配色をRGBで考えてください。
・背景色：黒（#000000）
・左隣に円グラフがあり、表示カラーはRGB(115, 191, 105)、RGB(255, 120, 10)、RGB(234, 234, 234)、RGB(250, 222, 42)、RGB(242, 73, 92)の5色で、これらの色と被らないこと。
・円グラフ内に％表示する文字は白文字で、各値の配所により埋没しないこと。

その結果、 GenU から次のように円グラフ「ステータス」と異なる 9 つの RGB 値が提示されました。

(図：円グラフ「障害の原因」のプロンプトと実行結果 )

時計回りに、各円グラフの配色提案のプロンプトを実行しました。 1 つ目の学びは、 Claude-3-Sonnet は、複数のプロンプト間の表現のゆらぎを吸収してくれることです。前回は、円グラフ「ステータス」を「左隣の円グラフ」と表現していましたが、今回は「円グラフ A 」と違う表現を使いました。このように表現が異なっていても、Claude-3-Sonnet は内容を正しく理解し、適切なプロンプトを返してくれました。

(図：円グラフ「実施結果」のプロンプトと実行結果 )

円グラフ「障害モード」の配色についても、同様のプロンプトを実行しました。その結果、各円グラフの配色がユニークになり、要件 1 を実現することができました。

(図：要件 1 プロンプト実行後の円フラフの配色 )

要件 2 : 明るい配色の円グラフにする

要件 1 の実現でユニークな色に設定はできましたが、一部の色の間に視認性に大きな差はありませんでした。また、暗めの色が多く採用されていたため、要件 2 (明るい配色) が未達です。そこで、円グラフの配色を明るい色を中心に変更することにしました。円グラフ「障害の原因」から時計回りに進み、同様の手順で実施しました。

(図：要件 2 の実行順 )

下記のように要件 1 の実現で得られた配色において、明るい色は残しつつ、暗い色を変更するプロンプトを実行しました。

円グラフBは以下の4色を残して、再提案をしてください。
RGB(27, 156, 152) – 涼しげなターコイズブルー
RGB(115, 194, 251) – 明るいスカイブルー
RGB(226, 153, 186)- ライトピンク
RGB(175, 175, 247) – 薄いラベンダー

2 つ目の学びは、 Claude-3-Sonnet が各円グラフのデータ項目数を把握しており、指定なしでも適切な色数を提案してくれたことです。 Claude-3-Sonnet は過去のプロンプトの内容を記憶しており、「円グラフ B 」と主語を明記することで、円グラフの構成を正確に判断しています。具体的には、円グラフ「障害の原因」は 8 つのデータ項目で、 4 色を残して残りの色の変更をリクエストしました。各円グラフのデータ項目数は異なりますが、プロンプトには残す 4 色しか明記していません。しかし、 Claude-3-Sonnet は適切に 4 色の提案をしてくれました。

(図：円グラフ「障害の原因」のプロンプトと実行結果 2 )

提案された色を確認し、目的の配色を得られるよう、繰り返しプロンプトを実行しました。要件 2 の実現には、プロンプトを何度も繰り返す必要があったため、 3 つの要件の中で最も時間がかかりました。また、 3 つ目の学びは、人間が異なる色と識別できる 36 色を設定することは、生成AIを使っても難しいことが分かりました。

(図：要件 2 プロンプト実行後の円フラフの配色 )

要件 3：タイトルやサブタイトルの可読性を高める

タイトルやサブタイトルの可読性を高めるために、ダッシュボードタイトルの白ラベルとプロジェクトビューなどのグレーラベルの配色について GenU に意見を求めました。ダッシュボード画像を GeuU に添付して、以下のプロンプトを実行しました。ポイントは要件 1 と同様に役割を与えたことです。次に画像からラベルの色が識別できるか不明だったので、ラベルで設定している背景色を明記したことです。

あなたはグラフィカルデザイナーで、ダッシュボードの最終確認をします。
部下が設備予知保全ダッシュボードの背景色とプロジェクトビューの背景色の考えてきました。画像を参考に2つの背景色が妥当か確認してください。
もっと良くなる背景色があれば提案をしてください。
ダッシュボード背景色：#000000
設備予知保全ダッシュボード背景色：#FFFFFF
プロジェクトビュー背景色：#898989

GenU からの応答には、ラベルの背景色に加えて、円グラフの配色とフォントサイズについての改善案が含まれており、想定以上の回答を得ることができました。

この設備予知保全ダッシュボードのデザインは全体的にシックで落ち着いた印象があり、良いバランスだと思います。ただし、いくつか改善点があります。
ダッシュボード背景色の#000000(黒)は適切ですが、設備予知保全ダッシュボードの背景色の#FFFFFF(白)は、グラフやデータと対比が強すぎて目が疲れる可能性があります。代わりに#F5F5F5(薄いグレー)などの落ち着いた色を使うことをお勧めします。
プロジェクトビューの背景色の#898989(灰色)は少し暗すぎます。代わりに#BDBDBD(明るい灰色)などの明るめの色を使うと、より見やすくなると思います。
グラフの色使いは適切ですが、もう少しアクセントカラーを効果的に使うとよりインパクトがでるでしょう。例えば、重要な指標の円グラフに鮮やかな色(赤や青など)を使うなどです。
フォントの色とサイズにも気をつける必要があります。現在のデザインでは、一部のテキストが背景に埋もれて見づらい部分があります。
全体として落ち着いた色使いでまとまっていますが、適度なアクセントと対比を加えることで、より見やすく分かりやすいダッシュボードになると思います。必要に応じて調整をお願いします。

( 図：要件3のプロンプトと実行結果 )

そこで、フォントカラーとサイズの適切な設定についても GenU にアドバイスを求めました。

フォントの色とサイズで良くする点がありましたら、提案をしてください。

その結果、フォントの色と最適なサイズの提案が返ってきました。

フォントの色とサイズについて、以下のように提案します。
【フォントの色】
メインタイトル(「設備予知保全ダッシュボード」)
現在の白は背景の黒に埋もれて見づらいので、より明るい色の方が良いでしょう。
提案: RGB(220,220,220)の明るいグレー
サブタイトル(「プロジェクトビュー」など)
現在の灰色は大丈夫ですが、もう少し明るめの色の方が見やすくなります。
提案: RGB(160,160,160)
データラベル(グラフ内の値など)
現在の白は問題ありませんが、アクセントになる色を使うとより見やすくなります。
提案: RGB(255,200,0)の黄色を使う
【フォントのサイズ】
メインタイトル: 現在の24ptはちょうど良いサイズ
サブタイトル: 現在の18ptは小さ過ぎます。20ptが適切でしょう。
データラベル: グラフによって最適なサイズは異なりますが、
概ね12pt~14ptが見やすいサイズになると思われます。
その他の補助テキスト: 10ptが最小サイズとして適切です。
このようにフォントの色とサイズを最適化することで、データが一目で視認でき、より分かりやすいダッシュボードになると考えられます。必要に応じて更なる調整をお願いします。

(図：フォントカラーとフォントサイズのプロンプト結果 )
※画像ではメインタイトルのフォント色の提案が切れています。

内容を確認すると、フォントカラーは 10 進法表記での提案でした。しかし、 AWS Managed Grafana ではラベルのフォントカラーを HEX 表記で設定するため、 HEX 表記の提案を求めました。

色はHEXで教えてください。

HEX表記での提案が返ってきました。

分かりました。フォントの色をHEX表記で提案します。
【フォントの色】
メインタイトル(「設備予知保全ダッシュボード」)
提案: #DCDCDC (明るいグレー)
サブタイトル(「プロジェクトビュー」など)
提案: #A0A0A0
データラベル(グラフ内の値など)
提案: #FFCC00 (黄色)

(図：フォントカラーHEXのプロンプトと実行結果 )

GenU の提案に基づき、ラベルの背景色とフォントサイズを設定したところ、メインタイトルとサブタイトルのラベルの色が同色化しました。そこで、 GenU の提案を一部採用することにしました。具体的には、メインタイトルの白色は変更せず、プロジェクトビューなどのサブタイトルについては、 GenU の提案に従って背景色とフォントサイズを変更しました。

(図：ラベル Before )

(図：ラベル GenU 提案 )

(図：ラベル After（最終）)

以上により、 AWS Summit 2024 Japan で展示するダッシュボードデザインの設定が終わりました。プロジェクトビューの 4 つの円グラフの配色は、ユニークかつ以前より鮮やかなものになりました。さらに、プロジェクトビューなどのサブタイトルの文字色を黒に変更したことで、可読性が高まりました。

(図：要件 3 プロンプト実行後のダッシュボード画面)

おわりに

このブログでは、生成 AI ソリューション generative-ai-use-cases-jp (略称: GenU )を利用し、 AWS Summit 2024 Japan で展示した「Amazon Monitron による多拠点工場群設備の不良予知保全ダッシュボードデモ」のデザインを改善した事例とその手法を紹介しました。最後に、Amazon Monitron による多拠点工場群設備の不良予知保全ダッシュボードを紹介している AWS ブログを紹介します。こららのブログには、デモの目的や構成を紹介しています。デモに関心にある方は、ぜひご覧ください。

このブログについて

AWS Summit 2024 Japan で展示した「 Amazon Monitron による多拠点工場群設備の不良予知保全ダッシュボードデモ」は AWS Japan のソリューションアーキテクト吉川晃平、安田京太、梶山政伸、三好史隆、秦将之、大井友三が開発しました。

ブログ執筆者

梶山　政伸 (Masanobu Kajiyama)

ソリューションアーキテクトとして、製造業のお客様と共にクラウドジャーニーをしています。趣味は旅行で、欧州・中東・アジアの19ヶ国を訪れました。

Amazon Web Services ブログ