開発コラム一覧に戻る
伊根花火【公式サイト】のトップページ。伊根湾の舟屋の街並みと、打ち上がる花火

伊根町観光協会様『伊根花火』ページと運営機能の開発

岡村 直昭
---
システム開発WordPressイベントサイト機能追加

伊根町観光協会様のサイトにある「伊根花火」のページです。当日の駐車場の状況やお知らせを、運営の方がその場で切り替えられるようにしました。あわせて管理画面のメニューを整理し、編集する場所を1か所にまとめています。

数年前にお作りした、花火大会のページです

伊根町観光協会様からのご依頼で、伊根湾の花火大会「伊根花火」のページを数年前にお作りしました。観光協会様のホームページの中にある1ページで、開催概要、会場案内、駐車場情報、よくある質問などをまとめています。

サイト全体とWordPressの管理は別の会社様が担当されています。私たちはその中の伊根花火のページと、そこで動く機能を担当しています。

当日になって変わることを、その場で切り替えられるようにしました

花火大会のページで難しいのは、当日になってから状況が変わることです。駐車場が満車になる、雨で使えなくなる、開催について案内を出す必要が出てくる。どれも前日までに書いておけるものではありません。

そこで、ページに載っている内容のうち「当日変わるもの」を、運営の方が管理画面から切り替えられるようにしています。

駐車場は、空き状況と閉鎖を切り替えられます

公式に開設される駐車場ごとに「空」「混雑」「満」を選ぶと、ページの駐車場情報の表示が変わります。

雨などで使えなくなった駐車場は、「閉鎖」にチェックを入れると空き状況より優先して【閉鎖】の表示になります。理由(例:雨天のため)を書き添えると、その下に赤字で出ます。通常に戻すときは、チェックを外して保存するだけです。

管理画面の駐車場情報。駐車場ごとに空・混雑・満を選び、閉鎖と理由を設定できる

管理画面の駐車場情報。駐車場ごとに空・混雑・満を選び、閉鎖と理由を設定できる

お知らせを投稿すると、いちばん上に出ます

これまで、当日の案内を出す場所がページにありませんでした。開催についてひとこと伝えたくても、置ける場所がない状態です。

お知らせ機能を追加する前のトップ。写真とタイトルだけが表示されている

お知らせ機能を追加する前のトップ。写真とタイトルだけが表示されている

今回、お知らせの機能を追加しました。投稿すると、ページを開いていちばん最初に目に入る位置に表示されます。

お知らせを投稿したときのトップ。写真の上に赤枠でお知らせが表示される

お知らせを投稿したときのトップ。写真の上に赤枠でお知らせが表示される

スマホでも同じ位置に出ます。当日、現地でスマホを見ている方に最初に届く場所です。

スマートフォンで見たトップ。同じ位置にお知らせが表示される

スマートフォンで見たトップ。同じ位置にお知らせが表示される

編集する場所を、1か所にまとめました

機能が増えるほど、運営の方は「どこを触ればいいのか」が分からなくなります。実際、WordPressの中から固定ページ「伊根花火」を探しにいく、駐車場の設定はまた別の場所を開く、というように編集する場所が散らばっていました。

そこで管理画面のメニューを整理し、伊根花火に関するものを「伊根花火」の中だけにまとめています。

WordPressの管理メニュー。「伊根花火」の中に管理トップ、お知らせ、お知らせを追加、花火ページを編集、確認用ページを編集が並んでいる

WordPressの管理メニュー。「伊根花火」の中に管理トップ、お知らせ、お知らせを追加、花火ページを編集、確認用ページを編集が並んでいる

  • 管理トップ … 駐車場の空き状況と閉鎖をここで切り替えます
  • お知らせ/お知らせを追加 … 当日の案内を書きます
  • 花火ページを編集 … ページ本体の内容を直します

このほか、公開前の確認に使うページもここから開けます。当日いちばん慌ただしい時間に、迷わず開けることを優先しました。

ホームページも、アプリと同じように機能を持てます

ホームページは、用意した情報を見せるためだけのもの、と思われがちです。ただ、中身はアプリと変わりません。運営の方が触れる仕組みを入れておけば、その場で状況を伝えられるようになります。

見る側は知りたいことがすぐ分かり、運営側は伝えるために誰かへ連絡しなくてよくなる。どちらにとっても楽になる部分は、まだいろいろ残っていると思っています。

公開中のページはこちらです:https://www.ine-kankou.jp/inehanabi

この構成は一例です

ここで紹介した機能は、伊根花火の運営に合わせてお作りしたものです。当日に情報が変わるイベントかどうか、誰がどのタイミングで更新するかによって、必要な機能は変わります。制作事例のひとつ、あくまで一例としてご覧ください。

関連する開発コラム