つくる。確かめる。
URLで届ける。

目的・読者・最初の行動を決める

今回の目的は、人を紹介しやすくし、紹介された人が「まず話を聞く」きっかけを作ること。最初から転職応募を求めません。

読者は社員・協力業者と、紹介された候補者。「知人・友人を紹介したい」「紹介されたので話を聞いてみたい」の2つの入口を用意します。

確認：誰が、何をするページかを一文で説明できる。

公式情報と社内で決める情報を分ける

公式HPと採用サイトを確認します。写真・理念・社員紹介の出典を残し、待遇や制度で分からないことをAIに補わせないようにします。

• 職種：住宅アドバイザー・施工管理者・設計者。
• 営業・施工管理は住宅業界未経験者も対象。設計は経験者優遇。
• 共通して、誠実な人柄とお客様の期待に応えたい情熱を重視。
• 入社した場合、紹介者に20万円。対象・時期などの細則は要確認。

確認：確定情報と要確認事項が分かれている。

操作できるアカウントを確認する

AIを使う環境、GitHub、Cloudflare、保存先の共有ドライブを準備します。GitHubとCloudflareのログイン・追加認証は、権限を持つ担当者が行います。パスワードや一時認証コードをマニュアルやLPに書き込む必要はありません。

確認：誰がログインし、誰が公開内容を承認するか決まっている。

依頼文を送り、制作結果を待つ

AIが資料を確認し、ファイルを作成します。写真の利用条件、制度の細則など質問された場合は、分かる範囲で回答し、不明点は要確認のまま残します。

LPを上から下まで開いて確認する

TOP写真だけで判断せず、人物像、3職種、紹介の流れ、謝礼、FAQ、2つのフォームまで確認します。スマートフォン幅でも文字やボタンが欠けていないか見ます。

確認：紹介する人・紹介された人の両方が、次に押すボタンを判断できる。

写真に写る人・人数・出典を確認する

今回のTOPは、女性社員と社長の2人が向き合う座談会写真です。採用サイトの座談会記事を出典とし、画像は1000×667pxの素材を使っています。社外公開に必要な社内の利用確認は別途行ってください。

写真の素材サイズと、画面上の高さを分けて確認する

大きな画像を選んでも、表示枠の高さが低ければ小さく見えます。今回、一度小さくなった際は、写真に合わせて高さを自動調整する設定になっていました。元の高さを戻し、枠を満たす表示に調整しました。

確認：TOPの存在感が戻り、顔が切れず、スマホでも見やすい。

AIに、持ち運べるHTMLを作ってもらう

通常のWeb用ファイルはHTMLと写真が別々です。HTMLだけ渡すと写真が消える場合があるため、「画像を埋め込んだ単体HTML」と指定します。

ファイルをダウンロードし、保存先を開く

AIが提示したHTMLファイルを保存します。WindowsのエクスプローラーでGoogle Driveを開き、共有ドライブ → 社内共有ドライブ → 部門別フォルダ → 広報室へ進みます。自分のPCにDriveが表示されない場合は、ブラウザ版Driveで同じフォルダを開き、ファイルをアップロードします。

ドライブ文字「G:」や表示名はPCによって異なります。同名ファイルがある場合は中身を確認し、旧版を残すか決めてから更新します。

保存したHTMLをブラウザで開く

DriveのプレビューでHTMLが表示されない場合は、ダウンロードしたファイルをChromeやEdgeで開きます。ブラウザ内の制限でローカルファイルが開けない環境では、通常のブラウザを使います。社外の人にURLで見せたい場合は07へ進みます。

確認：保存したファイルの写真・本文・ボタンが表示される。共有ドライブのHTMLと公開サイトは、自動では同期しない。

GitHubにログインする〈担当者〉

GitHubを開いてログインします。右上のプロフィールから、今回使うアカウント「sinji-endo」であることを確認します。

新規の場合だけ、リポジトリを作る〈AIまたは担当者〉

新規作成画面を開きます。下記を確認し、「Create repository」を押します。既存ならこの操作は飛ばします。

初期ファイルの重複や履歴の衝突を避けるための設定です。機密ファイルを除外する.gitignore自体は、PC側のリポジトリに用意します。

Push用の認証を行う〈担当者〉

ブラウザでログインできても、PCのGitから送れるとは限りません。今回もGit Credential Manager（PCのGit認証を管理する仕組み）の承認が必要でした。AIの案内で認証画面を開き、自分が開始した接続であること、アカウントと表示された権限を確認します。

コード入力を求められたら、その場で表示された一時コードを使います。コードは毎回変わります。承認後はAIに「承認したのでPushを続けて」と伝えます。認証アプリの権限は、後述のCloudflareの1リポジトリ限定許可とは別です。

mainへPushし、GitHubで確認する〈AI→担当者〉

AIがファイルの変更を記録（commit）し、Pushします。GitHubの対象リポジトリを開き、ファイル一覧と更新履歴を確認します。

確認：名前の横がPrivate、ブランチがmain、dist/index.htmlとdist/assetsがある。AIからPush成功の報告がある。

Cloudflareにログインして、Pagesを選ぶ

Cloudflare管理画面を開き、対象アカウントを選択します。今回の画面では「Create app」→「Continue to Pages」→「Import an existing Git repository」の「Get started」へ進みました。

表示が異なる場合は「Workers & Pages」→「Create application」→「Pages」→「Connect to Git」に相当する入口を探します。今回は静的なPagesの手順です。

GitHubの対象リポジトリだけを連携する

1. 「Connect GitHub」を押す。
2. GitHubの連携画面で「Only select repositories」を選ぶ。
3. 「housecraft-referral-lp」を検索して選ぶ。
4. 選択が1件であることと、アプリ名・権限を確認する。
5. 担当者が連携を承認し、「Install & Authorize」を押す。

今回許可したのは「Cloudflare Workers and Pages」アプリです。このリポジトリだけを対象にし、コード・デプロイ・管理設定等への権限を確認して許可しました。「All repositories」は選びません。

リポジトリを選び、公開設定を入力する

Cloudflareに戻り、「sinji-endo」の「housecraft-referral-lp」を選び、「Begin setup」を押します。今回の値は下記です。

今回のLPは、完成済みファイルがdistフォルダにあります。そのためCloudflare側で作り直す命令は不要です。別の構成のサイトには、この設定をそのまま転用しないでください。

静的ファイルとGit連携の一般仕様：Cloudflare公式ドキュメント。

公開内容を確認し、Save and Deployを押す

この操作で公開URLから閲覧できるようになります。掲載内容と未実装項目を確認したうえで公開します。処理完了まで待ち、「Success! Your project is deployed」などの成功表示を確認してください。

発行されたURLを開く

確認：TOP写真・文章・装飾が表示される。スマホなど別の端末でも開ける。