ステップ 05（最終）

応用と困った時の相談窓口

もっと便利にする方法と、何でも聞ける駆け込み寺

このステップの到達目標

  • 応用テクニック（パスワード、カスタムドメイン等）の存在を知る。
  • よくあるトラブルの解決方法を把握する。
  • いつでもAIに相談できる「シームレスな導線」を手に入れる。

おめでとうございます。ここまでの4つのQuestで、あなたは「AI × Antigravity × Cloudflare」の黄金トライアングルを完全に習得しました。
最後のQuestでは、さらに一歩先へ進むための応用テクニックと、困った時にいつでも戻れる「駆け込み寺」を用意しました。

01 もっと便利にする応用テクニック

パスワード保護をかける

Cloudflare Pagesで公開したサイトに簡易パスワードをかけたい場合、AIにこう伝えるだけです。

このサイトに簡易パスワード機能を追加してください。

仕様:
- サイトにアクセスすると最初にパスワード入力画面が表示される
- 正しいパスワード（例: "kenshu2026"）を入力すると本来のページに遷移
- パスワードはJavaScriptのSHA-256ハッシュで検証（平文をソースに残さない）
- 一度認証したらsessionStorageで保持し、再入力不要にする

カスタムドメインを設定する

project.pages.dev ではなく、自分だけの独自ドメイン（例: kenshu.example.com）を使いたい場合も、Cloudflareのダッシュボードから設定できます。ドメインの購入はCloudflare自身でもGoogle Domainsでも可能です。費用は年間1,000〜2,000円程度です。

複数ページの管理

ページ数が増えてきたら、AIに以下のように頼みましょう。 

現在のファイル構成を確認し、以下のルールに沿った命名規則になっているか点検してください。

命名ルール:
- ポータル: index.html
- 個別ページ: vol{シリーズ番号}-{通し番号}_{英語トピック名}.html
  例: vol01-3_planning.html
- スタイル: styles.css（共有） または ページ内埋め込み
- スクリプト: main.js（共有）

ルールから外れているファイルがあればリネームの提案をしてください。

カレンダー機能を追加する

研修まとめサイトの華であるカレンダーUIも、AIに頼めば自動で生成されます。Todayハイライト、クリックでページ遷移、ポップアップの表示…これら全てがVanilla JS + CSSだけで実現可能です。実例を見せるのが一番の近道です。

最強のテクニック：「実例を見せる」

「このサイトのようなカレンダーUI付きのポータルを作って」とURLごとAIに渡すと、AIはそのサイトの構造を解析した上で設計図を書きます。0から説明するより圧倒的に速く、精度も高くなります。

02 よくある質問

Q. HTMLとかCSSとか、何も分かりません。大丈夫ですか？

全く問題ありません。このガイドの核心は「あなたはコードに触れなくていい」という点です。AIが設計を行い、Antigravityがファイルを生成し、Cloudflareが公開します。あなたの仕事は「日本語でAIと会話する」ことと「OKを出す」ことだけです。

Q. Gemini以外のAI（ChatGPT、Claude等）でも同じことができますか？

はい。Quest 01で紹介した「設計図モード」のプロンプトを最初に送れば、どのAIでも同様の体験ができます。ただし、Antigravityとの連携（ローカルへの直接ファイル生成）はGemini Code Assist系が最もスムーズです。他AIの場合は、AIが出力した設計図をAntigravityに手動で渡す（貼り付ける）必要がある場合があります。

Q. AIが途中でエラーを出しました。どうすれば？

慌てないでください。エラーメッセージをそのままAIに貼り付けて「これを直して」と伝えるだけで大丈夫です。Antigravityは該当箇所をピンポイントで修正してくれます。全部やり直す必要はありません。

Q. GitHubのpushって何ですか？ コマンドが怖いです。

pushは「ローカルの変更をGitHubにアップロードする」操作です。コマンドを打つのが怖い場合、Antigravityに「これをpushして」と日本語で頼めばコマンドを代わりに実行してくれます。また、VS Codeの左サイドバーにある「ソース管理」タブからGUIで操作することも可能です。

Q. 一度公開したサイトを削除（非公開に）したいです。

Cloudflareのダッシュボードから該当プロジェクトの「Settings」→「Delete Project」で即座に非公開にできます。GitHubのリポジトリもSettings → 最下部の「Delete this repository」から削除可能です。

Q. ファイルが多すぎてどれが何だか分かりません。

AIに「現在のプロジェクトのファイル構成一覧を表形式で表示して。各ファイルの役割の概要も添えて」と頼んでください。整理された一覧が返ってきます。命名規則がバラバラな場合は、Quest 05の「複数ページの管理」プロンプトを使って整理してもらいましょう。

03 困った時の専属AI相談窓口

✏️

専用GemWebサイトプロンプトメーカーくん🗒️

「Webサイト自動構築ガイド」を受講するあなたの専属Gemです。
進行サポート、エラーの解決、プロンプトの添削など、Web制作の第一歩を優しく力強く後押しします。

サポートポリシー

  • 初心者を一人にしない： 専門用語で突き放さず、常に隣で励ましながら一緒に歩みます。
  • 成功体験を積み上げる： 小さな「できた！」を大切にし、自分の成長を実感できるよう導きます。
  • プロンプトは「型」で伝える： 難しく考えず、型に言葉を当てはめるだけで良い指示が書けるよう支援します。

FAQ を読んでも解決しない疑問、エラーメッセージ、「何を聞けば良いかすら分からない」状態、メンタル面の悩みなど。全て歓迎です。
以下のテキストエリアにそのまま書き殴って「専用Gemに相談する」ボタンを押してください。

クリックすると、テキストがクリップボードにコピーされ＆案内人AIが新しいタブで開きます。

5ステップ全てクリア！

EXP +100 獲得
称号『Web Architect』解放！

おめでとうございます。あなたはもう、コードを書かなくても、AIと対話するだけで美しいWebサイトを構築し、世界に公開できる「Web Architect」です。
この力を使って、あなたのアイデアを形にしてください。

← ステップ 04 ｜ トップへ戻る