border

プロジェクト概要

福岡・天神にあるミュージックバー「border」の公式サイト制作。
大人が集う洗練された空間と、ここで開催される多彩な音楽イベントをブランディング視点で表現しました。

最初の打ち合わせでは、「ライブの熱気や空気感をどう表現するか」「店舗の雰囲気をそのまま感じてもらえるデザインにしたい」という明確なビジョンを共有いただきました。
私たちは、店舗に実際に足を運び、照明や音響、来場者の雰囲気などを体感しながら、“border”という空間が持つ特有のリズムをWeb上でどう再現するかを考えました。
ブランドイメージを損なうことなく、訪問者に「ここで演奏してみたい」「行ってみたい」と思ってもらえるようなデザインと導線設計を重視しています。

また、ライブやイベント情報を常に発信できるよう、更新性にも配慮しました。
日々の情報がリアルタイムで反映されるように設計し、SNSとの連携によって“動きのあるサイト”を実現しています。
単なる告知サイトではなく、店舗とお客様をつなぐメディアとして機能するWebサイトを目指しました。

デザインのポイント

• 大人で洗練された世界観
  濃紺や深みのあるアクセントカラーを基調とし、余白やタイポグラフィで“品のある余裕”を演出。
  各導線・ページ構造においても、この世界観を壊さないよう細かいバランス調整を行いました。
• ブランド強化
  「アーティストがここで演奏したい」と思えるステージ感を、Web上の見せ場（ヒーローセクション、バナー、スライダー等）で表現。
  サイト訪問者が自然とスクロールを進めていく“物語性”を意識し、導入・展開・クライマックス・行動誘導（CTA）を丁寧に配置しました。
• 写真重視のビジュアル設計
  ライブ時・店舗空間・出演者写真を大きく扱うことで、訪問者に“その場にいる感覚”を与えることを狙いました。
  特にトップビジュアルやスケジュール周辺では、動的な切り替え・フェード効果・拡大表示などを用いて、視覚的なインパクトを高めています。

機能面の特徴

• 最新イベント情報の表示
  トップページに「次回ライブ」の告知を大きく配置することで、訪問者に即時の興味を引き出します。
• スケジュールページ
  一覧表示モードとカレンダー表示モードとを切り替え可能にし、ユーザーの好みに応じた見方を提供。
  さらに、各イベントには詳細ページリンクを持たせ、出演者情報・チケット情報・会場情報なども紐づけられる構造としています。
• CMS導入
  WordPressをベースに、イベント投稿を専用カスタム投稿タイプで構築。
  管理画面上で画像やテキストを直感的に編集できるようにし、非エンジニアの担当者様でも運用しやすいUI設計を行いました。

Instagram連携 × ライブレポート

• SNSとWebのシームレスな連動
  公式Instagramで発信されるライブの写真や動画、告知投稿を、サイト内の「Live Report」ページに自動的に反映させる仕組みを導入しました。
  これにより、日々の投稿がそのままWebサイトのコンテンツとして活かされ、最新のイベントや雰囲気を常に伝え続けることができます。
• ハッシュタグ活用
  「#borderFUKUOKA」というオリジナルハッシュタグを中心に、来場者やアーティストによる投稿が自然と広がる仕掛けを設計しました。
  お客様が自ら体験をシェアすることで、ライブバーとしてのリアルな空気感や楽しさが他のユーザーにも伝わり、自然な形で認知が拡大していきます。
• 運用負担の軽減
  Instagramの更新を行うだけで、サイト側の「Live Report」ページにも自動で最新情報が反映されるように構築しました。
  担当者が二重に情報を入力する必要がなくなり、日常的な運用負荷を大幅に軽減しています。

成果

• ブランドイメージの確立
  音楽性や美意識を大切にするアーティストたちからも「ここで演奏してみたい」「このステージに立ちたい」といった声が寄せられるようになり、出演依頼が着実に増加。
  オンライン上のデザインと店舗でのリアル体験が自然につながることで、ブランドとしての一貫性と信頼感を確立することができました。
• 情報発信力の強化と集客効果
  SNSとWebサイトを連動させた運用により、最新のライブ情報やアーティスト投稿が常に更新される“動きのあるサイト”へと進化しました。
  Instagramでの投稿がそのままサイトにも反映される仕組みは、訪問者の興味をリアルタイムに喚起し、結果として新規来場者の獲得にもつながっています。
  SNS上の自然な拡散とWebでの情報整理がうまく噛み合うことで、イベントの露出度や認知度が大きく向上しました。
• ブランディング × ユーザビリティ × 運用性
  デザイン面でのブランディング、使いやすさを追求したUI、そして更新しやすい運用設計の3要素を高次元で両立しました。
  初めて訪れるユーザーにはブランドの魅力が伝わりやすく、運営側にとっては日常的な更新も負担なく行える設計です。