岩国商工会議所（外国人受入対応 音声ガイドページ）
デザイン支給のコーディング対応／WordPressで運用可能な音声ガイドページ
プロジェクト概要
プロジェクト概要
岩国商工会議所様の「外国人受入対応 音声ガイド」特設ページにおいて、Net:Engage;はデザイン支給のもとコーディング（外注対応）を担当。
訪日・在住外国人向けに“音声で案内する”という用途から、スマートフォンでの閲覧・操作を前提に、再生導線（どこで何を聞けばよいか）と表示の安定性を重視して実装しています。
担当範囲
- コーディング（外注対応）
- レスポンシブ実装／表示検証
- WordPress組み込み（ページ追加・更新が可能な構成）
- 音声ガイドUI（埋め込み・再生導線の実装）
※デザイン：株式会社オーエスプランニング（https://osplan.jp/）
制作のポイント
- 特設ページは「読ませる」より「迷わせない」が重要なので、ファーストビューから各コンテンツへ到達する導線を優先。スマホでの操作性（ボタンの押しやすさ／スクロール時の視認性）を崩さない実装にしています。
- 音声ガイドは“再生の迷子”が起きると価値がゼロになるため、再生導線と情報のまとまり（章立て・並び順）が直感的に理解できるよう、デザイン意図を保ったままマークアップを整理。
- WordPressに組み込み、ページ追加や文言更新など運用側で回せる構成にしたことで、イベント・季節・対象言語の増減にも追従しやすい土台を整備しています。
- 表示差が出やすい箇所（スマホ時の折り返し、余白ズレ、埋め込み要素の比率崩れ）を中心に検証し、主要ブラウザ・主要解像度での安定表示を担保しました。
公開後の変化
音声ガイドという“使われて初めて価値が出る”ページに対して、スマホ前提の導線と安定表示を整備。
さらにWordPressでの追加・更新が可能な構成にしたことで、運用フェーズでの修正コストを増やしにくい状態を作っています。