こんにちは！「まーくん。(MarkN)」です。Resoniteというメタバースでプログラミングをしたり、ツールやおもちゃを作ったりしています。

実は最近、自分の作品や活動を発信するためのホームページを立ち上げました。プログラミングの経験はほとんどなかったのですが、「AIアシスタント（今回はGoogleのGeminiさん）と一緒に作れるかも？」と思い立ち、挑戦してみることにしたんです。

この記事では、そんなAIとのホームページ制作の冒険を、プログラミング初心者の方にも分かりやすくご紹介したいと思います。「AIでプログラミングってどんな感じ？」「自分にもできるかな？」と思っている方の参考になれば嬉しいです。

すべては一枚の設計図から始まった

まず取り組んだのは、「どんなサイトにしたいか」という設計図（README.mdというファイル）を作ることでした。 サイトの目的、雰囲気（水色とタータンチェック柄がテーマ！）、載せたい情報、参考デザインなどをまとめたこのドキュメントが、AIアシスタントとの共同作業のスタート地点になりました。

AIとの二人三脚：いざ、ホームページ制作へ！

私の作業ディレクトリは、最初は空っぽ。まさにゼロからのスタートです。

「何から始めればいいの？」という私の問いかけに、AIアシスタントは開発環境の準備から、必要なコマンド（呪文のようなものです！）を一つ一つ教えてくれました。私はそれを自分のパソコンで実行していくだけ。まるで経験豊富な先輩プログラマーが隣にいてくれるような感覚でした。

フェーズ1：土台作り（プロジェクトの初期設定）

ホームページを作るためのツールとして「Hugo（ヒューゴ）」と「Tailwind CSS（テイルウィンドCSS）」というものを使うことにしました。これらは比較的新しい技術のようですが、AIアシスタントがいれば怖くありません！

1. Hugoプロジェクト作成: AIが教えてくれたコマンドを実行すると、ホームページの骨組みが自動で出来上がりました。
2. Tailwind CSS設定: デザインを整えるためのTailwind CSSの設定も、AIの指示通りにファイルを作成・編集していきました。このTailwind CSSのバージョン4は、設定方法が少し独特だったようですが、AIが最新情報に基づいて教えてくれたので安心でした。

この段階で、hugo server というコマンドを打つと、自分のパソコン上で簡素ながらもホームページが表示されるようになり、感動したのを覚えています。

フェーズ2：見た目を整える（デザインの実装）

設計図に書いた「水色とタータンチェック柄」のテーマカラーや、使いたいフォント（Noto Sans JP）をAIに伝え、それをサイトに反映させるためのCSS（スタイルシートという、見た目を定義するコード）の設定を教えてもらいました。

• ヘッダー（サイト上部の顔となる部分）のデザイン
• ホームページの記事一覧カードのデザイン
• 個別記事ページのデザイン
• フッター（サイト下部）のデザイン

これらを一つ一つ、AIが提案してくれたHTML（ホームページの構造を書くコード）やTailwind CSSのクラス（デザインの部品のようなもの）を、私が自分のファイルにコピペ＆調整していく形で進めました。

「エラーは友達！」トラブルシューティングもAIと一緒に

もちろん、すんなり進むことばかりではありません。 「指示通りにしたはずなのに、表示がおかしい！」「コンソールにエラーメッセージが…！」なんてこともしばしば。

そんな時も、エラーメッセージをAIに伝えると、「それは、この部分の記述が古いバージョンかもしれませんね」「この設定が影響している可能性があります」と、原因の推測や解決策を提案してくれます。まるで名探偵のようでした。 例えば、CSSの設定で theme() という関数を使うか var() を使うかで表示が大きく変わったり、Hugoのテンプレートの仕組みで特定のファイルが読み込まれていなかったり。一つ一つ解決していくことで、サイトが少しずつ形になっていくのは大きな達成感がありました。

フェーズ3：便利な機能を追加！

見た目が整ってきたら、次は機能の追加です。

• YouTube動画の埋め込み: 記事にYouTube動画を簡単に埋め込めるように、「ショートコード」というHugoの便利機能をAIに教えてもらいながら作りました。
• サムネイル付きリンクカード: 他のウェブサイトへのリンクを、画像付きで分かりやすく表示するショートコードも作成。ブログカードとも呼ばれるアレです。
• タグ機能: 記事にタグを付けて分類し、タグごとの記事一覧ページを作ったり、ホームページでタグによる絞り込み（今回はタグ別ページへのリンク）ができるようにしました。どんな仕様にするかAIと相談しながら決められたのが良かったです。
• ナビゲーション改善:
  • ページ右下に「トップへ戻る」ボタンを設置。
  • 記事ページには「ブラウザの戻る」ボタンや「ホームへ戻る」ボタン、さらに記事上部にも「前後の記事へ」の簡易ナビゲーションを追加。

これらの機能も、AIがHTMLの構造やJavaScript（動きを付けるためのコード）の基本的な部分を提案してくれ、私はそれを元に自分のサイトに合わせて調整していきました。

GitHubでのバージョン管理：未来の自分と、AIとの共同作業のために

忘れてはいけないのが、GitHub（ギットハブ）を使ったバージョン管理です。 プログラミングの世界では当たり前のようですが、初心者にとっては少しハードルが高いかもしれません。でも、AIに「GitHubでこのプロジェクトを管理したいんだけど、どうすればいい？」と聞けば、最初の設定から、変更を記録する（コミットする）方法、オンラインで共有する方法まで教えてくれます。

こまめに変更を記録しておくことで、「あ！前の状態に戻したい！」という時も安心ですし、AIに「今のファイル構成はこうなっているんだけど…」と伝える際にも、GitHubのリポジトリを見てもらうことでスムーズに状況を共有できます。

これは、AIと共同作業する上で非常に強力なツールだと感じました。

フェーズ4：サイトを磨き上げる（SEOとアクセシビリティ）

そして今、この記事を書いている現在は、SEO（検索エンジンで見つけてもらいやすくする対策）やアクセシビリティ（より多くの人が使いやすいようにする配慮）の基本的な対策を進めているところです。 具体的には、各ページに適切な説明文（メタディスクリプション）を設定したり、SNSで共有されたときにキレイに表示されるようにOGPタグを設定したり、といった作業をAIに教わりながら行っています。

AIとホームページを作ってみた感想

最初は「本当に自分にできるんだろうか？」と不安もありましたが、AIアシスタントの力を借りることで、想像以上にスムーズに、そして楽しくホームページ制作を進めることができました。

• AIは最高の先生であり、忍耐強いペアプログラマー: 初心者のどんな素朴な質問にも丁寧に答えてくれますし、エラーが出ても一緒に解決策を探してくれます。
• 「指示」と「判断」が自分の役割: AIに「こんなことをしたい」と伝え、AIからの提案に対して「それでいこう！」「ここはこう変えたい」と判断するのが人間の役割だと感じました。AIが提示するコードをただコピペするだけでなく、その意味をAIに教えてもらいながら理解しようとすることで、少しずつですが知識も身についていく気がします。
• 小さな成功体験の積み重ね: 一つ一つの機能が形になったり、エラーが解決したりするたびに達成感があり、それが次のステップへのモチベーションに繋がりました。

これからAIで何か作ってみたいあなたへ

もしあなたがプログラミング未経験でも、「何か作ってみたい！」という気持ちがあるなら、AIアシスタントと一緒に挑戦してみることを心からおすすめします。 大切なのは、完璧な指示を最初から出そうとしないこと。まずは大まかなイメージを伝えて、AIとの対話を通じて少しずつ形にしていく。そんな進め方で大丈夫です。エラーが出たら、それをAIに相談するチャンスだと思えば、怖くありません。

この私の体験談が、あなたの「はじめの一歩」のきっかけになれば幸いです。 最後まで読んでいただき、ありがとうございました！

※この記事はAIに今までの会話履歴をもとに書かせたものです。誇張したり間違ったことを書いているかもしれません。（大枠はあってる）