はじめに
みなさんこんにちは。インプルの岩崎です。
今回は、普段皆さんが使っているchat-GPTのようなLLMと画像のお話です。
前回、Figma APIを使って、デザインファイルとデザインガイドラインの差分を検出する内容を紹介しました。まだご覧になっていない方は、ぜひご覧ください！
今回は、この方法の課題に対して、LLMの画像認識を通して解決を試みていく手法を紹介します。
前回の手法の課題
前回のデザインガイドラインでは、JSONファイルを通して、コンポーネント同士で差分がないか、検証することをしました。
本来であれば、コンポーネントに限定せず、全ての内容に対して比較をしたいわけですが、FigmaAPIで取得できる情報が限定的で、デザインガイドラインの情報を綺麗にルール化できないという課題がありました。
例えば、下記のようなデザインガイドラインがあります。これをFigmaAPIで読み取ろうとすると、
・「color（フォントはXXXで、サイズはXXで・・・）」
・「棒線（何mmで、色が#XXXで・・・）」
・「緑の丸（何mmで、色が#XXXで・・・）」
・「#BFC321（フォントはXXXで、サイズはXXで・・・）」・・・
のような情報しか読み取れず、ルールとして整理するのがかなり大変になってきます。
GPTモデルの画像認識（マルチモーダルモデル）
もちろん、JSONデータをゴリゴリ整形したら、ルール化できなくもないですが、かなり労力を使いますよね・・・。そこで登場するのが、GPTモデルの画像認識技術です。
マルチモーダルとは
近年のAI（LLM）では、テキストだけでなく画像や音声など複数のモード（modalities）を入力にできるのが特徴です。このAIのことを、マルチモーダルモデルといいます。
みなんさんの使っているchat-GPTも、マルチモーダルモデルであるOpenAIの GPT-4o / GPT-4o-mini を使用しており、テキストだけでなく画像を理解できます。
GPT-4o（oは「omni」=全能の意）は、画像・音声・テキストを扱える統合モデルです。特に画像理解に強く、レイアウトや色、文字情報まで認識可能です。一方で、GPT-4o-miniは、軽量版で、速度とコストに優れます。
画像認識の仕組み
従来のGPTはテキスト入力専用でしたが、マルチモーダルモデルのGPTは以下の流れで画像などのデータも対応します。
- 画像を入力 → 内部で 画像エンコーダ によって特徴量ベクトルに変換
- テキストと同様に トランスフォーマーモデル が処理
- 出力として「テキストの説明」や「構造化データ（JSONなど）」を生成
この仕組みにより、色やフォント名、サイズの抽出、レイアウトの把握や表や図を読み取り、構造化したデータに変換することが可能になります。
今回の活躍シーン
今回は、この画像認識を使って情報を抜き取り、ルールブックとなるJSONファイルを作ってみたいと思います！
これにより、色にはどんな種類があって何色なのかや、文字には何があってどんなフォントを使っていてサイズがいくつなのか、などをまとめてくれるはずです。
ちなみに、弊社同チームのメンバーも、まさにこのマルチモーダルモデルについて調査をしていました。たまたま同じタイミングで記事を出していましたので、興味のある人はこちらもご覧ください！
AIでデザインガイドラインをJSON化する
APIキー
今回は、LLMに直接読み込ませるのではなく、APIキーを使ってPythonで実行させてみようと思います。APIキー発行にはお金がかかってしまいますから、注意してください。
もちろん、APIキーを準備するのが大変！お金を使いたくない！という人がいれば、直接chatGPTに聞いてみても同じような回答を出してくれるはずです。
Pythonファイル
今回は、同じディレクトリー上に画像をおき、そこからAPIキーを使って画像認識、JSONファイル化させていきます。画像は先ほどのデザインガイドラインそのままです。
base64変換
# 画像をbase64に変換
with open("デザインガイドラインの画像ファイル", "rb") as f:
img_base64 = base64.b64encode(f.read()).decode("utf-8")OpenAI APIに画像を渡す方法は大きく分けて2つあり、URLにして画像を渡すパターンと、ローカルファイルを指定して渡すパターンの２つがあります。
この時、URLで渡すパターンの場合は、すでに世の中に公開されていますから、そのまま渡せば問題ありません。しかし、今回のようにローカルファイルで渡す場合は、一工夫必要です。このとき使うのが Base64エンコード です。
画像ファイル（PNG, JPGなど）は バイナリデータ（0と1の羅列）です。そのままではJSONやHTTPリクエストに含めにくいため、テキスト（文字列）にエンコードして扱いやすくします。
プロンプト
prompt = """
以下のデザインガイドライン画像を解析し、
フォントや色のルールを JSON 形式にまとめてください。
必要に応じて H1/H2/body などの役割も推定してください。
"""ここでは、プロンプトになります。
これは普段皆さんがchatGPTに入力している内容と変わり無いので、解説は不要ですね。
先ほどのAPIキーを使用しない場合のときは、プロンプトをそのまま丸投げすればOKです。
リクエスト処理
response = client.chat.completions.create(
model="gpt-4o-mini",
messages=[
{"role": "system", "content": "あなたはUIデザインのアシスタントです。"},
{
"role": "user",
"content": [
{"type": "text", "text": prompt},
{"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img_base64}"}}
]
}
]
)
print(response.choices[0].message.content)ここでは、「GPTに画像＋指示を送り、JSONを返してもらう」を処理させています。
model=”gpt-4o-mini” では、モデルを選択しています。今回のメインテーマである、マルチモーダル対応モデルを選びましょう。gpt-4oも対応していますが、コストが高く、今回はそこまで複雑な画像では無いので、軽量かつ早いgpt-4o-miniを使います。
messages=[ ・・・からの部分では、会話のやりとりをリスト形式で渡す部分になります。role と content をそれぞれ指定します。
{“role”: “system”, “content”: “…”} では、システムプロンプトの指定をします。モデルに「どういう立場で動くか」を定義します。
{“role”: “user”, “content”: […] }では、ユーザーの入力を表します。今回は「テキスト」＋「画像URL（Base64形式）」の両方を送っています。
print(response・・・では、GPTが返した応答が入ります。
実行させてみる
# 仮想環境とライブラリのインストール
python3 -m venv venv
source venv/bin/activate
pip install openai
# ファイルの実行
python3 get-guidelines.py仮想環境を立ててライブラリをインストールし、ファイルの実行をしましょう。
今回は get-guidelines.py という名前でファイルを作成してみました。さて、どのようになるでしょうか？
ターミナルの部分に、以下のように表示されました。
無事にJSONファイルが表示され、画像認識でルールブックを作ってくれました！
以下は、デザインガイドラインのフォントや色のルールをまとめたJSON形式のデータです。
```json
{
"colors": {
"mainColor": "#8FC321",
"textColor": "#FFFFFF",
"backgroundColor": "#111111"
},
"fonts": {
"japanese": {
"fontFamily": "NotoSans JP",
＝＝（以下略）＝＝おわりに
ご覧いただきありがとうございました。
今回はGPTの画像認識を使って、デザインガイドラインをJSONファイル化させてみました。いかがだったでしょうか。かなり可能性が広がる回だったのでは無いかと思います。
今回作成したPythonファイルは、GitHubにまとめてありますから、そちらも参考にしてください。
