豆ラボ

WEBサイト
サービスサイト

兵庫県丹波市に拠点を構える「豆ラボ」様のWEBサイトを制作しました。同店は、希少なスペシャルティコーヒーを自家焙煎し、店内カフェでの提供やオンラインでの販売を行っています。特に、オランダ製の焙煎機「Giesen W6A PRO」を日本で初めて導入し、熟練の女性焙煎士が豆の個性を最大限に引き出す焙煎を行っています。また、店舗では6種類の豆を試飲できるカウンターを設け、初心者から愛好家まで幅広いニーズに対応しています。WEBサイトでは、カフェ利用者と豆の購入希望者の導線を分け、オンラインショップや卸売りの案内ページを設けることで、商品の質の高さとブランドの世界観を伝える構成としました。これにより、限られた予算内で、豆ラボ様の魅力を最大限に引き出すサイトを実現しました。

mission

(課題・狙い)

店舗の来客数は一定数あるものの、利益率の高い豆の販売や卸売りを強化したい
限られた予算内で、商品の質の高さとブランドの世界観を伝えるWEBサイトを構築したい

solution

(やったこと)

カフェ利用者と豆の購入希望者の導線を分け、それぞれのニーズに合わせてオンラインショップや卸売りのコンテンツ配置を行った
卸売りに関するページを別途作成、ターゲットに合わせた内容と書き口で情報を提供
ECサイト（BASE）へのリンクを設け、商品購入への導線を整備

design concept

(制作に込めた意図)

コンテンツ構成の意図：「美味しい」だけでは終わらない、“選ばれる理由”を静かに伝える

カフェ併設の焙煎所という立場から、まずは「美味しい」「おしゃれ」といった第一印象を大切にしつつ、実際の狙いは業務用豆の卸販売強化にある。
そのため、構成上はカフェ利用者と業務用クライアントの双方に自然な導線が生まれるよう、トップページでの印象づくりから「豆のこだわり」→「卸しご希望の方へ」までの流れに、違和感のないストーリーテリングを設計。
一般ユーザーには温もりと誠実さが、プロユーザーには品質管理と焙煎技術の確かさがそれぞれ届くよう、写真・文章・レイアウトのすべてにおいて二層構造的な訴求を意識した。
UI/UX設計の意図：柔らかく、でも「信頼できる」印象を最後まで担保する

サイト全体におけるUIは、柔らかな色味と余白を活かし、親しみやすくも品のあるトーンで統一。
導線設計では、卸先を探すカフェオーナーが「焙煎所としての強み」を短時間で把握できる構成とし、一般客が「このお店、行ってみたい」と思えるような写真と導線を先回りして配置。
セクションごとの重みづけにも意識的な緩急を設け、特に「Our Value Points」以降の部分では情報密度を高めることで、見た目の柔らかさに対して芯のあるブランディング構造を成立させている。
ビジュアル演出の意図：「安心して預けられる焙煎所」であることを、空気ごと伝える

焙煎設備や豆にフォーカスしたカットでは、機械の質感や光の角度を活かし、“プロフェッショナルの現場感”を強調。
一方でスタッフの所作や表情に関する写真では、やわらかな逆光や自然な構図で「人の誠実さ」や「日常の延長としての美味しさ」を印象付ける。
背景に写る空間も、整理され過ぎず、雑然としすぎずのバランスを保つことで、堅すぎず・甘すぎずの中庸な信頼感を演出。
写真による空気設計が、ブランディングの最終的な骨格として機能している。