Claude Codeで採用LPを作ってみる｜手元のHTMLを世界に公開するまで

Claude Codeに「採用のLPを作って」と頼むと、数分後には手元のPCで動くWebページができあがります。ここまでは、今や誰でもできる時代になりました。ところが多くの方が、次の一歩で止まります。「……で、これをどうやって候補者に見せるの?」

今回から数回に分けて、AIでものづくりをする人が必ずぶつかる「公開」の壁を越えるための基礎知識を、非エンジニア向けに解説していきます。第1回は、WebサイトとLP（ランディングページ＝1枚完結の紹介ページ）の公開です。

手元のHTMLは「机の上のチラシ」

AIが作ってくれたHTMLファイルは、たとえるなら、あなたの机の上に置かれた1枚のチラシです。良いデザインで、内容も完璧。でも、あなたの部屋に来た人にしか見せられません。

「Webサイトを公開する」とは、このチラシを世界中の誰もが見に来られる場所に貼り出すことです。そのために必要なものは、実は3つだけです。

• 貼り出す場所（ホスティング）: チラシを24時間掲示してくれる、インターネット上の掲示板
• 住所（ドメイン）: 「〇〇.comを見て」と伝えるための、その掲示板の住所
• 貼り出す作業（デプロイ）: 手元のチラシを掲示板に貼る作業そのもの

専門用語は3つ出ましたが、意味はこれだけです。難しいのは言葉であって、概念ではありません。

実際の流れ: このサイト自体がその実例です

いまご覧いただいている funwork.ohen-group.com も、まさにこの手順で公開されています。Claude Codeと一緒にページを作り、ホスティングサービス（私たちはVercelというサービスを使っています。無料枠から始められます）に置き、独自ドメインをつなぐ。この3ステップです。

そして重要なのは、この作業自体もAIに任せられることです。「このLPをVercelで公開したい。手順を教えて、できるところは代わりにやって」と頼めば、Claude Codeがアカウント作成のガイドから公開作業までを伴走してくれます。分からない用語が出てきたら、その場で「それってどういう意味?」と聞けばいい。先生が隣にいる状態で進められるのです。

採用の現場では、これが効きます

なぜ採用・人事の会社がこの話を書くのか、と思われるかもしれません。理由は、採用こそ「ページを1枚さっと作れる」ことの効果が大きいからです。

求人媒体の枠は、書ける内容も見せ方も決まっています。そこに収まりきらない自社の魅力——現場の写真、社員の一日、制度の背景にある考え方——は、たいてい削られます。職種ごとに伝えたいことが違っても、媒体では同じ型に流し込むしかありません。

自社でページを作れると、この制約が外れます。職種別のLP、会社説明会の申込ページ、内定者向けの案内ページ。「あったら良さそうだけど、外注するほどではない」で見送られてきたものが、その日のうちに形になります。数十万円と数週間の見積もりを取っていた頃には、検討すらしなかった選択肢です。

置き場所（ホスティング）の選択肢はいろいろある

本格的な企業サイトでなければ、無料で手軽なサービスがいくつもあります。代表的なところを挙げておきます。

• Vercel: 私たちが使っているサービス。GitHubと連携した自動公開が得意で、本格運用まで見据えるなら有力
• Netlify: 作ったフォルダをブラウザにドラッグ&ドロップするだけでも公開できる手軽さが魅力。社内向けの1枚をさっと出す用途に向きます
• GitHub Pages: GitHubに置いたファイルをそのまま無料で公開できる仕組み。GitHubを使い始めた人には一石二鳥
• Firebase Hosting（Google）: Googleのサービス群と組み合わせたい場合の選択肢

正直なところ、社内向けの簡易ページならどれを選んでも困りません。迷ったらAIに「今回の用途ならどれがいい？」と聞いてください。用途を伝えれば、妥当な提案が返ってきます。

一つだけ注意を。どのサービスも標準では「URLを知っていれば誰でも見られる」状態です。「社内向けのつもり」でも、実態は公開ページ。とくに人事が扱う題材は、社員名簿、評価基準、給与テーブルなど、外に出てはいけないものが多い。 社外秘の内容を載せる場合は、パスワード保護などのアクセス制限を設定するか、そもそも載せない判断を。

まずやってみるなら: 社内向けの1枚から

最初の練習には、失敗しても困らない題材がおすすめです。たとえば、社内イベントの案内ページ、採用ページのたたき台、自分の名刺代わりのプロフィールページ。「作る→公開する→スマホで開いてみる」を一周すると、Webの世界の解像度が一気に上がります。

スマホで開いてみる、は必ずやってください。候補者はほぼスマホで見ます。

一周した人だけが分かる感覚があります。「あれ、外注していたLP制作って、何だったんだろう」——その感覚こそが、提案資料がスライドからHTMLに変わりつつあるのと同じ地殻変動の入口です。

つまずきポイント

• 完璧なデザインを目指して公開が遅れる: まず公開して、あとから直す。Webは印刷物と違い、公開後もいくらでも修正できます
• 会社の正式サイトでいきなり練習しない: 既存サイトには触らず、練習用の新しい場所で。慣れてから本番に臨みましょう
• 公開してよい情報かの確認: 社内情報や個人情報は載せない。迷ったら公開前に一呼吸

次回は、ページの次の段階——「Webアプリ」を作るときの話です。自分専用のアプリとチームで使うアプリの間には、実は大きな壁があります。

AI活用・社員研修のご相談はこちらからどうぞ。

この記事の要点

• 手元のHTMLは「机の上のチラシ」。公開に必要なのはホスティング（場所）・ドメイン（住所）・デプロイ（貼り出す作業）の3つだけ
• 公開作業自体もAIに伴走させられる。分からない用語はその場で聞けばよい
• 採用では効果が大きい。媒体の枠に収まらない魅力を、職種別LPや説明会申込ページとして自前で出せる。「外注するほどではない」で見送ってきたものが作れるようになる
• 置き場所はVercel・Netlify・GitHub Pages・Firebase Hostingなど無料の選択肢が豊富。迷ったらAIに用途を伝えて選んでもらう
• 「社内向けのつもり」でも実態は公開ページ。人事の題材は社員名簿・評価基準・給与テーブルなど外に出せないものが多いので要注意
• 最初は社内向けの1枚で「作る→公開→スマホで確認」を一周する。候補者はスマホで見る