Blogブログ
2026/6/7/
こんにちは、デザイナーの内田です。
前回の更新が4月19日。
AIと一緒にmicroCMS＆Next.jsで作るイベントLP。
AI先生と一緒にヘッドレスCMS（microCMS＆Next.js）を学んでみる #1
AI先生と一緒にヘッドレスCMS（microCMS＆Next.js）を学んでみる #2
読んでくれている方がいるかどうかは怪しいですが、いたとしても
「あ、あいつ挫折したな」
って思っているかと思います。
挫折してねぇし。
結果から言うと、無事に作業を終えてドメインあてて発表前という段階まで完成させました。
内田の平日の自由時間は8:00-10:00、22:00-26:00くらい。
なんですが、ゲーマーの妻（1記事目参照）の勤務時間が増大中でして。
二泊三日の出張や残業時間がマシマシになり、子どもたちの弁当作りや夕飯対応もウチダの対応範囲となっていた影響で記事化の時間がとれませんでした。
抜け毛が多くなっていて、頭頂部を見るのが怖いので家の鏡をいくつか伏せた。
世のシングルマザー＆シングルファーザー、マジリスペクトです。
作成しているのは、地域の小さなマルシェ＆フェスイベントのLP作成。
AIと一緒にmicroCMSのAPIを作成しました。
・イベント出店者の応募フェーズと発表フェーズで表示内容をスイッチできる機能が欲しい
・出店、パフォーマー、スポンサー向けのドキュメントの投稿管理
・出店者、パフォーマーの詳細投稿管理
・ギャラリーに使用する写真の管理と年ごとのアーカイブ
・LP内の開催日表記などの変更可能性箇所の管理
・スポンサー（協賛企業）の管理
microCMSの無料範囲内で作成できるAPI数は5個まで。
AIからの提案の元、
■出店者
■ギャラリー
■ドキュメント類
■設定
という4つのAPIですべて管理できるようにしました。
つまづいた箇所はひとつだけ。
無料範囲内で作成できるAPI数は5個という前提条件が共有されていなかったので、最初は無計画に作ってしまっていたというところだけでした。
もし同じような作業をAIと行う場合、
・無料でできる範囲内で作成したい
という点をプロンプトに入れると良さそうですね。
結構わかりやすく作成できたかと思います。
これで、仮にウチダがいなくなっても他の運営委員メンバーでWebサイトの更新がすべてできるようになりました。
これまでのスキルセットで組んだHTMLとCSSを元に、AIとNext.js化をしました。
Next.js化といっても、HTMLをセクションごとに分解してコンポーネント化をしてインクルードするみたいなシンプルな作業。
microCMSと接続したそれぞれのコンポーネントでAPIを読み込む感じです。
jsは、ほぼほぼAIが吐き出してくれました。
つまづきポイントもAI。
ハルシネーション（AIがつく嘘）というほどのものではないんですが
あれ？コピペしたjsだと動かないな
→エラーコードをAIにシェアする
→そういうことなら一行足りないよ！これ足して！
→動くようになる（エラー起きてたjs、お前が教えてくれたやつや）
みたいな現象がいくつか。
AIのせいっていうよりも、共有すべき前提条件に抜けがあったからみたいな感じでした。
実現したい機能や動きをプロンプトでしっかり共有すれば問題なさそう。
エラーコードを共有することで解決できるってのも心強い限り。
Vercelはサーバー設定などが不要で、Gitと連携するだけでWebサイトを公開できるサービス。
個人開発や小規模なプロジェクトであれば、ほとんどの機能を無料で利用できます。
業界人として恥ずかしいですが、あまり知らなかったのと、利用した今でも
「これ（ある程度）無料で使えるってオニじゃね？」
って思ってます。
基本英語のサービスですが、不安に思ったらスクショをAIに見せれば設定すべき項目と方法を教えてくれます。
「いま作ってる◯◯なら、そこの項目はコレでOK。◯◯が◯◯になったタイミングで教えて。」
みたいな感じでレクチャーしてくれます。
すべての作業を終えたいま。
大体の箇所はmicroCMSで変更可能になりました。レイアウトなどに変更があった時は
・ローカルで変更作業、Gitでpushしたら自動公開
みたいな形に。
WordPressよりも高速でプラグイン等によるセキュリティリスクの低いWebサイト構築の完成です。
まぁでも、たぶん達人の皆さんから見ると色々アレではあるんでしょう。精進します。
冒頭に書いた通り、後半は作業時間自体をとることが難しくなり。
HTMLをぶん投げて、Next.js化しておいて！っつって吐き出されたコードをコピペするみたいな形や、AIエージェントにディレクトリ共有して丸投げみたいな形でも対応しました。
AIに仕事を任せるワークフローってのも感覚の入口として身についた気がします。
バックエンドやフロントエンドのスキルに弱いデザイナーも、エンジニアさんが横についていてくれているような感覚で制作を進められます。
次はちょっとしたサービスを作ってみても楽しそうですね。社内の名刺作成サービスとかとか。
本業の方でもAI導入をしていけそうなのが見えてきたので…社長にClaudeの導入を打診してみよう。
制作以外でも社内でとんでもない効率化できそうですね。
あの人やあの人のワークフローも激変するんじゃないか。
総作業時間は32hくらいでしょうか。
イメージとしては、半分以下に出来る気がしています。
ウチダは楽観主義ではあるんですが、決してポジティブな人間ではなく。
自分の社会的な価値はゼロに等しいと思い続けています。
iPS細胞じゃないですが、消えていなくなっても別の何かが補えるだけの脆弱な存在です。
AIを使って作業をすることで、「おいおいおい！サーバーの片隅だけで俺いらなくなっちゃった！」という思いが強くなりました。
俺はいらない子や。
そうなると、
「AI様にもさすがにこれは出来ねぇだろ？おん？」
ということがしたくなります。
ゴールデンウィークに庭の雑草の草刈りをしながら
防草シートで将来の草刈りの手間を減らしたい
→ついでに小さな花壇でも作っちゃうか
→せっかくならレンガでかわいく作ろう
→直線じゃつまらねぇから1/4サークルで作ろう
→隣に小松菜とか作れる畑も作っちゃう？
→残ったスペースは砂利敷いて石置いてロックガーデンにでもしちゃう？
とエスカレートしつづけた結果
レンガ製ハーブガーデンが完成しました。
真ん中のスペースはドクダミ除去のあとに土を再生したシェードファームを作ります。
その隣には砂利を敷き詰め、石を買ってきて配置し、セダムなどの多肉を植えてロックガーデンを作る予定です。
園芸などに興味はなかったんですが…最近は余暇を見つけるとホームセンターのガーデンコーナーをウロウロしています。
大好きなホームセンターに、あんな楽しいエリアがあるなんて知らなかった！
植物はいいですね。目覚めました。
手間をかければ応えてくれる。人間は応えてくれるとは限らない。
芽吹きや発根で脳内にドーパミンとセロトニンが分泌されています。
おそらく、このままエスカレートを続けてクレマチスやジャスミンを這わせたアーチを作る未来や、四季折々の草花を庭に配置する未来が見えています。
この幸福感はAIには理解できまい。ざまぁみろ。
と思ったんですが、こういう未来が見えました。
脳にチップが埋め込まれるようになると分泌物質のモニタリングが出来るようになって。
「最近疲れてるからマッサージ行ってくるわ」
ってノリで
「最近、嫌なことばかりで気分が冴えないからドパ（ドーパミン補給）りにいかね？」
というメンタル管理が近い未来に実現することでしょう。
こえぇ。
みんな、己の境界線をしっかりとイメージしつづけるんだ。
ってわけで、シリーズ終わります。
当社への各種サービスお問い合わせ、ご質問、資料請求はこちらからお問い合わせください。
お問い合わせ内容の確認後、担当者よりご連絡させていただきます。