事例から探せる!UIUXデザイン会社図鑑【2025】 » UIUXデザイン・コンサル会社図鑑 » Goodpatch(グッドパッチ) » 「東急ハンズセミセルフレジ」アプリの
UIUXデザイン事例

「東急ハンズセミセルフレジ」アプリの
UIUXデザイン事例

  • 小売
  • toC
  • ハンズラボ株式会社
「東急ハンズセミセルフレジ」アプリ

引用元:株式会社Goodpatch公式HP(https://goodpatch.com/work/hands-lab)

UIUXを意識したセミセルフレジの設計事例

連日多くのお客さんが訪れる東急ハンズ(現ブランド名:ハンズ)新宿店8Fが導入した、セミセルフレジiOSアプリのUIUXデザイン事例。
手掛けたのは、UIUXデザイン・コンサルの専門会社Goodpatch(グッドパッチ)です。細かく施されたデザインや機能の工夫・こだわりについてご紹介します。

お客様の声
PICK UP!
こんなお悩み・希望をお持ちの方に…

★既存サービスやデジタルプロダクトのUXをよくしてほしい
★多様なユーザーに対応したUIUXデザインを実装したい
★自社の現場に合ったサービス・アプリの設計を提案してほしい

目次
何をUIUXデザイン・コンサルしたのか?

混雑回避を目的としたセミセルフレジ

東急ハンズのセミセルフレジは、ハンズラボ株式会社が開発・導入したセミセルフレジ。2018年から新宿店に導入されています。常時込み合っていた会計待ちレジ列の解消という課題を解決し、お客様のストレス緩和・コスト削減を目指して開発された当プロダクト。支払い方法も、現金・カード・電子マネーと、選択肢も豊富です。

ここがUIUXデザイン・コンサルポイント

迷わず使える
シンプルさを追求したデザイン

ハンズレジアプリ

引用元:株式会社Goodpatch公式HP(https://goodpatch.com/work/hands-lab)

生活雑貨を中心に多岐に渡る品数を取りそろえる人気ホームセンターの東急ハンズ。中でも旗艦店である新宿店は、全国のハンズ店舗の中でも売り場面積が最も広く、客層も老若男女あらゆる世代・国籍のお客様が来店する店舗です。
そんな店舗に設置されるセミセルフレジだからこそ「誰でも迷わず使えるUIUX」を搭載することが最大のミッションでした。

アニメや音声を使うことで、多様な客層に全対応

セミセルフレジ導入の大きな目的の一つは、レジの混雑緩和です。そのためには、お客様が自分自身で迷わずレジを操作し、スムーズに売り場を離れられるようにしなければなりません。しかし、多様なお客様が使用するプロダクトですので、「誰もがわかる」ことが重要です。
そこでGoodpatchは、お客様がボタンをタップしたり、現金やカードを投入したり、といったアクション時に発生する反応を、アニメーションや音声で分かりやすく表現。操作が無事に完了して進行した、と安心をもたらすUXを搭載しました。

また、言葉や文章ではわかりづらい説明や、日本語が読めないお客様のことも考え、アニメーションを見れば視覚的に操作を理解し、使用できるよう配慮しました。

さらに、「セルフレジは操作が難しそうで苦手」という印象を軽減するため、「難しい」というイメージを払拭するようなデザインを意識。全体のフォルムに丸みを持たせ、優先度の高いボタンに自然と目が行くよう、アイコンやアテンションを設定しています。

迷わず支払いができる画面設計

ハンズアプリ支払い画面

引用元:株式会社Goodpatch公式HP(https://goodpatch.com/work/hands-lab)

支払いに関しても「迷わない」設計が徹底されています。
Goodpatchは、誰もが迷わず支払いを完了できるようにするためにもっとも簡単、と思われるフローを調査。「1画面1タスク」を原則にし、表示する情報も「画面を完了させるための指示」「画面の指示を実行するためのアクションボタン」「画面の指示を実行するために確認する詳細・補足情報」の3要素に分類して画面をデザイン。とことんお客様を迷わせない工夫を凝らしています。

お客様だけでなく、従業員視点でのUXも踏まえて設計

レジの混雑緩和を目的に開発されたセミセルフレジですが、リアルタイムで関与するのはお客様だけではありません。Goodpatch(グッドパッチ)は、お客様の会計処理をサポートする従業員のことも踏まえ、どのようなオペレーションが発生するのか?どう目的を達成するのか?を、一連の体験として考慮
レジに並ぶ→袋詰めをする→売り場を離れるといった、すべてのユーザー体験を「サービスブループリント」という手法を使って設計しました。
(サービスブループリント:そのサービスがユーザーに提供されるまでの一連のプロセスを、サービスを提供する側のスタッフやシステムの動きと合わせて可視化した図のこと)

このUIUX事例を手掛けた会社は…?
グッドパッチ
グッドパッチ会社イメージ

引用元:株式会社グッドパッチ(https://goodpatch.com/company/studios)

デジタルプロダクト開発(UI/UXデザイン)を中心に、ブランド構築・新規事業立ち上げ・デザイン組織支援といった、企業のビジネス課題に幅広くコミット。表面的なデザイン・アウトプットの納品ではなく、戦略立案フェーズからクライアントと共にチームを組み、目標の達成を目指して並走してくれるデザインパートナーとして、名だたる企業から厚い信頼を寄せられているUIUXデザイン専門会社です。また、デザイン会社では国内唯一※(2023年7月時点)の上場企業としても知られています。

※情報参照元:日経クロストレンド
(https://xtrend.nikkei.com/atcl/contents/watch/00008/00081/)

グッドパッチ会社イメージ

引用元:株式会社グッドパッチ(https://goodpatch.com/company/studios)

当ページは下記ページの事例を参照しております。
参照元:株式会社Goodpatch公式HP (https://goodpatch.com/work/hands-lab)

3-SERECTIONS
依頼目的から選ぶ
おすすめのUIUXデザイン会社3選

UIUXデザイン会社といっても、それぞれ得意とすることに違いがあります。
まずはUIUXデザイン会社に依頼して何をしてもらいたいのかを考えた上で、企業を選定すると良いでしょう。
ここではUI/UXデザイン会社に依頼する目的別に、それぞれおすすめの会社を紹介します。

システムやアプリの
「使いづらい」を改善したい
Proximo
引用元:Proximo公式HP
(https://www.proximo.co.jp/)
常にユーザー目線に立ち
使いづらいを明確に言語化
実際に既存システムを利用するなど常にユーザー目線に立つことと、徹底したヒアリングを通じて業界特有の「分かりにくさ」「使いづらさ」を言語化。アプリ開発においてはストアのレビューで4.7の高評価を得た実績もあります。
Proximoに依頼した企業例
東京ガス、野村證券、JR東日本など
企業理念やロゴデザインを
刷新したい
グッドパッチ
引用元:グッドパッチ公式HP
(https://goodpatch.com/)
巻き込み型プロセスで
企業の「らしさ」を抽出
社員をプロジェクトに巻き込むプロセスを採用し、企業の「らしさ」を的確に引き出すことを得意とする企業。ユーザー体験をブランド体験へと結びつけ、ブランドが企業全体に自然に浸透する仕組みを構築することに評価を得ています。
グッドパッチに依頼した企業例
Muture、レイヤード、エブリーなど
デザインや実装など
スポットで依頼をしたい
crage
引用元:crage公式HP
(https://crage.co.jp/service/uiux-design/)
イレギュラー相談にも対応し
短期でも品質を落とさない
課題診断やUIデザインなど、スポットでのイレギュラーな相談にも柔軟に対応。既存の素材を活かすことを得意としているため、スポット依頼のような短期間の案件であっても、品質を落とさず実用的な成果の提供が可能です。
crageに依頼した企業例
NEWOLD CAPITAL、ヨコウンなど