ワイヤーフレームを活用して生成AIの指示を改善してみる①

本記事では、PythonとChatGPT-4oを活用して、生成AIを用いた設計の具体例を示します。実行環境は以下の通りです。

- OS: Windows 11
- 開発言語: Python
- 利用AI: ChatGPT-4o

## 自然言語での説明の限界

「こんな画面を作って！」といったざっくりした指示でも、ChatGPTはそれなりに応えてくれます。例えば、こんな感じで指示を出してみました。。

```
これに書かれていることを  
パイソン使って描ける?  
  
ただしノートパット使ってるところは自前の画面にしたい、入力はクリップボードかテキストエリアをラジオボタンで選択可能です。

暗号化したメッセージはクリップボードに入れてほしい  
  
復号化するときもクリップボードからすること

https://qiita.com/shupeluter/items/d998906d1838b318fdc2  
  
UIの操作とその後の処理は別に分けて。  
  
画面はシンプルなボタン構成。  
  
鍵作成、暗号化、復号化の３つのボタンで構成  
鍵受け入れ作って
```

すると、ChatGPTはそれなりの形で画面を作ってくれました。

![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/76f6d6bf-36b4-4b0f-8be8-44db388adf6a.jpeg)

しかし、これが **「思ってたのと違う！」** という状態です。道のりははるか遠そうです。

### 言葉だけじゃ伝わらない！

ChatGPTとやりとりを重ねても、細かい部分でズレが発生しがちです。

- **ボタンの配置が違う**
- **ラジオボタンとチェックボタンを取り違える**

といった問題が頻発し、手直しが増えてしまいます。

## ワイヤーフレームを活用する

そこで、 **ワイヤーフレーム** を添えて指示を出すことに。

ワイヤーフレームとは、画面のレイアウトをざっくり描いた設計図のようなもの。これがあると、

- どこに何が配置されるのか
- ボタンや入力欄の種類
- 操作の流れ

を明確にするのに役立ちます。

## ワイヤーフレーム作成ツールの選定

ワイヤーフレーム作成ツールは色々ありますが、選定基準をこんな感じにしました。

- **無料で使えるか？**（コストの問題）
- **テキストベースフォーマットを利用できるか?**（AIとの親和性）
- **CUIが用意されているか？**（CI/CD活用）
- **プラグインや拡張機能が充実しているか？**（機能の拡張性）

といったポイントを考慮し、いくつかのツールを比較すると。

### 候補ツール

| 選定基準         | Figma | Draw\.io | Balsamiq | Excalidraw | Penpot | Wireframe.cc |
| ------------ | ----- | -------- | -------- | ---------- | ------ | ------------ |
| 無料プラン        | あり    | あり       | なし       | あり         | あり     | あり           |
| テキストフォーマット対応 | ◯     | △        | ×        | △          | ◎      | ×            |
| CUI対応        | ×     | ◎        | ×        | ×          | ◯      | ×            |
| 拡張性          | ◯     | ◯        | △        | △          | ◎      | △            |


Draw.ioは無料で使えて、CUIにも対応しているので、AIとの連携がしやすいのがポイント。

## Draw.ioを使ってみる

まずは環境を整えます。コマンドプロンプトを管理者モードで起動し

``` cmd
>winget  install --id JGraph.Draw
```

その後、以下の環境変数を設定。
   |No|環境変数名|設定値(参考値)|備考|
   |--|--|--|--|
   |1|draw_home|C:\Program Files\draw.io|インストール先のディレクトリ
   |2|path|%dara_home%||

コマンドプロンプトで設定する場合は以下のコマンドを利用

```
setx draw_home "C:\Program Files\draw.io"
setx path %PATH%;%draw_home%
```

コマンド実行後、コマンドプロンプトを再起動すればOK。

### 2. AIを活用したワイヤーフレーム生成の流れ

1. **プロンプトでワイヤーフレームの構造を定義**
まず、Draw.ioでワイヤーフレームを描きます。
こんな感じに。

![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/a641a85b-20b0-4f2c-ac87-0943c1c5bd3c.jpeg)

次に、ワイヤーフレームをAIが扱いやすいフォーマット（SVG）に変換。

``` cmd
>`draw.io --export --format=svg --output=output.svg <input>.drawio 
> type output.svg |clip 
```
このコマンドで生成したsvgの内容をクリップボードにコピーできるという寸法です。

### 3.実際にやってみた

試しに、先ほどの絵を使って
以下のプロントで生成すると。。。

```
Pythonで次の画面を作りたい。
<svgの内容>
```

そして、生成されたコードがこちら。

``` python

import tkinter as tk

class SimpleGUI:
    def __init__(self, root):
        self.root = root
        self.root.title("SVG風レイアウト")
        self.root.geometry("392x242")
        
        # メニュー領域
        self.menu_frame = tk.Frame(root, bg="white", height=20, relief="solid", borderwidth=1)
        self.menu_frame.pack(fill="x", padx=1, pady=1)

        # Main領域
        self.main_frame = tk.Frame(root, bg="white", height=110, relief="solid", borderwidth=1)
        self.main_frame.pack(fill="x", padx=10, pady=5)

        # オペレーション領域
        self.operation_frame = tk.Frame(root, bg="white", height=40, relief="solid", borderwidth=1)
        self.operation_frame.pack(fill="x", padx=10, pady=5)

        # メッセージ領域
        self.message_frame = tk.Frame(root, bg="white", height=40, relief="solid", borderwidth=1)
        self.message_frame.pack(fill="x", padx=10, pady=5)

        # 各領域にラベルを配置
        tk.Label(self.menu_frame, text="Menu").pack()
        tk.Label(self.main_frame, text="Main領域").pack()
        tk.Label(self.operation_frame, text="オペレーション領域").pack()
        tk.Label(self.message_frame, text="メッセージ領域").pack()

if __name__ == "__main__":
    root = tk.Tk()
    app = SimpleGUI(root)
    root.mainloop()
```

結果は…

![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/6e5ab138-1afd-4398-838c-c5783f28a9ac.jpeg)

微妙に思ったのと違うけど、だいぶ近づいた感じ！

---

次回の記事では、少しずつ情報を追加して、意図通りのコードを生成するための活動を奨めます。次回もお楽しみに。