2024-03-07
あなたのお役に立ちたいわんど。
シチュエーションを売る。hug coffeeサイト制作秘話Vol.1
年末に部屋の壁紙を塗り替えたことを自慢するたびに、家の外壁を塗り替えた祖母には一生勝てないと思うmokaです。
あんどぷらすでは静岡の人気コーヒーショップ hug coffeeさんのサイトをリニューアルさせていただくことになりました。
そこで、これまでのサイト制作秘話は制作完了後に公開していましたが、
今回は、Webサイトを作り始める段階からいくつかの記事にわけて公開していきたいと思っています。今のところ4部構成の予定です。
この記事で、hug coffeeさんの魅力やあんどぷらすのサイト制作にかける想いなどが伝われば嬉しいです。
【今までのサイト制作秘話はこちらから】
hug coffeeとは
皆さんは静岡のコーヒーショップ 「hug coffee」さんをご存知でしょうか？
静岡市にお住まいのかたはお店に行ったことがあるかもしれません。
hug coffeeは静岡県静岡市に3店舗を構えるコーヒーショップ です。
今回は静岡の街中で活気のあるhug coffeeさんのコーポレート・ECサイト（オンラインショップ）のリニューアルをさせていただくこととなりました。
あんどぷらすの制作の様子やhug coffeeで働く皆さんに聞いたコーヒーへのこだわりなど内容も盛りだくさんでお届けしたいと思います。
サイトリニューアルのきっかけ
サイトリニューアルのきっかけは現在のhug coffeeさんのサイトが最近新しくオープンしたにも関わらず、使い勝手があまり良くないということでご相談がありました。
シンプルですが、hugさんらしさがなくさっぱりとした印象のWebサイトでもったいないな。というのが正直な感想でした。
スケジュール
hugさんのサイトは2021年、年明けから制作を開始しました。
納品は2月末で3月初旬にオープン予定です。
プラットフォームは最近流行りのShopifyで今あるサイトをリニューアルしていきます。
実際の店舗に行ってみる
あんどぷらすは最近、クライアントの商品に実際に触れたりお店へ訪問したりすることを大事にしています。
今回制作させていただくhug coffeeさんは静岡市内に3店舗お店があるので、実際にお店に行って雰囲気や働いている方、お客さんの温度感などを感じるために、制作チームのメンバーで伺うことにしました。
訪問メンバー
訪問するメンバーは代表のmmochiさん、制作チームのakiさん、chinaさん、honaちゃん、記事を書くためにmokaの5名が訪問。
hug coffee 南町店
まずはじめに伺ったのは、2020年11月にオープンしたばかりのhug coffee南町店。
静岡駅の南に位置するこちらの店舗は40年以上続いた純喫茶の跡地にできた店舗です。
内装はどこか懐かしい雰囲気のある空気感。テーマは以前のお店が純喫茶だったことから「ネオ純喫茶」。
お店に入るとすぐにレジがあります。店員さんが笑顔で迎えてくれました。
メニューもたくさんあるので迷う一同。
「コーヒーが苦手」や「こういう味が好き」と伝えるとその人に合いそうなメニューをおすすめしてくれます。
ドリンクを頼んだら、店内の好きな席に座ります。
ソファもゆったり座ることができて落ち着きます。お二人のカメラ目線いただきました。
来店していたお客さんもゆったりした時間を楽しんでいる印象です。
みんなで温かいドリンクを飲みながら一息ついてしまいました。どこか懐かしく、温かみのある雰囲気の店内は思わず長居してしまうような空間でした。
今回サイトリニューアルの担当であるhug coffeeの和田さんもお休みのところを来てくださいました。
ステッカーもいただいた。かわいい。
hug coffee 紺屋町店
美味しいドリンクを飲んで温まったところで、凍てつく寒さのなか紺屋町店へはしご。
紺屋町店はあの徳川家が避暑地としていた由緒ある「浮月楼」の一角にあります。
静岡の中心街の交差点にあり、コーヒースタンドのような店構えの紺屋町店はいつも人が賑わっています。
ホッと一息つけるようなサードプレイスになれたらという想いからオープンしたのがこちらの店舗です。
各店舗にはオリジナルのグッズもたくさん販売されています。
ひとつひとつの商品にこだわりが感じられます。
hug coffee 両替町店
最後は両替町店です。こちらがhug coffeeさんの本店となります。
2011年3月11日、東日本大震災の日にさまざまな想いを抱えながらオープンしました。
両替町店の外壁にはシンボルとなる壁画が。hug coffeeが皆さんの憩いの場になるようにという想いから、動物や自然が描かれている。
大きな壁画に思わず立ち止まるあんどぷらす一同。
お話を聞いてみた
両替町店では実際にhug coffeeの皆さんにお話を聞くことができました。
今回お話を伺ったのは、hug coffee代表の古閑大士さんとサイトリニューアルを担当してくださっている和田健さん。
hug coffeeが今の賑わいを見せるまで、様々な苦労があったと話す大士さん。
今のサイトではまだ伝えきれていませんが、hugさんは1杯のコーヒーにかける熱量がすごいのです。
コーヒーショップ だから当たり前でしょと思うかもしれませんが、当たり前のことをずっと継続するってすごいことだと思います。
hugさんではコーヒー豆だけではなく、氷やラテなどで使う牛乳などひとつひとつの材料にこだわって使うものを選んでいます。
このお話は次回の記事で詳しく書いていこうと思います。
また、3店舗はしごして気づいたのは、内装やグッズ・イベントなど広い視野でコーヒーを楽しめるような工夫をされていることです。
何より他のお店と違うと感じるのが店員さんとお客さんの距離感。
hug coffeeで働く店員さんは「hug coffeeが好き！」という想いで働いている方たちばかりな気がします。
何がそうさせるのか。大士さんに伺うと、
自分が働きたくないような場所で社員を働かせたくない。
ここで働く人にはのびのびとhugが好きって言ってくれるひとに働いて欲しいなと思いますね。
もちろんお金は大事だけど、お金を稼ぐだけが目的じゃつまらないから。
hug coffeeで働いている人たちは実は元々ここのお客さんだった人が多いんです。
もちろん仲良くなってからですけど、困っている子にはうちで働いてみる？と声をかける時もあります。
そういった大士さんの想いに共感した方がhug coffeeで働いているという。
この日にご一緒してくださった和田さんもその1人だそう。
僕も元々hug coffeeが好きでずっと通っていたお客さんでした。
実はずっと就職活動で悩んでいて。
悩んでいるときは、毎日hug coffeeに来て履歴書を書いてたんです。笑
今日こそ履歴書を書く！という日はいつもと違う席に座って、「今日は絶対書くから！」とスタッフの皆さんに豪語していましたね。
でも無事に就職しても会社内でうまく馴染めなくて辞めてしまって、そんな時に大士さんから声をかけていただきました。
和田さんが履歴書を書いていたと語り継がれている席がこちら。
何よりhug coffeeが好きだから。
hug coffeeに関わる人たちのこの想いが原動力となっているから、私たちはhug coffeeに魅力を感じるのではないか。と思いました。
また、今回のお話を聞いてく中で私たちの知らなかったプロのこだわりを随所に感じました。
1杯のコーヒーを入れるためにこだわっていること、本当に伝えたいことを今回リニューアルするサイトには掲載していきたいです。
制作状況
毎記事の終盤には現時点での制作状況を書いていこうと思います。
リアルタイムで見てくださっている方は段々とサイトが出来上がっていく様子がわかって楽しいかもしれません！
現在はデザイナーがワイヤーフレームを制作しています。
ワイヤーフレームとはサイトの設計図のようなものです。
どこの場所に何を置くか、このボタンをクリックしたらこのページに飛ぶ、などサイトの全体構成を目で見てわかりやすくするものです。
この段階では色を決めたりイラストを描いたりなどのデザインはあまり考えません。
hugさんのワイヤーはいま一旦完成し、社内で検討中です。
▼ワイヤーフレーム のイメージ（※サンプル）
詳しい制作の手順については今後の記事で書いていきたいと思っています。
まとめ
さて、いよいよhug coffeeさんのサイトリニューアルが始動しました。
どんなサイトになるのか今から楽しみです。
次回の記事は「hug coffeeのこだわり」について詳しく記事にしていきます。
オタノシミニ。
投稿者プロフィール
- 文字に一生片想ゐ。
最新の投稿
コラム2023.02.21あんどぷらすのオフィス遍歴
コラム2023.02.09HACK BERRY制作秘話
レポート2022.12.21新ものづくり・新サービス展に出展しました
コラム2022.12.09あんどぷらすの職種別1day仕事体験
シェア・購読で応援していただけると喜びます：）
