旅行に出かけて写真を撮り、帰宅してから写真を整理して、ブログ記事を書く。
旅行そのものは楽しいのですが、撮影した写真の整理や記事の執筆となると、どうしても時間がかかります。
私が運営している旅行体験メディア「Wayfaring Days（WD）」でも、これまで記事制作の大部分を手作業で進めてきました。
そこで今回、AIを使って記事制作の70〜80％を半自動化するシステムを、自分で作ってみることにしました。
もちろん、Pythonのプログラムを一からすべて自分で書くわけではありません。
ChatGPTと一緒に要件を整理し、Claude Codeに実装を担当してもらう。
私はシステムで実現したいことを考え、完成したものを確認し、必要に応じて修正を指示する役割です。
今回は、その構想を具体化し、実際にローカルWebアプリの起動に成功するまでを記録します。
1. そもそも、何を自動化したいのか？
これまでのWDの記事制作は、次のような流れでした。
- 旅行に出かけて写真や動画を撮影する。
- 撮影した写真から記事に使うものを選ぶ。
- 写真をリサイズし、WebPなどの形式に変換する。
- WordPressのメディアライブラリにアップロードする。
- アップロードした画像のURLを取得する。
- HTMLの画像タグを使って記事本文に配置する。
- 写真の前後に体験談や補足情報を書き込む。
- 記事全体の構成を整え、推敲する。
こうして並べてみると、記事を書く以前の準備作業がかなり多いことに気づきます。
特に写真の整理と配置は、記事の内容に関係なく毎回発生する作業です。この部分をできるだけ機械に任せたいと考えました。
目指しているのは、AIが勝手に記事を書く仕組みではない
今回のシステムで大切にしたいのは、旅行体験そのものは私自身が伝えるということです。
例えば、旅先で撮影した写真を見ながら、
- 「この場所ではこんなことがあった」
- 「この写真を撮ったとき、こんなことを感じていた」
- 「ここは初めて訪れる人にも知っておいてほしい」
といった体験を音声で話します。
その音声をAIが整理し、記事の文章として組み立てていくイメージです。
つまり、写真の整理やHTMLの生成、文章の整形はAIとプログラムに任せる。一方、旅の記憶や感情、読者に伝えたいことは自分自身で入力する。
自分の体験を記事にする楽しさは残し、面倒な定型作業を減らすことが今回の目的です。
2. まずは既存の記事と画像管理システムを整理
実は、今回の開発を始める前から、画像管理の仕組みはある程度整備していました。
WDでは画像専用のWordPressを運用しており、記事ごとにアップロード先フォルダを分けています。
例えば、記事IDが「WD-PST-00001」であれば、その記事専用のフォルダに画像が格納されるようにしています。
画像ファイルにも、記事番号と連番を付けています。
001_20090406_001...
001_20090406_002...
001_20090406_003...この連番をプログラムで読み取れば、WordPressのメディアライブラリから取得した画像を、001、002、003……という順番に並べられます。
WordPressの管理画面で表示されている順番に依存する必要がありません。
また、過去に手作業で作った旅行記事のXMLや、今後使用する新しいHTMLフォーマットも用意しています。
記事には本文だけでなく、「この記事でわかること」「当日の流れ」「Tip」「注意事項」「FAQ」「編集後記」など、共通する構成要素があります。
これらを記事のひな形として自動生成し、その中に写真や体験談を入れていく構想です。
3. ChatGPTと相談して、開発方式を決める
最初に迷ったのが、そもそもプログラムをどこで動かすのか、という点でした。
自分のパソコンにインストールするのか。それともVPSなどのサーバーに設置して、Webブラウザから操作するのか。
ChatGPTと相談した結果、まずはWindows PC上で動くローカルWebアプリとして開発することにしました。
プログラム自体は自分のパソコンの中に置き、操作画面だけChromeなどのブラウザで開きます。
こうすれば、最初から公開サーバーの構築や運用管理をする必要がありません。
将来的にVPSへ移行できるよう、プログラムは機能単位で分割して開発する方針です。
プログラムも小さな部品に分ける
システム全体を一度に作るのではなく、役割ごとに小さなモジュールを作ります。
例えば、WordPressから画像を取得する部分、画像の順番を整理する部分、AIで画像を解析する部分、HTMLを生成する部分などです。
さらに、それらの情報をまとめる「記事マニフェスト」という中間データも用意する予定です。
これは簡単に言えば、画像URLや順番、alt、caption、記事の構成などを保存しておく、記事制作のための設計データです。
この仕組みによって、HTMLのデザインを変更しても、記事の元データを作り直さずに済むようにします。
4. 要件定義書を作成し、Claude Codeへ引き継ぐ
開発を始める前に、ChatGPTと一緒に「WD記事半自動生成システム 要件定義書 v0.1」を作成しました。
システムの目的、基本構成、画像取得方法、AIの役割、記事データの管理方法、開発フェーズ、安全対策などを整理した文書です。
その後、Visual Studio Code（VS Code）を開き、Claude Codeを使って実装を進めることにしました。
既に過去の試作で使用していた開発フォルダがあったため、新しいプロジェクトを作るのではなく、その既存資産を活用する方針です。
D:\WD_projectその中に docs フォルダを作成し、要件定義書を配置しました。
D:\WD_project
└─ docs
└─ 01_requirements.mdそしてClaude Codeに、要件定義書と既存ファイルを読み込ませ、現在の環境を調査してもらいました。
ここで重要だったのは、最初から実装を依頼しなかったことです。
まずPlanモードで既存環境を調査し、開発計画を提示してもらう。
その計画をChatGPTで確認し、必要な部分だけClaude Codeに実装を依頼する、という順番で進めました。
5. Phase 1-A：ローカルWebアプリの開発開始
今回の最初の実装目標は、WordPressとの連携ではありません。
自分のパソコンでWebアプリを起動し、ブラウザに初期画面を表示すること。
まずはここまでを「Phase 1-A」としました。
使用した技術は以下のとおりです。
| 技術 | 役割 |
|---|---|
| Python 3.14.7 | プログラム本体 |
| FastAPI | Webアプリの処理 |
| Jinja2 | HTML画面の生成 |
| Uvicorn | ローカルWebサーバー |
| HTML / CSS | 操作画面 |
| Git | ソースコードの履歴管理 |
開発環境はClaude Codeが構築しました。
Pythonの仮想環境を作り、必要なパッケージをインストール。さらに、HTMLやCSSのファイル、起動用バッチファイルも生成してもらいました。
作成されたプログラムは、ブラウザから次のアドレスでアクセスできます。
http://127.0.0.1:8000これは外部に公開されているWebサイトではなく、自分のPCの中で動いているWebアプリです。
6. 初期画面の生成に成功！
Claude Codeによる実装が完了したので、実際に起動してみました。
起動方法は簡単です。
D:\WD_project\start_server.batこのバッチファイルをダブルクリックすると、PythonのWebサーバーが立ち上がります。
その状態でChromeを開き、127.0.0.1:8000 にアクセス。
すると、作成したWD記事生成システムの初期画面が表示されました！
【画像：Wayfaring Days 記事生成システムの初期画面】
画面には、システム名、稼働状態、記事IDの入力欄、画像取得ボタンなどが表示されています。
まだ画像取得機能は実装していないので、ボタンは押せない状態です。
それでも、自分が構想した記事生成システムが、実際のWebアプリとして画面に表示されたのは大きな一歩でした。
Claude Codeによる動作確認でも、HTTP 200の応答と、ローカルアドレスでの正常な起動が確認できています。
7. さっそくトラブル！起動用バッチファイルが文字化け
実際に起動してみると、早速トラブルが発生しました。
黒いコマンド画面に、意味不明な文字列とコマンド認識エラーが表示されたのです。
最初はプログラム自体が壊れているのかと思いましたが、最後には次のようなログが表示されていました。
INFO: Application startup complete.
INFO: Uvicorn running on http://127.0.0.1:8000ブラウザからも正常にアクセスできていました。
そこでエラーをChatGPTに伝えて確認したところ、原因として考えられたのが、起動用バッチファイルの文字コードの問題です。
Claude Codeが作ったバッチファイルには日本語のメッセージが含まれていましたが、Windowsのコマンドプロンプト側で正しく処理できていませんでした。
そこで、起動用バッチファイルの表示メッセージをすべて英語に変更し、ASCII文字のみで構成するようClaude Codeに修正を依頼しました。
修正後、Claude Code側では文字コードと改行コードの検査、起動コマンドの動作確認まで実施しています。
なお、修正後のバッチファイルを自分で再度ダブルクリックする確認は、次回の作業で行う予定です。
今回のように、エラーが出ても、どの部分が失敗していて、どの部分は正常なのかを切り分けることが大切だと感じました。
8. 現在の開発状況と、次に実装する機能
2026年9月26日時点で、Phase 1-Aの開発は完了しました。
現時点で実現できているのは、ローカルWebアプリの起動と初期画面の表示です。
まだWordPressからの画像取得や、AIによる記事執筆は実装していません。
次のPhase 1-Bでは、いよいよ既存の画像専用WordPressと連携させます。
まずは記事IDを指定すると、その記事の画像だけを取得できるようにします。
続いて、画像ファイル名の連番を使って正しい順番に並べ、画像URLを取得し、HTMLの画像タグを自動生成していく予定です。
さらに、その後のフェーズでは、AIによる画像解析、alt・captionの生成、記事マニフェストの管理、音声入力による体験談の文章化、セクション単位の推敲機能などを追加していきます。
最終的には、私自身が写真を見ながら旅行体験を話すだけで、記事の下書きがある程度完成する仕組みを目指しています。
9. AIを使った開発で感じたこと
今回の開発で印象的だったのは、プログラムを自分で一行ずつ書かなくても、要件を整理してAIに伝えることで、実際に動くシステムを作れるということです。
もちろん、AIにすべて任せれば必ず正しいものが完成するわけではありません。
どんな機能が必要なのか、何を変更してはいけないのか、どこまで実装するのか。
こうした条件は、人間側でしっかり決める必要があります。
今回はChatGPTを要件整理や実装計画の確認に使い、Claude Codeに実際の開発を担当してもらいました。
一度にすべてを実装させず、小さなフェーズに分けて動作確認を繰り返すことも、開発を進めやすくする工夫の一つです。
最初は頭の中にしかなかった構想が、要件定義書になり、プログラムになり、実際のブラウザ画面になりました。
まだ記事生成の半自動化という目標から見れば、ほんの入口です。
それでも、最初の一歩としては十分な成果だと思います。
これからも、実際に動かしながら改善を重ね、自分の旅行記事制作に本当に役立つシステムへ育てていきたいと考えています。
次回は、WordPressのメディアライブラリから画像を自動取得する機能の実装に挑戦します。
WD記事半自動生成システム開発記録 #01｜2026年9月26日