菊水酒造株式会社

昭和レトロの世界観を深掘りした「菊水ゼロ」ブランドサイト制作

Web
Graphic

1881年に創業した新潟県新発田市の酒蔵、菊水酒造株式会社。今回新たに発売された、ノンアルコールの大吟醸テイストスパークリング「菊水ゼロ」のウェブサイト制作を担当しました。

Background背景: ・当初から発売が決まっていた「菊水ゼロ」のウェブサイトを立ち上げたい
・パッケージにもある“昭和レトロ”の世界観を広げていきたい

Approach実施内容: ・ファーストビューには昭和レトロな看板を並べ、デザインを通してよりリアルな当時の世界観を演出
・商品ラベルの模様やカラーをベースに新たなカラーも加えながら、レトロと商品の個性の双方を確立

Flow解決の流れ

Concept

純喫茶でのブレストから生まれた昭和レトロな世界観の深化

昭和レトロの世界観をどのように広げていくのか。実際に純喫茶に足を運び、メニュー表や商品、置いている雑誌や新聞、インテリア、店内の空間など、すべてのモチーフからヒントを得ながら、社内メンバーでブレストを行いました。

当時の新聞の広告風に仕上げる案や、ちゃぶ台の真ん中に商材を置く案など、さまざまな方向性が出てきたなかで、菊水酒造様からもご評価いただいた昭和の看板が並んでいるレトロさで世界観を深めていきました。

表現、構成、文章の隅々に至るまで、昭和ならではの趣を感じられるようになっています。

Design

錆表現と明度調整で実現する時代のリアルさ

トップに並ぶ看板は、実際に昭和時代当時の看板のレイアウトやフォント、文字の配置を参考にすることで、よりリアルな仕上がりを追求しました。トップ下や商品説明ページ、飲用シーンのページにも看板の表現を取り入れており、全体を通して昭和レトロな世界観を表現しています。

ホーローの古びた部分もあり、錆の質感までも細やかに調整しています。ただ古さを出すだけでは全体的に暗い印象になってしまうため、画面の端にあるほうはより暗く見えるように明度の差をつけ、真ん中の「菊水ゼロ」の看板が目立つようにしています。

ところどころに施された水玉模様は、実際の商品ラベルと連動するかたちになっていると同時に、ページ全体にメリハリをつける意図もあります。カラーはラベルにあるネイビーや赤を使用しながら、黄色も追加。昭和レトロな世界観も演出しながら、「菊水ゼロ」の個性も打ち出しました。

reiroでも社内で撮影を行い、食卓の様子など昭和レトロをテーマに実際に当時のシーンが思い浮かぶような写真をいくつかご提案させていただきました。菊水酒造様よりご提供いただいた素材と合わせて、写真を通じた“日常”を加え、より抜け感を演出しています。

Implement

揺れる看板、傾く写真。ユーザーにワクワクを与えるホバーアニメーション

トップにある看板をはじめ、「菊水ゼロ」の商品自体にも、マウスをホバーさせると揺れるアニメーションを加えています。飲用シーンの写真も傾くようになっているなど、一つずつに動きを持たせることで飽きがこない、ユーザーにもワクワク感を持ってもらえるように仕上げました。傾き具合やスピード感はユーザーが不快にならない最適なバランスを追求しています。

一般的にウェブサイトやLPなどは画像として見せるケースも多いですが、SEOの観点も踏まえて、できるだけテキストはコードで書くことにもこだわりました。

Back to all