あっきーの教材工房 あっきーの教材工房
サイトバナー

AstroプロジェクトをAIに参照させてアプリのドキュメントを作った話

公開日: 2026/05/30
タグ: Astro,AI
📄

はじめに

前回の記事では、WebサイトのプロジェクトをAIに参照させて、HTML/CSSのチラシを作った体験をご紹介しました。

AstroプロジェクトをAIに参照させてHTML/CSSチラシを作った話 | あっきーの教材工房
自分のAstroサイトのブログ記事やカラーパレットをAIに読み込ませながら、HTML/CSSでチラシを作ってもらった体験をまとめました。デザインの一貫性を保ちつつ、コーディング不要でそれなりのものができあがる過程をご紹介します。
favicon あっきーの教材工房
AstroプロジェクトをAIに参照させてHTML/CSSチラシを作った話 | あっきーの教材工房

今回はその続き。同じ発想で、今度はアプリのドキュメント(使い方ページ)をAIに作ってもらいました。

ドキュメントがずっと後回しになっていた

アプリを開発・販売していると、「使い方」のページはあった方がいい、というのはずっとわかっていました。

ただ、いざ書こうとすると手が止まってしまいます。
「何をどの順番で書くか」「どこまで詳しく書くか」「そもそも何が伝わっていないのか」——自分がよくわかっているからこそ、どこから書けばいいのかわからなくなるのです。

これはチラシの時と同じ悩みでした。「必要性はわかってるけど、手をつけられない」というやつです。
だったら今回もAIに任せてみようじゃないか、と。

AIエージェントとのドキュメント作り

AIに渡した情報

今回AIに渡した情報は大きく2つです。

  • Webサイトのブログ記事:ローカルにあるAstroプロジェクトにある、アプリに関して書いた記事
  • アプリのスクリーンショット:実際の画面を何枚かキャプチャしたもの(特にアプリ内の設定画面)

いずれも、記事や画像の置き場所を指示書の中で伝えただけです(ここに置いたから見てねスタイル)。

「構成はお任せ」で進める

チラシの時は「A4縦2ページ」という明確な器がありましたが、ドキュメントはそうではありません。
何のセクションが必要か、どんな順番で並べるかも、自分ではうまく決められません。

構築のためのツール群(Astro, Starlight など)は指定しましたが、あとは構成ごとお任せすることにしました。

指示はかなりざっくりと:

  • このアプリのドキュメントページを作りたい
  • ブログ記事とスクリーンショットを参考にして
  • Webサイトのデザインに合わせて(カラーパレットは○○に記載)
  • 英語版も同時に作って(英語対応アプリのみ)

「どんな項目が必要か」は一切指定しませんでした。

出てきたドキュメント

かなり雑多な情報を渡したのですが、「概要」「はじめ方」「画面の構成」「主な機能」といった形で、あっという間に整理してくれました。
ブログ記事には機能紹介の他に、実践の具体例やポエム的な内容など余計なものも多く含まれていましたが、自分では捨てきれない内容もドライに切り分けてくれました。

スクリーンショットを渡した画面については、そこに映っている要素を読み取って説明文を書いてくれていて、かなり精度が高かったです。
設定項目は細かい情報が多くなりがちですが、それらを全て自動で書き起こしてくれたのは助かりました。

仕上がりとしては、体感7割が完成した状態でした。
残りは「実際と微妙に違う説明」の修正や、スクリーンショットを適切な場所に差し込む作業など、人の目が必要なところです。__ 前回のチラシと同じく、画像の配置はトークン節約という意味もあり、手動で行なっています。

ドキュメントの確認をしているとスクショの撮り直しが必要になったり、バージョンアップした情報が抜け落ちたりと、チラシの時のように「半日で完成!」とはいきませんでしたが、作業時間をかなり圧縮できた印象はあります。

やってみてわかったこと

フレームワークとの相性

最終的には、Webサイトとドキュメントで以下のような構成になっています。

  • Webサイト:Astro
  • 日本語ドキュメント:Astro, Starlight
  • 英語ドキュメント:Astro, Starlight

Starlight(スターライト)は、Astroをベースに作られたドキュメントサイト専用のツールです。
サイドバーのナビゲーションや多言語対応など、ドキュメントに必要な機能がはじめから揃っているため、「ドキュメントサイトをゼロから設計する」という手間が省けます。

このWebサイト自体もAstroで作っているので、AIはすでにこのプロジェクトの構造を把握した状態でした。
「同じツールを使ったドキュメントを作る」というタスクは、AIにとってもやりやすかったようで、コードの骨格をスムーズに出力してくれました。

文章の部分はマークダウン(テキストに近い軽量な記法)で書けるため、AIが生成した内容を後から人の手で確認・修正しやすいのも助かった点でした。
コードとドキュメントが分離しているので、「ここのテキストだけ直したい」という修正も気軽にできます。

「客観的に整理する」のは難しい

今回いちばん印象に残ったのは、自分のアプリを第三者の目で整理してもらえたという体験でした。

自分で作ったアプリは、自分が一番よく知っているはずです。
ですが、ユーザーに向けて「どの機能を」「どの順番で」「どう説明するか」——これを自分で決めようとすると、どうしても作り手の視点が抜けきれません。

AIには感情移入も思い込みもありません。
スクリーンショットとブログ記事を渡したら、そこに書いてある情報をフラットに整理して、ユーザーが知りたそうな順番に並べてくれました。

「これが個人事業主にとってのAI活用だな〜」と思った瞬間でした。
専門スタッフを雇わなくても、こういう”第三者の整理”を気軽に頼めるようになってきているのだな、と。

まとめ

Webサイトのプロジェクト・ブログ記事・スクリーンショットを情報ソースとしてAIに渡すことで、アプリのドキュメントをほぼ7割(体感)の完成度まで持っていくことができました。

構成から書いてもらったことで、「何を書けばいいかわからない」という最初の壁を乗り越えられたのが大きかったです。

自分では気づきにくい「第三者視点での整理」をAIがやってくれること、そして英語版が同時に作れること——これは個人で開発・販売をしている身としては、想像以上に助かりました。

まだ一部作業中ですが、作成したドキュメントはこちら:

iPadアプリの使い方
あっきーの教材工房で開発しているiPadアプリの機能や操作方法をわかりやすく解説しています。
favicon あっきーの教材工房

「ドキュメントをちゃんと作りたいけど手がつかない」という方には、ぜひ試してみていただきたい方法です。


タグ: Astro,AI