【前編】決済画面のリニューアルでCVR35%→50%に改善「最短ワンステップ」を実現したUI設計の舞台裏 / 開発者向けブログ・イベント

ECサイトで商品をカートに入れたものの、入力や画面遷移の多さから購入を途中でやめてしまう「カゴ落ち」。
EC事業者にとって、売上を左右する大きな課題の一つです。
GMOメイクショップ株式会社が運営するECサイト構築サービス「makeshop byGMO」では、この課題を解決するため、4画面に分かれていた決済フローを1画面に集約した「Smart Checkout」を開発。決済完了率（CVR）を35％から50％へと改善しました。
このプロジェクトでUIの実装・デザインを担ったのが、インハウスデザイナーの大橋有理さんです。前編では、大橋さんのキャリアをはじめ、「Smart Checkout」を開発した背景、UI設計で重視したこと、そしてリニューアルによって得られた成果について、お届けします。

大橋有理（おおはし・ゆうり）｜GMOメイクショップ株式会社　 makeshop事業本部営業部制作チーム

2004年、未経験で制作会社にアルバイト入社し、デザイン・コーディングから動画編集まで幅広く経験。リーマンショックによる会社解散を経て、2009年にEC事業会社へ。ECシステム開発とECサイトの受注制作に約10年携わったのち、事業会社のインハウスデザイナーを志してGMOメイクショップに入社。現在は同社のデザイナーとして、「makeshop byGMO」の決済画面「Smart Checkout」のUI設計などを手がける。

制作会社での経験を経て、事業会社のインハウスデザイナーへ

—まず、大橋さんのこれまでのご経歴を教えてください。

大橋

「これからはWebの時代だろう」と考え、2004年に未経験で制作会社へアルバイト入社したのが始まりです。当時はパソコンの電源の入れ方すらわからないほどでしたが（笑）、そこからデザイナーとしてのキャリアを歩み始めました。

デザインからコーディング、動画編集まで、本当にビシバシ鍛えられました。わからないなりに手を動かすうちにスキルが身についてきた頃、リーマンショックの影響で会社が解散することになったんです。

その後、2009年にEC事業会社へ転職しました。ECシステムの開発やECサイトの受注制作を手がける会社で、約10年間、クライアントワークを中心に経験を積みました。

仕事を続けるなかで、今度は事業会社のインハウスデザイナーとして、自社の事業そのものを育ててみたいと考えるようになりました。ちょうどGMOメイクショップに知り合いが2人いたこともあり、そのご縁から入社を決めました。

「最短ワンステップ」を目指した、決済画面リニューアルの背景

▼Smart Checkout(スマートチェックアウト)詳細はこちら

—今回手がけられた「Smart Checkout（スマートチェックアウト）」とは、どのようなものなのでしょうか。

大橋

従来の「makeshop byGMO」の決済画面は、「購入確認」「配送設定」「決済方法の選択」「完了」という4つの画面に分かれていました。画面遷移や入力の負担が大きく、購入者様が途中で離脱する「カゴ落ち」が課題になっていたんです。
一方、競合サービスでは、ワンステップで決済できる体験が主流になりつつありました。こうした市場の変化を受け、4つの画面を1画面に集約したのが「Smart Checkout」です。

「makeshop byGMO」はショップ様向けのサービスですが、決済画面を実際に操作するのは、そのショップを利用する購入者様です。楽天やAmazonなどの大手プラットフォームでワンステップ決済が定着するなか、購入者様にとってわかりやすく、手間の少ない決済体験がより重視されるようになっていました。

ただ、決済画面はお金を扱うため、信頼性が求められる重要な画面です。長く続くサービスのなかで多くの機能が積み重なっており、改修には膨大な工数が見込まれました。そのため、課題を認識しながらも、なかなか着手できない状況が続いていたんです。

その後、ワンステップで決済できるサービスがさらに広がり、全社的にも「このままではまずい」という危機感が高まったことで、改修計画が動き始めました。私自身も、「makeshop byGMO」が支える流通額を考えると、決済画面には大きな改善余地があると感じていたため、納得感を持ってプロジェクトに参加できました。

—大規模な改修を、どのように進めていったのでしょうか。

大橋

従来の決済画面には大きな改善余地があったため、まずはできるところから刷新しようという認識で進めました。すべての機能をそろえてから公開するのではなく、一部の決済方法が使えないといった制約を残した状態でリリースしています。完璧を待っていると、公開がどんどん遅れてしまいますからね。

対応可能なショップ様から段階的に導入し、対象範囲を広げていきました。リリース後も追加開発を続けることが決まっていたため、今後複雑な機能や画面が加わっても、UIの統一感を保てるよう、拡張性を意識して設計しました。

「迷わせない、タップさせない」を貫いたUI設計

—デザインの方向性は、どのように固めていったのでしょうか。

大橋

企画・設計段階では、競合サービスを参考にしながら、「こうなったらいい」という理想を、いったん仕様を度外視して出し合っていました。それをPMが整理し、大枠が固まりつつあった段階で私が参加しました。

私が担当したのは、UIの実装とデザインです。大枠は決まっていたものの、細かな方向性までは固まっていなかったため、デザインを提案しては改善するというやりとりを重ね、形にしていきました。

設計の判断軸の一つになったのが、競合サービスのUIです。さまざまな決済画面を集め、パーツの配置や幅など、細かな部分まで分解してリサーチしました。「多くの人に使われているサービスのUIには、使いやすさにつながる理由があるはず」という仮説のもと、良い点を取り入れながら、「makeshop byGMO」ならではのデザインへ落とし込んでいきました。

—多くのショップ様が利用するサービスの決済画面を設計するうえで、どのような点を意識しましたか。

大橋

決済画面だからこそ、「操作する人が安心して使えるか」を大切にしました。購入者様を不安にさせないよう、情報の出し方や見せ方、文言をできるだけわかりやすくすることを意識しましたね。

画面を行き来させない動線も意識しました。たとえば、決済画面を開いたままモーダルウィンドウを表示し、その中で必要事項を入力すると、閉じた際に内容が反映される仕組みにしています。

また、情報量が多い項目は最初から折りたたんで表示し、前回購入時の決済方法や各種情報をあらかじめ設定しておくなど、利便性を保ちながら入力の手間を減らしました。

スマートフォンでの買い物が主流になり始めた時期だったため、スマートフォンでの使い勝手も重視しました。一般的な画面サイズで必要な情報がどこまで見えるか、画面が長くなりすぎないかといった点にもこだわっています。こうして「クリックやタップをできるだけ減らし、1画面で決済を完了させる」というコンセプトを一貫して追求したことが、CVRの向上につながったと考えています。

—リニューアル後、数値にはどのような変化がありましたか

大橋

段階的に導入したため、対象店舗が少なかった初期は、目立った改善が見られませんでした。ただ、切り替えるショップ様が増えるにつれて、数値は徐々に好転していきました。

最終的に、CVRは旧画面の35％から50％へと改善しました。正直なところ、「そこまで変わるのか」と驚くほど、想定以上のインパクトでしたね。私自身にとっても大きな発見でしたし、プロジェクトメンバーだけでなく、全社的にも成功を実感できる結果になりました。