「カゴ落ち」を徹底的に防ぐ
スマホファーストな新しい決済画面
安宅（GMOペパボ） カラーミーショップのカートJS機能だけ使っていただいているということですが、決済画面はいかがですか。
池田（暮らしかた冒険家） 実は、カラーミーショップさんは、やろうと思えばかなりの部分をカスタマイズできるのに、決済画面だけは色合いもボタンの大きさなども簡単に変更できないですし、どうしても変えられない部分もあって、ちょっと不便だなと思っていました。でも、リニューアルを始めると聞いて。
山林（GMOペパボ） そうなんです。私たちもずっとそこは気になっていたのですが、売り上げに直結する機能なので、少しの不具合も許されず、なかなか改善することができなくて……。
安宅（GMOペパボ） でも10年目の2015年に、さらにこれから10年間サービスを続けるためには、避けられない問題だと思い、リニューアルを始めたんです。
池田（暮らしかた冒険家） 僕たちが、「わざわざ」さんの制作をしているころにβ版のお知らせがきましたね。
安宅（GMOペパボ） そうですね。2015年の7月に新しい決済画面のβ版をリリースししました。
池田（暮らしかた冒険家） 新しい決済画面を見て、素直に「これはいいな！」と思いました。
山林（GMOペパボ） 本当ですか！ すごく嬉しいです。どういったところを気に入ってくださったんですか。
池田（暮らしかた冒険家） まずフラットデザインと言いますか、ボタンが大きかったり、しっかりスマホ対応されていますよね。
山林（GMOペパボ） わかっていただけてうれしいです！ リニューアルをしなくてはいけないと考えた大きな要因が、すでに多くの店舗様で、パソコン経由よりもスマホ経由の売上のほうが上回っているからなんです。
安宅（GMOペパボ） スマホ用のデザインテンプレートなどはたくさん公開しているのですが、肝心の決済画面が10年前からほぼ変わっていなくて……。
池田（暮らしかた冒険家） たしかに、決済画面はかなり古いなと思っていました。どういった過程でこのデザインに行き着いたんですか？
山林（GMOペパボ） まずはやっぱり、ボタンひとつにしても、スマホファーストで「スマホで使いやすいデザインとは？」を徹底的に考えました。
池田（暮らしかた冒険家） あとは、決済画面内のページ遷移がすごく減ってるのもいいですね。
安宅（GMOペパボ） スマホだと、画面遷移はとてもストレスになりますよね。
池田（暮らしかた冒険家） どういった技術で作っているのですか。
山林（GMOペパボ） 「AngularJS」というJavascriptのフレームワークです。操作したら瞬時に画面に反映されて、リアクションが返ってくるようなシステムを心がけて作っています。
池田（暮らしかた冒険家） 合計金額が飛び跳ねるようなアニメーションも楽しいですよね。デザインもシンプルで使いやすいし、この新しい決済画面なら、カスタマイズしなくてもこのまま使いたいなと思いました。でも、まだ新しい決済画面を使うと、使えなくなってしまう機能がありますよね。
安宅（GMOペパボ） 実は、今回のリニューアルは、単にデザインを変更しているだけではなくて、決済機能のシステムを10年使い続けたPHPからRuby on Railsに、すべてリプレイスしていまして。重要な機能から順にリプレイスをして、新しい決済画面で使えるようになっているのです。
池田（暮らしかた冒険家） それはまた大変そうですね……。それで時間がかかっているのですね。
山林（GMOペパボ） そうなんです。10年間スピード重視で機能を追加していたので、システムが複雑になっている箇所もあり……。たぶん、EC業界みんなに言えることじゃないかなとは思うんですが。
安宅（GMOペパボ） すごく時間はかかるんですけど、これから先、継続的に決済画面を改善していくには、柔軟に対応できる仕組み作りが必要だと考えて、システムのリプレイスを行うことに決めました。
池田（暮らしかた冒険家） なるほど。
山林（GMOペパボ） でも、開発しやすい環境になるので、将来的には、購入ボタンの色を変えられたり、今はできない決済画面のカスタマイズもできるようにしたいと考えています。
池田（暮らしかた冒険家） そうなんですね。でも水を差すようですが、カスタマイズできる部分が増えれば増えるほど、制作する側も、ショップを運営する側も、意思決定することが増えて来てしまうジレンマもあって……。できれば、カスタマイズする必要のないほど魅力的な決済画面になったらうれしいです。
山林（GMOペパボ） たしかにそうですね。制作者さんが迷わないインターフェイスや、変更できる項目の選定などには、十分に気をつけたいと思います。
池田（暮らしかた冒険家） 簡単に変えられるのなら、ボタンの色などは変えたいですね。
安宅（GMOペパボ） ショップのデザインと違和感が出てしまうと、購入率が下がるリスクも出てきますもんね。
カラーミーショップグループ コンシューマーチーム 山林茜さん
山林（GMOペパボ） 今回のプロジェクトは、とにかく「購入者」の使い心地にこだわっていて。ショップ運営者や、制作者の方々には、お店の見た目にとことんこだわっていただいて、決済機能は私たちに任せてくださいって言いたいんです。
池田（暮らしかた冒険家） ああ、それはとてもありがたいです。制作者が決済画面で悩まずにすむのは、最高に助かります。
