2021.10.12

【Shopify】チェックアウトページ完全攻略!構築方法やカスタマイズ方法を解説

【Shopify】チェックアウトページ完全攻略!構築方法やカスタマイズ方法を解説

Shopifyでは、チェックアウトページの文字フォントや色、表示項目などの設定を変更することができます。

ですが、通常プランでできる変更には制限があります。

たとえば、レイアウト等を変更などは、Shopify Plusでは自由にカスタマイズできますが、Plus以外のプランではできないといったことなどです。

そこで、ここでは、Shopifyのチェックアウトページの構築方法や、成功するカスタマイズ方法やポイントなどをまとめました。

ショップ運営の肝ともいえるチェックアウトページでお客様を離脱させたくない人は、是非この続きをお読みください。

チェックアウトとは

チェックアウトとは、支払いやお届け先情報を入力する画面のことで、商品をカート入れた次のページから注文完了ページまでの、いわゆる『決済ページ』のこと。

お客様は、カートに商品を追加したあとにチェックアウトページに進み、配送情報や決済の詳細などを入力してから決済ボタンを押します。

ですから、オンライン販売においてお客様は商品購入時に必ず、そして毎回チェックアウト画面を見ることになります。

また、チェックアウトページは、お客様みずから『個人情報』や『決済情報(クレジットカード情報)』などの重要事項を入力するページですから、違和感やストレスなどを与えないようにしなければなりません。

というもの、チェックアウトページで離脱を招いてしまうと、お客様は二度と商品購入をしてくれないかもしれないから。

離脱は、お客様にとっても、ショップ運営者にとっても不幸なことですから、このようなことを起こらないように、チェックアウトページの構築やカスタマイズは重要なのです。

Shopifyのチェックアウトページもまた、お客様が商品をカートに入れて購入のための決済を行う最終場面です。

なので、ここでの操作がうまくいかずにお客様を離脱させてしまうのは、大きな損失になります。

つまり、チェックアウトページには、お客様に商品をスムーズに購入をしてもらうとともに、購入離脱を防ぐ役割もあるということ。

お客様の気の迷いによる購入離脱を少なくするためにも、ショップに合ったチェックアウトページに仕上げるべく、常により良いカイゼンをして構築しなければなりません。

チェックアウトページの構築方法

Shopifyのチェックアウトページで、全プラン共通で修正できる内容は次のとおりです。

  1. 背景カラーや文字の変更
  2. バナーやロゴの設定
  3. 会員登録の有効化
  4. 住所の自動入力
  5. 多言語対応(アプリが必要)
  6. チップオプションの追加
  7. 注文内容などを注文後に自動メール送信
  8. カゴ落ちの通知

以上のような、簡単なデザインや入力項目の変更などができます。

また、上位プランのShopify Plusだと、チェックアウトページのコード編集ができるようになりますから、次のようなカスタマイズも可能になります。

  • 氏名のカナ文字入力指定
  • すべての入力項目の配置をカスタマイズ変更
  • 配送時間指定を追加
  • Google Tag ManagerやKARTEなどのタグの設置
  • 配送先の国によって表示や処理を変更する

このようなコード編集ができると、配置変更や項目の追加にとどまらず、チェックアウトページにおけるお客様の動線などを分析することも可能になります。

また、海外のお客様に向けて販売したい場合も、20ヶ国語まで言語対応させることができたり、それぞれの国に合わせて表示項目を変更したりすることもできます。

チェックアウトページを構築する際のポイント

チェックアウトページは、お客様が商品を購入するために『個人情報』や『決済情報(クレジットカード情報)』などを入力するページです。

また、ここで離脱を招いてしまうと、お客様は二度と商品購入をしてくれないかもしれないという重要なページでもあります。

ですから、お客様に違和感やストレスを与えてしまうとダメ。

たとえば、

  • 決済ページが日本語対応でない

というのは、離脱の要因になることでしょう。

ちなみに、Shopifyでチェックアウトページが日本語表示されないのは、使用しているテーマのデフォルト言語が外国語である場合です。

ですから、まず使用するテーマが日本語に対応しているかを確認しておきましょう。

また、あなたのオンラインショップの雰囲気に合わせて、チェックアウトページに多くの色や情報などを加えたいと思われるかもしれませんが、デザインはシンプルイズベスト。

そして、お客様はチェックアウトページで注文の配送情報と支払い情報を入力しますから、

  • 文字が小さい
  • 文字が読みにくい
  • 気が散るようなデザインや項目、注意文などがある

といったことがないようにも配慮しておきましょう。

更に、お客様が安心できる配色をするとか、画像を配置するときはページ上の単語から注意を引かないような画像を選択するようにしましょう。

チェックアウトページのカスタマイズ方法

次のようなカスタマイズができます。

なお、管理画面の『チェックアウトの設定』のチェックアウト項目を変更する画面は、プランを選択して最初の商品を作成するまで表示されませんから注意してください。

  1. バナー背景画像の登録・変更

チェックアウトページに表示される一番上のバナーの背景画像を登録・変更する方法です。

なお、画像サイズは『1000 x 400ピクセル』だと解像度が良いようです。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『バナー』で『画像をアップロード』をクリック、もしくはライブラリにアップロード済み画像を選択し『保存』
  1. チェックアウトページのロゴ追加

チェックアウトページのロゴは、次のように追加します。

バナーの左右、もしくは中央にロゴを配置でき、すでに画像を配置しているときは一番上に表示されます。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『ロゴ』で『画像をアップロード』をクリックするか、ライブラリにアップロード済み画像を選択
  4. ロゴの位置を変更
  5. ロゴのサイズを変更し『保存』
  1. メインコンテンツの背景画像もしくは色を追加

チェックアウトページのメインエリアに背景画像もしくは色を追加する方法です。

なお、背景画像と色のどちらかしか追加はできません。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『メインコンテンツエリア』で背景色、もしくは画像を追加
  4. ライブラリにアップロード済み画像を選択し『保存』
  1. フォームフィールドの色変更

フィールドの色を『白』または『透明』に変更する方法です。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『メインコンテンツエリア』で『フォームフィールド』をクリックし、希望する色を選択し『保存』
  1. 注文概要に背景画像、色を追加

チェックアウトページで お客様が『注文概要を表示』をクリックしたときに表示される商品リストの注文概要に、背景画像または色を追加する方法です。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『ご注文概要』で背景色または画像を追加し『保存』
  1. チェックアウトページの画像を変更または削除

チェックアウトページに配置した画像を変更・削除する方法です。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 置き換えたい画像の下で、『更新』を選び画像をアップロードするか、ライブラリにアップロード済み画像から選択し『保存』
  4. 画像の削除は画像の下の 『削除]』をし『保存』
  1. 画像の代替テキスト追加

チェックアウトページに配置した画像の代替テキストを追加する方法で、SEO的に役立ちます。

  1. 画像の下で 『更新]』をクリックし『画像を編集]』を選ぶ
  2. 画像の代替テキストを入力し『保存』
  1. チェックアウトページのフォント変更

チェックアウトページに表示される文字フォントを変更する方法です。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『文字体裁』で『見出し』もしくは『本文』でドロップダウンから好きな文字フォントを選択し『保存』
  1. チェックアウトページのボタン変更、アクセントカラーの変更

チェックアウトページのボタン、リンクやエラーメッセージなどのアクセントカラーを変更する方法です。

  1. 管理画面の『設定』>『チェックアウト』へ
  2. 『スタイル』>『チェックアウトのカスタマイズ』でテーマエディタを開く
  3. 『色』>『アクセント』『ボタン』『エラー』の横にあるカラーボックスでカラーピッカーから色を選択、もしくは16進コードを入力し『保存』

チェックアウトページをカスタマイズする際のポイント

カスタマイズする際に注意すべきポイントは、次のとおりです。

派手にしすぎない

チェックアウトページで大事なのは、

  • 入力項目がわかりやすい
  • スムーズに決済を完了させる

といったシンプルであることがポイントです。

なので、できるだけ文字や背景画像、背景色などを落ち着いた配色にし、お客様の注意が他に向かないように工夫しましょう。

ストアポリシーを入れる

ストアポリシーはお客様が購入を決意するときの安心感を演出することができます。

ですから、

  • 返金対応の有無
  • 配送方法
  • 取得情報に関するプライバシーポリシー

などをしっかりと記載したストアポリシーを必ず入れておくようにしましょう。

多言語対応

日本語以外のテーマを利用する場合は、多言語対応のアプリを導入してチェックアウトページが日本語として思いが伝わる翻訳となっているかを事前に確認しましょう。

特に日本語訳の精度はとても重要ですから、必要があれば編集をしておきましょう。

会員登録の有無

チェックアウトページでは、購入してくれたお客様に対してオンラインショップの会員登録を勧めることもできます。

たとえば、

  • 会員登録をすれば、次回購入時にお客様情報が自動的に入力されて手間がなくなる

といったアピールをすれば、スムーズに会員登録を促すこともできます。

また、登録いただいた会員にメールなどでセール情報などを送り、リピート率を向上させることも可能です。

テスト注文で確認する

Shopifyには商品購入を自ら試すというテスト注文機能がついていますから、オンラインショップを公開する前に必ず行っておきましょう。

チェックアウトページでのバグやエラーは、大きな機会損失になるので、事前にテストをして不具合をなくすようにしてください。

まとめ:【Shopify】チェックアウトページ完全攻略!構築方法やカスタマイズ方法を解説

以上が、Shopifyのチェックアウトページの構築方法や、成功するカスタマイズ方法やポイントです。

チェックアウトページでお客様に離脱されてしまうのは、大きな損失でしかありません。

なので、いかにスムーズにお客様のお買い物を完了させられるかの一点に注力しましょう。

また、無事購入できたお客様に、その喜びをSNSでシェア投稿しやすい画面を用意すると更に効果的ですよ。

Shopify experts(エキスパート)ならShopi Lab

監修者
黒岩俊児
黒岩俊児

shopify 制作チーム責任者・テクニカルディレクター 株式会社セルフプラスCEO

Shopifyサイト制作のスペシャリスト。本業であるサイト制作に加え、公認のShopify expertとして数々のShopifyサイトを手掛けている。2021年7月よりShopifyに関する様々な一次情報を得るため、自らShopify本社のあるカナダへ移住。

この監修者の記事一覧

あなたにおすすめの記事

よく読まれている記事

この記事を見た人はこんな記事も見ています

お問い合わせ

Shopi Lab(ショピラボ)

Shopi Lab(ショピラボ)をご覧のみなさまへ

Shopi Lab(ショピラボ)では、Shopifyのアプリや構築制作方法、運用マーケティング手段についてはもちろん、自社のECサイトを構築・運用する上で必要な情報を紹介しております。現在日本では開発業者の数が少ないため、検索しても役立つ情報が少ないことが現状です。そのためShopi Lab(ショピラボ)では、今後Shopifyの導入を検討している企業担当者様へ向けて、正確な役立つ情報を発信して行くことを心掛けております。 企業担当者様については、Shopify導入に対してご不明点や懸念事項がございましたら、お問い合わせ窓口よりお気軽にお問い合わせください。 また他カートをご利用中でShopifyへの乗り換えをご検討中の企業様についても、ご支援が可能でございます。世界シェアNo.1のECプラットフォームが日本で展開を初めて2年が経ちましたが、Shopi Lab(ショピラボ)ではさらにShopifyの魅力を発信していきます。