ブログ

つい買いたくなるコーヒー・紅茶のサイト｜BBデザイナーsite hunt!

Bit Beans
2025.05.14

デザイン

こんにちは！
BitBeansでは、毎週デザイン会を開いています。各メンバーが現在進めている案件の報告や、デザインに関する課題・疑問を共有し合う場です。そして最後に行うのが「サイト探し」。毎週、それぞれが気になったサイトを一つずつ紹介します。
デザイナーの目線で選んだサイトは、ユニークで刺激的です。そして毎回、新しい発見もあります。サイトをブログで紹介していきます。
今週のテーマは、KOさんが提案した「つい買いたくなるコーヒー・紅茶のサイト」です。
「つい買いたくなる」と言うのは、いいUI（ユーザーインターフェイス）や、魅力的な写真、シズル感など様々な形があると思いますが、各自が「これは素敵！新しい！」と感じたサイトを紹介しています。各自どんなポイントに注目したのか、一言ずつコメントも添えました。

blue bottle coffee

Yさんの探してくれたのは、シンプルで上質。心地よいECサイト

Y「ブルーボトルコーヒーが持つ上質さ、上品さ、そしてシンプルさがよく伝わるサイトです。写真のトーンも統一されていて、「ていねいな暮らし」を感じさせてくれます。自然光を活かした写真が多く、とても素敵。さらに商品が探しやすく、わかりやすい構成で、ストレスなく見られるので、ECサイトとしても優秀だと思います。シンプルだからこそ、商品の魅力がズバッと伝わってきて、つい買いたくなります」
KO「確かに、ホバーで画像を2枚見せるのはいいですね。スライドショーのように全部見せるよりも、こうやって「ちょっとだけ見せる」方が、興味を引く感じがします」

SUさんが紹介するのは、コーヒーへのこだわりが細部にまで感じられる

びっくりドンキー

SU「びっくりドンキーが、コーヒーにこんなにこだわっているなんて知りませんでした。しかもこんなにオシャレなサイトがあることにもびっくりです。背景に使われているぼんやり浮かぶコーヒー豆の演出や、セクションが出てくるフェードの秒数など細かな部分からも、コーヒータイムが連想できて、しっかり作り込まれているなぁ〜と感じます。TOPへ戻るボタンも小さくてデザインに溶け込んでいて邪魔にならないし、可愛い!と思いました」
SH「切り替えのあの曲線も大胆でいいですね」

KALDI

SHさんが紹介するのは、カルディらしさが詰まった心地よいデザイン

SH「みんな大好きカルディのWebサイトです。シンプルだけどカルディらしい、と感じる世界観のあるデザインが印象的です。TOPページに情報を詰め込みすぎず、見せたい内容を厳選して配置していて、とても好印象です。カルディらしいアースカラーで統一した配色も素敵！サムネイル画像は全て正方形で、1つ1つとてもていねいに作られていて統一感があるところが魅力的です」
FU「カルディのアプリで見る人が多いので、正方形の同じサイズで統一されているんだと思います」
SH「なるほどね」

TEAPOND

FUさんの紹介は、紅茶の世界に浸れるとっておきEC体験

FU「以前、実店舗の近くに住んでいたこともあり、友達へのプレゼントや自分へのご褒美によく訪れていた紅茶専門店「TEAPOND」。ヨーロッパのファンタジー映画に出てきそうな店内は、足を踏み入れるだけでテンションが上がる空間です。その魅力溢れる世界観が、ECサイトでもしっかり表現されていると感じました。特に紅茶の商品ページでは、茶葉の特徴や水色（すいしょく）、美味しい淹れ方などが視覚的に整理されていて、購入前にしっかりイメージできる点もとてもいいです。ただ一方で、情報量が多く、視線がやや迷いやすい印象もありました。デザインの完成度が高いからこそ、情報の優先順位や整理がもう少しなされると、より快適な体験になると感じました。」
KO「買ったときに説明書がついてきますが、ぐちゃぐちゃになって使えなくなっちゃうことがあるけれど、 WEBで商品と一緒に淹れかたがあるのは嬉しいですよね」
FU「紅茶ファンに寄り添ったサイトですね」

TOさんが紹介してくれるのは、紅茶の色が際立つ、美しく静かなデザイン

マリアージュフレール

TO「みなさんがコーヒーを紹介しているので私はあえて紅茶で。フランスの老舗紅茶ブランド「マリアージュ・フレール」の公式サイトです。最近は海外ブランドでも、日本向けに多言語対応しているサイトが増えてきましたがが、日本語に言語を切り替えた途端、ダサくなる現象が多々見られるのですが、ここのサイトは日本語の違和感が無いのが好印象でした。もともとはhttps://www.mariagefreres.com/en/で、英語から日本語に切り替えても言葉のリズムや表現にぎこちなさもなく、雰囲気を壊すことなく表現されているので、もしかしたら日本語の監修が入ってるのかな、と思いました。使われている写真も茶葉や紅茶の色味の鮮やかさが美しく引き立って、その写真を邪魔しないシンプルなレイアウト設計が見やすくて好感触です」
TO「写真がとても素敵なんです」
KO「艶やかですね。それに全体にシンプルだから映えますよね」

TAさんが紹介するのは、第一印象で心をつかむ、写真と配色のセンス良いサイト

カリオモンズコーヒーロースター

TA「レイアウトが見やすく、全体的にとても好印象でした。ファーストビューでは、ていねいに撮影されたこだわりのコーヒー写真が使われていて、初めて訪れた人にも良い印象を与えると思います。配色も白を基調にして、深いブルーと茶色をアクセントにした配色は、コーヒーの世界観やお店の雰囲気をうまく表現していて、コーヒー好きの心をくすぐる絶妙なデザインだと感じました。また、注目したいのは、オンラインショップの導線。EC機能が無理なくサイト内に自然に組み込まれていて、閲覧から購入までスムーズ。そして一貫したクオリティが保たれている点も、とても好印象です」。
KO「何より情報がちゃんとまとまっていていいですね」

KOさんが探したのは、知る人ぞ知る、魅力が詰まったサイトデザイン

オーイシアソシエイト

KO「一般にあまり知られていないメーカーのサイトですが、ステキな写真を使っていたり、商品の魅力を引き出す見せ方をしていているなど、思わず購入したくなる素敵なデザインが印象的でした。全体に使用しているグレーの色合いも品があってサイトが映え、抜け感のあるアイコンも落ち着いている印象を与えています。グローバルナビゲーションにも工夫があり、項目の並び順にちゃんと優先順位が考えられています。特に商品の画像をメニューに組み込まれている点は、視覚的にも直感的にもわかりやすいと思いました」

KINTO

YA「ナチュラルで上質な印象のサイトです。色のコントラストや文字のジャンプ率を抑えることで静かで落ち着いた印象になると思いました。写真の光のトーンも統一されていて視覚的にもいいなと思います。「ジャーナル」というページが特に充実していて、ストーリーを通じて商品の魅力を伝えることに注力しているようです。サクッと買いたい人にとっては少しまどろっこしく感じるかもしれませんが、ストーリー含めて「素敵なものを買った」という気持ちにさせてくれるなと思いました。日本のメーカーが運営していて、製品自体も魅力的です。デザインや構成にブランドのこだわりがしっかり伝わるサイトだと思います」。この辺もコーヒーグッズ https://kinto.co.jp/blogs/journal/our-coffeeware
KO「日本のメーカーって感じがしないデザインですね」

COFFEE COLLECTIVE

MA「このサイトは、デザインがとてもシンプルでかっこよく、豆のパッケージもサイトの世界観とマッチしていててかっこいいんです。英語読めないけど構成が直感的でシンプルな作りだから、言葉が読めなくてもスムーズに理解できます。たとえば豆の製品ページを一つ選んでみても、そうパッケージもめっちゃおしゃれで、海外サイトならではの余白感がいいんです。ボタンとかリンクもシンプルなデザインで洗練された印象を与えてくれます。このレイアウトはぜひ参考にしたいと思いました。特にスマートフォンでの閲覧時にわかりやすさが際立っていて、PCよりもむしろスマホの方が使いやすいと感じました」FU「英語だからかっこいいのかも。英語マジックですね」

KAさんが紹介するのは、やさしい雰囲気で安心感を伝えるサイト

UCC カフェインレスコーヒー

KA「全体的にやさしい雰囲気で、カフェインレスの安心感や魅力をしっかり伝えてるのがいいなと思いました。写真のトーンもあたたかくて、飲むシーンが自然に想像できるのもいいと思います。レビューが載っていたり、飽きさせないレイアウトだったりと、全体的に素敵だと思いました」
KO「カフェインレスって、飲む時に味はどうなんだろうという事が気になるから、こだわりが書かれているのもいいですね」

今回も、どれもさまざまな魅力がありました。静かで上質なイメージや、シンプルの中にも力強さがあるもの、やさしく安心感があるもの。。。また、商品をどんな時、どんな気持ちで使って欲しいかなども丁寧に伝えていました。デザインだけでなく、写真のトーンや言葉の使い方の工夫など、参考になるものがいっぱいでしたね。これからも楽しいテーマを提案し、素敵なサイトを探していきたいと思います。