仕様書・ノート・デザインイメージを持ち出す/作り直す

アプリを作ると、アプリ本体のほかに3つの資料が一緒にできています。仕様書(どんなアプリかを文章にしたもの)、デザインイメージ(完成イメージの画像)、ノート(使い方マニュアルや打ち合わせメモ)です。

これらはファイルとして書き出せます。上司に見せる、お客さまに渡す、社内の共有フォルダに置く——アプリの画面を開かなくても読める形になります。

また、修正を重ねて中身が古くなった資料は、今のアプリに合わせて作り直せます

3つの資料と、できること

資料書き出す作り直す
仕様書(SPEC.md)Markdown ファイル(.md)できます(今のアプリの中身に合わせて書き直し)
デザインイメージ画像ファイル(.png)できます(今の画面・配色に合わせて描き直し)
ノートHTML ファイル(.html)チャットで「ノートを作り直して」と頼みます

1ドキュメントを開く

アプリを開き、画面右側の上にある ドキュメント を押します。要件定義(仕様書とデザインイメージ)と ノート が並んでいるので、見たいほうを選んでください。

アプリを作った直後は、まだデザインイメージがない場合があります。その場合、デザインイメージのカードは表示されません。

2仕様書を書き出す(.md)

要件定義 を開くと、下のほうに 仕様書 (SPEC.md) のカードがあります。右上の ⬇️ エクスポート (.md) を押すと、ファイルが1つダウンロードされます。

仕様書カードの右上に、エクスポート (.md) と 再生成 のボタンが並んでいる
仕様書カードの右上に エクスポート (.md)再生成

ファイル名はアプリの名前が付きます(例:「受付来客管理システム_仕様書.md」)。中身は文字だけのファイルなので、メモ帳・Word・Google ドキュメントなど、どれでも開けます。

「.md(マークダウン)」は、見出しや箇条書きを記号で表した文字ファイルです。特別なソフトは要りません。そのままメールに添付しても読めます。

3デザインイメージを保存する(.png)

同じ 要件定義 の中にある 🎨 デザインイメージ のカード右上で、⬇️ 画像を保存 を押します。

デザインイメージのカード。右上に画像を保存と再生成のボタンがあり、下にアプリの完成イメージ画像が表示されている
デザインイメージのカード。右上の 画像を保存 で PNG になる

画像は提案書やスライドにそのまま貼れます。画像をクリックすると拡大表示もできます。

4ノートを書き出す(.html)

ノート を開き、書き出したいノートをクリックして開きます。上部の ⬇️ エクスポート (.html) を押すとファイルになります。

ノートを開いた画面の上部。一覧に戻る、共有、エクスポート (.html)、編集、削除のボタンが並んでいる
ノートを開くと、上部に エクスポート (.html)

書き出したファイルはダブルクリックするだけで開きます。色や表もそのまま、アプリで見たときと同じ見た目です。インターネットにつながっていなくても開けるので、現場に持ち出す使い方にも向いています。

使い方マニュアルをノートにしておけば、新人に渡す資料としてそのまま使えます。ノートの作り方は 作ったアプリを直す・改善する と同じく、左のチャットで「使い方マニュアルを作って」と頼むだけです。

設計スタジオ(アプリを作る前の相談)で作ったノートも、同じ エクスポート (.html) で書き出せます。詳しくは 設計スタジオで練ってから作る をご覧ください。

5古くなった資料を作り直す

修正を重ねると、アプリの中身は変わっていくのに資料だけが最初のままになります。「仕様書に書いてある画面が、もう存在しない」「デザインイメージの色が今と違う」——そんなときに 🔄 再生成 を押します。

仕様書の再生成

仕様書カードの 🔄 再生成 を押すと、AI が今のアプリの中身を読んで、仕様書を実際のとおりに書き直します。アプリの動きやデータはいっさい変わりません。書き直されるのは仕様書だけです。

押すと確認が出て、進めると左のチャットに進捗が流れます。終わると仕様書カードの中身が新しくなります。

デザインイメージの再生成

デザインイメージの 🔄 再生成 は、今のアプリの画面と配色に合わせて描き直します。実際にある画面の名前、今のブランド色、パソコン向けかスマホ向けかまで見て作るので、「実物と違う絵」になりません。1分ほどかかります。

きれいに揃えるコツ: 先に仕様書を再生成してから、デザインイメージを再生成してください。デザインイメージは仕様書を手がかりに描くので、仕様書が新しいほど実物に近づきます。

クレジットについて

どちらの 再生成 も AI が動くので、AI クレジットを消費します。押す前に必ず確認のメッセージが出るので、そこで キャンセル すれば消費しません。書き出し(エクスポート・画像を保存)は AI を使わないので、クレジットは消費しません

よくある質問

質問答え
書き出したファイルはどこに保存される?お使いのブラウザの「ダウンロード」フォルダです。保存先を毎回選ぶ設定にしている場合は、選ぶ画面が出ます。
エクスポートでクレジットは減る?減りません。書き出しは AI を使いません。
再生成 のボタンが見つからないデザインイメージ側は、材料(仕様書やブランド設定)が読み取れないアプリでは表示されません。仕様書側は、アプリを開いた状態(チャットが使える画面)でのみ表示されます。
再生成したら前の画像に戻せる?デザインイメージは上書きされます。前の画像を残したいときは、先に 画像を保存 で手元にダウンロードしてから再生成してください。
仕様書を再生成したらアプリが変わってしまわない?変わりません。読み取って文章を書き直すだけで、画面やデータには手を付けません。
ノートのファイルを相手に送っても見られる?見られます。1つのファイルで完結しているので、メール添付や共有フォルダで渡せます。相手にログインは不要です。

← マニュアル一覧へ戻る