ジェイアール東海フードサービス株式会社 様

概要・課題

ジェイアール東海フードサービス株式会社様は、名古屋の人気スイーツ「ぴよりん」をはじめ、駅ナカや商業施設で幅広く飲食事業を展開する企業です。名古屋名物として愛される「ぴよりん」は、可愛らしさと繊細な味わいで多くのファンを持つスイーツブランド。今回は、その公式サイトの全面リニューアルを行いました。

旧サイトでは「ぴよりんの魅力」が十分に伝わらず、どこで購入できるか・オンラインで買えるのかなど、新規ユーザーが知りたい情報にたどり着きにくい構成となっていました。また、コンテンツや導線が整理されておらず、SNSや口コミ経由で興味を持ったユーザーが、購入行動に至る前に離脱してしまう点が課題でした。ブランドとしての“かわいらしさ”は伝わる一方で、「職人の手仕事」「こだわり」「愛される理由」といった本質的な魅力が埋もれている状況でした。

プロジェクト初期には、実際の購入体験を実施しユーザー視点の課題発掘と、社内ワークショップによるブランド再定義を実施。「ぴよりんが愛される理由＝“いじらしさ”」というブランド価値を元に情報設計・デザイン・コンテンツ方針を再構築しました。
新サイトでは、
・初めての方でも迷わず購入できる導線設計と情報整理
・「いじらしい」世界観を表現する柔らかなアニメーションデザイン
・「ぴよりん図鑑」「おいしさのヒミツ」など、ブランドの魅力をこれまで以上に伝える新コンテンツの制作
・「どこで」「何が」「いつ」買えるかを一目でわかる販売店舗ページの刷新
・SNSとの連携を強化し、ユーザーが発信した“ぴよりん体験”の共有
・更新性・運用性を高めるCMS構築
といった多角的な施策を行いました。

見て楽しい・知って納得・行ってみたくなる、という体験の流れを軸に、ブランドの魅力と関わる人達の想いが伝わる構成へ。
ビジュアル・導線・情報の一体設計により、ぴよりんブランドの価値がより深く心に残るサイトへ生まれ変わりました。

ターゲット

・名古屋観光客の方
・スイーツ・かわいいものが好きな方
・名古屋名物のお土産を探している方
・ぴよりんのリピーター（ファンの方）

デザインコンセプト

今回のぴよりんのサイト制作にあたり、まずは社内のメンバーでぴよりんの「かわいさ」について理解を深め、以下をクリエイティブの基本方針として定めました。

・イラストをメインにしない
・ぴよりんにセリフをしゃべらせない
・ぴよりんをただの商品としてではなく、大切に扱う

この方針を軸に、キャッチコピー「いじらしいほど、やわかわ」の世界観を大切にぴよりんの魅力を表現し、さらに購入方法や店舗情報をユーザが直感的に理解できるようなサイトデザインを目指しました。

また、今回のリニューアルでは、ぴよりんを「ただのかわいいお菓子」ではなく、「こだわりの詰まった本格スイーツ」としての魅力も広めたかったので、直感的に「おいしそう」と感じられるようなシズル感を意識した写真や動画を多く取り入れることにしました。

デザインのこだわりポイント

トップページのメインビジュアルにぴよりんのアニメーションを取り入れることで、静止画では伝わりにくい、ぴよりんのぷるぷる感や愛らしさを表現しました。ローディング画面や下層ページのヘッダーなど、サイトのさまざまな箇所で、ぴよりんが顔を出したりくるくる回ったりする遊び心のあるアニメーションを加え、ユーザーが楽しめる工夫をしています。

また、サイト全体で使用するぴよりんの写真は、社内で「最もいじらしく、かわいく見える角度」を分析したうえで撮影し、デザイン内で活用しています。

UI・UXでこだわったポイント

ぴよりんは人気商品のため、お店に行くタイミングによっては長蛇の列ができていたり、売り切れてしまったりします。そこで、トップページでは「どこで？」「いつ？」「すぐに買える？」といったユーザー目線のキーワードとアイコンを大きく配置し、初めての方でもなるべく迷わずに購入できるように設計しました。

ぴよりんには、定番のぴよりんのほか、いちごぴよりんや紅茶ぴよりんなど、さまざまな種類があります。販売店舗によって取り扱う種類が異なりますが、これまでその情報は公式サイトの店舗情報ページに掲載されておらず、個人のブログやSNSを調べなければ分からない状況でした。
情報発信不足によって「欲しいぴよりんが買えなかった」という悲しい事態が起こらないよう、店舗一覧ページには「主な取扱商品」欄を設置。どの店舗でどのぴよりんが購入できるかを一目で確認できるようにしています。また店舗詳細ページでは、さらに各商品の詳細情報も掲載させています。
また、角店舗では、グッズ販売もしているのか、テイクアウトのみなのか、店舗形態をわかりやすくするため「グッズ販売」「テイクアウト」「カフェ」といったアイコンを設置しています。
さらに、「ぴよりんshop」「ぴよりんshop アトリエ店」といった店名だけでは所在地が分かりにくいため、「名古屋市」「春日井市」といったエリアを示すアイコンも併せて表示し、訪れる際の利便性を高めています。

今回のプロジェクトでは、ECサイトへのアクセスやライセンスに関するお問い合わせを増やすことも目的の一つでした。以前のサイトではそれらの導線が少なく、見つけにくいという課題があったため、全ページ共通のヘッダー・フッター・メニュー内に導線を設け、どのページからでも目的の情報にスムーズにアクセスできるよう改善しました。

WordPressの仕様

お知らせの詳細ページでは、ぴよりんのおでかけ情報や限定商品の紹介記事が多かったため、価格や販売日時、時間などの販売情報をユーザーが見やすくなるようにリスト形式の表示スタイルを取り入れました。
また、イベント期間や限定商品の販売期間などを一目でわかるようにカレンダー機能を実装。
お知らせ記事を記入時に、カレンダーにどの期間表示させるか、表示させる時の色やテキストをどうするかなど制御できるようにしています。

写真コンセプト・ポイント

撮影前、ぴよりんの「いじらしいほど、やわかわ」な感じをどうやったら写真に残すことができるのか考えていましたが、デザイナーが明確に撮りたいイメージを持っていたため、それを撮影しようとカメラマンとデザイナーでぴよりんと何度も向き合っているうちに、かわいい角度や「やわかわ」に見えるポイントを見つけることができました。
ぴよりんができあがるまでの工程や、ぴよりんの集合ショット、断面など、いろいろな角度からぴよりんの魅力が伝わるカットになっていると思います。

動画コンセプト・ポイント

撮影にあたって、事前に何度もデザイナーとカメラマンでどのように撮影をしたら魅力的に表現することができるかを協議しました。
事前の準備や、お客様の準備協力もあってイメージ通りの映像を撮影することができました。
編集の段階でも、必要最低限のカットに絞り込み、写真では表現しきれない”ぴよりん”の細かな動きなども映像を表現することができました。