Works サントリー株式会社
ほろよい
ブランドサイト制作

Z世代当事者を巻き込んだ、Web表現の方向性の模索

サントリーさまと電通デジタルさまが設定していたのは、「やさしく軽やかな味わい」と「若者のあの頃の記憶」を掛け合わせた体験設計です。「多彩さ」「軽やかさ」「やさしさ」の 3 つがキーワードとして示されており、Webでどう表現するかが弊社の課題でした。

多彩なカラーバリエーションをWebで表現する手法はひとつではありません。そこで、ディレクターとアートディレクターは Z 世代が日常的に見る SNS や参考サイトを調査し、社内の Z 世代メンバーを集めたブレストも実施。複数のイメージボード案を作成し、表現の方向性を絞り込んでいきました。

フィードバックをもとに、グラデーション表現へ転換

「色や質感で軽やかさを表現する案」「淡いイラストで楽しさを伝える案」「タイポグラフィでポップな勢いを出す案」など、方向性の異なる5案を社内で検討し、1案に絞ってお客さまへ提案しました。提案した案は、各フレーバーのイメージカラーをはっきり分けた構成です。

お客さまから、多彩さの表現がイメージとは違うというご意見をいただきました。ご意見をもとに、「色をはっきり分けることで多彩さを出す」というアプローチ自体を問い直しました。

そこで、グラデーションによって多彩さと柔らかさを同時に表現する案をご提案し、その方針で固まりました。

コピーにあわせたメインビジュアルのデザイン

メインビジュアルは当初、初回のコピーの方向性からフレーバーを 1 つずつ順番に見せる構成にしていました。しかし「大人になっても変わらない好き。」というコピーの方向性に定まったため、好きなフレーバーがすぐに想起されるように、多彩なラインアップをひと目で伝える構成に見直しました。

最終的には全フレーバーの缶が最初から画面に散らばるレイアウトを採用。ラインアップの多彩さと軽やかさを、一画面で伝える構成にしています。

缶の揺れをランダムに。デザインとページスピードを両立

サイト実装時には、複数の缶がそれぞれ異なるリズムで揺れ、背景のグラデーションが時間経過で自動的に色が変わるようになっています。イメージに偏りが出ないようにしてほしいというご要望をいただいたため、背景色が順番に切り替わる仕組みを導入しました。

当初は缶の揺れ方が全フレーバーで同じでしたが、軽やかさをさらに演出するためにも、デザイナーの指示やお客さまのご意見のもとエンジニアにて細部まで動きを調整しました。しかし、複雑な動きにしてしまうと、サイトの表示速度が遅くなってしまいます。

そこで、缶ごとに揺れのタイミングをずらしてランダム感を出しつつ、後列の缶は静止画として処理することで表示パフォーマンスを確保しました。