Skip to content
ハルダケ

AIが書いたHTMLでHPを公開できるツールまとめ【GitHub/Vercel/Netlify/Cloudflare/ハルダケ】

こんな方向けの記事です

  • ChatGPTやGemini、Claudeにお願いしてホームページのコード（HTMLなど）を作ってもらったものの、「どうやったら公開できるかよく分からない」という方。
  • サーバーやDNSといった言葉に苦手意識のある、エンジニアではない方。
  • 費用を抑えて自分でホームページを作りたい方。

AIが作ったHTMLでホームページを公開するには？

ChatGPTやGeminiのような生成AIを使えば、専門知識を身につけることなく、簡単にホームページのソースコード（HTMLやCSS）が書けるようになりました。

AIが書いてくれるソースコードは、最初はただの「ファイル」として、自分のパソコンの中に存在しているだけです。自分のパソコンの中にPowerPointのファイルやExcelのファイルを保存しているのと同じ状態です。自分のパソコンでそのファイルを開けば見ることはできますが、スマホから開くことはできませんし、他の人に見てもらうこともできません。

AIの作ったホームページを誰かに見てもらえる状態にするには、そのファイルを「サーバー」と呼ばれる、インターネットに常時つながっているコンピューターに置く必要があります。さらに、ホームページを配信するための設定や、URLを紐づける設定など、いくつかの作業が別途必要になります。

この記事で比較する5つの公開先（GitHub Pages・Vercel・Netlify・Cloudflare Pages・ハルダケ）は、いずれも「ファイルさえ渡せば、サーバーの用意からURLの発行までをまとめて代わりにやってくれる」サービスです。だからこそ、専門知識がなくてもファイルを渡すだけで、世界中の誰もがアクセスできるURLが手に入ります。

こんなホームページの作り方が対象です

この記事が紹介する方法で公開できるのは、次のような機能がついて「いない」ホームページです。

  • 会員登録・ログインができる会員制のサイト
  • ユーザーがコメントや写真を投稿できるサイト
  • ネットショップ

以下のような用途のホームページであれば、問題なく公開することができます。

  • 会社のホームページ
  • 採用ページ
  • 商品やサービスのランディングページ（LP）
  • 店舗のホームページ

画像を載せたり、ふわっと動くアニメーションつけたり、見た目に凝ったホームページも問題なく公開できます。

類似サービスの比較一覧表

ファイルさえ渡せば、サーバーの用意からURLの発行までをまとめて代わりにやってくれるサービスをまとめました。

エンジニアではない人が利用する際に重要なのは、専門知識がなくても迷わず公開まで進められるかどうかです。「アカウントを作って、ファイルを置いて、公開ボタンを押す」というシンプルな流れで完結するのか、それとも独特の用語や追加の設定作業が挟まるのか、という違いがあります。

サービスエンジニア以外にも使えるかサポートや言語
GitHub Pagesコマンドを打って操作するのがメインだが、ファイルのアップロードも可能。Gitやコミットなどの基礎理解が必要。ダッシュボードは英語。情報量は多いが、技術者向けで基礎知識が必要。
VercelGitHub上のソースコードと連携させて使うのがメインなので、GitやGitHubについての基礎理解が必要。ダッシュボードは英語。情報量は多いが、技術者向けで基礎知識が必要。
Cloudflare PagesGitHub上のソースコードと連携させて使うのがメインなので、GitやGitHubについての基礎理解が必要。ダッシュボードは英語。情報量は多いが、技術者向けで基礎知識が必要。
Netlifyドラッグ&ドロップでその場で公開できる。ダッシュボードは英語。比較的専門知識を必要としない。
ハルダケドラッグ&ドロップでその場で公開できる。日本人が開発した日本語のサイト。基礎知識のないユーザー向けに設計されている。

GitHub Pagesとは

GitHubは、プログラムのコードを管理しながら、複数人で共同開発するためのサービスで、GitHub Pagesはその機能のひとつです。GitHub上に保存したファイルをそのままウェブサイトとして公開できます。GitHubはコマンドで操作して利用する人がほとんどですが、ブラウザ画面からファイルをドラッグ&ドロップしてアップロードすることもできます。

  • AIとの相性
  • 専門知識が必要かどうか
  • 拡張性

GitHub PagesとAIの相性

世界中で使われているので、GitHubに関する記事や使い方ガイドの量も膨大です。これにより、AIもGitHubのことをよく理解しているため、AIを相棒にしながら学習しやすい環境があります。

GitHub Pagesを使うのに専門知識が必要かどうか

公開までには「リポジトリ」（保存場所のようなもの）を作ったり、「コミット」（変更を確定させる操作）を行ったり、別画面で公開設定を有効にしたりと、独自の手順と用語がいくつか挟まります。慣れればどれも数クリックで終わる作業ですが、初めて触る人にとっては「この単語は何のことだろう」と立ち止まる場面が出てきやすいところです。

GitHub Pagesの拡張性

GitHubには、エンジニア初学者から大手企業まで、あらゆる規模のWebシステムに使いやすい膨大な機能が搭載されています。世界中の企業が利用しており、簡単なホームページから大規模なシステム開発まで、広範囲のニーズに対応することができます。

参考：GitHub Pages 公式サイト

Vercelとは

Vercelは、Next.jsという有名なWeb開発ツールを作っている米国企業が提供するサービスです。NotionやStripeといった有名企業も多く利用しています。GitHub上に保存したソースコードと連携させることで、ホームページが公開できます。

  • AIとの相性
  • 専門知識が必要かどうか
  • 拡張性

VercelとAIの相性

Next.jsの開発元ということもあり、世界中の開発者がVercelを使ってサービスを公開しています。それだけ情報量も豊富なので、AIに使い方を聞きながら進めることもしやすい環境です。

Vercelを使うのに専門知識が必要かどうか

公開の基本的な流れは、GitHub上にソースコードを置き、それをVercelと連携させるというものです。つまりGitHubアカウントの作成やGit操作の理解が前提になるため、非エンジニアにとってはこの時点でハードルになりやすいところです。

Vercelの拡張性

もともとエンジニア向けに作られたサービスで、簡単なホームページから大規模なWebアプリケーションまで、幅広い開発ニーズに対応できる機能が揃っています。無料プランは個人の非商用利用が前提となっており、収益化を考えているサイトでは有料プランへの加入が必要になる点にも注意が必要です。

参考：Vercel 公式サイト

Cloudflare Pagesとは

Cloudflare Pagesは、インターネット全体を支える大手インフラ企業、米国のCloudflare, Inc.が提供するサービスです。GitHub上のソースコードと連携させて公開するのが基本の流れで、アクセスがどれだけ増えても、データのやり取り量を理由に追加料金が発生することが基本的にありません。

  • AIとの相性
  • 専門知識が必要かどうか
  • 拡張性

Cloudflare PagesとAIの相性

エンジニアの間では広く知られたサービスで、公式ドキュメントも充実しています。ただし非エンジニア向けの平易な解説記事は少なく、AIに質問する際も、ある程度技術的な言葉で質問できないと的確な回答を引き出しにくいところがあります。

Cloudflare Pagesを使うのに専門知識が必要かどうか

GitHub上のソースコードと連携させて使うのが基本のため、GitHubの基礎知識に加えて、ドメインの設定にCloudflareというサービスそのものへの理解も必要になります。

Cloudflare Pagesの拡張性

データのやり取り量やサイト数の上限がほとんどなく、アクセスが急増しても安定して表示し続けられる強みがあります。将来的にサーバーレス機能などを組み合わせて本格的なWebアプリケーションに育てていくことも可能な、拡張性の高いサービスです。

参考：Cloudflare Pages 公式サイト

Netlifyとは

Netlifyは、米国のNetlify, Inc.が提供するサービスで、ブラウザの画面上にHTMLファイルをドラッグ&ドロップするだけで、その場で公開まで完了する手軽さが特徴です。

  • AIとの相性
  • 専門知識が必要かどうか
  • 拡張性

NetlifyとAIの相性

GitHubやVercelほどの利用者数ではないものの、Web制作者の間では広く知られたサービスで、使い方に関する情報も一定量存在します。基本的な使い方であれば、AIに質問しながら進めることも十分可能です。

Netlifyを使うのに専門知識が必要かどうか

ドラッグ&ドロップでその場で公開できる分、非エンジニアにとって最も直感的に扱えますが、「デプロイ」や「ビルド」といった専門用語が使われているため、多少の基礎知識は必要です。また、ダッシュボードは全て英語です。

Netlifyの拡張性

簡単なホームページの公開だけでなく、フォームの設置やちょっとした自動処理なども追加できるようになっており、必要に応じて機能を足していける柔軟さがあります。

参考：Netlify 公式サイト

ハルダケとは

ハルダケは、日本の会社が運営するサービスで、ChatGPTやGemini、ClaudeなどのAIが作ってくれたHTML/JS/CSSをコピペするだけで公開できます。5つのサービスのなかで唯一、完全に非エンジニア向けにつくられています。

  • AIとの相性
  • 専門知識が必要かどうか
  • 拡張性

ハルダケとAIの相性

まだ立ち上がったばかりの日本のサービスのため、AIが学習しているであろう情報量はまだ多くありません。ただし、そもそもAIに使い方を聞かなくても迷わず使えるように作られている点が、他の4サービスとは異なる立ち位置です。

ハルダケを使うのに専門知識が必要かどうか

AIが出力してくれたものを貼り付けるだけの操作で完結し、Git操作やアカウント連携の知識は一切不要です。非エンジニアのユーザーを想定しているため、ダッシュボード上には「デプロイ」や「コミット」のような専門用語が使われていません。

ハルダケの拡張性

手軽に使える分、複雑なシステムをハルダケで公開することはできません。予約機能などを持たせたい場合は、ホームページからLINEへ友だち登録させるなど、外部プラットフォームのリンクを貼るほかありません。

参考：ハルダケ 公式サイト

結局どれを選べばいいか（まとめ）

GitHub Pages・Vercel・Cloudflare Pagesの3つは、専門知識が必要ですが、基本的な手順を乗り越えられれば、その先には非常に高い拡張性が待っています。将来的に本格的なWebサービスへと育てていきたい方、あるいはすでにエンジニアとしてある程度の知識がある方には、この3つが有力な選択肢になります。

Netlifyは、ドラッグ&ドロップで公開できる手軽さがありながら、ある程度の拡張性も期待できます。多少の専門用語には目をつぶれる、英語のダッシュボードでも読み進められる、という方には、バランスの良い選択肢と言えそうです。

一方でハルダケは、専門知識は不要でとっつきやすい代わりに、できることも少ないサービスです。AIに作ってもらったページをとりあえず公開したい、ITの専門家を目指しているわけではない、という方には、遠回りせずこちらを選んでしまって良いと思います。

ハルダケ編集部

ハルダケ編集部は、AIを仕事に活かしたいと考える方に向けて、実践的な情報を発信しています。運営メンバーは武蔵小杉駅前テックカフェでAI講座の運営・講師を務めており、「エンジニアになりたいわけではないけれど、AIを仕事に活かしたい」という自営業者・経営者の方々から、多くの相談を受けてきました。職業エンジニアになるための情報ではなく、本業を持つ方がAIを味方につけるための、実践的な情報発信を目的としています。