プロストサイト

WEBオンラインサービス

mobilegeddon-2-728-90 2017年の企業ECサイト喫緊課題はモバイルファースト対応

2017/04/24 by プロストサイト – Update 6

animation-icon-animation2-50 WordPress CMS ECサイトWordPress CMS ECサイト – ビジターフレンドリーのカスタマイズ設定

CMS ECサイトに求められるのは、ショッピング回りのビジターフレンドリー1点に尽きます。その目的フォーカスの、カスタマイズ設定です。ビジュアルのアイキャッチ中心です。やや強引な、プラグイン既定画像の上書き更新も含まれます。

目次

オンラインショップの決済完了率
プラグインWP eStoreメニュー
ページ表示のURL設定
カート回りアイコン画像の設定
カート画像のCSS設定
カート取消し画像の上書き設定

icon-paypal オンラインショップの決済完了率ECサイトの決済完了率

paypal-completion-rate オンラインショップの決済完了率

ECサイトの課題はいくつかありますが、第一の課題は決済完了率が30%を切る現実への対処ではないでしょうか。そのECサイト対処は、コンテンツ並びにカート回りのビジターフレンドリー化に尽きます。

ECサイトの機能選定

ECサイトはプロダクト商品力が第一としても、最適な土台機能があってこそといえます。そこで、先ずその土台機能の選定です。CMS ECサイトなら、WordPressが必然の選択肢です。残るは、ショッピングカートのプラグイン選定です。その代表といえるWooComerceの導入検証を長く続けましたが、お買い物離脱の懸念要素がカート回りに複数存在しています。第一は、根本面でのカート操作の煩雑さです。第二は、最悪といえるビジター購入確定画面の日本語化欠落です。詳細は、関連トピックス2によります。

その懸念をすべてクリアしたのが、WP eStoreプラグインです。欧米では、世界No.1 ECプラグインの評価も見られますが日本では殆んど知られていない存在です。この検証にも、多くの時間を掛けました。ビジターﾌﾚﾝﾄﾞﾘｰとオーナーフレンドリーの両面で、著者実経験の中でのベストプラグインです。

カート系カスタマイズ改善

ECサイトの土台機能が決まったら、国内ショップ向けに小さなところまで気を遣って改善したいところです。その中心は、PayPal決済回り表示の分かり易さとボタンの日本語化です。たとえ1%の改善でも、長期的には大きな売上差となりかねません。カート系のカスタマイズ設定は、ビジターフレンドリーの1点にフォーカスしています。WP eStoreプラグインは完成度が高く、多くのカスタマイズ設定は下記分類のNo.1で可能です。No.2は、独自のカスタマイズ改善です。

Noカスタマイズ分類備考
1Settingsメニューによる標準設定指定ページのURL、カート系アイコン
2独自カスタマイズ裏技を含む独自改善

No.1は、ボタンの日本語化を含む標準設定です。Settingsメニューにそって粛々を進めるだけです。その設定は、A2～A4項によります。No.2の独自カスタマイズは、下記1&2項の画面で先ず理由を見ておきます。その設定は、A4項の一部とA5～A6項によります。

カートが空の状態

先ず大事なのは、カートが空の状態です。このカートはショッピン以外のページにも表示され、ビジターが最初にお目にする部分です。

◇カートが空の状態 – 既定表示

shopping-cart-empty既定表示 - カートが空1. 上のカート画像
この画像の本来目的はカートにプロダクトが入ったときのアイコンなので、空の状態では要らない画像です。ところが、背景が白で余計に目だっています。このカートは、SettingsのHide Shopping Cart Imageで非表示にできます。欧米では、その推奨記事が見られます。しかし、プロダクトが入ったときでも表示されないのが難点です。2. 下のカートが空の画像
改善点は考えによるとしても、一応の役割は果たしてくれています。

◇カートが空の状態 – カスタマイズ後

shopping-cart-empty-prost 改善結果 - カートが空1. 上のカート画像
偶然に見つかった裏技手法で、カートが空の状態では非表示を実現しました。
2. 下のカートが空の画像
オンラインショップのサイトでは、アイキャッチの面で最も重要な画像と捉えています。それには、アニメーションが画像が最適です。動きはA4項によります。調和の面で、背景の白をなくすと共にカート画像の統一を図っています。

カートにプロダクトが入った状態

ビジターが、お買い物を行ったところです。ページ構成としては、ショッピングページの右側に見える状態です。ビジターフレンドリーの面で、申し分ありません。

◇カート表示 – 既定

shopping-cart-paypal 既定表示 - カート入り1. カート画像
カート統一性の面を除いて、問題はありません。
2. PayPal支払いボタン
日本語化でも、PayPalボタンは英語のままです。問題は、Checkout withの部分です。この用語は日本では馴染みがありません。最も重要なボタンであり、お買い物過程での途中離脱懸念最少化のためにも日本語化は必須です。
3. 購入プロダクトごとの取消しアイコン
データベースのレコード削除マークですが、ショップでは×マークが無難と思われます。また、周辺余白が目立ち過ぎます。
4. 購入プロダクトをすべて取り消すアイコン
先ず、カートの統一性に欠けます。また、周辺余白が目立ち過ぎます。

◇カート表示 – カスタマイズ後

shopping-cart-paypal-prost-new 改善結果 - カート入りビジターフレンドリーの面で、カート画像の統一を図っています。設定は、A4項～によります。
なお、カート操作回りでビジターが目にする言葉はすべて日本語化されています。翻訳は弊社が担当し、画像を含む全体流れの調和を図っています。

icon-update2 プラグインWP eStoreメニュープラグインWP eStoreメニュー

ECサイトの画像は、サイトのツールが変っても表示は変りません。本ページでは、ECサイトのカートツールとしてWordPressプラグインWP eStoreの設定事例で紹介しています。機能設定は、管理画面下方にあるWP sStoreメニューのSettingsに集約されています。

estore-setting-menu プラグインWP eStoreの設定

そのSettingsをクリックすると、このような画面が表示されます。ここでは、左側3タブのみ抜粋表示しています。なお、バージョンv7.4.1は弊社担当のカート回り操作の日本語化時点のものです。

estore-setting-menu-741 Settings

最左のGeneral Settingsで、基本設定を行います。

icon-internet ページ表示のURL設定ページ表示のURL設定

ビジターフレンドリーに向けた、一歩手前の設定です。Settingsメニュー下の設定です。なお、記載のURLパスは、すべて仮のものです。そのECサイトに合わせた設定とします。

サービス規約のURL

PayPal支払いでは、ボタンのクリック前にサービス規約確認のチェックを求められます。そのときにリンク参照の、サービス規約のURL設定です。下記の操作で入力します。
Settings > General Settings
設定名称： [General eStore Settings] Terms & Conditions Page URL

https://www.example.jp/service-agreement

PayPal決済完了で表示されるページのURL

PayPal決済完了で、ECサイトへ戻るページのURL設定です。下記操作より、Return URLの入力を行います。いわゆる、ThanksページのURLです。
Settings > General Settings
設定名称： [General images and page URL Settings] Return URL

https://www.example.jp/product/thanks

PayPal決済キャンセルで表示されるページのURL

PayPal決済キャンセルで、ECサイトへ戻るページのURLです。下記操作より、Cancel URL入力を行います。
Settings > General Settings
設定名称： [General images and page URL Settings] Cancel URL

https://www.example.jp/product/cancel

icon-icon カート回りアイコン画像の設定カート回りアイコン画像の設定

ここからが、ビジターフレンドリーに向けた設定です。www.example.jpと画像パスは、実際の格納場所とします。また、画像はコンテンツのデザインにそったカラー等の選定の含みです。

ビジターフレンドリーの勘所

ランディングページは当然として、ビジターにとってはカート回りの分かり易さが第一です。それには、アイキャッチが優先されます。カートが空の画像が、その先頭の役割です。どのページが開かれても、プロダクト購入ページへ案内の役割を持たせています。あとは、カートに入れる操作からPayPal支払いへの流れとなります。これらの一連の最適化です。

カート回りの画像選定

プロダクトの特性やそのサムネイル画像とのバランスによる、カート系画像のサイズやカラー選定も重要です。この観点から、関連トピックス1のショップ画像は「複数サイズ、複数タイプ、複数カラー、静止画像、アニメーｓション画像」からの選定をサポートしています。以下の設定では、Green系の小さ目の画像へ統一し、アイキャッチが求められるケースではアニメーション画像を選定しています。

カートが空の画像

CMS ECサイトは、ワンページ内での分かり易いカート購入を特徴としています。また、購入ページ以外でも敢えて空のカートを表示させています。直下案内のワンクリックで、直ちにショッピングページが開かれる構成です。そのアイキャッチが、カートが空のアニメーション画像です。
カートにプロダクトが入ると、このカートが消えて状態表示へ切替わります。同じグリーン系の、小さなカート画像です（A6項）。

カートが空
animation-shopping-cart-empty-green カートが空のケース

下記操作により、カートが空のボタンのURL入力を行います。
Settings > General Settings
設定名称： [Shopping Cart specific Settings] Text or Image to Show When the Cart is Empty
画像の選定： 関連トピックスNo.1のGreen系画像を設定

https://www.example.jp/wp-content/uploads/image/awesome/store/animation-shopping-cart-empty-green.gif

カートに入れるボタン画像 – 既定の設定

下記操作より、カートに入れるボタン画像のURL入力を行います。
Settings > General Settings
設定名称： [General images and page URL Settings] Add to Cart Button Text or Image

https://www.example.jp/wp-content/uploads/image/awesome/store/add-to-cart-green-ja-126.gif

◇本設定による表示画像

add-to-cart-green-ja-126 カートへ追加のボタン

ここで設定のボタンは、すべてのプロダクトで既定表示されます。

カートに入れるボタン画像 – プロダクト単位の設定

プロダクトのカートに入れるボタンは、既定では空欄です。プロダクト単位の設定入力にそって、既定ボタンに代り優先表示されます。アイキャッチのアニメーション画像選定の事例です。
Settings >Manage Products > プロダクトのEdit > Additional Product Detail
設定名称： Button Image URL

https://www.example.jp/wp-content/uploads/image/awesome/store/animation-add-to-cart-2-green-ja-126.gif

◇本設定による表示画像 – アニメーション画像

animation-add-to-cart-2-green-ja-126 カートへ追加のボタン

この事例は、同系画像のアニメーションを指定したものです。

SOLD OUTボタン

在庫数管理のプロダクトで、在庫切れのときに表示されます。下記操作より、ボタン画像のURL入力を行います。
Settings > General Settings
設定名称： [General images and page URL Settings] Sold Out Button Text or Image URL

https://www.example.jp/wp-content/uploads/image/awesome/store/sold-out-a.gif

◇本設定による表示画像

sold-out-a 売切れボタン

icon-css カート画像のCSS設定カート画像のCSS設定

WP eStoreのSettingsメニューのURL指定にない画像で、ECサイトのビジターフレンドリーに欠かせない画像が2つあります。強制上書きを行ったところ、周囲の白余白が相変わらず目立ち過ぎます。そこで、これを解消できる関連プラグインWP Custom CSSによる、カスタム設定で対処します。

カート画像

カート画像はバランス考慮で、小さめの画像を選定しています。そして、カートに入れるボタンに合わせてグリーンのカートとした事例です。関連トピックスNo.1のパーツです。ここでは、静止画像を選定しています。

既定画像設定画像
shopping_cart_icon_3-original カート画像store/shopping_cart_icon_3 カート画像

WP Custom CSSによるカスタム設定

プラグイン一覧 > WP Custom CSS > 設定
応用技： padding: 0px 0px 0px 0px;

input[src*="images/shopping_cart_icon_3.png"]
{
padding: 0px 0px 0px 0px;
background: url('https://www.prostsite.co.jp/wp-content/uploads/image/awesome/store/shopping_cart_icon_3.png');
background-size:auto;
width: 0px;
height: 0px;
}

この設定は、カートが空の状態ではカートを表示せず、カートにプロダクトが入ったときのみ表示させるものです。著者が、偶然に発見した裏技です。画像ファイル名の上書きが前提です。

PayPal支払いボタン

肝心なPayPal支払いでは、すべてのステップで英語表現は絶対に避けるべきです。先ずは、日本語のPayPalお支払い画像です。関連トピックスNo.1のパーツです。

既定画像設定画像
checkout_paypal.png PayPal支払いボタンcheckout_paypal PayPal支払いボタン

プラグイン一覧 > WP Custom CSS > 設定
応用技： padding: 0px 0px 0px 0px;

input[src*="images/checkout_paypal.png"]
{
padding: 41px 143px 0px 0px;
background: url('https://www.prostsite.co.jp/wp-content/uploads/image/awesome/store/checkout_paypal.png');
background-size:auto;
width: 0px;
height: 0px;
}

icon-update カート取消し画像の上書き設定カート取消し画像の上書き設定

カートの取消しが分かり易いことも、ビジターフレンドリーの1つです。豆つぶのような小さなアイコンですが気を抜けません。この意味で、若干ながらの画像の改善と周囲余白の縮小が望まれます。ただし、こちらは本来のWP Custom CSS設定がサポートされていません。そこで、やや強引な上書き設定と応用のCSS設定で対処します。なお、当プラグインは自動更新が適用されないため、上書きでも適切に対処できます。

上書き用ファイル名既定画像設定画像
Shoppingcart_delete.gifShoppingcart_delete-original PayPal支払いボタンShoppingcart_delete PayPal支払いボタン
empty-shopping-cart-icon.pngempty-shopping-cart-icon-original PayPal支払いボタン/empty-shopping-cart-icon PayPal支払いボタン

画像の上書きアップロード

これらの画像はApache権限のプラグインフォルダに格納されているため、SFTPユーザー権限の一時的変更の下でアップロードを行います。

(1) フォルダのユーザー権限変更
TeraTermツール等により、フォルダの権限変更を行います。ユーザー名は、仮にftp-abc-userとした事例です。

# chown -R ftp-abc-user:ftp-abc-user /var/www/html/www.example.jp/wp-content/plugins/wp-cart-for-digital-products/images

(2) 画像のリネーム
画像は上書きとなるので、FTPアクセスにより念のため-original追加のリネームを行っておきます。

/var/www/html/www.example.jp/wp-content/plugins/wp-cart-for-digital-products/images/Shoppingcart_delete-original.gif
/var/www/html/www.example.jp/wp-content/plugins/wp-cart-for-digital-products/images/empty-shopping-cart-icon-original.png

(3) 画像のアップロード
この画像のアップロードを行います。

/var/www/html/www.example.jp/wp-content/plugins/wp-cart-for-digital-products/images/Shoppingcart_delete.gif
/var/www/html/www.example.jp/wp-content/plugins/wp-cart-for-digital-products/images/empty-shopping-cart-icon.png

(4) フォルダのユーザー権限戻し
フォルダの権限をapacheへ戻しておきます。

# chown -R apache:apache /var/www/html/www.example.jp/wp-content/plugins/wp-cart-for-digital-products/images

周辺余白縮小のCSS設定

周辺の白余白が目立ち過ぎるので、CSS応用設定で対応します。

プラグイン一覧 > WP Custom CSS > 設定
応用技１： padding: 0px 0px 0px 0px;
応用技２： 画像は上書き済みなので設定しない

input[src*="images/Shoppingcart_delete.gif"]
{
padding: 0px 0px 0px 0px;
background: url('https://www.prostsite.co.jp/wp-content/uploads/image/awesome/store/Shoppingcart_delete.gif');
background-size:auto;
width: 0px;
height: 0px;
}

input[src*="images/empty-shopping-cart-icon.png"]
{
padding: 0px 0px 0px 0px;
background: url('https://www.prostsite.co.jp/wp-content/uploads/image/awesome/store/images/empty-shopping-cart-icon.png');
background-size:auto;
width: 0px;
height: 0px;
}
icon-topics-50-70 関連トピックス

関連トピックス

本ページに関連する、トピックスです。

タイトル
目次WordPress CMSサイト – プロダクト公開とショッピングカート
mobilegeddon-2-1139-400 2017年の企業ECサイト喫緊課題はモバイルファースト対応
book-affiliate-direct2-1139-400 2017年の企業ECサイト喫緊課題はモバイルファースト対応
パスワードリセット
メールアドレスを入力してください。メールでパスワードが送信されます。