ECサイトのデザインに合った決済画面をノーコードで直感的に作成、「リンクタイプ Plus」にオリジナルデザイン機能を追加

非エンジニアでも決済機能を簡単に導入できる「リンクタイプ Plus」

オンライン決済はECサイトになくてはならない機能ですが、利用者の多いクレジットカード決済の導入をする場合、不正対策としてEC事業者には国際セキュリティ基準「PCI DSS」への準拠またはカード情報の非保持が求められます。

GMO-PGは、決済代行事業におけるオンライン総合決済サービス「PGマルチペイメントサービス」にて、カスタマイズ性の高い開発を必要とする「OpenAPIタイプ」とEC事業者がカード情報に触れることなく安全に決済できるクレジットカード情報非通過型「リダイレクト（リンク）型」の接続方式「リンクタイプ Plus」を提供しています。

「リンクタイプ Plus」は2008年から「リンクタイプ」として提供してきました。「リンクタイプ」では、決済画面の設定において専門的なプログラミングの知識や技能が必要なうえ、決済手段を追加するごとに複数のファイルを作成・アップロードする手間がかかっていました（2025年春にサービス終了予定）。そこで2019年から提供を開始した新モデルの「リンクタイプ Plus」では、決済画面における決済手段・デザインなどの要素を、すでに用意している項目の中から選択するだけで設定できる仕様に変更し、専門的なプログラミングの知識や技能がなくても決済機能を簡単に導入できるようにしました。

加盟店様が自ら決済画面を構築する必要がないという点で「リンクタイプ Plus」は、高い評価をいただいています。しかしながら、あらかじめ用意した32パターン（デザインパターン4種類×カラーパターン8色）の中から決済画面のデザインを選択する形式のため、加盟店様のECサイトと決済画面のデザインイメージ（トンマナ）が近づけられない場合もあります。そのため、エンドユーザーが違和感を感じ、決済画面から離脱することを加盟店様が懸念するケースもありました。

ECサイトにフィットした決済画面が作れるオリジナルデザイン機能が登場

「リンクタイプ Plus」のデザインパターン

そこで今回、加盟店様がセキュリティ面においても安心して運営しながらECサイトにおける決済画面までの統一感を持たせられるよう、「リンクタイプ Plus」にオリジナルデザイン機能を追加しました。この新機能は、開発チームが自らサービスの進化に挑んだもので、営業担当とも連携して実際にご利用いただいている加盟店様の声を形にして、2024年5月28日にリリースしました。専門的なプログラミングの知識や技能がなくても、自社サイトのイメージに合わせたオリジナリティ高いデザインの決済画面を加盟店様が自ら実装できるようになります。

今回の機能を導入した加盟店様のなかには、早々に変化が見られた例もあったと、今回の開発をリードしたシステムエンジニアの松尾 太亮は言います。

「今回のオリジナルデザイン機能追加をご利用いただいた加盟点様の中には、CVR（コンバージョン率）が機能導入前後2か月平均の比較で3.7ポイントも向上した例もございました。オリジナルデザイン機能により、以前よりもECサイトと決済画面が連続性のあるデザインになったことで、エンドユーザーに与える不信感などが改善されたことが一因かと考えます。」

このようにオリジナルデザイン機能は、エンドユーザーの決済時の離脱でお悩みの加盟店様にはぜひ試していただきたい機能となっています。

さらに、「オリジナルデザイン機能を実現するにあたり、ただデザインのバリエーションを増やすだけではなく、エンドユーザーのUX（ユーザーエクスペリエンス）向上に注力しました。化粧品、アパレル、クラウドファンディング、保険、電子コミック、学習塾、レンタカー予約、トレーニングジムなど、物販・サービス問わず様々な商材を扱う40に上るオンラインショッピングサイトをつぶさに調査・分析し、シームレスな決済画面を実現しました。加盟店様はマウスの操作で設定していくだけで、自社ECサイトのイメージに合ったUXのよい決済画面を作り上げていただけます」と胸を張ります。

システムエンジニア　松尾 太亮

エンジニアが一から開発したような決済画面を実現する設定項目

オリジナルデザイン機能では上図のような決済画面を作成することができます。全部で150ほどの設定項目を用意しているので、まるでエンジニアが一から開発したような、こだわった決済画面を作り上げることが可能です。

オリジナルデザイン機能の設定画面

上図は、オリジナルデザイン機能の設定画面です。左が設定エリア、右がプレビューエリアとなっています。設定エリアの左サイドに並んでいるのが設定項目タブで、一番上には決済機能全体を統一したイメージで表現するための「全画面共通」タブがあります。その下に「決済」「カード編集」「エラー」と３つの大項目があり、これらの配下に「決済選択画面」「確認画面」「完了画面」「カード編集画面」「確認画面」「完了画面」「エラー画面」と7つの設定タブを置きました。加盟店様は、これらの項目を上から順に設定していけば画面をデザインできます。

例えば、「全画面共通」タブでは、文字色や背景を何色にするか、全体的な要素配置をどうするか、サイトのシンボル・イメージとなるファビコンを利用するか、ヘッダにコーポレートロゴやブランドロゴを表示するか、決済プロセスを視覚化するプログレスバーを挿入するか、といった設定をします。「返品・交換・キャンセルについて」のような、お客様に伝えたいメッセージがある場合は、メッセージエリアをプラスすれば簡単に実現できます。

設定していった内容は、右のプレビューエリアに反映され、デザインを即時に確認できます。これにより、設定でどう変わるかを目で見てすぐに確認でき、イメージに合わなければ項目を戻りながら改めて変更が可能です。もちろん設定し終えた画面を本番サービスに反映することも容易です。

ローンチ前には、社内でオリジナルデザイン機能を実際に使って決済画面を作成するデザインコンテストを開催しました。

社内で開催したデザインコンテスト応募作品（スマホ画面のプレビュー）

応募作品は多種多様で、パートナー（社員）自身のオリジナリティが反映された決済画面が集まりました。

ぜひ加盟店様にも触っていただき、自社ECサイトにマッチしたデザインを作ってもらえたらと思っています。

ユーザビリティを意識して設計された管理・プレビュー画面

設定画面の設計に携わったUI/UXデザイナーの斎藤 遥花は、新機能の開発プロセスを次のように振り返ります。

UI/UXデザイナー　斎藤 遥花

「今回のオリジナルデザイン機能では、加盟店様が管理画面でより直感的に操作・設定ができる環境を目指して、試行錯誤しました。左の設定エリアをどう実現するかについて、かなり綿密に検討しました。また操作性を検証するため、1カ月にわたるユーザビリティテストも実施しています。加盟店様の導入担当者を想定し、決済機能の開発に慣れていない数名の社内モニターに何も説明せずに使ってもらい、その様子を観察しました。その結果、設定に没入していただくためには直感的に利用できることが何より重要だと気づき、まず全体設定から始めて詳細設定をして、詳細設定も決済プロセスフローに沿って検討できる現在の構成に落ち着きました。」

最近は、利用者がスマートフォンからECサイトを利用して決済するケースも増えています。「リンクタイプ Plus」のオリジナルデザイン機能は、スマートフォンでの決済機能実装にも対応しています。右のプレビューエリア上部にある「画面切り替え」部分に左から、パソコン、スマートフォン、全画面の順にアイコンが並んでおり、それぞれをクリックするとパソコンでの画面表示、スマートフォンでの画面表示、パソコンでの全画面表示の状態を確認できます。パソコンでも、スマートフォンでも、ECサイトとして統一感のある決済画面を実現したいというときに非常に有効です。

最後に

斎藤は「"こういう機能があったらいい″というアイデアを、開発チームメンバーを含めて広く意見を募り、かゆいところに手が届くサービスの実現をめざしました。その結果プログラミングの知識を必要とせず、どなたにでも直感的な操作で決済画面を作り上げていただけるサービスに仕上がったと思います」と、新機能開発の達成感を語ります。

一方、松尾も「『リンクタイプ Plus』の何よりの強みは、加盟店様がコストをかけずに決済画面を提供できることです。今回、自社ECサイトと親和性の高いオリジナルのデザインを決済画面に追加できる機能が登場したことで、今まで『自社ECサイトと決済画面の連続性が...』と躊躇していた加盟店様にもお勧めできるようになりました。よりよいサービスに進化できたと自信をもっていえるので、使ってみていただければと思います」とアピールしています。

新機能をお使いいただければ、その高い操作性が実感いただけると思います。セキュアかつ低コストに決済機能を実現できる「リンクタイプ Plus」に加わった、ノーコードで簡単・便利なオリジナルデザイン機能、ぜひ一度お試しください。

※本コンテンツ内容の著作権は、GMOペイメントゲートウェイ株式会社に属します。