【UXケーススタディ|スマホアプリ編】グッドパッチに聞いた「生活導線に寄り添うUX」とは?

コープデリ生活協同組合連合会(以下、コープデリ)のスマートフォンアプリ「コープデリ宅配アプリ」のUI/UXについて、中心的な役割を担った株式会社グッドパッチの栃尾行美さんに話をうかがいました。(『Web Designing 2025年10月号』より抜粋)

目次

取り上げるスマホアプリ

コープデリ宅配アプリ

2024年2月にリリースされた、536万人が加入する関東信越1都7県の6生協で構成するコープデリ生活協同組合連合会が提供するスマホアプリ。(株)グッドパッチがパートナーとして携わり、UI/UXを全面的に刷新した。

従来の課題
EC利用率が高まらない。アプリの情報設計が複雑で「使いづらい」というユーザーの声が寄せられていた。

リニューアル内容
カート表示の改善をはじめ、年齢層を問わないユーザーの生活に根ざした使い勝手や体験設計を実現する。

プロフィール

栃尾 行美
株式会社グッドパッチ
クリエイティブディレクター/UI/UXデザイナー


2018年にUIデザイナーとして入社し、現在は30名以上のUI/UXデザイナーが所属するチームを統括。本プロジェクトではクリエイティブディレクターとして、ブランド構築からアプリの体験設計までを管掌するなど、中心的な役割を果たす。
https://goodpatch.com/

楽しく買い物したくなるアプリへと改修

「コープデリ宅配アプリ」は、コープデリでのお買い物をアプリひとつで快適に注文できるスマホアプリです。開発パートナーであるCTC(伊藤忠テクノソリューションズ株式会社)とともに競合プレゼンテーションに臨んだうえで、正式に携わったリニューアルプロジェクトになります。

コープデリでは、ECを利用できる(Webサイト「eフレンズ」とコープデリ宅配アプリ)にもかかわらず、紙の注文書を利用する組合員が大半を占めていました。資源や人件費の観点からも「EC受注割合70%以上」の目標を掲げていたものの、デジタル注文への移行が進まない課題を抱えていました。

また、アプリ注文では「ついで買い」をされることが少なく、Webサイトからの注文に比べて購入商品数や単価が低調で、世代交代が進むなかで若年層のユーザー獲得とEC受注化を目指した既存のデザインにとらわれないプロジェクトが始まりました。

まず本プロジェクトでは、ユーザー調査をはじめ「検討・分析」の工程を重要視しました。競合プレゼン段階から、弊社内でリサーチを行い、市場調査や業界動向を研究し、社内メンバー7名にユーザーインタビューを実施するなど、既存アプリの課題点を徹底調査。正式案件化した後も、プレゼン時の仮説や提案を再検証し、クライアント側とは週2度の定例ミーティングを開き意見交換を重ねたり、月に2度ユーザーテストを行ったりしました。

幅広い年齢層の組合員に受け入れてもらうには、利便性や操作性に加えた「プラスアルファを見つけられるか?」が重要です。いかに「買い物の楽しさ」を提供できるアプリへと改修するかを追求していったのです。

買う楽しさを演出する「カート」機能

今回のアプリ開発で重視した1つが、「ユーザーがどういう場面で使うのか」です。たび重なる検証や分析で見えてきたのが、ユーザーの多くが「コープデリで買うもの」と「近くのスーパーマーケットで買うもの」を買い分けている実態でした。

例えば、近くのスーパーに立ち寄ったユーザーが、「そう言えば、コープデリでは何を注文していた?(注文していないものを買いたい)」となったとき、すぐに確認できるアプリであれば、買い分けの場面でとても便利ですし、アプリの起動機会が増えます。

また、コープデリは商品購入の仕組みが独特で、注文カートに商品を入れておくと、締め切り時間にあわせて自動的に購入扱いになります。この点でも、ユーザーにとって「カートの中身」(購入予定の商品)が確認しやすいと、自然とアプリが生活上の導線に入り込んでくるわけです。

そこで、リニューアルでとりわけ注力したのが、カートの設計です。まずアプリを起動すると、ファーストビューの画面下部には、起動時点でカートに入れてある商品と購入金額が常に確認できるUIへと改善。これで、カートの中身を確認するために、わざわざ下層ページへ辿る手間をなくしました。

商品を選ぶと、カートに商品が入る流れをちょっとしたアニメーションで表現するようにもしました。無機質な商品選択ではなく、さりげなくカートに商品を入れていく楽しみを表現し、「ついで買い」したくなる体験の提供を目指したのです。

何度もユーザーテストを行い検証を重ねながら、この設計思想をベースにした直感的に操作可能なUIを実現していったのです。

操作しやすいファーストビューを実現

コープデリは、毎週決まった曜日・時間帯に宅配される仕組みになります。これまでのコープデリ宅配アプリの利用層は、主に30代を中心とした若年層でした。

一方でコープデリは、一人ひとりの組合員や役職員の誰もが参加し支え合うこと、という理念を大切にした組織です。このアプリも同様で、特定の年齢層に偏らず、どの世代にも便利なアプリとなることが、目指すべき方向性でした。

そこでファーストビューでは、誰にとっても必要な情報が一覧表示され、かつ適切な情報量の状態を目指しました。コープデリには複数の注文方法が存在し、各方法に一定数の利用者が存在するので、すべての方法で等しく注文しやすいUIへと改め、検索窓の下に「カタログ」「注文番号」など6種類の注文方法をアイコンで並べ、選べるようにしました。

UIの左上には、組合員でないと見慣れない日付を含んだ記載を表示しました。ユーザーが、現在注文している商品がいつ宅配されるかをすぐに確認できるよう明記したわけです。

また、タブを設けて「おすすめ」や「お気に入り」などのラベルにあわせて、商品の表示内容も変更が可能です。多様な注文方法や膨大な商品ボリュームを、目的別に分類したすべての選び方や探し方にも対応できるUIを実現しました。

ユーザー調査から、家族の就寝後にベッドの上でスマホを眺める「ながら見」ユーザーが一定数いることがわかりました。そのため、情報の掲載ボリュームは、ユーザーテストを繰り返し、必要な情報が掲載されつつ詰め込み過ぎていない情報量に調整しました。

「ついで買い」したくなるアプリ体験

細かなところを言えば、基本の文字サイズは大きめを意識して、どの世代も読みやすい表示に調整しました。また、誰でも操作しやすいように、タップ領域が親指でも押せるようなサイズ感を大事にしたり、ファーストビューとともに各ページ、それぞれの遷移先のページでも操作フローが複雑にならない情報設計を心がけ、構成しています。

また、一般的なオンラインショッピングサービスの表現で出てくるようなポップアップの多用は控えています。割引などセール対象の商品を扱う「タブ」を用意する一方で、セール感が強く出てくる、押しつけがましい表現はコープデリの理念にも似つかわしくないので、意図的に控えています。情報設計の判断軸は、ユーザーの生活導線において、自然な動きのなかでアプリを用いて買い物ができるUXを念頭に置いています。

「選びやすいとは何か」「楽しんで買えるとは何か」といった、利便性や操作性だけでなく、アプリを通じてユーザーが安心感や信頼感を持って、「使いたくなる気持ち」になる空気感の醸成も重要な要素です。

例えば、テキストの説明だけでなくかわいらしい、ポップな印象のイラストを用いることで、どことなく漂う楽しげな雰囲気をつくり出すようにしました。アプリの操作性といった機能面に加えて、“楽しく”買える気持ちに訴求するUXを目指してきました。

本アプリではメインターゲットや、ユーザー層のボリュームゾーンに寄せた判断を敬遠してきました。本来、共存が難しい異なる世代のそれぞれの要望を実現しようとすることで、エンドユーザーとともにクライアントの持つ理念に沿った開発を実践していったのです。

クリエイティブや世界観を横展開

2024年2月にコープデリ宅配アプリがリニューアルされて以来、コープデリ宅配アプリは、現在までにダウンロード数が80万を超えました。また、利用人数は前年比の130%超えに上昇し、EC利用率も約4割まで高まってきました。

成果とともにアプリで実現した世界観がクライアントに評価されたことで、私たちグッドパッチはアプリ以外のクリエイティブも手がけることになりました。「献立コンシェルジュ」という家族構成にあわせたメニューや商品を提案する別サービスのロゴ作成をはじめ、他の各種キャンペーン用のLP(ランディングページ)、宅配利用者に向けた「eフレンズ」登録キャンペーン用のチラシ作成などです。

コープデリ宅配アプリを公開した後、ユーザーからは、ポジティブな意見として「これまでのコープらしくないね」といった声もいただいています。これまで大切にしてきたコープデリのあり方を大事にしながら、使いやすさだけではないUXへの配慮が、こうした評価や横展開への発展につながっていったのだと考えています。

COLUMN|制作当初の気持ちを必ずメモで残しておく!

本プロジェクトでは、当初こそ、初めて利用する立場で参画していた栃尾さんでしたが、気づけば誰よりもプロジェクトにかかわり、頻繁にアプリと接する立場に。気をつけていたのが「率直に、先入観なく抱いた、第一印象の気持ち」を思い出すことだったそうです。

「これだけアプリのことを考え、触って、調べていると、最初に感じたことを忘れてしまいます。そこで、初めて触ったときの感情や、“こうなっていたらいいのに”という心の動きを必ず書き留めるようにしました。当時の心境を自前でデータベース化しておくと、後で必ず役に立ちます」(栃尾さん)

取材・文:遠藤義浩

  • URLをコピーしました!
目次