私の事例:AI活用マップ(当サイト)
情報このページについて
非エンジニアの私が、Claude(Claude Code)への指示だけで119ページ・約30万字のサイトを作った事例です。効いたのは、コンテンツ作成とサイト表示を切り離したこと。普段のメモアプリで書いた原稿をそのまま取り込み公開する仕組みにし、更新は「メモを直す・取り込む・公開する」の3操作で終わります。
AI活用マップの制作について
このサイトは、Claude(Claude Code)を使って作成しました。 私はデザインやソースコードを書いておらず、どういうサイトにしたいかをAIに伝えることと、出てきたものを見て、修正したい指示を何度も伝えることでした。
2026年7月末時点で119ページ、文字数にして約30万字あります。
情報全体の流れ
いつものメモアプリで文章を書く → コマンド1つでサイトに取り込む → 公開する
サイトの中身の部分は、AIに作ってもらいました。 「メモのフォルダを読み込んで、章ごとにページを作ってほしい」という頼み方です。デザインも同じで、こういう雰囲気にしたいと伝えて、出てきたものを見ながら直していきました。
公開はCloudflareという無料で使えるサービスを使い、住所(ドメイン)だけ自分で取得しました。aixmap.jp がそれです(公開当初はVercelを使っていましたが、商用利用の規約に抵触したため2026年9月にCloudflareへ移行しました)。
更新は3つの操作で終わります。メモを直す。取り込む。公開する。 記事を1本足すのも、誤字を1つ直すのも同じ手順です。
デザインは「製図と朱印」と呼んでいます。白地に薄い方眼を敷き、読み終えると朱色の判子が押される見た目にしました。
サイト作成の工夫
コンテンツの作成とサイト表示を、切り離しました。 ここがいちばん効きました。
文章は、いつも使っているメモアプリ(Obsidian)で書いています。 サイトを作ると、ふつうは「サイトの管理画面で文章を書く」ことになります。そうすると、書く場所がひとつ増えてしまう。私の場合、それだと続かないと思いました。だから、普段メモを書いている場所をそのまま原稿の置き場にして、サイト側は取り込んで表示するだけにしました。サイト用に書き直したり、管理画面に貼り直したりはしていません。
ヒント💡 同じことをやるなら
書く場所をひとつに絞ることを最初に決めてください。管理画面に貼り直す作業が発生した時点で、更新は続かなくなります。コンテンツの置き場(普段のメモアプリ)とサイトの表示を切り離す構成を最初に作れば、更新の手間は「メモを直す」だけになります。