No. 06 / Yuakari Shokai
夜の湯町に、
ほの灯り。
The town, glowing gently at night.
地域の観光協会を想定した、自主制作の架空案件としてのWordPressオリジナルテーマ。観光地の情報——名所・イベント・グルメ——を、担当スタッフが自分で更新できる運用体制を構築するコンセプトワーク。
更新のたびに
業者へ頼まない。
観光協会が抱えやすい「情報はあるのに更新できない」「外部業者への依頼コストが積み重なる」という課題に、WordPressで応えるプロジェクト。
観光地のサイトは、イベント日程・グルメ情報・紅葉の見頃など、季節ごとに情報が動く。だからこそ、担当者が自分の手で、必要なときに更新できる仕組みが何より大切になる。
湯灯商會では、オリジナルテーマを一から構築。「地域の魅力を損なわない世界観」と「誰でも更新できる管理画面」を両立させた。PHP・WordPress テンプレート階層・カスタム投稿タイプ・ACF を活用している。
観光客の動線と、
更新者の負担。
抱えていた2つの軸
観光協会向けサイトには、異なる2つの視点から見られるという宿命がある。
ひとつは「訪問前の観光客」。もうひとつは「毎日情報を入れる地域のスタッフ」。この2軸を同時に設計しないと、公開後に使われないサイトになってしまう。
湯灯商會では、見た目の世界観と管理画面のUXを、同じ熱量で整えることを目指した。
Target 01 — Visitor
訪問前の観光客
スマホで観光地を調べ、何が見られるか・どこで食べるか・いつ開催されるかを、移動中に素早くつかみたい。
Target 02 — Editor
更新担当のスタッフ
Web制作の経験がないスタッフでも、決まった項目を埋めるだけで更新できる管理画面が必要。
夜の灯りを、
Webの上に。
世界観の決め方
「湯灯（ゆあかり）」という屋号から、夜の温泉街を歩くときのランタンの灯りをモチーフに。深い夜色を背景にし、銅赤・琥珀の暖かい光で、観光地の特別感・非日常感を表現した。
タイポグラフィ
見出しには Noto Serif JP、アクセントに Playfair Display イタリック。英字に程よい温度感を持たせ、和のセリフと英字のイタリックが共存する独特のリズムを作っている。
写真の扱い
観光写真の彩度は無理に上げず、夕暮れ〜夜のトーンを基調に統一。どの時間帯の写真でも、同じサイトの空気感に収まるようカラーグレーディングをデザイン指針に含めた。
動きと静けさ
スクロール演出は最小限。旅先で眺めるサイトとして、動きの少ない静かな画面のほうが記憶に残ると判断した。
誰でも
更新できる構造。
観光協会のスタッフが、制作者を介さず毎日の情報を更新できるよう、管理画面の構造から設計した。カスタム投稿タイプとACF（カスタムフィールド）を組み合わせ、項目を埋めるだけで正しい表示になる運用体制を構築。
名所（spot）
観光名所専用の投稿タイプ。ACFで「ベストシーズン」「アクセス」「所要時間」を項目化し、記入漏れを防ぐ。
イベント（event）
開始・終了日、会場、料金を構造化。日付が過ぎたイベントは自動で一覧から外れるクエリを実装。
グルメ（gourmet）
店舗情報・ジャンル・予算帯をタクソノミーで分類。カテゴリページからの絞り込みも可能に。
お知らせ（news）
標準の投稿タイプを活用し、更新履歴の運用負担を最小化。RSS・検索にもそのまま乗る。
カスタムフィールド設計
本文ではなく構造化フィールドで入力。CSSで必ず同じ見た目になり、スタッフが任意にレイアウトを崩すリスクを排除。
テンプレート階層
single-spot.php / archive-event.php など適切なテンプレートファイルで分岐。PHPで分岐ロジックを書き、保守性を上げた。
Figmaからテーマ化まで、
一人で全て。
デザインカンプ→静的HTML→WordPressテーマ化、という流れで一貫実装。どの段階でも壊れないよう、命名規則とCSS設計を最初に固めた。
テンプレートファイル分割
header.php / footer.php / sidebar.php を分離。get_template_part() で共通パーツを呼び出す運用に。
functions.php の整理
テーマサポート・CSS/JS読み込み・カスタム投稿タイプ登録を用途別コメントで明示。後から自分が読んでも迷わない構造に。
the_post_thumbnail()
アイキャッチ画像は add_image_size() で複数サイズを自動生成。srcsetも吐き出し、表示速度を最適化。
WP_Query の活用
トップの「今のイベント」一覧は meta_query で開催中のみ抽出。過去イベントは自動で外れる仕組み。
カスタマイザ連携
ロゴ・SNSリンク・お知らせバナーなど、サイト全体の設定を customize_register で管理。
アクセシビリティ
ナビのランドマーク、alt自動挿入、skip link。キーボード操作のテストもしてから公開。
この制作で
見えてきたこと。
「運用される」サイトを作る視点
見た目だけでなく「誰が・どれくらいの頻度で・どんな画面から更新するか」を一緒に設計すると、納品後の継続利用率がまったく変わることを実感した。
カスタム投稿×ACFの威力
本文に自由記述するのではなく、フィールドごとに分けて保存すると、一覧表示でのレイアウト維持が劇的に楽になる。情報設計＝データ設計だと身体でわかった案件。
Figma→HTML→WP の一貫設計
最初のカンプ段階でWP化を想定した構造にしておくと、後工程のコストが激減する。命名・変数・余白単位は最初に決める——これは今後もずっと活きる学び。
次に踏み込むなら
多言語対応（Polylang/WPML）、マップAPIでのスポット表示、GA4 + Search Console の運用ダッシュボード化、などに踏み込んでみたい。
実案件と仮定した場合の成功指標
この観光協会サイトは「担当スタッフが自分で情報更新を続けられる運用体制をつくる」ための設計です。公開後6ヶ月時点で、以下の数値を成功ラインと定義しています。
自主更新投稿数
オーガニック流入
追加依頼数
※ 本作品はコンセプトワーク（自主制作）のため、実測値ではなく設計時に設定したKPI目標です。
WordPressで運用まで含めた
サイトを作りませんか？
ヒアリング・お見積もりまで無料で対応しています。