HTML ページにパスワードをかけて、知っている人だけに見せる方法
要約
HTML ページにパスワードをかけるなら、ページがブラウザに届く前にパスワードを確かめる方法を選びます。JavaScript で入力欄を出すだけのやり方は、パスワードがページのソースに書かれていて、開けばだれでも読めます。確かな方法は、レンタルサーバーの Basic 認証、StatiCrypt での暗号化、パスワード機能のある公開サービスの 3 つです。Convika なら ChatGPT や Claude で作った HTML をアップロードし、パスワードを設定して公開するだけです(パスワードは Pro の機能です)。
Pro は月 ¥1,800
目次
ChatGPT に頼んで、取引先に出す見積もりと工程表を HTML のページにまとめました。見せたいのは先方の担当者 3 人だけです。URL が転送されてだれにでも開かれるのは困る。そこで必要になるのが、ページにかけるパスワードです。
このガイドは、パスワードのかけ方を仕組みの違いから比べたうえで、Convika で HTML ページにパスワードをかける手順を説明します。
HTML でパスワードをかけるには、まず仕組みの違いを知る
HTML でパスワードをかけるには、ページを送る前にサーバーでパスワードを確かめるか、ページの中身を暗号化しておく必要があります。HTML だけでは、ページを守るパスワードはかけられません。
「html パスワード」で調べると、<input type="password"> の説明がよく出てきます。これはフォームの入力欄で、打った文字を「●」で隠すだけのものです。ページそのものは守れません。
パスワードをどこで確かめるかで、方法は 3 つに分かれます。
- 見る人のブラウザで確かめる。 JavaScript で入力欄を出す方法です。パスワードはページの中に書かれています。
- ブラウザで暗号を解く。 StatiCrypt のような暗号化ツールです。パスワードが暗号を解く鍵になります。
- サーバーで確かめる。 レンタルサーバーの Basic 認証や、公開サービスのパスワード機能です。パスワードが正しいときだけ、ページが送られます。
JavaScript のパスワードでは守れない理由
よく紹介されるのは、このあとのコードのようなスクリプトです。入力されたパスワードが違えば、ページの中身を消します。
<script>
var password = prompt("パスワードを入力してください");
if (password !== "himitsu") {
document.body.innerHTML = "パスワードが違います";
}
</script>
このスクリプトが動く前に、ブラウザはファイルをまるごと受け取っています。パスワードの「himitsu」も、隠したいはずの本文も、受け取ったファイルの中にあります。
右クリックの「ページのソースを表示」でだれでも読めます。ブラウザで JavaScript をオフにすれば、入力欄すら出ません。
2026 年 10 月 13 日に、このスクリプトを入れたページを公開し、ブラウザを使わずに curl で取得しました。返ってきた HTML には、パスワードも、隠したはずの文もそのまま入っていました。
セキュリティの弱点を分類した MITRE の一覧でも、この作りは CWE-602「Client-Side Enforcement of Server-Side Security」 として挙げられています。サーバーで確かめるべきことをブラウザ側に任せると、ブラウザ側の動きを変えるだけで確認をすり抜けられる、という弱点です。
英語圏の Q&A サイト Stack Overflow のこの質問(閲覧 62,850 回)の回答も、CSS や HTML、JavaScript に書いたパスワードの確認はすべてブラウザにダウンロードされるので役に立たず、確認はサーバー側でする必要がある、としています。
パスワードをかける 4 つの方法
| 方法 | パスワードを確かめる場所 | パスワードなしで中身を読めるか | 独自ドメイン | 必要な準備 |
|---|---|---|---|---|
| JavaScript で入力欄を出す | 見る人のブラウザ | 読める。ソースにパスワードと本文がある | どこでも使える | スクリプトを貼る |
| StatiCrypt などで暗号化する | ブラウザ(暗号を解く) | 読めない。ただし暗号化したファイルは誰でもダウンロードでき、手元で何度でもパスワードを試せる | どこでも使える | ファイルを暗号化してから置く。直すたびに暗号化し直す |
| Basic 認証(レンタルサーバー) | Web サーバー | 読めない | 使える | .htaccess と .htpasswd を置く |
| 公開サービスのパスワード機能 | サービスのサーバー | 読めない | サービスによる(次の表) | 管理画面で設定する |
Basic 認証(レンタルサーバー)
Apache で動くレンタルサーバーなら、Basic 認証が昔からの定番です。ページを開くと、ブラウザがユーザー名とパスワードをたずねる小さな画面を出し、正しいときだけサーバーがページを送ります。Apache の認証のドキュメント にある手順は次の 2 つです。
htpasswdのコマンドでパスワードファイルを作ります(例:htpasswd -c /home/example/.htpasswd tanaka)。ドキュメントは、このファイルをウェブからアクセスできる場所に置かないよう求めています。- パスワードをかけたいフォルダに
.htaccessを置き、設定内容を書きます。
AuthType Basic
AuthName "Members only"
AuthUserFile /home/example/.htpasswd
Require valid-user
.htaccess に認証の設定を書けるかどうかは、サーバー側の設定(AllowOverride AuthConfig)しだいです。パスワードはフォルダごとにかかるため、1 ページだけにかけるなら、そのページ用のフォルダを作ります。
暗号化ツール(StatiCrypt)
StatiCrypt は、HTML のファイルを AES-256 で暗号化して、パスワードの入力画面が付いた HTML にする無料のツールです。暗号を解くのはブラウザの JavaScript なので、どこに置いても使えます。
ただし、暗号化したファイルはだれでもダウンロードできます。README も、総当たりや辞書攻撃が手元で速く試せてしまうため、長く推測されにくいパスワードを使うよう勧めています。ページを直すたびに、暗号化し直してアップロードします。
公開サービスのパスワード機能
ページを置いたサービスのサーバーが、パスワードを確かめます。Basic 認証と同じくサーバー側で確かめる仕組みで、サーバーのファイルを編集したり、コマンドを打ったりする必要はありません。
使えるサービスは、次の節の表にまとめました。
サービスごとのパスワード機能
このあとの表は、2026 年 10 月 13 日に、各社のヘルプと料金ページで確かめた内容です。
| サービス | 公開したページにパスワード | 使えるプラン | 独自ドメイン | 見る人に必要なもの |
|---|---|---|---|---|
| GitHub Pages | かけられない | 見る人を絞るには GitHub Enterprise Cloud | 関係なし | リポジトリの読み取りアクセス |
| Netlify | かけられる(サイト全体か、フォルダごと) | Pro(月 $20) | 使える | パスワード |
| Cloudflare Pages | パスワードはない。Access でメールに届くコードを使う | Access の Free(50 ユーザーまで) | ドメインごとに Access の設定が要る | 許可されたメールアドレス |
| Google サイト | かけられない | 無料 | 使える | 名前かメールアドレスで追加してもらう |
| Wix | かけられる(ページごと、サイト全体) | ヘルプに記載なし | プレミアムプランから | パスワード |
| STUDIO | かけられる(サイト全体だけ) | Personal 以上(年払いで月 1,190 円) | 使える | パスワード。ブラウザを閉じると入力し直し |
| Notion | かけられない | 関係なし | 関係なし | Notion のアカウント(招待) |
| Tiiny Host | かけられる | Solo(月 $18、年払いなら月 $13) | Solo 以上 | パスワード |
| Convika | かけられる(ページごと) | Pro(月 ¥1,800、年 ¥16,200) | Free で 1 つ、Pro は無制限 | パスワード |
- GitHub Pages: GitHub のドキュメント によると、GitHub Pages のサイトはリポジトリがプライベートでもインターネット上で一般公開されます。プライベートで公開するには organization が GitHub Enterprise Cloud を使う必要があり、開けるのはリポジトリの読み取りアクセスを持つ人だけです(出典: サイトの可視性の変更)。
- Netlify: Netlify のドキュメント(英語)によると、サイト全体へのパスワードは Pro で使え、クレジット制の Free と Personal では使えません。フォルダごとにかけるなら
_headersのファイルにBasic-Authのルールを書く方法もあり、Basic 認証のドキュメント(英語)によると、これも Pro と Enterprise のプランで使えます。Pro は 料金ページ で月 $20 です。 - Cloudflare Pages: Pages に付いているアクセス制限はプレビュー用のデプロイだけが対象で、公開中のサイトは守れません(出典: Cloudflare のドキュメント、英語)。公開中のサイトで見る人を絞るなら Cloudflare Access を使います。Access のポリシーで許可したメールアドレスにだけ、ログイン用のコードが届きます(出典: ワンタイム PIN)。Access は 50 ユーザーまで無料です。
- Google サイト: Google のヘルプ によると、[公開済みサイト] の横で [制限付き] を選ぶと、名前かメールアドレスで追加したユーザーにだけサイトを共有できます。パスワードの機能はありません。
- Wix: 英語版の Wix のヘルプ によると、ページごとにパスワードをかけられ、サイト全体を 1 つのパスワードで守ることもできます。どのプランで使えるかは書かれていません。Wix には HTML のファイルをそのままアップロードする方法がなく、独自ドメインはプレミアムプランからです(くわしいページ: Wix の無料プランで独自ドメインは使える?)。
- STUDIO: STUDIO のヘルプ によると、パスワード保護の対象は Personal プラン以上(旧プランでは Starter プラン以上)で、ページ単位では設定できません。パスワードを入力したあとにブラウザを閉じると、もう一度入力が必要です。Personal の料金は STUDIO の無料プランで独自ドメインは使える? で 2026 年 10 月 12 日に確かめたものです。
- Notion: Notion のヘルプ によると、ページをパスワードで保護することは現時点ではできません。相手が Notion のアカウントを持っていれば、招待して共有できます。
- Tiiny Host: 料金ページのコードでは、パスワードの機能は Solo(月 $18、年払いなら年 $156)から含まれています。パスワード機能のページ(英語)では、ワンクリックでオンにできると説明しています。
Convika で HTML ページにパスワードをかける手順
Convika の無料アカウントを作る
app.convika.com で登録します。カード登録はいりません。
HTML のファイルをアップロードする
管理画面で「HTMLファイルをアップロードする」を押し、「ファイルから」のタブにファイルをドロップします。ChatGPT や Claude のコードをコピーしたときは、「コードから」のタブに貼り付けます。扱えるのは .html と .htm のファイルで、2 MB までです。
「プレビューをつくる」を押すと、非公開のプレビューができます。この時点では、まだだれにも公開されていません。
公開するときにパスワードを設定する
「ページを公開する」を押し、「このページを開ける人」で「パスワードを知っている人だけ」を選んで、パスワードを入れます。半角の英数字・記号・スペースで 8〜128 文字です。
Pro を申し込んで公開する
「次へ」を押すと、はじめての公開では Pro のお申し込み画面が開きます。パスワードは Pro の機能なので、「1日間無料で申し込む」(カードを登録して始める Pro のトライアルで、最初の 1 日間のあとは、解約しなければ月 ¥1,800)から申し込みます。カードの登録か支払いが済むと、yourpage.convika.page のようなアドレスで、パスワード付きのページが公開されます。
すでに Pro なら、「次へ」の代わりに出る「パスワードをかけて公開する」を押します。Pro になったあとは、「ページの設定」の「閲覧パスワード」で、公開の前でもあとでもパスワードを設定・変更できます。
docs.example.com のような自分のサブドメインで出すなら、ページの画面の「独自ドメインをつなぐ」からつなぎます。Free で 1 つ、Pro では数の上限がありません。
URL とパスワードを別々に伝える
URL はメールで、パスワードはチャットや電話で、というように別々に伝えます。URL だけを知った人には、パスワードの入力画面しか見えません。
社内の人に Teams で見せるときの手順は、ガイド Teams に投稿した HTML ファイルを、ページとして見てもらう方法 にまとめています。
見る人の画面
2026 年 10 月 13 日に、この方法で試しに 5 つのページにパスワードをかけ、ログインしていないブラウザと curl で開いて確かめました。
- 自分のアドレスに、入力画面が出る。「このページはパスワードで保護されています」という見出しと入力欄、「ページを表示する」のボタンが並ぶ画面です。画面の言語は、見る人のブラウザの設定に合わせます。日本語のブラウザなら日本語で、Convika が対応していない言語なら英語で表示されます。
- 正しいパスワードが入るまで、ページは届かない。 入力画面の応答には、ページのタイトルも本文も入っていませんでした。Convika は、パスワードをサーバーで確かめてからページを送ります。公開前にパスワードを設定したページも、公開した直後の最初の訪問から入力画面になりました。
- 間違えたときは、メッセージが出る。「パスワードが違います。確認して、もう一度入力してください。」と表示されます。同じ IP アドレスから 15 分の区切りの中で 10 回間違えると、しばらく待つよう表示されます。
- 一度入力すれば、7 日間は入力なしで開ける。 再読み込みしても、入力画面は出ませんでした。
- パスワードを変えると、全員が入力し直す。「パスワードを変更する」のあとは、前のパスワードで開いていた人にも入力画面が出ます。「パスワードを外す」と、URL を知っている人ならだれでも開けるページに戻ります。
- 検索エンジンに見えるのは入力画面だけ。 入力画面は検索結果に載せないよう指示していて、ページはサイトマップにも載りません。
- 管理画面のプレビューには、パスワードがかからない。 自分で確かめるためのものなので、相手には公開したアドレスを送ります。
- 公開し直しても、パスワードはそのまま残る。 パスワードを設定したあとに新しいバージョンを公開しても、入力画面が出ました。
Pro を続けなかったときは。 パスワードはかかったままで、ページがひとりでに公開されることはありません。Free でもパスワードを外すことはでき、変更には Pro が必要です。
フォームとアクセス数も、パスワードの内側で
- フォームは、パスワードを入れた人だけが送れる。 サイト詳細の「フォームを追加する」でページにフォームを付ければ、届いた内容を管理画面で見られます。Pro なら、毎月の件数に上限はありません。2026 年 10 月 13 日の確認では、パスワードを入れていないブラウザから送った内容は 401 で断られて保存されず、パスワードを入れた人が送った内容は管理画面に届きました。フォームの使い方は、ガイド AI で作ったページの問い合わせフォームに、送信内容が届くようにする方法 にあります。
- アクセス数は、パスワードを通ったあとから数える。 入力画面だけを見て帰った人は数えません。入力画面で止まったブラウザが 1 つ、パスワードを入れて開いた人が 1 人という条件で確かめると、管理画面のページビューは 1、訪問者は 1 でした。数字の見方は、ガイド AI で作ったページのアクセス数と流入元を見る方法 にあります。
「パスワード付きリンク」との違い
「パスワード付きリンク」をうたうツールの多くは、ページではなく URL を隠します。
たとえば Link Lock の README によると、パスワードが正しければ元の URL を取り出して、そこへ移動させます。移動先のページそのものにはパスワードがかかっていないので、元の URL を知った人はパスワードなしで開けます。
ページそのものを守るなら、ページを置いたサーバー側でパスワードを確かめる方法を選びます。
目的別の選び方
- Apache のレンタルサーバーをすでに借りている: Basic 認証。追加の費用なしで、サーバーがパスワードを確かめます。
- 1 つのファイルを数人に見せるだけ: StatiCrypt(無料)。暗号化したファイルは手元で何度でも試せるため、長く推測されにくいパスワードにします。
- ホームページ全体を Wix や STUDIO で作っている: それぞれのパスワード機能。STUDIO はサイト全体にしかかけられません。
- 見る人ごとにログインさせたい、だれが開いたかを知りたい: Cloudflare Access のように、メールアドレスで本人を確かめる仕組み。Convika のパスワードはページごとに 1 つを共有する方式で、わかるのは訪問の数で、だれが見たかではありません。
- 検索に出したくないだけで、URL を知っている人には見せてよい: パスワードはいりません。どのサービスで公開したページでも、HTML に
noindexの meta タグを 1 行入れれば検索に出さないよう伝えられます。Convika なら HTML を書き換えなくても、公開するときの「このページを開ける人」で「限定公開」(Pro)を選んで公開するだけで、検索結果に出さないよう伝えられ、サイトマップにも Convika のギャラリーにも載りません。無料の「一般公開」のページは、検索結果やギャラリーに出ることがあります。URL を受け取った人はパスワードやアカウントなしで開けます。公開したあとも「ページの設定」で切り替えられます。詳しくはHTML のページを限定公開するをご覧ください。 - ChatGPT や Claude で作った HTML を、自分のドメインでパスワード付きで見せたい。フォームとアクセス数もほしい: Convika。Pro(月 ¥1,800)です。はじめて公開するときに開く Pro のお申し込み画面で申し込めます。
よくある質問
HTML だけでパスワードをかけられますか?
HTML だけではかけられません。サーバーでパスワードを確かめるか、StatiCrypt のようなツールでファイルを暗号化します。サーバーで確かめるには、レンタルサーバーの Basic 認証か、パスワード機能のある公開サービスを使います。Convika なら、HTML をアップロードし、公開するときに「パスワードを知っている人だけ」を選んでパスワードを入れ、Pro を申し込んで公開するだけです(パスワードは Pro の機能です)。
input type="password" でページを守れますか?
守れません。<input type="password"> は、フォームの入力欄に打った文字を隠すだけのものです。ページを守るには、サーバーでパスワードを確かめるか、ページを暗号化します。
JavaScript のパスワードは安全ですか?
安全ではありません。パスワードもページの本文も、ブラウザが受け取るファイルの中にあります。「ページのソースを表示」で読めますし、JavaScript をオフにすれば入力欄も出ません。パスワードは、サーバーで確かめる方法でかけます。
Google サイトにパスワードをかけられますか?
Google サイトには、パスワードの機能がありません。Google のヘルプによると、公開の設定で [制限付き] を選び、見せたい人を名前かメールアドレスで追加すると、その人たちにだけ共有できます。メールアドレスを知らない相手にも見せるなら、パスワードをかけられる公開サービスを使います。Google サイトの無料プランでできることは Google サイトは無料で使える? にまとめています。
Wix で特定のページにパスワードをかけられますか?
英語版の Wix のヘルプによると、Wix ではページごとにパスワードを設定でき、サイト全体を 1 つのパスワードで守ることもできます。どのプランで使えるかは、ヘルプに書かれていません。ChatGPT や Claude で作った HTML のファイルは Wix にそのままアップロードできないため、HTML のまま見せるなら、パスワード機能のある公開サービスに置きます。
パスワード付きリンクとは何ですか?
URL を知っているだけでは開けず、パスワードを入れると開けるリンクのことです。ただ、ツールによって守っているものが違います。Link Lock のように URL を隠すだけのものは、元の URL を知られるとパスワードなしで開けます。Convika のパスワードは、ページを置いたアドレスそのものにかかります。
Notion のページにパスワードをかけられますか?
かけられません。Notion のヘルプによると、ページをパスワードで保護することは現時点ではできません。相手が Notion のアカウントを持っていれば、招待して共有できます。
GitHub Pages にパスワードをかけられますか?
かけられません。GitHub のドキュメントによると、リポジトリがプライベートでも、GitHub Pages のサイトはインターネット上で一般公開されます。見る人を絞るには GitHub Enterprise Cloud が必要で、開けるのはリポジトリの読み取りアクセスを持つ人だけです。
Netlify のパスワード保護は無料で使えますか?
使えません。Netlify のドキュメントによると、サイト全体にかけるパスワードは Pro(月 $20)からで、Free では使えません。ログインせずに Netlify Drop にドラッグしたサイトにかかる仮のパスワードは別のもので、Netlify のクイックスタート によると、ログインしてサイトを引き取るまでのものです。
無料でパスワード付きのページを作れますか?
作れます。StatiCrypt は無料で、暗号化したファイルはどこにでも置けます。すでにレンタルサーバーを借りているなら、Basic 認証も追加の費用なしで使えます。Convika のパスワードは Pro(月 ¥1,800)の機能で、Free では使えません。
次のステップ
AI で作ったページのアクセス数と流入元を見る方法
ChatGPT や Claude で作ったページに、何人がどこから来たのか。Google アナリティクス、Cloudflare、Clarity、Convika を比べて、アクセス数と流入元を見るまでの手順を説明します。
関連記事
- AI で作ったホームページを、公開前にお客さんに確認してもらうChatGPT や Claude で作ったページを、一般に公開する前にお客さんや上司に見てもらう方法です。その場での見せ方、確認用の URL の作り方、直したあとの差し替え、見せる相手の絞り方、意見のもらい方、OK が出たあとの公開と独自ドメインまで。
- Teams に投稿した HTML ファイルを、ページとして見てもらう方法Teams に投稿した HTML ファイルは、ページではなく SharePoint か OneDrive のファイルとして届きます。このガイドは、表示されない・動かないときに Microsoft の資料でわかることと、URL にして社内の人に見てもらう手順を説明します。
- Claude で作った HTML を、Claude のアカウントがない人にも見せる方法Claude の共有リンクは、開く相手にも Claude のアカウントが必要です。HTML を取り出してアップロードすれば、登録なしでだれでも開けるリンクができます。このガイドは、スマホのアプリや Claude Code で作ったときの取り出し方も説明します。
- ChatGPT で作った HTML を、無料で公開する方法ChatGPT で作った HTML も、HTML ファイル 1 つも、無料で公開できます。このガイドは Netlify Drop、GitHub Pages、Cloudflare Pages、Tiiny Host、Convika の 5 つを、独自ドメイン、フォーム、アクセス数で比べています。
- Claude で作ったページを、自分のドメインで公開する方法Claude の共有リンクは開く人にもアカウントが必要です。コードを Convika に貼り付ければ、だれでも開ける URL で公開できます。無料プランでも登録を保存するフォーム、アクセス数、www など自分のドメイン 1 つを使えます。
- AI で作ったページの問い合わせフォームに、送信内容が届くようにする方法ChatGPT や Claude が書いたフォームは、送信しても内容がどこにも届きません。メールで受け取る方法と、管理画面に保存して CSV で見る方法を比べて、手順を説明します。