1. はじめに：この記事でできること
Webサイト構築では、フレームワーク選定や環境構築に時間を使いすぎて、「ユーザーにとって本当に見やすいか」の検証が後回しになるケースが少なくありません。
この記事では、Googleアカウント連携などを活用したスムーズな環境構築により、以下のステップを最短距離で実現します。
- 最短10分でWebページを公開できる
- HTML（Webの基本コード）だけで「情報の見やすさ」を検証できる
- 後から高度な技術（ReactやNext.jsなど）へ拡張できる土台を作れる
2. 設計思想：Visual-First Schema
Visual-First Schemaとは、「まず画面で価値を検証し、その後にシステムを作る」設計アプローチです。
本格的なプログラムを組み上げる前に、まずはシンプルな表示だけで価値を検証する。これが本手法における「Phase 0（フェーズゼロ）」です。表示だけで価値が伝わる構造を先に作ることで、後から機能を付け加える際の手戻りが劇的に少なくなります。
3. ⚠ よくあるつまずき（先にチェック！）
作業中に迷ったら、ここに戻ってきてください。
- リポジトリ（ファイルの保管庫）が表示されない → 下部の「+ Add GitHub account」で再許可が必要
- ビルド（Web公開のための準備）の設定ミス → Framework presetは必ず 「None」 に設定
- URLが開かない → 初回のデプロイ（Web公開の実行）完了まで数分待機が必要
4. 実装手順：10分公開ガイド
① GitHubにファイルを置く
-
リポジトリ（保管庫）作成: GitHubで「New」を押し、名前（例：
test-proto等）を入力。Publicを選択し、他のオプションはすべてOffで作成。 -
ファイル追加: 画面中央にある「uploading an existing file」から、
index.htmlをドラッグ＆ドロップして「Commit changes」をクリック。
【素材がない方向け】最小のテスト用コード
メモ帳等に以下を貼り付け、index.html という名前で保存して使ってください。
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>Test</title></head>
<body><h1>テスト公開成功！</h1><p>世界中に公開されました。</p></body>
</html>
② Cloudflareで公開する
Cloudflareログイン後、左メニューの [Compute] > [Workers & Pages] を選択。基本は [Create] > [Connect to Git] のルートで進めば大丈夫です。
- GitHubと接続: 「Continue with GitHub」を選択します。
-
リポジトリの追加許可: 一番下の「+ Add GitHub account」を押し、さきほど作成したリポジトリ（例：
test-proto等）を選択して「Save」します。- 認証時の注意点: 8桁のコード入力欄が出ない場合は、数回リロードするか時間を置いて再試行してください。
-
ビルド設定（成功の鍵）:
（※ここは、難しいプログラムを動かさず、そのままHTMLを表示するための設定です）-
Framework preset:
None -
Build output directory:
/(デフォルト値のままでOK。問題があればここを見直します)
-
Framework preset:
- デプロイ（公開実行）: 「Save and Deploy」を押し、数分待機します。
URLについて: 発行されるURLは xxx.workers.dev（または xxx.pages.dev）になります。現在は静的なHTMLも「超高速なプログラム（Worker）」として配信する設計が主流のため、将来の拡張もスムーズです。
5. 開発中のテストページ（Aletheia）
この設計思想を具現化した、「人と場所と活動をつなぐ」検索基盤のプロトタイプです。
https://aletheia-proto.tshizen2506.workers.dev/
※現在はUIのプロトタイプです。閲覧・デザインの確認は可能ですが、予約・決済等の機能は未実装です。