LoginSignup
355
450

AIによる爆速開発:画面設計からプログラミングまで自動化!?

Last updated at Posted at 2024-04-15

近年、AIの進化によりソフトウェア開発のプロセスが大きく変化しています。これまで手作業で行われてきた画面設計やプログラミング作業も、AIの登場により驚異的なスピードに進化しています。今回は、その中でも私が実際に使っている2つのAIツール、UizardとUI Sketcherについて紹介します。
なお、本記事では医師と患者を繋ぐマッチングサービスという架空のサービスを例に話を進めます。

Uizard: サービス概要からUIデザインを自動生成

Uizardは、画面設計作業を劇的に短縮する革新的なAIツールです。このツールを使えば、サービス概要を入力するだけで、わずか数分で美しく洗練されたUIデザインが生成されます。つまり、開発者は時間をかけてUIデザインを考える必要がなくなり、その時間を他の重要な作業に集中することができます。

Uizardの使い方

スクリーンショット 2024-04-01 17.23.39.png

  1. メニューから Generate with Autodesignerをクリックする
  2. すると上図のような画面になるので、必要な項目を入力する(日本語でOK)
  3. Generate my projectを押して実行する(数分待つ)

スクリーンショット 2024-04-01 17.31.12.png

実行した結果はこのようになります。
気に入らない画面があれば、削除して画面下部のプロンプトから必要な画面だけを再生成できます。テキストを日本語で生成することができない点は残念なポイントです。(日本語で生成するTipsがあるのでしょうか?)

私は有料プランに加入しました。デザイナーではない私としては、サービスのUIデザインに時間をかけずに、美しいUIデザインが簡単に手に入るのはとてもありがたくお金を払う価値があると思います。

UI Sketcher: 画像やイラストからプログラムを生成するVS Codeアドオン

UI Sketcherは、画像やイラストを元にしてプログラムを自動生成する、VS Codeアドオンです。このツールを使用すると、UI画像をコードに変換することが可能になります。これにより、デザインと開発の間にあるギャップが縮まり、開発のプロセスが効率化されます。

UI Sketcherの初期設定

スクリーンショット 2024-04-01 17.13.11.png

  1. UI Sketcherをインストールします
  2. VS Codeでコマンドパレットを開いて(Command/Ctrl + Shift + P)、UI Sketcher: Set OpenAI API Tokenを実行します
  3. OpenAIのAPIキーを入力します

UI Sketcherの使い方

スクリーンショット 2024-04-01 17.10.27.png

  1. 出力したいコードの空のファイルを作成して開きます(例えばLogin.jsxindex.htmlなど)
  2. VS Codeでコマンドパレットを開いて、UI Sketcher: Open drawing boardを実行します
  3. 開いた画面下部のメニューから画像マークをクリックし、UIの画像をアップロードします
  4. make realボタンをクリックして実行します
  5. コードが出来上がります

意図したコードが出力されなかったら付箋を活用する

スクリーンショット 2024-04-01 17.04.45.png

意図したコードが出力されなかったら付箋ボタンからメモを追加して対処できます。例えば、React Nativeのコードを生成して欲しかったのにReactのコードが生成されてしまった場合に、付箋で「React Native App」と指定しておくことで、React Nativeのコードが生成されるようになります。

生成されたコードの質は、プロトタイプに使うには充分だと思います。たまに古い書き方のコードが出力されて動かない時があります。その時は、再生成するか修正してください。
私は同じ画像からコードを3回生成して、それぞれのいいとこ取りをするようにして使っています。

まとめ

AIによる爆速開発が現実のものとなりつつあります。UizardやUI Sketcherのようなツールの登場により、画面設計からプログラミングまでの作業が劇的に短縮され、開発プロセス全体が大幅に効率化されています。これらのツールを活用することで、開発者はよりクリエイティブな作業に時間を費やすことができ、プロジェクトのスピードと品質を向上させることができます。

355
450
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
355
450