はじめに
みなさんこんにちは、インプルの岩崎です。
さて、Devinはデザインや創造が苦手、というのはみなさん今までの記事をご覧いただいた方なら、百も承知の事実だと思います。（まだみていない方は、ぜひご覧ください！）
結局は平均点レベルのデザインしかできない、自分で考えてかっこいいものは作れない、と言うのが結論でした。
それでもDevinにデザインをやらせたい
でも、やっぱDevinにデザインまでやらせたいですよね。やらせたいんです。
おそらくDevinは、自分で考えられないだけであって、見せたり、言葉にして指示したりすれば、エンジニアとしては優秀なので作れる子なんです（多分・・・。）
そこで、自分で考えるのが苦手なら、こっちから教えちゃえばいいじゃん！と言うわけです。
言葉で直接教えこむ
暴言、じゃないですよ！
ひとつ目に、テキストでデザインについての指示を細かく書いて、教え込むと言うものです。
普段issueで書いているように、テキストで読み込ませます。これは、デザイナーレベルの言語化力がないと難しいかもしれません。眼に見えるパーツひとつひとつのUIを言語化して教えなければいけないので、人間側は、かなりのストレスがかかる作業かもしれません。
画像で直接教えこむ
二つ目に、すでにデザインされたUIを読み込ませて作らせる、という手段が考えられます。
figmaなどですでにデザインされた製作物を、添付ファイルとして読み込ませたら、作れるんじゃね？という仮説です。詳細なデザインまで指示を出したい場合は、おそらくこちらの方が方法として優れていると思います。
Devinでもデザインできる？？（実験）
それでは実際に実験してみましょう！
最初にfigmaで作って欲しいデザイン物を自分で作ります。今回は、画像のようなチャットツールのUIを作ってもらうことにしました。実験ということで、シンプルなデザインで試してみます。でも、ところどころにグラデーションを入れたり、パーツを重ねたりして、難しさも入れてみました。
果たしてDevinはこれを作ることができるのか！？
早速、言葉で教えるパターンと、上記画像を直接読み込ませるパターン、二つを試していきましょう。
言葉で直接教え込む
それでは最初は言葉で教えるパターンです。
今回は、上記デザインを作るために、下記の指示を与えました。（めちゃくちゃ丁寧に書いてみました！）
Hello, @Devin
こんにちは。いい天気で暑い日が続いていますね。
今日はDevinにデザインのタスクをしてもらいます。デザインの仕様は以下の通りです。
下記の内容を確認して、実行できるかどうか教えてください。足りない要素や、教えて欲しい項目があれば、それも質問してください。
## タイトル
チャットツールの初期画面
## 画面のサイズ
W:402 H:874（iPhone16 Proのサイズ）
## 作成するパーツ・カラー
- 1. 設定ボタン・塗り#505050（歯車のマーク。フリーアイコンでネットから拾ってこれますか？）
- 2. タイトル「New chat」・塗り#505050（フォントはNoto Sans JP - Bold）
- 3. 新規チャットボタン・塗り#505050（鉛筆のマーク。フリーアイコンでネットから拾ってこれますか？）
- 4. コピー「何をしますか？」・塗り#313131（フォントはNoto Sans JP - Regular）
- 5. テキストボックス・塗り#F7F7F7/線#2F6BF8〜#F82269のグラデーション 太さ3pt。W350*H60の角の半径は30の曲線で作ってください。
- 6. 添付ボタン・塗り#A0A0A0（＋マーク。テキスト、アイコン画像、CSSなどの作成は問いません。テキストボックスの上に配置されます。）
- 7. 送信ボタン・塗り#F6BF8〜#F82269のグラデーション（円に上向き三角をセンタリングで配置。上向き三角は塗り#F7F7F7。）
## 配置
- 1,2,3は画面上部に配置。上の余白は60px開けてください。
- 1,2,3はflexboxで横並びに配置。1は左、3は右を25px開けて、1,2,3で均等配置（space-between）。
- 4は上下左右方向でセンタリング（中央）に配置
- 5,6,7は画面下部に配置。
- 5は下の余白を30px開けて配置。左右方向に中央揃えで配置。
- 6は5よりも上側のレイヤーで、5の左内側に配置。5の左端から20pxのところに配置。
- 7は5よりも上側のレイヤーで、5の右内側に配置。5の右端から20pxのところに配置。
## 使用するツール
特に問いません。今回はフロントエンドのみ。バックエンドは必要ありません。
とにかくデザインを完成させることに注力してください。
## 備考
今回の完成物は、スクリーンショットを撮影して提示してくれればOKです。
作成してくれたコードは[リポジトリー名]へ新しいリポジトリーを作成して格納してください。これを送信すると、Devinはどうやら作業を開始してくれるようです。
一応、実行できるかどうかを聞いていますが、「俺ならできるぜ！」と言わんばかりに作業を進め出しました。すごいぞ！
数分後、なんと、概ね伝えた通りのデザインをしてきてくれました。これは素晴らしい！
下の画像がDevinが作ってきてくれたチャットツールのスクリーンショットです。
細かいところまで見てみましょう。
右上の鉛筆マークは、やはりデザイン通りのマークとはなりませんでしたが、ちゃんと探して入れてきてくれました。右下の三角マークで作って欲しいと指示をした送信ボタンも、紙飛行機のマークに変わっていますね。
フォントに関しても、指示を出しましたがうまく反映されていないようです。また、これは私の指示ミスでもありますが、フォントサイズや太さも指示してあげる必要がありました。それで若干違いが生まれてしまっているように感じます。
1.53ACU テキストベースで読み込みが早い（感覚） クオリテ○
画像で直接教え込む
さて、画像でストレートに教えてしまいましょう！
画像の添付とともに、以下の指示を与えました。
@Devin, こんにちは。
今日はDevinに添付画像のようなデザイン作成をお願いします。
## タイトル
チャットツールの初期画面
## 画面のサイズ
W:402 H:874（iPhone16 Proのサイズ）
## 使用するツール
特に問いません。今回はフロントエンドのみ。バックエンドは必要ありません。
とにかくデザインを完成させることに注力してください。
## 備考
今回の完成物は、スクリーンショットを撮影して提示してくれればOKです。
作成してくれたコードは[リポジトリー名]へ新しいリポジトリーを作成して格納してください。すると、やはり画像があるからか、自信満々に作業を開始しました。いい自信ですね！
そして数分後、こちらも問題なくUIを作ってきてくれました。すげぇ！
テキストの際同様に、下の画像がDevinが作ってきてくれたチャットツールのスクリーンショットです。
こちらも細かいところまで見ていきます。
先ほど問題に挙げていたフォントのサイズや太さは、こちらの方が精度高いですね。素晴らしいです。一方で、鉛筆マークで指定していた右上のアイコンや、送信ボタンの三角が右を向いていたり、ところどころボロが出ていますが、概ねOKですね。
作業まとめ
さて、上記２パターンでDevinにデザインをさせてみました。その結果の感覚を以下の通りまとめます。
| 言葉で読み込ませるパターン | 画像で読み込ませるパターン | |
| 消費ACU | 1.53 ACU | 1.71 ACU |
| 完成度（感覚） | 90点 | 95点 （フォントまで完璧） |
| スピード感（感覚） | 早い | ちょっと遅い |
| トータル | 微修正向き | 最初のドカンとしたデザイン向き |
| デザイン | できる！（指示次第） | できる！ |
消費ACUは言葉で読み込ませる方が、若干少なかったです。やはりAIは、画像などの読み込みには時間を要するようで、長文だとしても、言葉の方が早く理解して作業に取り掛かってくれた印象でした。それがスピード感の部分ともリンクした結果になります。
一方で、完成度は指示が上手くなかった部分もありますが、そのような抜け落ちのリスクも含めて、画像で読み込ませた方がいい結果でした。
トータルとしては、最初の0→1を作らせる時は画像で指示を出すパターンが良くて、ほぼ完成している段階での微調整は言葉で指示を出すパターンが最適なのではないか、と思いました。
そして本題のデザインができるかは、どちらもできました！！
もちろん、言葉で指示を出すパターンは、デザイナーのような言語化能力が試されるわけですが・・・。
Devinだってデザインできるもん！
みなさん、いかがだったでしょうか？
Devinもデザインを自分で作ることは苦手ですが、しっかりとこういうのを作って欲しいと指示をすれば、思っていた90%の完成度で作ってきてくれました。素晴らしいですね。
今回は簡単なUIだったので、言葉で伝えるのは難しくありませんでしたが、もっと複雑にパーツのあるUIは、画像で読み込ませるのがいいと思います。そういう意味では、指示とともに、UIの画像を添付してあげることで、UIの指示は最低限に収まるのではないかと思います。
今回のコードはGitHubでもご覧いただけますので、裏側のコードがどうなっているのか気になった方は、こちらもぜひご覧ください。
ご覧いただき、ありがとうございました！