OhEN Group
Blog

Claude CodeでWebサイト・LPを作ってみる|ローカルのHTMLを世界に公開するまで

#Claude Code#AI活用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一つだけ注意を。どのサービスも標準では「URLを知っていれば誰でも見られる」状態です。「社内向けのつもり」でも、実態は公開ページ。社外秘の内容を載せる場合は、パスワード保護などのアクセス制限を設定するか、そもそも載せない判断を。

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

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

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

つまずきポイント

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

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

AI導入・AI研修のご相談はこちらからどうぞ。


この記事の要点

  • 手元のHTMLは「机の上のチラシ」。公開に必要なのはホスティング(場所)・ドメイン(住所)・デプロイ(貼り出す作業)の3つだけ
  • 公開作業自体もAIに伴走させられる。分からない用語はその場で聞けばよい
  • 最初は社内向けの1枚で「作る→公開→スマホで確認」を一周するのがおすすめ
  • 置き場所はVercel・Netlify・GitHub Pages・Firebase Hostingなど無料の選択肢が豊富。迷ったらAIに用途を伝えて選んでもらう
  • 「社内向けのつもり」でも実態は公開ページ。社外秘はアクセス制限を設定するか載せない
  • 完璧を目指さずまず公開。Webは公開後にいくらでも直せる

OhEN Groupでは、熊本・九州を中心にAI導入支援・AI研修を提供しています。

006Contact

何から手をつけるか、
一緒に整理しませんか。

AI・事業・組織・経営、いずれのご相談もお気軽に。 漠然とした課題感の段階からお受けしています。