束縛束縛本記事は、面白法人グループ Advent Calendar 2025 の9日目の記事です。束縛束縛
こんにちは。
面白法人カヤックでディレクターをしている合田ピエール陽太郎です。
www.kayac.com束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛束縛
みなさんは、『ミルクの束縛』という飲み物をご存知でしょうか？
「名前、激強でわらった」「パッケージのインパクトすごい」とSNSでも話題にしていただいているパッケージ、実は普段Web制作をしているカヤックが、Webページを制作する考え方でディレクションしました。今日は、その裏側をお話しします！
ミルクの束縛の仕様
まずは簡単に仕様を紹介します。
商品名： ミルクの束縛
種別： ミルクコーヒー（全国）、ミルクティー（関東・静岡の一部）※いずれもファミマ限定（北海道・沖縄除く）
特徴： シズル画像がなく、テキストだけで構成
販売者：古谷乳業（千葉にある老舗の乳業メーカー）
パッケージは4面あるWebページ
通常、パッケージは「看板」として考えられますが、僕たちにはひとつのWebページに見えました。そこで、パッケージの4面を「ページ遷移するWebサイト」と捉え、時間軸を持ったUXとして設計しました。
1. ユーザーサイド・レンダリング
通常はパッケージには画像が使われますが、ミルクの束縛には画像がありません。その理由がいくつかあるのですが、ひとつご紹介します。
画像をつけることはおいしそうとわかる反面「ああ、こういう味なのかな」とユーザーの中で答えが固定されてしまうかもしれません。そこで、あえてテキスト情報だけを渡して「最高に美味しい味」をユーザー自身の脳内で描画してもらいたいと考えたのです。Webにおける”クライアントサイド・レンダリング”から着想を得たアイデアです。ユーザーが飲んだ瞬間に「想像を超えた！」という体験を作れたのではないかと思います。
2. 開封ポップアップ
注ぎ口を「パカっ」と開ける瞬間。それは「クリック」と同じだと感じました。
アクションに対してシステムが無反応なのはUXとして良くありません。そこで、開けた瞬間に「もう普通のミルクコーヒーには戻れない」という、少しドキッとする言葉が出現することで、インタラクティブな驚きを仕込んでいます。
3. 感動イースターエッグ
パッケージの白面に「薄い文字」でメッセージが書いてあります。
パッと見では気づかないけれど、よく見るとある。ソースコードに書かれている隠しメッセージのように、見つけた人だけがシェアしたくなる、深いエンゲージメントを狙ったイースターエッグです。
※感動イースターエッグのあるパッケージは、ミルクティーと北陸、中部、近畿、中国・四国、九州地方限定のミルクの束縛ミルクコーヒーに限ります（12月9日現在）
Webのスキルはリアルでも輝く
こうして「Web的UX」を詰め込んだ『ミルクの束縛』は、300万本以上売れるヒット商品になりました。
僕たちが培ってきたWebで体験をつくる方法は、画面の外側でも十分に通用する武器になります。
もしファミリーマートで見かけたら、ぜひ手にとって”デバッグ”してください。隠されたテキストや、徐々に距離を詰めてくるUXを体験してもらえると嬉しいです。
もしカヤックが気になりましたらぜひ！！
最後まで読んでくださってありがとうございます。記事はおしまいですが、またちがう形で会えますよね。だって、また出会える運命ですから。
