１）はじめに｜G検定の学習を、実際に形にしてみたくなった
今回から、自身のブログサイトを再構築した過程を、全4回の連載として記録していきます。
もともと、妻が管理しているWordPressブログに便乗する形で、2〜3本ほど記事を書いたことがある程度でした。投稿画面で文章を書き、画像を入れて公開する経験はありましたが、自分でWebサイト全体を設計したり、公開環境まで整えたりした経験はありません。
つまり、コーディングができるエンジニアではありません。HTMLやCSS、JavaScriptという言葉は知っていても、それらを自在に扱えるわけではない、Web制作の初心者です。
ブログを再構築しようと思ったきっかけは、G検定の学習でした。AI、機械学習、ディープラーニング、生成AIについて学ぶ中で、「知識として覚えるだけでなく、実際にAIを使って何かを作ってみた方が実感がわくのでは？」と思ったのです。
今回の取り組みは、WordPressから記事を移すだけの引っ越しではありません。サイトの見た目、構成、記事管理、今後の運用まで含めて、AIと一緒に作り直すプロジェクトです。
開発用語の「リファクタリング」に近い面もありますが、この記事では主に「再構築」「移行」「作り直し」という言葉で表現していきます。
２）AIを「便利ツール」ではなく「設計士」として扱う
今回の制作で最初に決めたのは、AIを単なる便利ツールとして扱わないことでした。
生成AIは、文章を書いたり、コードを作ったり、調べ物を手伝ったりしてくれます。もちろん、それだけでも十分便利です。しかし、Webサイト全体を作る場合、単発のお願いだけでは方向性がぶれやすくなります。
「このページを作って」
「このボタンを直して」
「このエラーを修正して」
こうした細切れの依頼だけでは、部品はできても、全体として使いやすいサイトになるとは限りません。家づくりで言えば、玄関、窓、照明を別々に発注しているようなものです。
そこで今回の役割は、自身をPMO、Google AI Studio(=GAS)を設計士として位置づけました。また、別でGemini Proを専属コンサルト(=GemA)としました。GASのChat用AIモデルも設定でGeminiベースでセレクトできます。（時代の進化と共にモデルの進化も早い。。。）PMOとは、プロジェクト全体の進行や品質を管理する役割です。目的を決め、優先順位を整理し、課題を見つけ、最後に判断する人です。
自身はコードを書くことはできません。しかし、どんなサイトにしたいのか、誰に読んでほしいのか、どんな雰囲気にしたいのかは決められます。
一方で、GASには設計士として動いてもらいました。私が目的や条件を伝え、AIが構成や実装案を出す。私が確認し、違和感があれば修正を依頼する。この繰り返しです。
大事なのは、AIに丸投げしないことです。
「おしゃれなブログサイトを作ってください」では、AIも判断できません。そこで、私は次のように伝えました。
「非エンジニアが、記録と学びを整理するための個人サイトを作りたい。派手さよりも、静けさ、読みやすさ、信頼感を重視したい」
ここまで伝えると、AIは単なる作業者ではなく、相談相手になります。
AIを設計士として扱うとは、すべて任せることではありません。人間側が目的、制約、優先順位を明確にすることで、AIの力を引き出すことだと感じました。
３）見た目のコンセプト｜UIはサイト構築の登竜門
今回、私が最初に着手したのは、見た目のコンセプトでした。つまりUIです。UIとは、読者が画面で見るもの、触れるもの、操作するものです。文字の大きさ、色、余白、ボタン、メニュー、画像の配置などが含まれます。
なぜUIを最初の着手としたのか？
それは、Webサイトの再構築で一番最初にイメージしやすかったからです。まぁ、第一印象は、文章を読む前に決まるといいますからね。
（今回は、そこは主眼にしておりませんが）
そこで、GASに対して「このサイトは何を感じさせる場所なのか」を最初に伝えることにしました。
目指したのは、派手なサイトではありません。50代を前にした大人が、自分の歩みを静かに振り返る場所。日々の学びや気づきを、無理に飾らず積み重ねていく場所。そんなイメージを、次の言葉でGASに伝えました。
「モノトーン」「幾何学的」
「静寂」「ミニマル」「大人の余白」
AIは速く作れます。だからこそ、最初に方向性やイメージを細かすぎず簡潔に言語化することが重要だと感じました。
４）UX運用を考えたアーキテクチャ設計
見た目の方向性が決まったら、次に考えるべきは運用を見据えた構成です。
UXとは、人が製品やサービスを通じて得る「体験のすべて」のことです。
Webサイトは、公開したら終わりではありません。記事を追加する。内容を修正する。カテゴリを整理する。こうした作業を無理なく続けられるかどうかが、個人ブログではとても重要です。
今回のサイトでは、WordPressから離れ、Firebase、GitHub、Google AI Studio、microCMSを組み合わせる構成にしました。
(この組み合わせは、ネットで検索し、この形に落ち着きました。）
役割を簡単に言うと、次のようなイメージです。
・Google AI Studioは、AIと対話しながらサイトを作る場所。
・microCMSは、記事本文を管理する場所です。
・GitHubは、作ったコードを保管する場所。
・Firebaseは、完成したサイトを公開する場所。
家づくりに例えるなら、Google AI Studioは設計室、GitHubは設計図の保管庫、Firebaseは土地、microCMSは記事をしまう本棚のようなものです。
WordPressは、これらが一体になった便利な仕組みです。一方で、細かく変えようとすると、テーマ、プラグイン、サーバーなど、いろいろな要素が絡みます。
今回私が目指したのは、できるだけ運用を軽くすることでした。ミニマルに。
・サーバー管理に時間を取られたくない。
・記事を書くことに集中したい。
非エンジニアのためのAI時代個人Web制作ノート#1｜調べたことアレコレを簡潔に！
非エンジニア向けにAI時代のWeb制作4サービスを整理
本文では詳しく説明しきれない用語や設定でつまずいたポイントは、ノート側に切り出します。何を入れるかだけではなく、何を入れないかを決めることも、設計の大事な仕事だと感じましたので。
５）AI時代の個人制作は、どう変わるのか
今回のブログ再構築を通じて感じたのは、AIによって「作る側」に回れる人が増えるということです。
これまでWebサイトを作るには、HTML、CSS、JavaScript、サーバー、ドメイン、CMS、SEOなど、かなりの知識が必要でした。初心者にとっては、入口に立つだけでも大変です。
もちろん、専門知識は今でも重要です。AIがあるからエンジニアが不要になる、という話では決してありません。ただ、非エンジニアが自分のアイデアを形にするハードルは、確実に下がっています。
・わからない言葉を聞ける。
・エラーの意味を説明してもらえる。
・次に何をすればよいか整理してもらえる。
・自分の意図をコードに変換してもらえる。
これらは、初心者（非エンジニア）にとって大きな支援ですね。
一方で、AIがあれば何も考えなくてよいわけではありません。むしろ、考える力はより重要になります。
・どんなサイトにしたいのか。
・誰に届けたいのか。
・何を優先するのか。
・完成後にどう運用するのか。
これらを決めるのはAIではなく、自身です。（王道の方法や提案をしてくれるので、確実に助かりますが）
・最初に目的を決める。
・UIコンセプトというは入り口を置く。
・運用しやすい構成を考える。
・AIの提案を受け止めながら、最後は自分で判断する。
この流れが、AI時代の個人制作では大切になるなと感じました。
第1回となる今回は、なぜこのプロジェクトを始めたのか、AIをどのように位置づけたのか、UIやUX運用をどう考えたのかを整理しました。
第2回では、実際にmicroCMS×GASへの合体をどのような指示を出し、どのように構成を作っていくのかを紹介していきます。
このブログ再構築記が、同じようにAI時代のものづくりに一歩踏み出したい人にとって、小さな地図になれば嬉しく思います。