Claude3.5・Artifactsの使い方シリーズ『画像誘導UI設計』：高度なインタフェースを簡単爆速で生成する裏技！
最近はずっとClaudeシリーズになっちゃっています！
今回は、画像からインタフェースを作るという方法です。
以下に該当する方は、このやり方を知っておくとよいかもしれません。
例えば、RPGのような画面を一から作るのは大変なことです。ウェブサイトもそうですね。しかし、この方法は色々なインタフェースをかなり早く構築できる方法です。
Claudeを使えば知識がなくても色々なものが作れます。その色々なものを作る方法の一つとして、今回の『画像誘導UI設計』を覚えていただければ、ある作業では時短・効率化されるのではないか、と思います。
動画で視聴する
Youtubeでの視聴は以下をご覧ください。
画像誘導UI設計の実践①
この方法を思いついた発端は、
「ボードゲームって作れますか？」
と言われたことにあります。
※私がClaude3.5Artifactsで作ったゲームをプレイしてくれた方がいまして、その方から言われました。
で、一からUIを作るのはダルいと思って、
「そういえば、以前、DALLE3にRPGの画面を描かせたことがある」
と思い出し（DALLE3はゲーム画面を描けますw）、
「DALLE3で書いたRPG画面のイラストをClaudeに読み込ませればいい💡」
ということを思いついたのです❗️
で、やってみたところ、本当にできましたw
それが以下です。
⬆️DALLE3で生成したものを、Claudeに読み込ませます⬇️
イラスト＋プロンプトで、ある程度、MAPらしきものができました。しかも、左上の赤い丸は十字キーで動きます。
画像によってAIが誘導され、UIが設計される、これが「画像誘導AI設計」の概念です（名称はChatGPTと共創しました）。
「これができるということは、ウェブサイトも作れるのでは？」
と思って、ウェブサイトの生成も行うことに。
画像誘導UI設計の実践②
ということで、再び、ChatGPTにWebページを描いてもらうことに。
それが以下です。
架空のAIのウェブサイトです。
そして、Claude3.5に読み込ませます。
そして、できたのが以下です。
画像に比べてシンプルですが、カーソルを文字の上に置くとネオンブルーに変化し、ボタンも色が反転したりと、AIのウェブサイトっぽくできました。
ここから更に「デザイン精錬プロンプト」「機能精錬プロンプト」で、更に美しく・機能的に進化させていきます。それは、また次回述べたいと思います。
画像誘導UI設計の説明
この図もClaude3.5Artifactsで作りましたが、便利ですね。
早い話、この図の通りです。
①画像選定
作りたいUIをイメージします。そして、それを画像生成AIで再現します。
②AI解析
UIのイメージイラストをClaude3.5に読み込ませ解析します。この解析には画像誘導のためのプロンプトを入れた方がいいです。
イラスト指示とプロンプト指示、ここまでが人間のやることです。
③ガイドライン生成
ここはAIが行う部分ですが、どのようなプロセスでやっているのかを把握することも重要です。
④UI設計
ここもAIの行うところです。完成したら、人間の仕事は、そのクオリティのチェックです。
ChatGPTの定義は以下です。
画像誘導プロンプト
画像誘導UI設計のためのプロンプトエンジニアリングを行います。これにより、AI（Claude）は、その画像に基づいたUI設計をする可能性を高めます。
私の説明から、ChatGPTは、いくつかのサンプルを生成し、最終的に決定したのが、以下のプロンプトエンジニアリングです。
以下に、コピペできるようにしておきますので、よかったら使ってみてください。
# プロンプトエンジニアリング
1. 画像ファイルを読み込み、その内容を忠実に再現するための準備を行ってください。
2. 画像の主要要素（色、フォント、レイアウト、アイコンなど）を特定し、解析結果をレポートにまとめてください。
3. 解析した情報を基に、ユーザーインターフェースの設計ガイドラインを生成してください。
4. アーティファクト機能を使用して、解析結果を基にしたコードを適切な形式で書き出してください。
5. 必要に応じて、ユーザーの入力に基づいて、再現不可能な部分の代替案を考慮してください。
6. コードはアーティファクトのプレビューで確認できるものであることを確認してください。
ということで、更にここからデザインと機能を進化させ、UIを精錬させていくプロンプトを開発しました。
それは、また次回。
この記事が気に入ったらサポートをしてみませんか？