地域と店舗をつなぐ、楽しく回遊できるサイトづくり ― 西浦のはしご酒マップ
2022.4
HTML／CSS／jQuery／WordPress／Slick Slider／モーダル
【概要】個性的なお店が軒を連ねる飲食店街「西浦のはしご酒マップ」の新規サイト制作
【機能】ランダム風レイアウト／モーダル表示／スマホではカルーセル表示
【担当作業】WordPress組み込み・フロントエンド実装・レスポンシブ対応
【制作期間】1ヶ月程度
【URL】https://nishiura.info/
成果とクライアントの声
- 回遊性向上: 全店舗の情報を一箇所に集約し、モーダル表示によって「はしご酒」のような巡回体験が実現
- クライアントコメント: 「ユニークで情緒豊かな楽しいサイトになった。自由なデザインがしっかり再現されていて嬉しい」
はじめに
「個性的なお店が並ぶエリアだからこそ、それぞれの魅力を楽しく伝える場が欲しい」
そんなクライアントの思いを受けて、はしご酒のようにお店を巡れる、
体験のあるWebサイトを目指して制作をスタートしました。
1. 制作前の課題
- 各店舗の情報がWeb上に点在しており、新規客には分かりにくかった
- イベントや企画を紹介できる柔軟な仕組みがなかった
2. 施策 ― 楽しく、見やすく、個性が伝わる工夫
| 施策 | 具体的な実装 |
|---|---|
| 自由なデザインの再現 | ランダムに並ぶ写真やテキストをCSSとjQueryで制御。意図を読み取りながらレスポンシブ対応 |
| 回遊性を高める構成 | 各店舗はカスタム投稿ですが、個別ページは用意せずモーダル表示にすることで一覧からの閲覧をスムーズに。次々と巡ってもらえる設計に |
| ギャラリー風表示 | スマホでの表示時にSlick Sliderによるカルーセルを導入。視認性と操作性を両立した一覧構成に |
3. 成果
- 回遊性: 「はしご酒」というコンセプトを体験として体現できる構成に
- 情報集中: 地域の飲食店情報を一箇所に集約し、観光客やイベント参加者にも分かりやすい導線を確保
4. 担当範囲 ― デザインの意図を読み取る力が試された案件
| 項目 | 担当 |
|---|---|
| 構成設計 | クライアントが骨子を設計、詳細仕様や導線設計は山キノコロリ Web事業部が担当 |
| WordPress構築 | 山キノコロリ Web事業部 |
| フロントエンド実装 | 山キノコロリ Web事業部 |
まとめ ― 「遊び心」と「実用性」の両立
一見ランダムに見えるデザインの裏にある意図を読み取り、
自由なレイアウトを保ちながらも、情報がしっかり伝わる構成を実現。
地域密着の魅力を伝えるサイトづくりに、
技術とコミュニケーションで応えたプロジェクトでした。
自由なデザインも、お任せください
「個性のあるデザインだけど、これって再現できるの？」
そんなご相談にも全力で応えます。
▶ お問い合わせフォーム