「本当に誰でも」AIとの会話だけでアイデアをアプリに Claude Designは手取り足取り助けてくれる：生成AIお悩み相談室（5）（2/3 ページ）

[山下城司，NTTテクノクロス]

改善したいことを伝えて理想のアプリに近づける

　モックアップとして見せるだけならここで完成ですが、触ってもらうと「ここもこうしたい」が必ず出てきます。Claude Designの真価は、この改善サイクルも日本語の一言で回り続けることにあります。別の日に実施した改善セッションで、実際に送ったメッセージを順に紹介します。

　このとき、1回のメッセージに要望を一つずつ律儀に送る必要はありません。機能追加も表示の細かい不満も、思いついたそばから箇条書きでまとめて投げて構いません。特に最初のモックアップを作っている段階では、思ったことを一気に伝えてどんどん変えさせる方がスピード感が出るのでおすすめです。

• 行きたい場所を追加できるようにしてください
• 写真やドリンクについての情報も登録できるようにしてください
• 一覧画面では新しい日付のものが一番上に並ぶようにして欲しいです。
• 登録時に何県のものか選べるようにしたいです
• 登録するときやバッジを達成した時には派手な演出が出るようにしたいです
• 地図画面から都道府県をクリックしたらその都道府県の行ったことがある場所を一覧表示できるようにして欲しいです
• 「クリア済み → 新潟・神奈川・東京・京都・山梨・兵庫」は余計な情報なので削除してください

　いずれも仕様書の体裁をなしていない、思い付きレベルの箇条書きです。それでも送信のたびに1〜3分ほどでコードが書き換わり、行きたい場所の登録、写真やドリンク情報の入力欄、新着順に並ぶ一覧、登録時の都道府県選択、スタンプやバッジのお祝い演出、地図から都道府県ごとの訪問先を絞り込む機能が、順に画面へ反映されていきました。

　そして、「デモ」を「日常的に使えるアプリ」に近づける上で大きな意味を持ったのが、次のメッセージです。

• 初期登録データは削除してまっさらな状態にしてください
• 今後登録するデータは保存され、消えないようにしてください

　ここまでのモックアップには、見栄えを確認するためのサンプルデータが埋め込まれていました。今回の指示により、これが取り除かれ、本物のアプリの挙動に変わりました。自分が登録したデータがブラウザ内に保存される、つまりリロードしても記録が残りますし、記録ゼロの空の状態から始められます。見た目と操作感を確かめるためのモックアップが、自分のデータを貯められるプロトタイプへ変わった瞬間です。

　実際に「山下酒造」を愛知の訪問先として登録し直してみると、地図画面の愛知のタイルが「制覇」の色に変わり、タップすると該当の酒蔵だけが絞り込み表示されることが確認できました。もちろんリロードしてもデータは消えなくなっています。

図10　地図画面で愛知が色付けされ、タップで該当の訪問先が絞り込み表示された状態

　ここでも実装手段の名前を知っている必要はありません。「データが消えないようにして」と実現したいことを言葉にして伝えるだけで、保存の仕組みはClaudeが選んで実装してくれます。なお、このようなデータ永続化は、基本的にlocalStorageまたはIndexedDBと呼ばれるブラウザ標準のデータ保存機能で実現されることが多く、ブラウザの閲覧履歴データを削除すると保存したデータも一緒に消えてしまうことがある点には注意してください。

アプリをClaude Designの外へ持ち出す

　続いて、このアプリをClaude Designの画面の外へ持ち出します。手順は2段階で、まずチャットで簡単な下ごしらえを頼み、その後にエクスポート操作をします。下ごしらえとして送ったのは次のメッセージです。

実際のアプリとしてスマホで使おうと思います。画面上部の時間や電波などの表示はスマホ本体が表示するので不要です。削除して欲しいです。すみの角丸もいりません。

それから、検索エンジンにインデックスされないように、noindex・nofollowの設定も入れておいてください。

　2つの依頼をまとめて送っているので、順に補足します。

　まず、時刻・電波表示と角丸の削除は、画面の見た目を実機に合わせるための調整です。これまでのプロトタイプでは、アプリの画面だけでなく、時刻や電波アイコンなど、iPhoneの外観まで画面上で再現していました。そのまま実機のiPhoneで表示すると、プロトタイプ側で再現した時刻や電波アイコンと、iPhone本体が表示する本物の時刻や電波アイコンが重なってしまいます。そこで、こうした端末の外観を再現する装飾を取り除いてもらいました（図11）。

　次のnoindex/nofollowは、次節でこのファイルをURLとして公開することを見越した設定です。自分用のアプリが検索結果に載る必要はないので、エクスポートの前のこの段階で入れておきます。

図11　下ごしらえ後のプロトタイプ。時刻や電波の擬似表示を含むiPhoneの端末枠が取り除かれ、全画面の表示になった

　下ごしらえができたら、いよいよエクスポート操作です。画面右上の「Share」メニューを開き、「Export」欄の「Project HTML」を選択します（図12）。表示された「Export HTML」ダイアログで「Project archive」を選んで「Export」をクリックすると（図13）、プロジェクトのファイル一式がZIPファイルとしてローカルにダウンロードされます。Project archiveは追加の生成処理を待たず、すぐに無料でダウンロードできます。

図12　「Share」メニューの「Export」欄から「Project HTML」を選択する

図13　「Export HTML」ダイアログで「Project archive」を選んで「Export」をクリックする

　ZIPを展開すると、アプリの画面／ロジック／データ保存の仕組みを含むファイル一式が手に入ります。この中のメインのHTMLファイルをブラウザで開き、手元で全機能が動くことを確認できれば、PC向けの個人用ツールとしては完成です。

　ただし、今回の目標である「スマホで日常的に使う」については、ここで1つ壁があります。Android/iOSに端末内のローカルHTMLファイルを開く手段が全くないわけではないのですが、OSやファイルアプリ、ブラウザの組み合わせによって挙動の差が大きく、データ保存やホーム画面からの起動まで含めて安定して使うのは難しいのが実情です。そこで確実なのが、ファイル一式をどこかにホストして、スマホのブラウザから開けるようにする方法です。次節では、それを手軽に実現できるデプロイサービスを紹介します。