目次へ戻る 第4章 Netlify実装編(スマボン方式)
実装編 スマホで救え!消滅都市

スマホと Netlify だけで
「お人好し役所DXサイト」を立ち上げる

ここまでで、「どんな情報を載せるか」「どんな更新ペースで続けるか」という方針を決めてきました。第4章では、それを実際のWebサイトとして形にする手順をまとめます。

使う道具は、とてもシンプルです。

  • ・スマホ(iPhone など)
  • ・Netlify のアカウント
  • ・「お人好し役所DXサイト」用のフォルダー一式(HTML+画像ファイルなど)

パソコンがなくても、「フォルダーをまとめて置く」感覚で、役所のミニサイトを公開できます。

この章でやること

  • ① サイトのフォルダ構成を、迷わない形に決める
  • ② 最初のトップページと各コーナーの「ひな型」を決める
  • ③ Netlify Drop を使って、スマホから公開する手順を整理する
  • ④ 更新のまわし方と、「戻し方(ロールバック)」の用意をしておく

1.フォルダ構成をシンプルに決める

まずは、「お人好し役所DXサイト」のフォルダ構成を決めます。基本形は次の通りです。

ルート( / )
├ index.html …… トップページ
├ shibunew.html …… 週1ニュース「SHIBUNEW」ページ
├ service.html …… くらしを楽にする情報(制度・手当まとめ)
├ help.html …… 困りごとQ&A・相談窓口案内
├ about.html …… このサイトについて/運営ポリシー
└ images/ …… ロゴ・バナー・アイコンなどをまとめるフォルダ

ファイル名は、あとから見直しても分かりやすいように全部小文字+半角英数字でそろえておくと安心です。

まずはこの「5ページ+画像フォルダ」だけでも十分に、市民サービスの玄関として機能します。

2.トップページの役割と構成

トップページ(index.html)は、「お人好し役所DXサイト」全体の玄関です。スマホ1〜2画面で、次のような並びをイメージします。

  • ① ヒーロー画像/タイトル …… 「お人好し役所DX」「スマホで救え!消滅都市」
  • ② 短いあいさつ …… 「困っている人の側に立つ、市民サービスの入口です」
  • ③ 3つの入口ボタン …… 「困りごとの相談」「くらしを楽に」「SHIBUNEW」
  • ④ 緊急情報エリア …… 災害や重要なお知らせがあるときに1行で表示
  • ⑤ サイト運営方針へのリンク …… プライバシー・注意事項など

ここで大事なのは、「どこを押せば自分の用事に近づくか」が一目で分かることです。細かい説明は各ページに任せ、トップは「安心して入ってきてもらうための顔」として整えます。

3.市民サービスページのひな型

市民サービス系のページ(service.html と help.html)は、内容が増えやすいので、最初に共通の型を決めておきます。

(1)service.html …… くらしを楽にする情報

  • ・ページ冒頭に、「このページで分かること」を3行ほどで要約
  • ・分野別にセクションを分ける …… 「子育て」「高齢者」「障がい」「仕事・お金」など
  • ・各制度は、次の4点だけに絞ってカード表示にする
    ─ 制度の名前
    ─ ざっくり対象となる人
    ─ ざっくり内容(何が助かるのか)
    ─ くわしい案内ページ or 担当窓口へのリンク

(2)help.html …… 困りごとQ&A・相談窓口

  • ・最初に、「相談していいのかな?」という不安をほぐす一言を書く
  • ・分野別Q&A …… 「暮らし」「お金」「仕事」「人間関係」「子ども・学校」など
  • ・各Q&Aは、質問文をできるだけ市民の口ぐせに近づける
  • ・「まずここに相談してください」という窓口を、電話番号と受付時間つきで明記
  • ・匿名でも相談できる窓口があれば、必ず目立つ場所に置く

どちらのページも、「全部をここに詰め込む」のではなく、市民を迷わせずに次の一歩へつなぐ案内板だと考えると、作りやすくなります。

4.週1ニュース「SHIBUNEW」の作り方

第3章で登場した、行政ニュースDXの看板企画が「SHIBUNEW(シブニュー)」です。ページ構成のイメージは次の通りです。

  • ・ページ冒頭に「今週の SHIBUNEW」コーナーを1件だけ大きく表示
  • ・その下に、過去のニュースを日付順にカード表示(3〜10件)
  • ・各ニュースカードには、
    ─ 日付
    ─ カテゴリ(例:制度/イベント/防災 など)
    ─ タイトル
    ─ 2〜3行の要約と「くわしくはこちら」リンク

文章量は、スマホ1画面で読み切れる長さを目安にします。くわしい資料へのリンクは、役所公式サイトやPDFに飛ばせばOKです。

「毎週全部を完璧に書こう」と思わず、まずは「今週はこれだけは伝えたい」という1本を決めて続けていくことが大切です。

5.Netlify Drop で公開する

ページの中身がある程度そろったら、いよいよ公開です。もっとも手軽なのが、Netlify Drop を使う方法です。

基本の流れは、次の4ステップです。

  • ① スマホ/PCで「お人好し役所DXサイト」フォルダをZIP形式にまとめる
  • ② Netlify にログインし、「Add new site」→「Deploy manually」から Drop 画面を開く
  • ③ 画面の上に、先ほどの ZIP ファイルをドラッグ&ドロップする
  • ④ 数十秒ほど待つと、公開用の URL が発行されるのでメモしておく

ここで発行された URL は、のちほど独自ドメイン(例:ohitoyoshi.city)に差し替えることもできます。最初は、「お試しURL」でもかまわないので、とにかく一度公開してみることが大切です。

6.更新のしかたと「戻し方」を決めておく

公開後に大事なのは、気軽に更新できることと、いつでも前の状態に戻せることです。

  • ・更新したいときは、手元のフォルダ内の HTML や画像を修正し、また ZIP を作り直す
  • ・Netlify Drop に、あらためて新しい ZIP をドラッグする(同じサイトに上書きされる)
  • ・「前の状態を残しておきたい」ときは、古いZIPを必ずどこかに保存しておく
  • ・トラブルが起きたら、「1つ前のZIP」をもう一度 Drop すれば、すぐに元に戻せる

この「ZIPを保管しておく」だけで、専門的なサーバー管理なしに、役所のミニサイトを安全に運用できます。

7.「お人好し役所DXサイト」から始める

本書で紹介している方法は、すべての行政DXを語り尽くすものではありません。けれど、スマホとNetlifyだけでも、ここまでできるという一つのモデルを示すことはできたと思います。

あとは、それぞれの自治体の現場で、少しずつ形を変えながら育てていく番です。このミニサイトが、市民にとっての「いつも頼れる安心の入り口」となり、職員にとっても「無理なく続けられるDX」となれば幸いです。