【ITニュース解説】Trae × Claude-3.7-Sonnetで通用UIプロトタイプを自動作成（プロンプト付き）

システムエンジニアにとって、ユーザーが実際に触れる画面、すなわちユーザーインターフェース（UI）のデザインは、ソフトウェア開発の成否を分ける非常に重要な要素である。しかし、UIデザインには専門的な知識や感性、そしてFigmaのような専門ツールを使いこなすスキルが求められるため、多くの開発者がその作業に苦手意識を持つことが多い。今回紹介する記事は、このUIデザインにおける一般的な課題を、最新のAI技術と特定のツールを組み合わせることで、効率的に解決できる新しい方法について解説している。具体的には、旅行アプリのUIデザインに苦戦していた筆者が、AIであるClaude-3.7-Sonnetと、UIプロトタイプ作成ツールであるTraeを活用し、短時間で実用的なプロトタイプを自動生成した事例を紹介している。

一般的なソフトウェア開発のプロセスでは、まず「どんなアプリを作りたいか」というアイデアが企画され、次にそのアイデアを具体化するための画面構成や操作の流れを考えるUIデザインの工程へと進む。このデザイン作業は、ユーザーが直感的に操作でき、快適に利用できる体験、つまりユーザーエクスペリエンス（UX）を考慮しながら、一つ一つの要素を丁寧に配置していく地道な作業だ。しかし、デザインスキルがない開発者にとっては、この工程が大きな障壁となることが少なくない。記事の筆者もまさにその状況に陥り、「やっぱりデザインとか苦手だな」と諦めかけていた。ここで注目されるのが、大規模言語モデルと呼ばれるAIの進化である。Claude-3.7-SonnetのようなAIは、人間が話す自然な言葉を理解し、その指示に基づいて様々なテキストを生成できる高度な能力を持つ。このAIに「こんな機能を持つ旅行アプリの画面がほしい」と具体的に伝えることで、AIがデザインに関するアイデアや構成案を言葉で出力してくれるのだ。

AIに私たちの意図を正確に伝え、期待する結果を得るためには、「プロンプト」と呼ばれる指示文の作成が非常に重要となる。プロンプトはAIに対する命令書のようなもので、具体的で詳細であればあるほど、AIは私たちの望みを正確に理解し、より適切な回答を生成してくれる。記事の中で筆者は、旅行アプリのアイデアを具体化するために、「海外旅行に特化したシンプルでモダンなデザインのアプリ。出発地、目的地、日付、人数を入力できるフォームがあり、検索ボタンを押すと旅行プランが表示される。背景色は青系統で、ボタンは丸みを帯びたデザイン。」といった詳細なプロンプトを作成した。Claude-3.7-Sonnetは、このプロンプトを基に、画面に必要な要素の配置、ボタンの形状、色使いなど、UIに関する具体的な情報をテキスト形式で生成した。これは、まるで優秀なデザインアシスタントと対話しながら、頭の中にある漠然としたイメージを、具体的な言葉で整理していくプロセスに似ている。AIは単に情報を羅列するだけでなく、一般的なデザインの原則やユーザー体験（UX）の観点も考慮して提案する能力を持っているため、質の高いデザイン案が期待できる。

しかし、Claudeが生成したテキスト形式のデザイン案は、まだ文字の羅列であり、実際にブラウザで表示したり、操作したりできる画面ではない。そこで登場するのが、Traeというプロトタイプ作成ツールである。Traeは、AIが生成したデザインに関するテキスト情報、具体的にはHTMLの構造やCSSのスタイルといったWebページを構成するための情報を受け取り、それを実際のユーザーインターフェースのプロトタイプへと変換する役割を担う。プロトタイプとは、製品やサービスの試作品や模型のことであり、実際に操作できる形でデザインや機能の動作を確認できるものを指す。Traeは、AIのテキスト指示を基に、Webページやアプリケーションを構築するために必要なHTML、CSS、JavaScriptといったコードを自動で生成し、それをブラウザ上で表示できる形に変換する。これにより、言葉で表現されたアイデアが、数分で見た目も操作感も実際のアプリに近い形になる。専門的なコーディング知識がなくても、AIの抽象的なアイデアをTraeが具体的な「形」として具現化してくれるため、開発者はデザインの細部に多くの時間を費やすことなく、すぐに実際の動作を確認し、改善点を洗い出すことができるようになる。Traeは、AIの言葉によるデザイン案と、実際の動く画面の間のギャップを埋める、非常に強力な橋渡し役と言えるだろう。

このAIとTraeを組み合わせた開発手法の最大のメリットは、UIデザイン作成にかかる時間と労力を大幅に削減できる点にある。従来のUIデザインは、専門のデザイナーがFigmaのようなツールを使って何時間、場合によっては何日もかけて作成する作業だったが、この方法を使えば、アイデア出しから最初のプロトタイプ完成までが数分から数十分で可能になる。これにより、開発の初期段階で様々なデザイン案を迅速に試し、ユーザーからのフィードバックを得ながら製品を改善していく「アジャイル開発」のサイクルを、より高速に回せるようになる。デザインスキルがないシステムエンジニアでも、自身のアイデアを具体的な形にして、チームメンバーや顧客と視覚的に共有できるため、認識のズレを防ぎ、コミュニケーションを円滑に進めることができる。さらに、Traeがコードまで自動で生成してくれるため、プロトタイプから実際の開発への移行もスムーズになる可能性がある。このようなAIを活用した開発手法は、システムエンジニアの働き方を大きく変え、これまでデザイナーに依頼していた部分を自分たちで手早く形にできるようになることで、より創造的な仕事や、システムの本質的な機能開発に集中できるようになる未来を示唆している。AIを使いこなす能力、つまりAIに的確な指示を出す「プロンプトエンジニアリング」のスキルは、これからのシステムエンジニアにとって、ますます重要な能力となっていくことだろう。