理想のアプリに近づけるため「Claude Design」を試すゼロから始めるAIコーディング(2)

日沼諭史

2026年5月6日 08:30

唐突に「AIコーディングを始めよう!」と思っても、具体的にどうやって進めると良いのか……。そんな人に向けてお送りする「ゼロから始めるAIコーディング」の2回目は、「見た目」にフォーカスします。

前回、Claudeのチャットを使ってプロンプト一発でアプリを作ってみたものの、「なんか違う」ものができあがってしまいました。どうすれば自分の理想に近いアプリに仕上げられるのか、少しやり方を変えて、改めてイチから作り直してみます。

アプリの見た目を「Claude Design」で固めよう

サンプルとしてつくろうとしている「PDFツール」は、要件としてはさほど多くないので大規模なアプリとは言えません。しかしそれでも、数行のプロンプトだけではさすがに期待するような中身にはなりにくい、ということが分かりました。

前回作成した「PDFツール」。原始的なUIで「これじゃない」感が……

前回の課題としては、プログラムの作り方もそうですが、「見た目」も難点でした。プロンプトにもっと詳細な仕様を記述すれば改善できる可能性はありますが、自分の頭の中で思い描いているものを最初にすべて言葉で表現するのは簡単ではないでしょう。

それに、動くものができあがった後に、1つ1つ気に入らない部分を指摘してAIに変更してもらうのには大変な手間がかかります。その変更によって既存のうまく動いている機能が動かなくなる、いわゆる「リグレッション」が発生する恐れもあります。

そこで活用したいのが、最近追加された「Claude Design」という機能です。アプリに限らずWebサイトやプレゼン資料などに利用できるもので、「こんな感じにしたい」という要望を伝えると、ユーザーの意図に沿ったデザインの、実際に動かせるプロトタイプまで作成してくれます。

Webやアプリ、プレゼン資料などのデザイン作業を支援する「Claude Design」

テンプレート的に用意されたサンプルプロンプトを利用してもOK

あらかじめ用意されたテンプレート的に使えるサンプルプロンプトから選んで簡単にデザイン作成を始めることもできますが、(筆者が試したタイミングでは)デスクトップアプリに向いたものはなかったので、前回入力したプロンプトを少しだけ変えて使ってみることにします。

タイトルを決めて、「Create」ボタンでデザイン作成スタート

プロンプト例
```
- Windows 11で動作するネイティブGUIアプリケーション
- PDFファイルの編集を行なう2ペインスタイルのレイアウト
- 親しみやすく、軽快さを感じさせるデザイン
- PDFファイルに対して次の操作を可能にする
- 全ページのサムネイル表示
- サムネイルから選択したページの全体表示
- 読み込み・上書き保存・名前を付けて保存
- ページの入れ替え・削除・回転
- 別PDFファイルのドラッグ＆ドロップでページの挿入・追加
```

パーツごとの細かな指示も最小限の手間に

プロンプトを入力して送信すると、追加で補足情報を求められ、いくつかの選択肢のなかから選んでいくことで詳細なデザイン要件を詰めていく形になります。それらを決めたら、あとは待つだけ。徐々に必要なファイルが生成されていき、3パターンのプロトタイプができあがりました。

プロンプトを入力

仕様を決めるための選択肢が現れるので選んでいきます

必要なファイルがどんどん作られるので、ユーザーは待つだけ

3パターンのプロトタイプが完成

できあがったプロトタイプのボタンをはじめとするUI要素はマウスクリックなどに反応するようになっており、ごく基本的な動作ならこの時点で確認できます。3つあるうちからベースにする案を選び、追加でプロンプト入力し、細かな見栄えや動きを調整して自分にとって満足のいくデザインに仕上げていきましょう。

好みのデザインを決めて部分的に調整

個々のボタンの見た目などを変えたいときは、画面右上にある「Comment」ボタンをクリックし、その後に変えたい箇所をクリックすることで、その部分に対する指示を与えることができます。たとえば「色を○○に変えて」とコメントを入れるだけなので簡単です。

UI要素1つ1つにコメントを付けて修正することも可能

もしできあがったアプリに対してClaudeのチャットから同じような指示をするとなると、「どこそこにある、何というラベルのボタンの色を○○に変えて」といったように説明がどうしても回りくどくなります。UIが複雑化していくほど労力が増えていくことは間違いありません。

しかし、Claude Designを使えば初期段階で効率的にUIを作り込んでいくことができ、アプリ化した後の修正を最小限に留めることもできます。自分の好みの見た目にすることで、使い勝手も自分好みになります。「自分専用アプリ」として最適化するのなら、このデザイン部分は徹底的にこだわりたいところです。

アイコン画像は素材サイトも活用しよう

ちなみに、アイコン類が必要なUIのときは、フリー(個人・商用利用可)の素材サイトを利用するのもおすすめです。Claudeは画像作成はあまり得意ではないので、既存の素材を流用することで統一感のある見た目にし、洗練された印象にできます。下記のようなWebサイトで好みのアイコンを見つけて、SVGデータやアイコン名などをプロンプトで渡せば差し替えてくれます。

Material Symbols & Icons - Google Fonts
https://fonts.google.com/icons
Heroicons
https://heroicons.com/

できあがったら、最後に画面右上にある「Share」ボタンから「Handoff to Claude Code...」を選びます。プロトタイプのデータをダウンロードするか、デザインのURLをクリップボードにコピーして準備完了です。次回はこのデザインをベースに再びアプリ作成を進めていきます。