「ここはシバジュク酒場」企画設計〜デザイン編

Webサイト

Launch: 2025.03.06
Period: 5カ月
Role
Soft: Photoshop

Illustrator

Figma
language: HTML

CSS
Other Members: nami

こんにちは、くうみんです。
チームAttcraftで、『シバジュク酒場紹介ページ制作プロジェクト』に参加しました。

このプロジェクトは、『「シバジュク酒場」の魅力をもっと多くの人に知ってもらうための紹介サイトを制作する』というものです。

「シバジュク酒場」とは、しばさん＆Shibajukuのサロンメンバーが、Web制作やそれにまつわるエピソードを語るポッドキャスト。
リスナーの皆さんが『隣の人の会話を盗みぎき』するような感覚で楽しめる、そんな番組をお届けしています。

Attcraftで制作した紹介サイトは、こちらです。

「ここはシバジュク酒場」

企画Attcraft、実装はnamiさん、ディレクション・デザインは私くうみんが担当しました。

シバジュク酒場の魅力を最大限に伝えるためには、どんなアプローチを取れば良い？
いつにも増して、悩みに悩んだプロジェクトです。
試行錯誤の連続だった制作の過程を、お伝えしていきます。ぜひお付き合いください。

実案件さながら！クライアントしばさんと進めるプロジェクト

このプロジェクトのクライアントは、しばさんです。
企画の段階からプレゼンをし、都度進捗をご確認いただきフィードバック、調整、というほぼ実案件に近い形で進んでいきました。

詳細は省きますが、しばさんからの諸々のご要望もサイトにしっかり反映しています。

実はこのプロジェクトに手を挙げたのは、Attcraftも含めて2チーム。
しばさんから提示された同じ条件のもと、それぞれのアプローチを考えて制作するのっておもしろいな！と、スタートから気合が入りました。
( もう1チームのサイトも、近々公開予定です。そちらもぜひ、あわせてご覧ください！ )

ポッドキャスト「シバジュク酒場」の魅力

まず私たちは、「シバジュク酒場」の魅力を以下の4つに定めました。

以前は初学者だったサロンメンバーの、等身大の経験談を聴くことができる

信頼性がありかつ再現性の高い体験談として、リスナーに価値を提供できる。
何より他のWeb制作系ポッドキャストと差別化できる点は、「サロンメンバーにスポットライトを当てていること」

Web制作・マークアップ・フリーランスの働き方・就活転職など、トピックが多岐にわたる

興味を持てるもの、自分の現状に当てはまるものを見つけやすい

Shibajukuならではの、Web制作との向き合い方・方向性・クリエイターとしての在り方などに触れることができる

しばさんの魅力や制作に対するスタンスなどが、音声を通じてテキストよりもよりダイレクトに伝わる

「バーで隣の人の会話を盗み聴き」という設定で、リスナーに自然な会話を提供している

他の教育的なコンテンツとは異なり、構成に縛られない自由なトーンが強み。よりリアルで共感できる内容になっている「シバジュク酒場」をどう伝える？試行錯誤したサイト設計

「ポッドキャストを聴いてもらうだけなら、サイトの役割はどこに？」
「そもそも、サイトって必要なの？」
そんな問いに向き合いながら、私たちが導き出した答え、、、

正直、ここでとても悩みました。

初めは「紹介サイト」という枠にとらわれすぎて、

「シバジュク酒場」にたどり着く導線＝タッチポイントをとにかく増やす
そのため、シェア機能や紹介サイトへの入口を充実させる
現在100近くあるエピソードを、とにかく聴いてみて欲しい
そのため、カテゴリー分けで聴きたいエピソードにたどり着ける・ランダムで「今日のトピックス」的なものを表示・人気のエピソードランキングを表示
探しやすさや機能面を立たせるサイトにする

そんなサイト設計をしていました。

でも、設計を進めようとすればするほど、もやもやした気持ちが増していきました。

この設計で、本当に「シバジュク酒場」の魅力が伝わるの？
エピソードを聴いてもらいたいのは、何のため？
聴いてもらうだけなら、むしろポッドキャストで直接聴いてもらえばいい。
じゃあ、Webサイトをつくる目的って結局なに？

ターゲットは最初から

Web業界を目指して勉強中の初学者

と決めていました。

Web業界は技術の移り変わりが早く、また未経験には門戸も狭く感じられる……
SNSなどで手軽に知見が得られるものの、様々な情報もたくさん飛び交い取捨選択が難しい……
そんな背景の中、つまずいたり迷ったりする方に「シバジュク酒場」を届けたい！

Shibajukuのサロンメンバーも、少しだけ先に、同じ道を歩いてきた仲間です。
何かしら、参考になるエピソードがあるのでは？

そのためには、どんなサイトにすればいいのか！？
かなり悩みました、まさに試行錯誤！！

初学者が思わず触りたくなる！？「シバジュク酒場」サイト

そもそも「シバジュク酒場」に興味がある人であれば、Webサイトがなくても聴いてくれるはず。
じゃあ、Webサイトを作る意味はどこにあるの？
なんのためにつくるの？

悩んだ末の結果です。

Webサイト上で、「Webって楽しいな」と体験してもらおう
ポッドキャストの音声だけではなく、「目で見て触って体験できる場所」としての役割をWebサイトに果たしてもらおう
「こんなおもしろいサイト、自分もつくってみたい」と思ってもらえるものにしよう

ここにたどりつきました。

Web制作を学ぼうとしている初学者に刺さるサイト。
「思わず触りたくなるサイト」であれば、さらにポッドキャストにも興味を持って聴いてもらえるのでは？
そして、刺さった人は「シバジュク酒場」のファンになってくれるかもしれない？
少人数でも、コアなファンづくりに貢献したい、、、そんな思いです。

「シバジュク酒場」をリアルに再現！？設計の裏側

悩んだ末の結果を踏まえて、どう表現していくのか？
そこで、もし「シバジュク酒場」が実在するとしたらどんなお店になるんだろう！？と考えました。

ポッドキャストから受けるイメージは人それぞれで、居酒屋風のお店を想像する人もいれば、静かめのバーを思い浮かべる人もいる、、、
実際にヒアリングしてみましたが、やはり皆さん持つイメージはバラバラでした。

ここは正解がないので、私が思う「シバジュク酒場」を作り上げるしかない、、、

とにかく調べて、いろんなものを見て、参考になりそうな店舗にも実際に足を運んでみたり。
店舗建築のサイトで内装が確認できたり、リサーチも楽しかったです。

その上で、

たくさんの人が集まって、思い思いに楽しんでいる自由な雰囲気
「シバジュク酒場」のコンセプトである「隣の人の会話を盗みぎき」ができる
かしこまりすぎず、雑多すぎず
バルに近いイメージ！
バルには「気軽に集まって交流をはかるコミュニケーションの場」という意味合いもあるそうなので、まさにぴったり

私が思う「シバジュク酒場」は、この雰囲気でいく！！と決めました。

コンセプトは「盗みぎき」

デザインで表現する際のコンセプトは「盗みぎき」です。
この「盗みぎき」感を出すために、あえて型におさまらないトップページをつくりました。

縦横を隅々までスクロールしてもらう必要があり。
特に横スクロールは出さないほうが良いのでは？と悩みましたが、ターゲットが「Web制作を学びたい初学者」であることを踏まえ、また「盗みぎき」の世界観を伝えるには欠かせないのでは？とnamiさんと二人で話し合い、このトップページとなりました。

実際のサイトでは、黒いマスクで周りを隠した中手探りで各テーブルをまわりつつ、盗みぎき感を楽しんでいただけるよう工夫しました。

そして、私が思う「盗みぎき」感が伝わるよう、小さな工夫をちりばめました。

わいわい人が集って楽しい雰囲気を演出するため、すべての人を動かす！

テーブルに座っているスピーカーのイラストを、私＝デザイナー側でコマ割りアニメーション (APNG) で動かしました。もう少しなめらかに動かしたかったのですが、、、いろいろ制約もあり、ひとまずここまで。
それ以外の人物は、すべてnamiさんがCSSアニメーションで良い感じに動かしてくれました。

音の力を借りる！

バル的な酒場の雰囲気づくりのため、トップページにはそれっぽいバックミュージックと、ポッドキャストのエピソードの一部を流しています。
ここでも盗みぎき感を演出すべく、スピーカーのテーブルに近づいたらそのカテゴリーに属するエピソードが流れる仕様にしています。

動く耳！

スピーカーとリスナーを見分けるため、また見た目でも盗みぎき感をアップさせるため、大きめの耳をつけてnamiさんに動きをつけてもらいました。
耳がついている人は、隣の人の話をこっそり聴いています。
こうして、至るところに「盗みぎき」感をちりばめました！

こうして、ようやくシバジュク酒場の「盗みぎき」感を体験できるサイトが形になりました！
訪れた人が、まるで本当に「酒場で耳を傾けている」ような感覚を楽しんでもらえたら嬉しいです。