DESIGN / 01
トップページの雰囲気と案内
店舗情報とロゴを中心にした画面から、店内・演奏写真を大きく見せる画面へ。色と書体を整え、お店の雰囲気と、イベント・出演への入口を一緒に伝えます。
CASE STUDY / 02
Mr.Earl
お店の紹介から、音楽と企画が集まる入口へ。
「次のイベントを見たい」「出演・企画を相談したい」「初めて行ってみたい」。それぞれの目的に合う入口を作り、Web制作と並行して、平日の活用を考える調査・提案も進めています。
2026年9月9日 確認時点
BEFORE / AFTER
画面で見る、
Mr.Earlの変化。
既存のJimdoサイトと、制作中の新サイトを同じ画面幅で並べました。画像を押すと、別タブで拡大して確認できます。
DESIGN / 02
スマートフォンでの見え方
同じ390px幅の画面で比較。店舗情報を読む構成から、写真とメッセージで店の雰囲気を伝え、目的別のボタンへ進める構成に変えています。
DESIGN / 03
イベント情報の見せ方
既存のGoogleカレンダーへのリンクを生かしながら、新サイトでは写真付きの見出しとカレンダーの表示を組み合わせています。ページを開いたまま予定を確認できる構成です。
各ページ上部の画面を掲載しています。PC版は1440×1000px、スマートフォン版は390×844px。画像内の料金・イベント・案内は撮影時点の内容です。新サイトは制作中のため、今後変更される場合があります。
既存サイト（Jimdo）を見る ↗ ／ 新サイト（制作中）を見る ↗
01 / BEFORE
出発点にあったこと。
既存のJimdoサイトには、ホーム、お知らせ、イベント情報があり、InstagramやGoogleカレンダーなどへ案内していました。更新の最初の窓口はInstagram。ヒアリングでは、写真や文章を毎回用意する負担と、Web更新にかける労力を抑えたいという希望が共有されました。
02 / CHANGES
どこに手を入れ、
どう変えたか。
制作・画面・情報の変化を比較しています。事業上の効果を測定した比較ではありません。
来店目的ごとの案内
既存サイト・制作開始時
ホーム・お知らせ・イベント情報を中心に、お店の情報を伝えていました。
制作中の新サイト
イベント、出演・企画、店の紹介、メニュー、アクセスを目的別のページへ整理。「観る・参加する」「演奏・企画する」「店で過ごす」という入口を用意しました。
イベントと相談の接続
既存サイト・制作開始時
Instagramやカレンダーなど、既存の発信先・案内先を使っていました。
制作中の新サイト
次のイベントを確認する流れと、出演・企画を相談する流れを明確にしました。既存のカレンダーなどを生かし、日時・料金・参加方法といった正式情報を確認できる構成を進めています。
お店の伝え方
既存サイト・制作開始時
既存の文章、公式ロゴ、店内や楽器の写真がありました。
制作中の新サイト
公式ロゴと実際の店内・演奏写真を生かし、音楽のある場の雰囲気を表現。写真だけに頼らず、メニューや利用案内を文字で読めるページに整理しました。
03 / PROCESS
一つずつ、形にする。
- 01
目的と優先順位を聞く
出演希望者・企画主催者、貸切・ワークショップ利用など、どんな機会を増やしたいかを整理しました。
- 02
情報を分け、画面にする
既存の情報を用途別に組み直し、写真・ロゴ・ページ構成を検討。プレ公開版を見ながら、正式公開に向けて確認を進めています。
- 03
Webの先の使い方を考える
平日の場所活用について、周辺の会場を調査し、店の特徴や対応条件を整理。料金・プラン案と、告知・受付・振り返りの段取りを確認用資料にまとめました。
04 / WITH AI
Webを作る、その先の支援。
AI的伴走では、調査をまとめるだけでなく、判断に必要な質問を小さく分け、確認できた条件を提案へつなげています。最初に要点、その後に比較と根拠を読める資料も制作しました。料金案や施策は検討段階で、採用・告知・実際の場所貸しを実施済みとは扱っていません。
05 / ASSETS
この取り組みで残るもの。
- 用途別に整理したWebと事業紹介文
- イベントや利用案内の情報のまとまり
- 平日活用に関する調査とプラン案
- 確認事項・判断・実施手順の記録
画面に見える完成形とあわせて、確認した情報、進め方、判断の記録も次の更新へつなげます。
06 / NEXT
現在地と、次に確かめること。
新サイトは制作中・プレ公開です。掲載内容の確認と正式公開、提案の採否、採用後の試行を順に進めます。更新の手間の削減、来店・出演希望・予約・売上の増加は未測定です。
制作中のサイトを見る ↗