Tumblr＋カゴ落ちしない決済画面で作るストレスゼロの次世代ECサイト

　池田さんは、未来をつくる物事のブランディングやウェブサイトの制作を展開している夫婦会社「暮らしかた冒険家」の一員として、これまでにTumblrとカラーミーショップを組み合わせたデザイン性の高いECサイトの構築をしてきました。

　そんな池田さんにカラーミーショプのリニューアル中の決済画面に触れていただきながら、新しい決済画面がもたらす具体的なメリットやこれからのECサイトについて、語っていただきます。

Tumblr＋カートJSで挑戦する、新しいECサイト制作のかたち

安宅（GMOペパボ）　池田さんは、カラーミーショップを使って、ネットショップの制作代行をされているとお聞きしましたが、どんなサイトを作られていますか。

池田（暮らしかた冒険家）　最近だと、3つのネットショップの制作をしています。ひとつは、長野でパンと日用品を販売している「わざわざ」さんです。店主のFacebookやInstagramでの歯に衣着せぬ投稿も人気で、全国にファンがいるお店なんですよ。

安宅（GMOペパボ）　デザインがすごくかっこいいですね。

池田（暮らしかた冒険家）　ありがとうございます。もうひとつは、家づくりもしている福島で三代続く家具屋の「ラビーダ」さんです。いずれはオンラインで家具を売りたいということで、コーポレートサイトのリニューアルを請け負ったんですが、その際に、まずは足がかりとして、店頭在庫管理のためにカラーミーを組み込みました。

最後のひとつは、「ONIBUS COFFEE」というコーヒーショップなんですけど、奥沢で4年、つい最近は中目黒にも出店しました。落ち着いたらオンラインでも売りたいという話になりまして。

山林（GMOペパボ）　知ってます!!　最近すごく話題になっているお店ですよね。

池田（暮らしかた冒険家）　はい。いわゆるサードウェーブ系の牽引役のような存在です。

安宅（GMOペパボ）　すごく素敵なサイトばかりですが、どうやって作っているのですか。

池田（暮らしかた冒険家）　「ラビーダ」さんは、CMSを入れるほどの時間がなかったので、静的サイトジェネレーターを使いました。「わざわざ」さんは、もともと読み物中心で運営していたTumblrと、ネットショップをシームレスに統合しました。「ONIBUS COFFEE」さんの場合は、TumblrにカートJS機能を組みこんでつくっています。

★カートJSとは
カラーミーショップの「カートに入れる」ボタンを、ブログやWordPressなどで書いた記事の中に組み込むことができる機能。カラーミーショップのユーザーは、作成されたJSコードをコピー&ペーストするだけで無料で利用することができる。別名「どこでもカラーミー」。

安宅（GMOペパボ）　「ONIBUS COFFEE」さんは、カートに入れた後の決済部分だけ、カラーミーショップをご利用いただいているということですね。

山林（GMOペパボ）　Tumblrとカラーミーショップを合わせて使うという事例は、これまであまり聞いたことがないのですが、どうしてその方法をとったんですか？

池田（暮らしかた冒険家）　ぶっちゃけると、本気でカスタマイズしようとすると、カラーミーのテンプレートの編集画面が使いづらいこともあり……。

もっとスマートにできる仕組みはないかなと考えた結果、いっそカラーミーショップは、決済機能だけ使って、それ以外は全部Tumblrで構築すれば、開発コストを抑えながら、自由度もデザイン性も高いショップが作れそうだと。小規模ショップならばそれができそうだと思いついたんです。

安宅（GMOペパボ）　おもしろいですね！　最近WordPressを使う事例は多いのですが、あえてTumblrにされたのはなぜですか？

池田（暮らしかた冒険家）　確かにWordPressでもいいのですが、ダッシュボードのインターフェースで挫折してしまう人も多くて。

山林（GMOペパボ）　たしかにTumblrのインターフェイスは、初心者の方にも優しいですよね。

池田（暮らしかた冒険家）　そうなんです。それに、WordPressだとできることが無限にあるので、あれもこれもとオーバースペックな仕様になりがちなんです。Tumblrならば「Tumblrなので、ここまでしかできません」と言えるので、仕様を決めやすいんです。

山林（GMOペパボ）　やれることが限られているからいいんですね。ひとつ気になるのは、Tumblrって、時々表示されなくなったりしませんか？　私が個人的に使っていてそういうことがあって……。

池田（暮らしかた冒険家）　不安定だという印象はそこまでないのですが、以前そういうことが一度だけあって、焦ってお問い合わせをして復旧してもらったことがありました。

山林（GMOペパボ）　それでも便利だから使ってしまいますよね。ショップ運営をされる方が、それらの良し悪しを理解したうえで、それでもTumblrで運営しようと判断されるなら、そちらで制作するのもありですね。

池田（暮らしかた冒険家）　そうですね。でも、カラーミーショップさんとしては、ぶっちゃけ公式のデザイン編集画面を使ってもらいたいんじゃないですか？

安宅（GMOペパボ）　いえいえ、そんなことありません。カラーミーショップは、どんなサービスとも連携できる環境を作ることが重要だと考えているのです。TumblrでもWordPressでも、そのほかのCMSでも、お客様が使いたいものを使っていただければいいと思っています。

池田（暮らしかた冒険家）　なるほど、怒られるかなと思って心配してました（笑）。

「カゴ落ち」を徹底的に防ぐ
スマホファーストな新しい決済画面

安宅（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ペパボ）　今回のプロジェクトは、とにかく「購入者」の使い心地にこだわっていて。ショップ運営者や、制作者の方々には、お店の見た目にとことんこだわっていただいて、決済機能は私たちに任せてくださいって言いたいんです。

池田（暮らしかた冒険家）　ああ、それはとてもありがたいです。制作者が決済画面で悩まずにすむのは、最高に助かります。

コンテンツ配信に集中できる環境提供で
10年先もクリエイティブなECサイトを支援する

池田（暮らしかた冒険家）　カートに入れた後の購入率の改善をお任せできるというなら、Tumblr＋カートJS機能という試みであれば、表側はかなり自由になりますし、僕としては完璧です。そもそもショップは運営のほうが重要なので、浮いたリソースを運営に回せるのはショップにとってメリットが大きいのではないでしょうか。

安宅（GMOペパボ）　ネットショップが普及してから10年、20年経ちますし、新規にお店を出される方は大変な時代になってきましたよね。

池田（暮らしかた冒険家）　検索やSNSなどツールは環境もどんどん変わりますしね。最近だと、無料サービスで気軽にECサイトを作って売るのもアリだと思うんですが、どのみちECサイトへ集客するためにはメディア化していく、魅力的なコンテンツを発信する必要があると思うんです。

安宅（GMOペパボ）　確かに。ブログやSNSの登場で、情報発信のハードルは下がっていますよね。すてきな写真、コンテンツがあれば十分にファンを集められる時代になっています。Instagramの人気アカウントが、フォロワーに向けて何か売ってみようという動きも出てきていますよね。

池田（暮らしかた冒険家）　あとは、最初から海外を視野に入れていらっしゃるクライアントも多いです。そういう意味でも、Tumblrなら相性もいいのかなと考えています。

安宅（GMOペパボ）　ターゲットを海外に広げるということですね。たしかにTumblrは相性が良さそうです。

池田（暮らしかた冒険家）　ですから、どうかカートJS機能はなくさないようにしてください！

安宅（GMOペパボ）　もちろんです！カラーミーショップは、価格の安さと使いやすさでずっと選んできていただいているという自負がありますので、私たちは、あくまでも初心者の方に使いやすいサービスでありたいとは思っています。

一方で、池田さんのような上級者の方々には、カートJSのようなカスタマイズ性の高い機能と、購入者が買いやすい決済画面の提供をさせていただいて、あとは、自由に作っていただきたいと思っています。

山林（GMOペパボ）　ですから、カートJSはなくなりません！　ご安心ください。

池田（暮らしかた冒険家）　安心しました（笑）今日お話をお聞きして、決済画面のリニューアルや今後のサービスの改善にすごく期待が持てました。今日はありがとうございました。

安宅（GMOペパボ）　こちらこそありがとうございました。（了）