自分の経歴書を読み込んでClaudeでWebを作って、ブログでヘッドレスCMSをいれてみた。
自分のWebの履歴
このWebサイトをWordpressで作って18年目になりました。中小企業診断士の受験ブログを書いてた頃はフリーのブログを使っていましたが、合格を機にホームページがほしいなと思って作りました。その2年後に独立したわけですが、ちょいちょい執筆の依頼が来るようになって嬉しかったのを覚えています。
今後もWordpressを使い続けていくと思いますが、なかなか、事業者さんとか友人にWordpressを勧めてもメンテナンスなどができず断念されてしまうケースが多かったです。最近はいろんなクラウド型のホームページサービスもおおいので、それでも十分ですが、やはりデザインとかが調整しきれないこともありますよね。
一方でAIがでて、TOPページなどはかっこよくAIでデザインができたとしても、ブログ機能がほしいとか、色々とから課題が出てきそうです。
そのため、一度、ヘッドレスCMSのmicroCMSを試してみようと思います。ブログなどの投稿はこのCMSに任せて、ホームページ自体はAIで作って、MicroCMSのブログも表示できるかやってみたいと思います。
自分の経歴書PDFを読み込んで、Claudeでサイトデザインを作ってもらって、microCMSでブログを入れて、Formspreeで問合せを入れてもらいました。
今回読み込んだ自分のPDFの経歴書です。
“2026年村上知也のプロフィールシート” をダウンロード 2026経歴書.pdf – 16428 回のダウンロード – 294.61 KB取り組んだ内容の全体像
作られたファイルとか構成、外部サービスの連携状況です。
microCMSに登録
まずはサイトに行って登録しました。
といあえず数件サンプルのブログとサムネを入れました。
APIをとってくる
APIキーを取得して、Cluadeが生成してくれたコードの中にいれました。
ClaudeでWebつくってもらってmicroCMSの連携もお願いしてみる
経歴書PDFをClaudeに渡して、内容を反映してもらいました。完成したサイトの文章表記は、ブログの所以外は、全部、Claudeが作った内容をそのまま掲載しています。
やったこともClaudeがまとめてくれました
今回完成したWebサイトの全体構成をまとめておきます：
サーバー上のファイル一覧
├── .htaccess ← 文字コードUTF-8設定
├── index.html ← メインページ
├── post.html ← ブログ記事詳細ページ
├── config.js ← microCMS APIキー設定
└── script.js ← 一覧ページ用JS実装済みの機能
- プロフィール・サービス・セミナー・著書の紹介
- microCMS連携ブログ（一覧・記事詳細）
- Formspree連携お問い合わせフォーム（メール通知付き）
感想
経歴書PDFを読み込んでWebサイトデザインを作ってくれるのは感動しますね。多少デザインは再度指摘してすぐ出来上がりました。
一方でmicroCMSを埋め込むのは多少苦労しました。といってもjsも全部Cluadeが描いてくれているわけで、サーバにアップして、エラーでてエラー内容を伝えてを５〜６回繰り返したら動くようになりました。
問合せフォームのFormspreeはつかったことなかったですが、すぐ動きました。
うーむ、Wordpressの死は訪れるのだろうか。Wordpressにはアップデートが色々いるのに苦労されるケースが多いです。その点、今回はHTMLとヘッドレスCMSだから管理工数は少なくなるでしょうね。サイトの更新もこういったLP形式程度なら、引き続き生成AIでお願いしたら反映できそうですね。
一方で、Wordpressのメンテナンスに手こずっていたら、きっとmicroCMSの導入も難しいでしょうね。
まあ、本業のWeb制作の人たちは色んな制作手段があるんでしょうが、ちょっと知ってるだけの素人レベルのワタシくらいならAI生成＋ヘッドレスCMSはありそうですね。そうするとWordpressのシェアも減っていくのかなあ。とは言え、自分のこのWordpressサイトは当面使い続けますが。
そんなところで
