実施した施策
概要・課題
フリーズドライ製法で果実本来の美味しさを凝縮した、新食感の「Fruit Crackers」のブランドサイトを企画・制作しました。
Fruit Crackersは、プロの目利きが厳選した国産フルーツを保存料・添加物を使わずフリーズドライにすることで、果実の鮮やかな色や香り、濃厚な甘み・酸味を楽しめる商品です。
サクッと軽い食感も大きな特徴で、一般的なドライフルーツとは異なる、新しいフルーツの楽しみ方を提案しています。
本プロジェクトのポイントは、まだ馴染みのない「フルーツクラッカー」という商品を、初めて見た人にどう理解してもらい、その価値まで感じてもらうかということでした。
そのため、サイト制作だけでなく、Fruit Crackersをどのようなブランドとして見せ、どんな価値を感じてもらうかというブランド設計から整理しました。
そこで、商品の説明を並べるのではなく、
・まず商品の美しさや世界観で興味を持ってもらう
・フルーツクラッカーとは何かを理解してもらう
・使用している果実や製法へのこだわりを伝える
・生産者や目利きの背景から品質への納得感をつくる
・ペアリングやギフトなど、新しい楽しみ方を提案する
という順序で情報を設計。
さらに、写真・余白・スクロール・アニメーションを組み合わせ、Fruit Crackersの世界観を楽しみながら、商品について自然に理解が深まるワンページ構成をご提案しました。
ターゲット
・食へのこだわりが強く、素材や品質を重視する方
・新しい食体験や、これまでにない商品に興味を持つ方
・ワインやシャンパン、ウイスキーなどお酒を楽しむ方
・上質な手土産やギフトを探している方
・国産フルーツや生産者のこだわりに価値を感じる方
デザインコンセプト
果実の鮮やかさや、一粒一粒を味わう特別感が伝わる、上質で印象的な世界観を目指しました。
落ち着いた高級感がありながらも、重たくなりすぎないよう、果実らしい華やかさや軽やかさを感じられるバランスを意識しています。
ただ商品を紹介するだけではなく、果実を味わう時間そのものが特別に感じられるような、非日常感のあるサイト体験を意識しました。
デザインのこだわりポイント
サイト全体の基調にはシックな黒を採用し、果実の鮮やかな色合いが際立つデザインにしました。
明朝体をベースにすることで落ち着いた上質感をつくりながら、英語には曲線的で動きのあるフォントを組み合わせ、軽やかさや遊び心をプラス。
落ち着いた佇まいの中にも、果実らしい華やかさが感じられるよう工夫しています。
ファーストビューでは、あえてテキストのみの表示から始まり、その後ビジュアルが展開される構成に。
映画のオープニングのように、これから始まる世界への期待感をつくり、自然とサイトを読み進めたくなる流れを意識しました。
各フレーバーの紹介では、味に合わせて背景色が変化するインタラクションや、繊細なパララックスを取り入れるなど、コンテンツと動きが自然につながるよう工夫しています。
エンジニアとも細かく調整を重ね、軽やかで心地よい動きを表現しています。
UI・UXでこだわったポイント
Fruit Crackersは、商品名だけでは「どんな商品なのか」「一般的なドライフルーツと何が違うのか」が伝わりにくい商品です。
そこで、単に情報を分かりやすく並べるのではなく、サイトを見進める中でFruit Crackersらしい世界観や価値を感じてもらえる体験設計を重視しました。
ファーストビューでは果実の美しさや存在感で惹きつけ、その後に商品の特徴、フリーズドライ製法、使用している果実、生産背景、楽しみ方へとつなげることで、興味から理解、そしてブランドへの共感へと自然に深まる流れを設計しています。
また、写真の見せ方、余白、タイポグラフィ、スクロール時の動きまで一貫したルールで設計することで、どの場面を見てもFruit Crackersらしさを感じられるようにしました。
ページ遷移を増やさずワンページで構成したのも、情報を効率よく見せるためだけではなく、ブランドの世界観を途切れさせず、一連のストーリーとして体験してもらうためです。商品の理解だけでなく、「このブランドはどんな価値を大切にしているのか」まで伝わるサイトを目指しました。
マーケティング目線でのアピールポイント
Fruit Crackersは、見た目の新しさだけでなく、「なぜこの商品に価値があるのか」まで伝えることが重要だと考えました。
そこで、商品の特徴だけを紹介するのではなく、フリーズドライ製法へのこだわり、使用している果実、生産背景などを通して、価格や品質への納得感が生まれる情報設計をご提案しています。
また、お菓子として見せるだけではなく、ワインやシャンパンなどとのペアリング、ギフトや手土産といった具体的な利用シーン、Fruit Crackersがあるライフスタイルイメージを紹介することで、ユーザー自身がFruit Crackersを楽しむ場面を想像できるようにしました。
写真コンセプト
果実や商品の魅力をさまざまな表情で見せられるよう、写真の見せ方にもこだわりました。
瓶をワイヤーで吊るして浮遊感を演出したり、さまざまな角度から商品を捉えたりすることで、印象に残るビジュアルを構成しています。
また、フリーズドライならではの細かなかけらや質感まで丁寧に捉えることで、商品のリアリティや軽さ、素材そのものの魅力が伝わるよう工夫しました。
担当者からの一言
今回のWebサイトは、フリーズドライ製法という独自の技術によって生まれる商品の魅力を、Fruit Crackersらしい世界観として表現し、ブランドとしての価値を伝えることにこだわったプロジェクトです。
特に、果実の鮮やかさや質感が引き立つ写真の見せ方、スクロールしたときの動き、余白の取り方、文字が現れるタイミングなど、細かな部分まで一つひとつ調整しました。
また、見た目の印象だけではなく、サイトを見進める中で、商品の特徴やフリーズドライ製法へのこだわりを自然に理解できるよう、情報を伝える順番やスクロールの流れにもこだわっています。
公開後には、国際的なWebデザインアワード「CSS Design Awards」において「Special Kudos」を受賞。あわせて「UI Design」「UX Design」「Innovation」の3部門でも評価をいただきました。
国際的な舞台で評価をいただけたことは、アライブのデザインチームにとって大きな励みになっています。
これからも、ブランドが大切にしている価値を丁寧に汲み取り、その良さをWebだからこそできる表現で伝えるサイト制作に取り組んでまいります。
関わったスタッフ
Producer
柴田 紘希
Director
長谷川 真耶
Art Director
三林 真希
Main Designer
中江 優伽
Photographer
堀 佳奈絵







