第2章

2. 事前準備

ホームページを動かすためのファイル保存場所として、GitHub（ギットハブ）のアカウントを作成します。

GitHubアカウントの作成

• GitHubの公式サイトを開き、「Sign up（サインアップ）」をクリックします。
• Googleアカウントと連携するか、メールアドレスを入力して登録を進めます。
• 今回は手順が簡単なGoogleアカウントの連携を行います。所有のGoogleアカウントと連携してください。
• ユーザー名を半角英数字で入力し、国（Japan）を選択します。 「Create account」の緑色のボタンを押せば登録完了です。
• アカウント登録のためにセキュリティクイズ（パズル）に答えます。矢印を使って、左側に示されているものと同じ中身のバスケットの画像を見つけてください。

第3章

3. リポジトリ（専用フォルダ）の作成

ホームページのファイルをまとめるための、自分専用の保存スペース（リポジトリ）を作成します。

リポジトリの新規作成手順

• GitHub上で新しいリポジトリを作成します。
• リポジトリ名（フォルダ名）を入力します（例：「dondonfestival2025」）。Description（説明欄）に、サイトの目的などを分かりやすく記述します。
• 「Add a README file」に必ずチェックを入れます。
• 一番下の「Create repository」ボタンを押し、フォルダ作成を確定させます。
• 画面が自動で切り替わり、作成されたリポジトリ画面が表示されれば完了です。

第4章

4. AIによるHTMLコードの生成

作成した保存スペースに入れるためのホームページの設計図（HTMLコード）を、AIアシスタント「Gemini」に作てもらいます。

AIへの指示（プロンプト）

AIに送る指示文（プロンプト）は、専用のテンプレートを使って作成します。

• 事前に用意されている「Googleドキュメントのテンプレート」をダウンロードして開きます。
  テンプレートを開く
• 今回のホームページのテーマは「地元のお祭りをWebで告知しよう！」です。
• このテーマに沿って、お祭りの日時、場所、見どころなどの必要項目を直接書き換え、穴埋めを完成させます。
  小松市どんどんまつり の入力例
• 完成したテンプレートのテキストを「すべて選択（Ctrl+A / Cmd+A）」し、丸ごとコピーします。
• Geminiを開き、コピーしたテキストをメッセージ欄に貼り付けて送信します。
• AIが出力したHTMLコードの右上にあるコピーボタンを押し、コードを丸ごとコピーしておきます。

第5章

5. ホームページファイルの作成と公開

AIが作ったコードをGitHubに設置し、Webサイトとして世界に公開します。

ファイルの作成

• 作成したGitHubのリポジトリ画面に戻り、「Add file」から「Create new file」を選択します。
• ファイル名は必ず index.html と入力してください。
• 下の広いスペースに、コピーしたコードをそのまま貼り付けます。
• 右上の「Commit changes（変更を保存）」を押し、ファイルを保存します。

ネットへの無料公開設定（GitHub Pages）

• リポジトリ上部のメニューから「Settings（設定）」を開きます。
• 左メニューから「Pages」を選びクリックします。
• Build and deploymentの「Branch」項目を main に変更して「Save」します。

• URLが発行されたら「Visit site」ボタンをクリックします。
• 表示されたURLを取得し、以下のスプレッドシートに入力して共有しましょう。
  スプレッドシートはこちら

第6章

6. その他・応用操作

公開したページを編集する

• AIへのプロンプトを変更して再出力を行い、コードをコピーします。
• リポジトリのトップ画面にある「index.html」をクリックします。
• 編集画面に切り替えるため、鉛筆のアイコンをクリックします。
• コピペで内容を編集したら右上の「Commit changes（変更を保存）」を押し、ファイルを保存します。

YOUTUBEを参考にする

本マニュアルの内容は、以下のYouTube動画でも解説しています。