イトーヨーカ堂

「レジの前」から「暮らしの中へ」——イトーヨーカドー・ヨーク公式アプリ×Webマガジン、リテールメディアのトータルデザイン

株式会社イトーヨーカ堂

Ito-Yokado Co., Ltd.
「イトーヨーカドー」を中心に、食品スーパー「ヨークフーズ」などを展開する大手小売企業。「信頼と誠実」を信念に、地域に密着した店舗運営を行っています。2020年に創業100周年を迎え、次の100年を見据えた小売業としての挑戦を続けています。

支援前の課題

• 買い物直前だけでなく、購買前後を通じた継続的な顧客接点を築くアプリへと進化させたいと考えていた
• クーポン利用をよりスムーズにし、レジ前の体験と現場オペレーションを改善したかった
• メーカーと共創するリテールメディアとして、店舗の外でも商品の魅力を双方向に届けられるプラットフォームを目指していた
• 構想を理解し、ユーザー体験の設計から開発・実装まで、一気通貫で伴走できるパートナーを探していた

グッドパッチの対応とご支援後の成果

• 購買前後でも顧客とのタッチポイントを創出できるリテールメディアとしての設計をベースにフルリニューアル。クーポン・チラシ・Webマガジンをフラットに並べ、購買前後で使える継続的な接点を実現
• アプリバーコードの提示でポイントクーポンが自動適用される仕組みを実装。レジ前の待機時間や混雑の緩和につながり、現場の負担を軽減
• 紙媒体だった『はとぼん』をWeb化し、アプリに先行してリリース。商品の開発背景やこだわりを伝えるコンテンツでメーカーとの共創を体現
• 要件定義から開発・リリースまでウォーターフォールで一貫支援。リリース初日にダウンロード数50万件を突破

イトーヨーカ堂は2024年3月、メーカーと共創する「リテールメディアプロジェクト」を発足しました。当時イトーヨーカ堂では、フリーマガジン「はとぼん」、店舗での販促物、チラシといった従来型のプロモーションは実施されていたものの、載せられる情報量が限られたり、お客様の反応を十分に確認できなかったことが課題でした。

そこでまずはもともとあった「はとぼん」のWebマガジン化を企画し、その先にリテールメディアを構築することで、店舗での買物以外のシーンでも、お客さまと日常的に接点を持てるプラットフォームを作りたいと考えていました。

特にリテールメディアを作るうえでは、メーカーの方々にも喜んでもらうことを目指したかったといいます。

リテールメディアは小売企業にとっての広告収入源として語られがちですが、私たちの広告出稿主はメーカーの皆さまです。せっかくならお客さまとメーカーの皆さまの両方に喜んでいただき、お客さまの購買意欲が湧く提案や工夫をしたい、というのがスタート地点でした
（イトーヨーカ堂 望月さん）

「はとぼん」は、イトーヨーカドーやヨークで販売する商品の開発背景やこだわり、メーカー商品の食べ比べなど商品の魅力を伝えるコンテンツが満載の紙媒体のフリーマガジンです。もともとは一部店舗でのみ配布されていましたが、Webでも読めるよう公式アプリに先駆けてWebマガジンを先行リリースすることになりました。

紙媒体側でのクリエイティブをアプリ・Webでも併用することが決まっていたため、サイト設計では「ヨーカドー色を前面に出しすぎない」「これまで培われたはとぼんの世界観と馴染む」の2点を軸にデザインの方向性を造っていきました。

記事の表現形式もランキング・漫画・読み物など多様なジャンルを想定していたため、どんなテイストの記事にも対応できる汎用性の高い記事パーツを設計。タイトルや本文、アイコンやタグやシェアボタンなど、それぞれの記事パーツが背景色の濃淡に応じて自動で出し分けられる仕様とするなど、見やすさはもちろん、運用面も考慮した工夫を施しています。

今回のリテールメディアプロジェクトでプロジェクトチームが最も重視したのは「お客さまの購買意欲が自然と湧く」ための顧客体験設計でした。

一般的に、リテールメディアでは、これまで買ったことのないものや食べたことのないものを「こんな商品があるなら買ってみたい」と思い、購入いただくところまでつなげることが大切です。一方でそうした一連の感情の動きや行動を実現するためには、ユーザー体験をしっかりと設計し、機能からデザインまでがシームレスに連携することが求められます。

そうしたことから、表面的なUIだけでなく、開発から顧客体験まで一貫して任せられる会社と取り組みたいと考えていたそうです。

開発会社とデザイン会社が別だと、コミュニケーションに齟齬が生じて、本来イメージしていたユーザー体験が実現しにくくなってしまうんですよね。
その点グッドパッチは顧客体験設計に強く、設計から実装まで一貫して任せられる。それに「ハートを揺さぶるデザインで世界を前進させる」というビジョンを掲げるほど、デザインを大切に考える会社さんなので、私たちが目指すリテールメディアに一緒に取り組めるパートナーだと感じたんです
（イトーヨーカ堂 望月さん）

「店舗以外のシーンでもアプリを使ってもらえる習慣を作りたい」——

そんなご要望を元に、新アプリでは「お買い物循環」をコンセプトに利便性を上げながらも、新しい商品との出会いからお買い物準備、そして振り返りまでロングタームで使えるサービスにするための様々な工夫を設計に随所に盛り込みました。

クーポンアプリとして利用されることが多かった旧イトーヨーカドー公式アプリ。店頭で利用されることが多かった一方、クーポンを探すのに時間がかかり、レジ前の混雑の一因にもなるなどの課題がありました。

リニューアル後のアプリでは、アプリバーコードを提示するだけでポイントクーポンが自動適用される仕組みを採用。レジでクーポンをひとつひとつ探す手間がなくなり、会計をスムーズに進められるようになりました。

あわせて、クーポンの探し方そのものも見直しました。従来の「金額割引クーポンをまとめて適用する」体験から、「欲しい商品に紐づくクーポンを見つける」体験へと大きく設計を変更。UIの設計だけでなく、商品画像やクーポンタイトルの表示ガイドラインを策定し、ユーザーにとって常に必要なものが見つけやすい状態を保てる環境づくりを支援しました。

私たちは「お客さまに損してほしくない」と考えています。クーポンや特売情報を知らずに買い物を終えたら、お客さまは何となく損した気持ちになってしまう。かといってアプリを使うことで買い物に時間がかかっては本末転倒です。買物の手間も時間も省ける、誰も損しない設計を目指しました
（イトーヨーカ堂 望月さん）

「お客さまが損しない状態」を担保した、さまざまな利用シチュエーションに対応できる導線設計

リニューアル後の公式アプリは、全ての機能がフラットな設計にすることで、さまざまなニーズを持ったお客さまが自分の目的に合わせて活用しやすい、誰もが使いやすい設計を目指しました。

来店のきっかけとなるクーポン、献立を考える際に便利なデジタルチラシやメモ機能、オススメの商品や商品の開発背景が分かるWebマガジン「はとぼん.jp」を、それぞれ画面下部に並列のカテゴリーとして並べ、ワンタップでアクセスできる設計に。

また、ファーストビューに店舗の最新情報やお得な情報など「今1番おすすめの情報」をカルーセル表示することで、能動的に情報を探さずとも「お客さまが損しない状態」を実現しています。

また、旧デザインではトップページに常時表示されていた会員バーコードを、ワンタップで表示する仕様へと変更するなど、家で献立を考えるときなど、店頭用のバーコードが不要な場面を想定した変更も大きな決断でした。

例えば、夕飯のメニューを考えようと家でアプリを開く際に、店頭用のアプリバーコードは不要ですよね。頻繁に店にいらっしゃる方、良いものを少量お買い上げされる方、商品について詳しく知りたい方など、お客さまの行動様式やニーズはさまざまです。公式アプリではこうした多様なニーズに応えられるようにコンテンツ量を大幅に増やし、それぞれが求める情報にたどり着きやすいように導線設計を分かりやすくしたかった。
実際、アプリリニューアル後は、自宅など店舗以外の場所でアプリを開く方が増えています。
（イトーヨーカ堂 望月さん）

また今回のアプリリニューアルにおける重要な要件の一つが、誰にとっても使いやすい使い勝手を実現することでした。

その中のユニークな機能として、アプリ上でデジタルチラシを見ながら、気になる商品を切り取って「お買い物メモ」として保存できる機能を提案。紙チラシをデジタル配信するだけでなく、そのチラシをアプリの中で自分の必要なところだけ切り取って保存できる機能です。

これは従来、紙のチラシを切り取って手帳に挟んだり、ペンで丸をつけたりしている方を想定し、それをアプリでも体験できるようにすることで、これまでのユーザーを取りこぼさないようにしました。

画面設計では、スマホの操作に慣れてなかったり、細かい文字が見えづらいお客様でも迷わず使えることを最優先に、細部までルールを定めました。たとえば、最小フォントサイズを明文化し、「文字が小さくて読めない＝使われない」という状況をあらかじめ防ぐデザインにしています。

画面遷移においても、画面全体を覆うフルモーダルは、突然の表示が「操作ミスをしたかも」という不安につながりやすいため極力使用することを避け、ハーフモーダルなどより穏やかな遷移方式を採用しています。

私たちのお客様は50～70代が多く、一般的なアプリユーザーとは使い方やデジタルリテラシーが異なります。そのため、ピクセルやフォントサイズなど、見せ方は何度も細かくやり取りさせてもらいました
（イトーヨーカ堂 堀合さん）

2026年1月にリニューアルしたアプリは、リリース初日にダウンロード数50万件を突破。レジ前の待機列がなくなって混雑が緩和され、現場の負担が軽減。常連のお客さまからは「スムーズに買物できるようになった」、現場のパートやアルバイトの方からは「オペレーションが楽になった」との声が寄せられているそうです。

また、リニューアル後、アプリ会員の 月間お買上金額が9％向上。定量・定性の両面で成果が出ているそうです。

旧アプリからスムーズに移行が進んでホッとしています。アプリ会員の方々の月間お買上金額向上も、アプリを通じた新しい商品との出会いが生まれていることの証左だろうと考えています。
「お客さまに損をさせない、不便を強いらない」という私たちの思いが、きちんとお客さまに届いていると感じます
（イトーヨーカ堂 望月さん）

公式アプリと「はとぼん.jp」のリニューアルによって、価格以外の商品価値を伝えるための土台が整えることができた本プロジェクト。プロジェクト自体は現在も継続しており、他機能との連携をはじめさまざまな機能連携や拡張が予定されています。

当初からグッドパッチの期待値は高かったというお二人。グッドパッチとのプロジェクトで印象に残った点を語ってくれました。

打ち合わせで、いわゆる「捨て案」も含めた情報をたくさん見せていただいたことが印象に残っています。社内で試行錯誤した検討プロセスが全て見えたので、提案内容を見ても「だからこのデザインになったのか」と納得して進めることができきたのがよかったです。
（イトーヨーカ堂 望月さん）

グッドパッチの大好きなところは、「ちゃんと否定してくれる点」です。私たちの「こうしたい」「こうしてほしい」と依頼する内容を「指示」と受け止めず、「ユーザーのためにならないから、それは止めましょう」「AよりもBがいいです。またはCもあります」とプロ目線で答えてくれるのが頼もしかったです。
正直、グッドパッチの皆さんからすれば、言われた通りのものを作る方が楽だと思います。でも我々の提案に対してきちんと否定して、議論して、ワンチームとなって方向性を決めていけたのですごくうれしかったです。
（イトーヨーカ堂 堀合さん）

最後に、今後の展望をお伺いしました。

今回、公式アプリのリニューアルを通じて、従業員自身も意外とイトーヨーカドー・ヨークの商品について知らない、ということに気付かされました。イトーヨーカドーやヨークの従業員は、従業員であると同時に、店にとっては大切な顧客でもあります。
お店で働く彼ら彼女らも含めて、公式アプリの利用を通じて、商品に込めた思いや商品の魅力を知ってもらい、イトーヨーカドーやヨークが皆さまの買いたい店になっていけたらと思います。
（イトーヨーカ堂 望月さん）

人口減少や新サービスの参入で、小売業界も変わらなければいけない局面にあります。私たちは商品の魅力や開発者の思いを伝え、お客さまは値段以外の知りたい情報や役立つ知識を受け取る。売場の外でも継続的にお付き合いできる関係を築いていきたいですね
（イトーヨーカ堂 堀合さん）

本プロジェクトの詳細は、こちらのインタビューをご覧ください。

アプリリニューアルでアプリ会員の月間お買上金額が9％アップ　イトーヨーカ堂が目指す「リテールメディア」の姿とは？

UI/UX Designer：mine、浅野 未央、劉 芃君、小林 菜々恵、内山 航平
Service Designer：大村 桃香、久保 翔一朗、後藤 喜子、shiori
Project Manager：chaki、永田 佳範、髙田 朝
Engineer：池澤 孝治、内田 広紀、加藤 慎一朗、中田 満、工藤 友果
Field Sales：高橋 俊太郎
Producer：三重野 竜司