クロスオーダー｜発注画面のデザインリニューアルの舞台裏

クロスマートでUIデザインを担当している大島です！

先日、弊社が飲食店向けに提供する発注ツール「クロスオーダー」の全画面を対象としたデザインリニューアルを行いました。今回のテックブログでは、リニューアルに至った背景やデザインにまつわる制作秘話をお伝えしたいと思います✨️

🧐 リニューアルを実施した背景

「クロスオーダー（以下、XO）」は、食品卸と飲食店間の仕入れ業務をスムーズに行うための受発注ツールです。今回のリニューアルの対象となるのは、厨房やバックヤードで働く現場スタッフであり、仕込みや接客の合間にスマートフォン片手で素早く操作できる使い勝手が求められてきました。

サービス開始から５年、利用者から寄せられる機能要望が増える一方で、社内からも「デザインをよりモダンに刷新したい」という声が上がり始めていました。そんなタイミングでシステム更新の必要性も高まったことで、リニューアルプロジェクトが始動しました！

🔍️ 調査・リサーチフェーズ

まずは過去に実施したNPSの振り返りや、利用ユーザーへのインタビューを通じて現場の声を収集することで、課題やニーズ、逆に変えてはいけない要素を整理しました。

そこで見えたのは、「UIを大きく変えることが正解とは限らない」ということです。

例えば、ある店舗では「XOを開いた時点で頼む商品は決まっている」「すぐ操作したい」といったスピード重視の声がある一方、別の店舗では「棚卸しや発注漏れも含めて管理をラクにしたい」「XOで新しい商品を見つけたい」といった拡張的な使い方を望む声もありました。

現場ごとに求める方向性が異なることから、最終的には見た目の刷新や新機能の拡充ではなく、現場のリズムを壊さずに使いやすくすることを第一に設計を進める方針に舵を切りました。

💡 デザインの方向性と課題設定

リサーチをもとにプロトタイプを作成し、店舗でのユーザビリティテストを複数実施しました。意図通り操作できるか、UI変更がストレスになっていないかを確認し、リニューアルにふさわしい「新しいクロスオーダー」の画面が出来上がりました。

設計していくうえで心がけた3つの軸

“いま必要な情報”がわかるレイアウト

プライマリーカラーの使い所を精査し、判断に必要な情報を一目で把握できるよう整理しました。全体的にコントラスト比を見直し、価格などの視認性を向上させています。
主要機能の導線改善

例えば、「注文履歴」と「再注文」は過去の注文データを活用する機能ですが、以前は導線が離れていました。フッターナビを導入するタイミングで履歴確認からそのまま再注文へ進めるスムーズな操作体験を実現しました。
PC・タブレットユーザーへの配慮

これまでスマホユーザー中心に設計されてきたため、PCでの操作性は十分ではありませんでした。単純なレスポンシブ対応にとどまっていた部分を見直し、PCでも快適に操作できるよう調整しています。

特にこだわったパーツについて

XOの顔となる「商品カード」は、特にこだわった要素の一つです。

商品ごとに異なる情報をひと目で正しく把握してもらう必要があるため、ボタンのステータス変化やボーダーカラーの強弱の設計など、随所にこだわりを詰めました。また、現場での片手操作を前提に、タップミスを防ぐための十分な余白を確保しつつ、数量入力ボタンは親指が届きやすい位置に配置変更しています。商品名・価格・単位・発注数といった主要な情報は、視線の流れに沿って自然に認識できるように配慮しました。