No.067 「PRESS BUTTER SAND（プレスバターサンド）」

バターでつなぐ、記憶と新しさ

焼きたての香ばしさ、バターの濃厚な香り。
「PRESS BUTTER SAND」は、“バターで、世界をしあわせにする”をテーマに掲げるスイーツブランド。
サイトを開くと、バターサンドの断面が大胆に映し出され、五感を刺激するようなビジュアルが広がる。
伝統的な焼き菓子を、現代的なデザインとテクノロジーで再構築。
味覚と視覚の両方で“ブランド体験”を届けるデジタル空間。

ユーザーインターフェース｜菓子を“体験”として見せる導線

トップページは、動画と写真を中心に構成され、焼きたての質感やバターの艶をリアルに表現。
ナビゲーションは上部に「PRODUCT」「SHOP」「NEWS」「ONLINE SHOP」「ABOUT」が整然と配置。
スクロールに合わせて写真が切り替わり、まるで店舗のショーケースを覗くような感覚。
ページ遷移は滑らかで、ブランドの世界観を壊さない。
UI全体が“お菓子を味わう前の高揚感”を演出する設計。

コンテンツ構成｜「副産物」を「物語」に変える、サステナブルな整理

「CRAFT BUTTER CAKE」「Sourcing」「Our Philosophy」。Buttersの素晴らしさは、バターを作る過程で生まれる「脱脂粉乳」などの副産物にも光を当てている点。No.063（嘉瑞工房）が活字の影を愛したように、ここでは素材のすべてを無駄にしない「循環」が整理されている。製品のスペックではなく、その背景にある「農家への敬意」や「製法のこだわり」を語ることで、ブランドの品格を構築している。

デザイン｜「伝統」と「モダン」が溶け合う、バターイエローの魔法

全体を包むのは、バターそのものを象徴するような温かなクリームイエローと、清潔感のある白。タイポグラフィは、クラシックな装飾性と現代的なキレを兼ね備えたセリフ体。No.064（雨晴）で見つめた「器」の上に、このバターケーキが載っている様子が容易に想像できる、暮らしに馴染むデザイン。余白は「贅沢なティータイム」の時間を表現しているかのよう。

ターゲット｜「本質的な美味しさ」を、物語と共に味わう人々

単なる甘いもの好きではなく、その菓子が「どこから来て、どう作られたか」という物語に価値を感じる人々。No.062（EN TEA）のお茶に合わせる一品を、厳選して選びたいと願う層。効率を優先する現代において、あえて手間暇かける「クラフト」の精神に共鳴する、感性豊かな大人たち。

ここを真似したい！」ポイント！

味覚を視覚で伝えるデザイン構成
・素材の質感を最大限に引き出す写真演出
・白とクラフトバターイエローを基調にした上品なカラーパレット
・情報を整理し、余白で語るレイアウト
・ブランド哲学を体験として伝えるUI設計
・“食べる前の期待感”をデザインで表現

PRESS BUTTER SANDのサイトは、商品を販売するための場所ではなく、“ブランドの香り”を届けるための空間。スクリーンの中に漂うのは、焼きたての香ばしさと、デザインの余韻。
バターの断面、生地の気泡、焼き上がりの表面。徹底的に「寄り」で捉えた高解像度な写真が、言葉を尽くす以上の「美味しさへの信頼」を生んでいる点。Webデザインにおいて、テクスチャ（質感）をいかに情報の主役にするか。見せたいものを「大きく、美しく、潔く」配置する整理の美学。

まとめ｜春の午後に、ひとさじの豊かさを

「Butters」のサイトを巡る体験は、冷えた心に温かなバターが溶けていくような、安らぎと興奮の同居。デザインとは、機能の伝達だけでなく、幸福な予感をデザインすること。

トーストの地平線｜Webサイト100選