こんにちは、「ドラえもん型の経理」のゆきです。

「ホームページを作ったり維持したりするのにお金がかかる」
「内容を更新するのにも手間がかかりそうで、なかなか一歩を踏み出せない」
と感じたことはありませんか？

本マニュアルは、「Googleスプレッドシートに文字を打つだけ」で、Webサイトの文章・見出し・料金・お知らせ・FAQ・プロフィール・テーマカラー・タブのアイコンまでが自動で書き換わるホームページの構築マニュアルです。

世界中で使われているWeb公開サービス「Cloudflare（クラウドフレア）」と、Googleの無料標準ツールを組み合わせることで、導入後の月額サーバー代・ツール維持費は「完全0円」で運用できます。

👉 本マニュアルで実際に完成するサンプルサイトはこちら

💡 ご購入前にお読みください
① プログラムコードの提供について
本マニュアルの導入・設定手順および、ツールの土台となる「スプレッドシートテンプレート」と「Webサイトの画面データ（HTMLファイル）」はすべて無料で公開していますが、スプレッドシートとWebサイトを完全自動連動させるための「プログラムコード」は有料エリア（ワンコイン）での提供となります。
② 自社専用のカスタマイズ・設定代行について
「自分で設定する時間がないので、初期構築を丸ごと代行してほしい」「自社のデザインに合わせて専用レイアウトを追加したい、自社専用URL（ドメイン）で運用したい」といった個別のご相談やサポートをご希望の方は、以下のフォームよりお気軽にお問い合わせください。
➔ 個別サポート・設定代行のご相談フォームはこちら
あらかじめ上記2点をご了承の上、構築を進めてください。

🎁 このツールで実現できること

「スプレッドシートに文字を打つだけ」でWebサイトが更新される

難しいプログラミングや、Web制作の専門知識は一切不要です。
普段エクセルやスプレッドシートを使うのと同じように、「お知らせ」「料金プラン」「よくある質問」などのシートに文字を入力するだけで、Webサイト側にも自動で反映されます。

見出し・テーマカラー・アイコンまでスプレッドシートから変更可能

単なる文章の更新にとどまりません。

テーマカラーの一括変更： お好きな「色の記号（カラーコード例：10b981など）」を入力するだけで、ボタンやアクセントカラーが切り替わります。（※「カラーコード」と検索してお好きな色のコードを入力するだけでOKです）
タブのアイコンの変更： お好きな絵文字（⚡や🏢など）を入力するだけで、ブラウザのタブアイコンが変わります。
セクションの並び替え・表示切り替え： スプレッドシートのタブを左右にドラッグして並び替えるだけでサイト上の表示順が変わり、各シートのA1セルを「非表示」にするだけでサイト上からも一時的に非表示になります。

月額のサーバー代・ツール維持費が「完全0円」

一般的なWebサイト制作で発生する「月額1,000円〜数万円のレンタルサーバー代」や「ホームページ作成ツールの月額費用」が一切かかりません。
Cloudflareの無料枠を活用するため、固定費ゼロで運用し続けられます。

プログラミング不要。コピペと4つのステップで完成

「難しそう…」と思うかもしれませんが、ご安心ください。
マニュアルの手順通りに進めれば、プログラミングの知識がない方でも1時間かからずにあなた専用のホームページが完成します。

💡 このツールの具体的な業務改善事例（Before ➔ After）

このツールを導入することで、具体的にどのような業務改善が生まれるのか、実務現場での活用事例を別の記事で詳しく解説しています。導入後のイメージを掴みたい方は、まずこちらの記事をご覧ください。

👉 スプレッドシート連動ホームページの具体的な業務改善事例はこちら

🛠️ 事前準備と無料テンプレートの入手

本ツールを構築するにあたって、事前にご用意いただくものは以下の2つのみです。

Googleアカウント（Gmail）
- スプレッドシートの作成や、自動連携プログラムを動かすために使用します。普段お使いのアカウントでOKです。
Cloudflareアカウント（無料）
- Webサイトの画面データをインターネット上に無料公開するために使用します。（※メールアドレスのみで登録できます。アカウントの作成手順はステップ3で解説します）

🎁 【無料配布】スプレッドシートテンプレート＆画面データ（HTMLファイル）

まずは、ツールの土台となるテンプレートをご自身の環境に保存してください。

👉 【無料】スプレッドシート連動HP_テンプレートはこちら
（※リンクを開き、「コピーを作成」をクリックしてご自身のGoogleドライブに保存してください）

👉 【無料】Webサイト画面データ（index.html）のダウンロードはこちら
（※リンクを開き、画面上部の「ダウンロード（下矢印アイコン）」または、左上メニューの「ファイル」➔「ダウンロード」をクリックしてパソコンに保存してください）

💡 パソコン内でのフォルダ準備
ダウンロードした index.html を、パソコン上に新しく作成した site フォルダ の中に保存してください。
（※プロフィール写真は必須ではありません。写真を使わない場合は index.html のみでOKです。写真はサイト公開後でも追加・変更できます）
site/ （Cloudflareにアップロードする専用フォルダ） ├── index.html （ダウンロードした画面データ：必須） └── profile.jpg （※プロフィール写真を使う場合のみ同じフォルダに入れる。png等も可・任意）
※写真を入れる場合のファイル名は、必ず半角英数字（例：profile.jpg、icon.png など） にしてください。
※Cloudflareには、この site フォルダをフォルダごとドラッグ＆ドロップ します。

📖 導入手順・設定ステップ（4つのステップ）

💡 もし設定で迷ったり、エラーが出た時は…
本マニュアルは初心者の方でも迷わないようステップバイステップで解説していますが、もし「画面のレイアウトが変わっていてボタンが見つからない」「赤いエラーメッセージが出た」といった場合は、GeminiやChatGPT、ClaudeなどのAIにそのまま聞いてみることをおすすめします。
画面のスクリーンショットやエラー文をコピーして「こんなエラーが出たのですが、どうすればいいですか？」と質問すれば、AIがすぐに解決策を教えてくれます。ぜひAIを味方につけて構築を進めてみてください。

ステップ 1：スプレッドシートの準備

コピーしたテンプレートを開きます。
シート内にはすでにダミーデータが入っていますので、「基本設定」「お知らせ」「よくある課題」「プロフィール」「料金プラン」「よくある質問」の各シートに、ご自身のサービス内容やテキストを入力してください。

テーマカラー：お好みのカラーコード（先頭の#は省略可）を入力します（※「カラーコード」と検索してお好きな色のコードを入力するだけでOKです。空欄の場合は標準カラーのエメラルドグリーン #059669 になります）。
アイコン：ブラウザのタブに表示させたいお好きな絵文字を1文字入力します（空欄でもOKです）。
バッジ・サブテキスト・注記：トップのメインコピー周りに補足を入れたい場合に入力します（空欄なら非表示）。
ボタン文字・お問い合わせURL：ご自身のGoogleフォームやLINE公式アカウントのURLを入力します（※空欄にすると、トップのボタンやお問い合せセクションが自動で非表示になります）。
住所：所在地を入力すると、Webサイト上にGoogleマップが自動埋め込みされます（空欄ならマップセクション自体が非表示）。
SNSリンク：XやInstagram、LINE、note等のURLを入力すると、Webサイトの一番下（最下部）にアイコンが自動表示されます（空欄のSNSは非表示）。
プロフィール画像：写真を載せたい場合は、site フォルダに入れた画像ファイル名（例：icon.jpg や profile.png など）または「Googleドライブ等の画像URL」を入力します（空欄なら写真枠なしで綺麗に表示されます）。
表示・非表示の切り替え：各シートのA1セルを「非表示」にすると、そのセクション（料金プランやお知らせなど）がサイト上から一時的に消えます。

💡 右側のスペースは「下書き・メモ帳」として自由に使えます
表の右側の空いている列はプログラムに無視される仕様になっています。
「来月公開したいお知らせの下書き」や「過去の文面のバックアップ」「一時的に外した料金プラン」などを自由にメモしておき、公開したくなった時に表の中へ貼り付ける、といった柔軟な運用が可能です。

ステップ 2：自動連携プログラム（Apps Script）の作成とデプロイ

スプレッドシートのデータをWebサイトへ届けるための自動連携プログラムを設定します。

ステップ1で準備したスプレッドシートのメニューバーから「拡張機能」➔「Apps Script」をクリックします。
画面左上の「無題のプロジェクト」をクリックし、任意の名前（例：ホームページ更新システム）に変更します。
最初からエディタ内に入っている myFunction の初期コードをすべて消去し、有料エリアに掲載されている「プログラムコード」をそのまま貼り付けます。
画面上部の 「プロジェクトを保存（ディスクのアイコン / 「実行」ボタンの左隣）」 をクリックして保存します。
画面右上の青い 「デプロイ」 ➔ 「新しいデプロイ」 をクリックします。
種類の選択（歯車アイコン）から 「ウェブアプリ」 を選択します。
設定項目を以下のように指定します：
- 説明： 空欄のままでOK（何かメモを入れたい場合は任意で入力）
- 次のユーザーとして実行： 「自分」
- アクセスできるユーザー： 「全員」（※Webサイトを誰でも閲覧・表示できるようにするため）
右下の 「デプロイ」 ボタンをクリックします。
初回実行時は「アクセスを承認」という画面が出ますので、青い「権限を確認」ボタンをクリックしてください。
⚠️ 続く警告画面（「このアプリは Google で確認されていません」または「Google hasn't verified this app」）が表示された場合の進め方：
- 画面の左下にある 「詳細」 （英語表記の場合は 「Advanced」）をクリックします。
- クリックすると同じ画面のすぐ下に詳細メッセージが展開されます。 その中にある 「＜プロジェクト名＞（安全ではないページ）に移動」 （英語表記の場合は 「Go to ＜プロジェクト名＞ (unsafe)」）をクリックします。
- 続いて、アクセス権限の選択画面が表示されます。
  - ⚠️ 【最重要】 画面に表示されている 「Select all」（または 「すべて選択」）のチェックボックスに 必ずチェックを入れてください。
  - すべてのチェックボックスにチェックが入っていることを確認し、最下部の 「Continue」（または 「続行」）をクリックします。

💡 もし赤い三角の「This app is blocked（このアプリはブロックされました）」と表示された場合
お使いのGoogleアカウントのセキュリティ制限により、一時的に承認がブロックされる場合があります。その場合は以下の設定を行うことで安全に解除できます。
① 左メニューにある「歯車アイコン（プロジェクトの設定）」をクリックします。
② 「『appsscript.json』マニフェストファイルをエディタで表示する」にチェックを入れます。
③ 左メニューの「＜＞エディタ」に戻り、左側に追加された appsscript.json をクリックして開きます。
④ 中身をすべて消去し、以下の設定コードを貼り付けて、画面上部のツールバーにある「プロジェクトを保存（ディスクのアイコン / 「実行」ボタンの左隣）」をクリックして保存します：

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/spreadsheets.currentonly"
  ]
}

⑤ 再度、画面右上の「デプロイ」➔「新しいデプロイ」を実行すれば、ブロック画面が出ずに正常に承認へ進むことができます。

デプロイが完了すると画面に 「ウェブアプリのURL（https://script.google.com/macros/s/.../exec）」 が表示されます。このURLをコピー（またはメモ）しておきます（※最後のステップ4で使用します）。

ステップ 3：Cloudflare Pagesにサイトを公開する

準備した画面データ（index.html が入った site フォルダ）をCloudflareにアップロードして、インターネット上に公開します。

Cloudflare にアクセスし、アカウントをお持ちでない場合は「サインアップ（無料登録）」を行います（メールアドレスとパスワードのみで登録できます）。
ログイン後、左メニューの「ビルド（Build）」➔「コンピュート（Compute）」➔「Workers & Pages」を開きます。
- ※もしログイン後の画面が英語になっている場合は、画面右上の「人型アイコン」➔「プロフィール（Profile）」➔「言語（Language）」から「日本語」に切り替えることができます。（切り替え後は、左上の「オレンジの雲アイコン」または「← マイプロフィール」を押すと元のホーム画面に戻れます）
画面右上の青い「アプリケーションを作成する（Create application）」をクリックします。
画面下部にある 「Pages を導入しようとお考えですか？始める」 をクリックします。
「始めましょう」という画面が表示されたら、下側の 「ファイルをドラッグアンドドロップする」 の右にある 「始める」 ボタンをクリックします。
プロジェクト名（半角英数字）を入力します：
- 入力欄のすぐ下に 「プロジェクトは〇〇.pages.dev にデプロイされます」 と実際に発行されるURLがリアルタイムで表示されます（※すでに世界中で使われている名前の場合は、自動で末尾に -5or などの文字が付きます。好みのURLになるよう調整してみてください）。
- 名前が決まったら、「プロジェクトの作成」 ボタンをクリックします。
表示されたアップロードエリアに、先ほど準備した site フォルダをフォルダごとドラッグ＆ドロップ します。
画面右下の 「サイトをデプロイ」 ボタンをクリックします。
数秒で「成功しました！」という完了画面が表示されます。

💡 プロフィール写真の追加・変更について
写真を使わない場合：
site フォルダの中に index.html だけを入れた状態で、そのまま site フォルダごとアップロードすればOKです。スプレッドシートの画像URL欄を空欄にしておけば、Webサイト上の写真枠自体が自動で消えてスッキリ表示されます。 後から写真を追加したくなった場合：
① site フォルダに写真を入れて再度Cloudflareにフォルダをアップロード（再デプロイ）するか、
② Googleドライブ等に写真を保存してその共有リンクをスプレッドシートの「画像URL」欄に貼るだけで反映されます（この方法ならCloudflareの再アップロードすら不要です）。

ステップ 4：初期設定（URLの紐付けと公開URLの発行）

いよいよ最後の仕上げです。画面に表示された公開URLをクリックして、Webサイトとスプレッドシートを接続します。

Cloudflareのデプロイ完了画面に表示された 「プロジェクトは〇〇.pages.dev でプレビューできます」のURLリンクをクリック してサイトを開きます。
- ※もしURLを開いた直後に「Connection timed out（Error code 522）」や「Host Error」が表示された場合は、まだサイトの公開準備中（反映中）です。1〜2分ほど待ってからページを再読み込み（更新）すると正常に表示されます。
画面中央に「システムの初期設定」というポップアップが表示されます。
入力欄に、ステップ2でコピーした「ウェブアプリのURL」を貼り付けて「設定を保存して公開URLを発行」をクリックします。
画面に「ホームページが完成しました！」と表示され、あなた専用の 「公開用URL」 が発行されます。
「📋 公開用URLをコピーする」 ボタンをクリックし、SNSのプロフィールや名刺、チラシ等に貼ってご活用ください。
- ※「サイトを表示する」をクリックすると、あなたのホームページが表示されます。
- ※公開用URLをもう一度コピーしたくなった場合は、画面右下の 「🔗 公開用URLをコピー」 ボタンからいつでもワンクリックで再コピーできます。

お疲れ様でした！
これで、スプレッドシートの文字を打ち替えるだけで、いつでも自由に内容が変わるホームページの完成です。

💡 補足：発行された公開URLを「短くスッキリさせたい」「独自ドメインで運用したい」場合
本マニュアルでは「コードを1文字も触らず、月額維持費0円」で動かすため、発行される公開URLが長い文字列になります。
もし「この長いURLをなくして、https://company.com のような自社専用の短くて綺麗なURL（独自ドメイン）で運用したい」という場合は、ムームードメインやお名前.comなどでお好みのドメインを取得（※ドメイン代は年間数百円〜数千円程度かかります）し、Cloudflareの「カスタムドメイン」設定で紐付けることで、完全に自社専用の短いURLとして運用することも可能です。
詳しい設定手順については、GeminiやChatGPT、ClaudeなどのAIに「Cloudflare Pagesにムームードメイン（またはお名前.com）で取得した独自ドメインを設定する方法を教えて」と質問すると、最新の管理画面に沿った手順をわかりやすく教えてくれます。
（※もし「自分でやるのは不安」「独自ドメインの取得から設定まで丸ごと代行してほしい」という場合は、個別サポート・設定代行フォームよりお気軽にご相談ください）

🛠️ プログラムコード