UPDATE DEMO

HP更新・案内ページ作成アプリの見本

作りたいページの種類を選んで内容を入力すると、
掲載イメージがリアルタイムで確認できます。

このページは「更新アプリの操作イメージ」です

地域活動のホームページを作ったあと、団体の方が自分たちでお知らせ・イベント・活動報告を更新するための見本です。
保存はされませんので、自由に入力して動きを試せます。

  • これは本物の管理画面ではなく見本です。
  • 入力内容や画像は保存されません。
  • 作りたいページを選ぶと、入力欄とプレビューが切り替わります。
  • 右側のプレビューで、ホームページに掲載されるイメージを確認できます。
このデモでは、入力内容はブラウザ上のプレビューのみに使用されます。
保存・送信は一切されません。ページを再読み込みするとリセットされます。

このアプリの設計について

  • HTMLを自由に編集する方式ではなく、決まった入力欄だけを埋める方式です。書き漏れを減らせます。
  • 空欄にした項目はプレビューに自動で表示されません。不完全なまま公開されることを防ぎます。
  • プレビューで見た目を確認してから「公開」に切り替えられます。
  • 初期状態は「下書き」です。意図せず公開してしまうミスを防ぎます。
  • デザイン（色・フォント・レイアウト）はテンプレートで固定されています。表示崩れが起きません。
  • 自由に何でも配置するページビルダーではなく、必要な項目を上限付きで増減できるテンプレート方式です。入力漏れを減らし、管理負担を抑えられます。
  • 初回参加の流れ・Q&A・追加写真の枚数は最大6まで選べます。無制限にはなりません。
  • 写真は必要な枚数だけ選べますが、表示速度と管理のしやすさを考え、上限を決めて運用します。本番では自動でCloudflare R2に保存・軽量化されます。

STEP 1

作りたいページを選ぶ

お知らせ・イベント告知・活動報告など、作りたいページの種類を選びます。

STEP 2

必要な項目を入力する

日時・場所・対象者・写真など、表示したい内容を入力します。

STEP 3

プレビューで確認する

右側のプレビューで、ホームページに載せたときの見た目を確認できます。

ページの内容を入力する

まずは作りたいページの種類を選んでください。選んだ種類に合わせて、入力欄と右側のプレビューが切り替わります。

基本情報

開催情報

内容

画像

※ 人物が写っている写真は掲載許可を取ったものだけ使用してください。
※ このデモでは画像は保存・送信されません。

公開設定

本番では「公開」にするとホームページに反映されます。

掲載イメージ

入力した内容が、ホームページではこのように表示されます。

写真がここに表示されます
居場所・サロン案内 下書き

活動名を入力すると表示されます

開催概要

予約予約不要（当日参加OK）

※ 入力内容はこの画面でのみ表示されます。保存・送信はされません。

HOW IT WORKS

実際に運用するときのしくみ

このデモでは保存しませんが、本番では画像をCloudflare R2に保存し、本文や画像URLをGitHubで管理する構成を想定しています。

なぜこの構成にするのか

  • 地域団体の方が難しいコードを触らなくても更新できるようにするため
  • 入力できる項目を限定して、表示崩れを防ぐため
  • 画像は重くなりすぎないように自動で軽量化して管理するため
  • 公開前にプレビューで確認してから、安心して公開できるようにするため

01 — ホームページ本体

Cloudflare Pages

テンプレートからページを自動生成

ホームページはCloudflare Pagesで公開します。ページタイプ別のテンプレートから、入力内容を自動でWebページに変換して配信します。

02 — ページデータ

GitHub

名称・日時・本文などをJSONで保存

居場所案内・イベント告知・ボランティア募集などのページデータをGitHubに保存します。変更履歴が残り、誤更新の場合も元に戻せます。

03 — 写真データ

Cloudflare R2

写真本体の保存・WebP自動変換

写真はCloudflare R2に保存します。本番では写真を自動でWebP変換・圧縮して掲載するため、ページの読み込みが速くなります。

04 — 管理画面

ログイン制御

許可された人だけが更新できる

本番の管理画面はCloudflare Accessなどでログイン制御します。許可された方だけが更新できるため、外部からの書き換えを防ぎます。

05 — 安全対策

APIキー・秘密情報の管理

ブラウザ側には秘密情報を置かない

APIキーやトークンはブラウザ側には置きません。更新できる項目を入力欄で限定することで、表示崩れや情報漏えいを防ぎます。

▍ 保存データのイメージ（本番では自動で作成されます）

※ 写真のURLはCloudflare R2に、ページデータはGitHubに保存されます。
※ 問い合わせ情報は原則としてサイト内には保存せず、Googleフォームなどの外部サービスを利用します。

実際のホームページに組み込む場合もご相談ください

このデモのように、地域活動の内容に合わせた入力画面を用意できます。
日々の投稿はSNSやブログ、固定情報や活動案内はホームページに整理する形も可能です。

制作見本を見る 相談する

ホームページの制作・更新もお手伝いします

「作るだけでなく、公開後も自分たちで更新したい」という方の
ご相談もお気軽にどうぞ。

相談・問い合わせページへ 制作見本をすべて見る