日本でランディングページに決済機能を実装する方法とは?コンバージョンを高めるポイントも解説

Checkout
Checkout

構築済み決済フォームである Stripe Checkout で購入完了率を高めましょう。Checkout をウェブサイトに埋め込むか、Stripe がオンラインで提供するページを利用することで、単発購入でも、サブスクリプションでも、簡単かつ安全に支払いを受けることができます。

もっと知る 
  1. はじめに
  2. ランディングページに決済機能を導入する方法
    1. 決済代行業者を利用する
    2. LP 作成ツールの決済機能を利用する
    3. 決済機能を自社で開発する
  3. ランディングページで用意すべき決済手段
  4. 決済代行業者を選ぶ際の注意点
    1. 決済手段
    2. コスト
    3. 安全性
  5. ランディングページに決済機能を導入する手順
    1. 決済代行業者と契約する
    2. 決済ボタンを作成する
    3. 決済ボタンのコードを埋め込む
    4. テストの実施とページの公開
  6. ランディングページでのコンバージョンを高めるポイント
    1. 入力項目を減らす
    2. 複数の決済手段を提供する
    3. ワンクリック決済を実装する
    4. オートフィル機能などを実装する
    5. 適切なタイミングで金額を提示する
  7. Stripe Checkout でできること

EC 事業者にとって、顧客への快適な決済体験の提供は、決済機能の導入前に考慮しておくべき重要課題です。顧客の購入意欲が最も高くなる瞬間に、そのまま決済までを完了してもらうには、フォーム一体型のランディングページ (LP) が欠かせません。ランディングページでスムーズに支払える仕組みが設けられていれば、カゴ落ちの防止にもつながり、コンバージョン率の向上が期待できるでしょう。

本記事では、ランディングページにおける決済機能の導入をテーマに、日本の EC 事業者が決済代行業者を選ぶ際の注意点や、導入手順、コンバージョンを高めるためのポイントなどについてわかりやすく解説します。

目次

  • ランディングページに決済機能を導入する方法
  • ランディングページで用意すべき決済手段
  • 決済代行業者を選ぶ際の注意点
  • ランディングページに決済機能を導入する手順
  • ランディングページでのコンバージョンを高めるポイント
  • Stripe Checkout でできること

ランディングページに決済機能を導入する方法

EC サイトを訪問中のユーザーがランディングページで決済を完了できるようにする方法には、以下の 3 つが挙げられます。

決済代行業者を利用する

1 つ目は、今日最も一般的な導入方法として多くの企業によって支持されている、決済代行業者を利用する方法です。代表的な決済代行業者には Stripe などが挙げられ、日本国内の EC 事業において支持されています。

サービス内容としては複数の決済機関との契約に始まり、情報管理システムの一本化などが含まれます。この方法の場合、事業者は独自で決済システムを開発、構築する必要はありません。そのため、決済機能の導入に多大な労力をかけることなく、クレジットカード決済コンビニ決済などの複数の決済手段をスピーディーに導入することが可能です。

なお、初期費用および月額利用料金、決済手数料などについては、各決済代行業者で異なります。よって、利用時に生じる費用などの料金体系、具体的なサービス内容、導入可能な決済手段の種類について事前に確認し、費用対効果を見極めたうえで最適なものを選ぶことが大切です。

LP 作成ツールの決済機能を利用する

LP 作成ツールには、決済機能がもともと搭載されているもの、任意で追加できるものがあります。LP 作成ツールの場合、ランディングページの作成から決済機能の導入まで、1 つのツールで完結できる点がメリットです。

また、LP 作成ツールであれば、プログラミングの知識がなくても既に用意されているテンプレートやデザイン、パーツを組み合わせることでランディングページに決済機能を実装できます。そのため、小規模のオンライン講座コンテンツ販売などに適しています。

ただし LP ツールによっては、事業者が導入したい決済手段が提供されていない場合があるため注意が必要です。

決済機能を自社で開発する

決済代行サービスや LP 作成ツールを利用せずに、独自で決済機能を開発することも可能です。この方法は「スクラッチ開発」と呼ばれます。スクラッチ開発の場合、既存のソースコードを使わずにデザインや機能をゼロから設計することで、オリジナルな決済ページが構築できます。そのため、独自の決済体験の提供による他社との差別化を図ることができます。

ただし、この方法では土台となる既存の枠組みやソースコードは一切使用しないため、開発に膨大な時間と費用がかかるほか、社内のエンジニアチームや外部の協力会社との強固な連携体制が求められます。したがって、比較的大規模な EC サイトを除いては、安全面やコスト面に優れた決済代行業者のサービスや、LP 作成ツールを利用するのが望ましいと考えられます。

ランディングページで用意すべき決済手段

EC 事業を成功に導くためには、ただランディングページに決済機能を組み込めばよいというわけではありません。ここでは総務省の資料を参考にしながら、ランディングページへの導入が推奨されている決済手段について見ていきましょう。

同資料によると、日本国内における各 EC 決済手段の利用率は以下のとおりです (複数回答)。

  • クレジットカード決済: 79.8%
  • 電子マネー決済: 43.5%
  • コンビニ決済: 33.7%
  • 銀行・郵便局の窓口・ATM での支払い: 23.0%
  • インターネットバンキング: 23.0%
  • キャリア決済: 16.3%
  • 代引き (代金引換): 16.1%

上記のデータを見てみると、クレジットカード決済、電子マネー決済、コンビニ決済が 3 割を超えており、EC サイトにおいて特に需要が高いことがわかります。そのため、これら 3 つの決済手段については、最優先に対応すべきと考えてよいでしょう。特に、クレジットカード決済は利用率が約 80% と、どの決済手段と比べてみてもはるかに高いことから、EC サイトへの導入は不可欠といっても過言ではありません。

ただし、何らかの理由によってこれらの決済手段の利用を控えたいと考えるユーザーもいます。したがって、決済手段はターゲット層の決済ニーズを見極めたうえ、慎重に選定することが大切です。たとえば、銀行口座さえあれば誰でも利用可能な銀行決済を導入した場合、シニア世代への効果的なアプローチが期待できます。

決済代行業者を選ぶ際の注意点

ここからは、最も一般的な決済機能の導入方法である、決済代行業者を利用するケースを想定して解説していきます。ランディングページへの決済機能の導入を目的として、代行サービスの利用を検討する際は、以下の点に注意しながらどの業者を選ぶべきかを総合的に判断する必要があります。

決済手段

購入機会の損失を防ぐには、多様な決済手段を用意しておくことが大切です。そのため、クレジットカード決済はもちろんのこと、クレジットカードを持たない顧客でも安心して支払いができるよう、コンビニ決済や銀行振込などが利用可能な決済代行業者を検討することをおすすめします。

コスト

初期費用や月額利用料、決済手数料などの料金体系を必ず確認しておきましょう。たとえば、月額利用料がかからない決済代行業者でも、決済ごとに発生する手数料の比率が高く設定されている場合があります。そのため、トータルコストを試算したうえ、月々の売上予測と比較しながら費用と売上のバランスをよく考えることが大切です。小規模なビジネスであれば、月額利用料のような固定費が発生しない決済代行サービスが一般的に推奨されています。

安全性

高度なセキュリティ対策を講じることは EC 事業を行ううえで非常に重要です。もしもクレジットカード情報の漏えいによってトラブルが発生してしまうと、社会的信用は大きく損なわれ、売上にも悪影響を及ぼします。したがって、 決済環境の安全性を確保するには、クレジットカードの国際セキュリティ基準である「PCI DSS」に準拠していることや、カード情報のトークン化に対応していることをあらかじめ確認しましょう。

ランディングページに決済機能を導入する手順

ここでは決済代行業者を利用する場合において、ランディングページに決済機能を実装する具体的な手順について解説します。初心者の方でも以下の 4 つの手順にそって進めていけば、実装が可能です。

決済代行業者と契約する

決済代行業者との契約が成立するまでの流れは以下のとおりです。ランディングページの公開予定日から逆算し、必要な書類はあらかじめ調査、準備したうえで、スケジュールに余裕をもって作業を進めましょう。

  • 業者の選定: 自社の業種や特性、事業形態、商材、顧客層に見合う機能やサービスを提供している決済代行業者を選びます。
  • 申し込み: 公式サイトの登録ページで、必要な情報を入力して申し込みを行います。
  • 書類の提出: 法人であれば登記簿謄本、個人事業主であれば開業届、代表者の本人確認証明などの必要書類を提出します。
  • 加盟店審査: 決済代行業者およびクレジットカード会社などによる加盟店審査を受けます。審査期間は数日で済む場合もあれば、数週間を要する場合もあります。
  • 契約成立とアカウント発行: 審査に通過した場合、契約が成立し、アカウントが発行されます。また、決済代行業者が提供する各種サービスを利用するための管理画面にもアクセスできるようになります。

決済ボタンを作成する

次に、ランディングページに設置するための決済ボタンを作成します。ページ上に決済ボタンさえあれば、顧客はスムーズに支払い手続きを行えます。ボタンの作成に際しては、決済代行業者によって操作が異なりますが、基本的には以下の手順で進めます。

  • 管理画面にログイン
    ID とパスワードを用いてアカウントにログインします。
  • 商品・サービス情報の登録
    ランディングページで販売する商品情報を登録します (商品名、値段、商品説明など)。
  • 決済ボタンの生成
    「決済ボタン作成」や「リンク型決済」と表記されたメニューを選択し、登録済みの商品に紐付く決済ボタンの HTML コードを生成します。サービスによってはボタンの色を選べるほか、「今すぐ購入」、「カートに追加する」などのテキストをカスタマイズできる場合もあります。なお、決済ボタンのほか、EC サイトや SNS などに直接決済リンクを貼り付けることも可能です。その場合は「リンク型決済」を選びます。

決済ボタンのコードを埋め込む

決済ボタンのコードをコピーし、ページへの埋め込み作業を行います。ここでの注意点としては、コードの内容を書き換えずに、コピーしたものをそのまま使用することです。

  • HTML ファイルを開く: Web サイト作成ソフトで、ランディングページの HTML ファイルを開きます。
  • 埋め込む場所を決める: 決済ボタンの設置場所を決め、HTML ソースコードの中から該当する箇所を見つけます。
  • コードを貼り付ける: コピーした決済ボタンのコードをそのまま貼り付けます。
  • ファイルの更新・保存: コード貼り付け後の HTML ファイルを保存します。

なお、WordPress などの CMS (コンテンツマネジメントシステム) や LP 作成ツールを利用して EC サイトを運営している場合、直接編集可能なモードへの切り替えや、ブロック、ウィジェット機能などを用いてコードを埋め込むことも可能です。それぞれのツールに搭載された機能を最大限に活用しながらコードを設置しましょう。

テストの実施とページの公開

更新されたランディングページのテストを実施します。決済機能が正常に作動し、問題がないことが確認できればページを公開します。

決済代行サービスのシステムには通常、「テストモード」あるいは「サンドボックス」と呼ばれるテストを実施するための機能が搭載されています。この機能を用いて、本番同様の決済フローをテストモードで実行します。なお、テストを実施する際は、あらかじめテスト用のクレジットカードを準備しましょう。

また、パソコンだけでなく、スマートフォンやタブレットなどのモバイル機器でもテストを実施してみることが非常に重要です。近年、ユーザーはいつでもどこでも利用できるスマートフォンでの買い物を好む傾向にあります。そのため、モバイル機器においてもページが万全な状態であるかどうかを確認してから公開を実行しましょう。

以下は、テストを実施する際のチェックリストです。

確認項目

詳細

決済ボタンの表示・動作

ランディングページ上の該当箇所にボタンが正常に表示され、マウスポインタを合わせると反応し、クリックできるか。

決済完了後の画面遷移

決済ボタンをクリック後、決済代行業者の決済情報入力画面へスムーズに移動するか。

商品・金額情報の表示

決済画面に表示される商品名・価格・数量・商品画像などが、ランディングページ上の情報と一致しているか。

決済のシミュレーション

テスト用のクレジットカード情報を入力し、決済が問題なく処理されるか。

決済ページへの遷移

決済完了後は、事前に設定したサンクスページ (注文完了ページ) に自動で遷移するか。

管理システムへのデータの反映

決済代行サービスの管理システムに、テストした注文内容がデータとして正確に記録されているか。

自動送信メールの受信

購入者側と管理者側の両方に、注文完了メールが設定どおりに届くか。

ランディングページでのコンバージョンを高めるポイント

決済代行業者を選ぶ際の注意点や導入手順を理解したところで、いよいよコンバージョンについて解説します。手順どおりにランディングページに決済機能を導入したからといって、高いコンバージョン率が見込めるわけではありません。ここでは、顧客の購入意欲が失われることなく、最終的な購入完了につなげるための具体的なポイントを 1 つずつ見ていきましょう。

入力項目を減らす

入力必須の項目が多いと、顧客は購入を面倒に感じてしまい、結果としてカゴ落ちが発生する場合があります。そこで、項目を減らす工夫をしてみることで、顧客に快適な決済体験を提供できるようになります。具体的には以下のような対策が挙げられます。

  • 配送先住所を請求先住所に流用し、自動入力されるよう設定する
  • 必要がなければ、会社名や電話番号などを外す
  • 任意の項目は外すか折りたたみ、「さらに表示」で表示する
  • 既に確認済みの情報については後のページで繰り返し表示しない

複数の決済手段を提供する

決済手段は、できるだけ数多くの種類を用意することが大切です。せっかく商品を購入しようと思っても、利用可能な決済手段が限られていると、顧客が競合他社に流れてしまう恐れがあります。コンバージョンを高く保つには、多くの人が普段利用しているクレジットカード決済のほか、Google PayApple Pay のようなデジタルウォレット、後払い決済 (BNPL) にも対応し、決済手段の選択肢を広げましょう。

ワンクリック決済を実装する

リピーターにとって快適でスピーディーに注文を完了できることは重要な要素です。ワンクリック決済を取り入れることで、リピーターは情報入力を省略できます。特にスマートフォンで、ワンクリック決済による購入プロセスの高速化を実現できれば、スマートフォンで複数の作業を並行して行っているモバイルユーザーのカゴ落ちを防げます。

オートフィル機能などを実装する

住所や電話番号、メールアドレスのオートフィル機能や、リアルタイムでの入力チェック機能などを実装することもコンバージョンを高めるポイントの 1 つです。これにより、顧客は決済プロセスにおけるスピードを実感できるようになり、ユーザー体験 (UX) の向上につながります。

適切なタイミングで金額を提示する

税金や送料などの金額が、決済の直前に突然表示されると、顧客は想定外の請求金額に戸惑いを覚え、購入を断念する可能性があります。そのため、推定される送料や税金は、早い段階で提示することが大切です。各種追加料金の発生理由に関しては、ランディングページ上のわかりやすい位置で明確に提示しておけば、顧客は安心して購入に進むことができます。また、配送方法や配達日時については、注文が確定する前に必ず選択できるようにしておきましょう。

Stripe Checkout でできること

Stripe Checkout は、ウェブサイトやアプリで簡単に決済を開始できる完全カスタマイズ可能な事前構築済みの決済フォームです。
Checkout の特徴

  • 購入完了率の向上: Checkout の決済フォームはモバイル向けに最適化され、ワンクリックで完了する決済フローが構築されています。顧客は支払い情報を簡単に入力し、再利用できます。

  • 開発時間を短縮: Checkout を自社サイトに直接組み込むか、顧客を Stripe のオンライン決済ページへ誘導します。数行のコードで実行可能です。

  • セキュリティの向上: Checkout が機密性の高いクレジットカードデータを処理し、PCI 準拠を効率化します。

  • グローバルに拡大: Adaptive Pricing で 100 以上の通貨および 30 以上の言語に対応し、各地域に合った決済フォームを提示。購入完了率を向上させる決済手段を動的に表示します。

  • 高度な機能: サブスクリプションのための Billing、不正利用防止のための Radar など、他の Stripe プロダクトと Checkout を連携できます。

  • 柔軟な管理: 決済手段の保存や購入後のアクション設定など、決済体験を完全にカスタマイズできます。

Checkout を活用した決済フローの最適化について、詳しくはこちらをご覧ください。今すぐ開始する場合はこちら

この記事の内容は、一般的な情報および教育のみを目的としており、法律上または税務上のアドバイスとして解釈されるべきではありません。Stripe は、記事内の情報の正確性、完全性、妥当性、または最新性を保証または請け合うものではありません。特定の状況については、管轄区域で活動する資格のある有能な弁護士または会計士に助言を求める必要があります。

その他の記事

  • 問題が発生しました。もう一度お試しいただくか、サポートにお問い合わせください。

今すぐ始めましょう

アカウントを作成し、支払いの受け付けを開始しましょう。契約や、銀行情報の提出などの手続きは不要です。貴社ビジネスに合わせたカスタムパッケージのご提案については、営業担当にお問い合わせください。
Checkout

決済

Checkout をウェブサイトに埋め込むか、Stripe がホストするページに誘導することで、1 回限りの支払いでも、サブスクでも、簡単かつ安全に支払いを受けることができます。

Checkout のドキュメントを見る

ローコードの決済フォームを作成し、自社サイトに埋め込むか、Stripe が管理するサイトに設置します。