【後編】「ショップ様のためになる」が判断の軸―インハウスデザイナーの役割と「売れるデザイン」

4画面に分かれていた決済画面を1画面に集約し、決済完了率(CVR)を35%から50%へと改善した、GMOメイクショップの「Smart Checkout」。
前編では、UIの実装・デザインを手がけた大橋さんに、改修の背景や「最短ワンステップ」を実現した設計の工夫 を伺いました。
後編では、リリース後に購入者様やショップ様から寄せられた要望と、実装を担うエンジニア側の技術的な制約を、大橋さんがどのように調整したのかを掘り下げます。さらに、その経験から得たインハウスデザイナーとしての役割や、「売れるデザイン」についての考えを伺いました。 

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

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

異なる立場の声を読み解き、目的に沿った「最善」を探る

—リリース後、購入者様の使いやすさとショップ様の要望が両立しない場面もあったと思います。どのように調整しましたか。

大橋

「Smart Checkout」は「極力タップさせない」設計のため、お届け日や決済方法などをあらかじめ設定して表示していました。ところがリリース後、ショップ様から「お届け日は購入者様に選んでもらいたい」「決済方法はこれを標準にしてほしい」といった要望が出てきたんです。 

こうした要望に応えると、購入者様にとってはタップや画面遷移が増え、離脱につながる可能性があります。
一方で、購入者様の声はショップ様を通じて届くため、要望の背景まで把握できるとは限りません。そこで、ショップ様の要望をそのまま反映するのではなく、「本当に実現したいことは何か」を読み取り、深掘りしながら、プロジェクトメンバーと実装の落としどころを探っていきました。 

—理想とするUIを実現するうえで、エンジニアとはどのような調整が必要でしたか。

大橋

例えば、私たちは「タップを減らしたい」「自動で入力したい」と考えますが、エンジニア側には、ボタンのタップや画面を開くといった操作をきっかけにしなければデータを送れない、といった技術的な制約があります。こうした課題は、都度コミュニケーションを取りながらひとつひとつ「Smart Checkout」の仕様へ落とし込んでいきました。

購入者様やショップ様から寄せられる要望と、実装を担うエンジニア側の技術的な制約。いずれかを一方的に優先するのではなく、それぞれの背景を理解したうえで、目的に沿った最善を設計する。それがデザイナーの役割だと考えています。

—ショップからの要望のなかには、プロダクトの目的や技術的な制約から、反映が難しいものもあったと思います。どのように理解を得たのでしょうか。 

大橋

説明の軸にしたのは、「結果としてショップ様のためになる」という一点です。「一時的に手間が増えたり、購入者様から問い合わせが寄せられたりする可能性はありますが、最終的には売上向上につながります」と、カスタマーサポート(CS)を通じてショップ様へ丁寧にお伝えしていきました。

「Smart Checkout」は、こうしたUI・UXにすれば売上向上につながるという仮説のもとで改善しています。その目的をご理解いただいたうえで、プロダクトの方向性と合致する要望は取り入れながら進めました。

その判断を支えたのが、「makeshop byGMO」を長年利用してくださっているショップ様のデータと、一般的なECの決済画面に関するデータを組み合わせた、私たち独自のナレッジでした。

たとえば、注文情報を折りたたんで表示した際には、「確認するたびに開く手間がある」という声もありました。そのような場合には、画面を短くしたほうがCVRや売上の向上につながるというデータを根拠に、説明を重ねていきました。

大橋

ショップ様の理解を得るためには、社内、とくにCSとの認識共有も欠かせませんでした。リリース当初は、「Smart Checkout」が売上向上を目指すプロダクトであるという目的が、社内に十分浸透していなかったんです。

そこでCSにも背景や狙いを共有し、ショップ様から問い合わせがあった際には、まず「Smart Checkout」の目的を説明してもらうようにしました。その結果、ショップ様にも一定の納得感を持って受け止めていただけるようになりました。

CSがショップ様からの要望を記録するシートにも、目的共有後は「このフィードバックもお伝えしました」「代替案としてこのようにご案内しています」といったコメントが増えました。プロダクトの目的を社内で共有し、全社で支えてもらえた効果だと感じています。

—「Smart Checkout」のプロジェクトを通じて、デザイナーとしてどのような気づきがありましたか。

大橋

一番大きかったのは、「リリース後こそが肝要だ」と実感したことです。仮説をもとにつくったものをリリースして終わりではなく、その後の反応を見ながら改善を続けることが重要だと感じました。設定一つをとっても、購入者様には喜ばれる一方、ショップ様からは賛否が分かれるなど、想定とは異なる反応が多くあったんです。

このように、当初の仮説とは異なるフィードバックもありましたが、言葉の裏にある意図を汲み取り、デザインへ反映してブラッシュアップを続けることが大切だと学びました。

また、自分が提案・作成したUIによって、ショップ様の売上やCVRが向上するという明確な結果が出たことも、私にとって大きな経験でした。

デザインの成果を数字で可視化するのは簡単ではありません。それでも、数字を意識し、事業の成果につなげることが、事業会社にいるインハウスデザイナーの役割なのだと改めて感じました。

売れるデザインは、王道と細部への思いやりから生まれる

—ずばり、「売れるデザイン」とはどのようなものなのでしょうか。

大橋

結論から言うと、一般的で王道のデザインが一番売れると思っています。「ECサイトといえば、この形だよね」と誰もが直感的に理解できるデザインです。

ショップ様のなかには、独自性を出すためにオリジナルのデザインを採用する方もいます。
しかし、写真の見せ方やカートボタンの位置、ページ遷移などが一般的なECサイトと大きく異なると、購入者様が迷い、離脱につながる可能性があります。「ログインは右上にある」といった、使い慣れた王道の設計が、結果として最も使いやすく、売れるデザインになるのだと思います。

そのうえで、ショップ様らしい価値や世界観は、細かな文言などに表れると考えています。
たとえば「makeshop byGMO」では、ショップ開設用のアカウント作成が完了した画面のボタンを、「管理画面にログイン」から「早速ショップを作ってみる」へ変更しました。
文言一つでも、「お、できた。じゃあ、作ってみるか」と使う人の気持ちを後押しできます。こうした細部にこそ、使う人への思いやりが表れると思うので、相手の気持ちになって考えることはとても大切ですね。

—デザイナーを取り巻く環境が変化するなか、今後、インハウスデザイナーとしてどのような役割を担っていきたいですか。

大橋

数字を通じて事業に貢献できるデザイナー、そしてデザインチームでありたいと思っています。そのためには、市場や購入者様と対話し、実際に人と会って得た気づきをデザインへ反映し、成果につなげていく必要があります。

最近、自社サービスを出展した大型展示会で、2日間ブースに立ち、来場者の方と直接お話しする機会がありました。課題を伺いながら、自社サービスで支援できることをご案内するという、普段の制作業務だけでは得にくい経験でした。セールスと同じ現場に立ち、生の声を聞き、反応を観察できたことは大きな収穫でしたね。
チラシやブースのデザインがどのように見られ、使われているのかも、現場に立つことで初めて気づけます。自社サービスを利用している方や、興味を持ってくださる方と直接会うことの大切さは、「Smart Checkout」で得た「リリース後こそが肝要」という学びにもつながっています。

AIが普及しても、最終的に判断するのは人間です。使い勝手や使う人の気持ちを汲み取り、細かな表現まで判断できるデザイナーでありたいと思っています。

大橋さんが2日間ブースに立った、自社サービスの展示会出展の様子

—最後に、同じデザイナーの方へメッセージをお願いします。

大橋

3つあります。

1つ目は、数字を意識すること。とくに事業会社にいるインハウスデザイナーは、自分が提案したデザインを、コンバージョンなどの事業成果につなげる視点が必要です。 

2つ目は、リリース後こそが肝だということ。仮説をもとにつくったものをリリースして終わるのではなく、その後のフィードバックを汲み取り、改善を続けることが重要です。今回のプロジェクトを通じて、改めて強く感じました。 

3つ目は、使う人の気持ちになって細部にこだわること。その積み重ねが、結果につながっていくのだと思います。

まとめ

大橋さんがたどり着いた「売れるデザイン」の答えは、王道を外さず、細部の文言に使う人への思いやりを込めることでした。購入者様やショップ様から寄せられる要望と、実装を担うエンジニア側の技術的な制約。その背景を読み解き、目的に沿った最善を探り続ける姿勢が、CVRの改善とショップ様の売上向上につながっています。

また、デザインは作って終わりではありません。リリース後も使う人の声と数字に向き合い、改善を続けること。それこそが、事業に貢献するインハウスデザイナーの役割だと、大橋さんは語ります。

未経験からのキャリアや、「Smart Checkout」の改修背景・UI設計について語った前編も、ぜひご覧ください。

▼【前編】決済画面のリニューアルでCVR35%→50%に改善 GMOメイクショップ・大橋有理が語る、「最短ワンステップ」を実現したUI設計の舞台裏

ブログの著者欄

技術広報チーム

GMOインターネットグループ株式会社

イベント活動やSNSを通じ、開発者向けにGMOインターネットグループの製品・サービス情報を発信中

採用情報

関連記事

KEYWORD

TAG

もっとタグを見る

採用情報

SNS FOLLOW

GMOインターネットグループのSNSをフォローして最新情報をチェック