Welcartに「送料無料まであと○○円」を表示する

とても便利なプラグインをご紹介します。

Welcartにあるといいな、と思っていたちょっとした機能を色々と追加してくれるプラグインFriendly Functions for Welcart
タイトルのような「送料無料まであと○○円」を表示したり、クーポン割引など、さまざまなちょっとした機能が追加できます。

特に「FAX番号非表示化、カートページの数量入力を「number」に変更」など、目の付け所のセンスが素晴らしいプラグインです。


Friendly Functions for Welcart
https://ja.wordpress.org/plugins/friendly-functions-for-welcart/

こちらの「Image Uploader for Welcart」もお勧めです。

Welcartの商品登録画面を劇的に楽にするプラグイン「Image Uploader for Welcart」

オンラインショップの購入・決済・発送メール例

typewriter

Welcartでは購入者に送信するメール設定を以下の項目ごとに設定できます。

Welcartで用意しておけるメールパターン

  • サンキューメール(自動送信)
  • 受注メール(自動送信)
  • 問合せ受付メール(自動送信)
  • 入会完了のご連絡メール(自動送信)
  • 発送完了メール(管理画面より手動送信)
  • ご注文確認メール(管理画面より手動送信)
  • ご注文内容変更の確認メール(管理画面より手動送信)
  • ご入金確認のご連絡メール(管理画面より手動送信)
  • お見積りメール(管理画面より手動送信)
  • ご注文キャンセルの確認メール(管理画面より手動送信)

これだけのパターンをテンプレートとして登録しておけるので、どんな場合もすぐに適切な対応をすることができます。こういったテンプレートで大切なのは、一番最初の「コピーライティング」です。

面倒くさがってありきたりな例文を登録し、それを数年間利用し続けた場合。
時間をかけて自分のショップに合った気持ちの入った文章を考え、受け取る側の気持ちになってテストしたものを、数年間利用し続けた場合。

おそらく、顧客の数、リピーターの数、ショップの成長度は全く違うと思います。用意したテンプレートをボタン1つで発信できる便利なシステムだからこそ、最初に最大の配慮をしましょう。

Welthemesで立ち上げをサポートし、コンサルティングを行なっているあるショップの事例を紹介します。このショップは趣味で手作り商品を制作する個人作家さんがオーナーですが、今はそれだけを仕事に出来るほど成長しました。

受注メール(注文発動と同時に自動的にお客様に発信されます)

タイトル:【ショップ名】ご注文確認メール

◯◯◯◯様

※このメールは、ご注文いただきますと自動的に送信されます。
このメールに心当たりのない場合や、ご不明な点がございましたら、xxxx@xxx.xx までご連絡ください。

このたびは、ご注文いただき誠にありがとうございます。
本日、以下のご注文を承りましたので、ご確認をお願い申し上げます。

この後『受注確認』→『入金確認』→『発送完了』と随時メールにてご連絡いたします。商品ができるかぎり早くお届けできるよう心がけていきますので、どうぞよろしくおねがいします!

(以下、受注内容を記載)

****************************************************
ショップ名(担当◯◯)

〒000-0000 東京都◯◯◯◯◯◯◯◯◯◯◯◯◯
URL : http://wwwwwwww.com
MAIL : xxxxx@xxxx.xx
TEL:000-00000000
****************************************************

ご注文確認メール(受注通知を受け取った店主が内容を確認し、管理画面より送信ボタンを押すことで送信されます)

タイトル:【ショップ名】ご注文誠にありがとうございます

◯◯◯ 様

こんにちは、◯◯◯ です。
この度は、ご注文いただき誠にありがとうございます。

受注内容を確認し、注文を承りました!

銀行振込、コンビニ決済、PayPalの場合はこの後ご入金を確認でき次第、入金確認メールをお送り致します。

クレジット決済をお選び頂いた方はすぐに決済処理の確認をさせて頂きますのでそのままお待ちください。

それではよろしくお願いします!

(以下、受注内容を記載)

ご入金確認のご連絡メール(受注確認とはタイミングが異なる場合の多い決済。その確認時に発信します。クレジット決済の場合は受注と同時に完了しているので受注確認メールと同時に送信することが多いでしょう。)

タイトル:【ショップ名】ご入金ありがとうございます

◯◯◯ 様

こんにちは、◯◯◯ です。
この度はご注文いただき誠にありがとうございます。

お客様からのお支払いを確認いたしましたので、ご注文の品を発送させて頂きます!

発送の際は再度メールでお知らせいたしますので、もうしばらくお待ちください。

発送完了メール(発送完了したら管理画面より送信します)

タイトル:【ショップ名】商品を発送いたしました

本文:
◯◯◯ 様

こんにちは!◯◯◯です。

大変お待たせいたしました、商品の発送を完了いたしました。
まもなく商品がお手元に届くと思いますので、楽しみにお待ちください。

発送は万全を期しておりますが、もし商品に不備や破損が合った場合、すぐにご連絡くださいませ。

また、ご感想や愛車との写真を twitter やFacebook、ブログなどでシェアして頂けると嬉しいです!

公式twiiterID: http://twitter.com/xxxxx
Facebook: http://www.facebook.com/xxxxx

それでは今後とも、◯◯◯ をよろしくお願いいたします。

ポイント

ポイントは「受け手になった立場になって考えてみる」ことです。
自分がそこで注文し、それを受け取ったらどう感じるか。何も反応がない時間がどのくらい長いと不安になるか。3日お待たせしてしまうとしたら、どのタイミングでどんなフォローが欲しいか、など。自分が嬉しいと思うことを完璧にやれば、必ずお客様も喜んで頂けます。

注意したいポイントは「メールは短いほど良い」ということです。
発送までの各工程でお知らせすることは安心感にも繋がりますが、1のショップから短期間で沢山のメールを送るという事実は相手のメールボックスを占領してしまっているかもしれないということも考慮しましょう。

日本語でどうしてもやってしまいがちなのは、丁寧語を完璧に並べてまわりくどく、要件が何なのかわかりにくくなってしまうこと。

タイトルでそれぞれ何の連絡なのかを明確にする。本文は丁寧だけど必要な情報だけスッキリと書くことが大切です。

「写真は大きく、軽く」商品画像の最適化のコツ

tokyo_light03

商品画像は可能な限り大きく、高解像度のものを用意します。
ここでは、配置やライティングといった撮影技術そのものではなく、画像データをどのように作成するとよいかをご紹介します。

画像補正やリサイズ作業

デジカメで撮影したJPEGをそのままWelcartにアップロードする…なんて人はあまりないと思いますが、やはり

  • 画像処理ソフトで色調補正
  • サイト全体で決めた縦横比でトリミング
  • アンシャープマスク
  • Web用の軽量なサイズに保存

ここまではかならず必要になると思います。
商品をより良く見せるための画像補正はもちろんですが、必要な画像サイズをしっかりと把握し、それより大きすぎることも小さすぎることもないようにしなければなりません。

画像は必要とされる最大サイズで

Welthemesのminimumの場合、PC用に最大化したレイアウトでの商品画像の幅は750pxです。その他すべての場所、レスポンシブサイズでこれより大きく表示することはありませんので、750pxの商品画像を生成しWordPressにアップロードするのがもっとも効率的なデータサイズとなります。

仮に1200pxの画像をアップロードし続けたとしても、使わないままサーバ上に溜まっていくだけなので無駄となってしまいます。

サムネイルサイズの設定

WordPressでは自動的に複数サイズのサムネイルを生成してくれます。そのサイズは管理画面から設定できます。Welthemesではほとんどの場面でサムネイルサイズをその場で指定し、管理画面での設定に依存しないようにしていますが、自動生成されるサイズが無駄にならないようにチェックすることも大切です。

もし、「もう大量に画像登録してしまった。サイズを変えたいけどいまから全部アップデートし直すのは無理」という場合、「Regenerate Thumbnails」プラグインが便利です。
http://wordpress.org/plugins/regenerate-thumbnails/

過去にアップロードした画像をすべて、最新の画像サイズ設定でリサイズ・再生成してくれます。

画像サイズを更に小さく

画像圧縮ソフトを使うことで、画質を維持しながら更にサイズを小さくすることができます。

デスクトップアプリケーションでは「JPEGmini」がお勧めです
http://www.jpegmini.com/

またWordPressプラグインでは「WP Smush.it」などがあります。
http://wordpress.org/plugins/wp-smushit/

商品画像が大きいのはいいが、商品画面を開くたびに何秒も待たされるのは、ストレスになってしまいます。
画面のロードが早すぎて困ることはありませんので、あらゆるポイントで少しづつ工夫できる所を見つけて行きましょう。

オンラインショップにおける商品写真の考察

オンラインショップにとって、商品画像は命といっても過言ではありません。

手間や機材コスト、最終的な成果物のクオリティを考えるとプロに依頼するのはかなりよい選択だと思いますが、最近は機材のコストも安くなり自宅で撮影する方も多いのではないかと思います。

基本的な物撮りの知識やテクニックは沢山の参考書に任せるとして、ここでは撮影パターンについて考えてみます。

商品写真の種類として、

  • 背景付き写真
  • 抜き写真
  • イメージ写真

と3つに分けてみます。
以下、Welthemeでダウンロード可能なテーマを事例とし、スクリーンショットをクリックするとそのライブデモが表示されます。

1. 背景付き写真

screen 2013-06-24 at 18.48.06

バック紙なり、雰囲気のあるテーブルなり、背景を入れた写真です。
商品だけ、あるいは商品の1部分にピントを合わせて周りをボカシを入れる。いろいろなテクニックがありますが、立体感、空気感、雰囲気を感じることができる最も良い方法です。

上の写真では白背景を完全に飛ばして見せていますが、画像としては「背景を含めそこにある商品の様子」を撮っているもので、奥行きを感じる写真です。

これは立体的な商品(つまりほとんどの物)に適しています。

2. 抜き写真

screen 2013-06-24 at 18.51.30

商品の輪郭で切り抜いた写真です。
非常に手間のかかる作業ですが、アパレル系でよく見られオンラインショップなどでやるととてもかっこよく見えたりします。

ファッション誌ではよく見られますが、シャツを下に置き、適度にシワを作り、撮影。そして周囲を切り抜いていく。

Webではpngという透過画像として扱えば、サイトの背景に馴染んでとてもかっこよく見せることができます。

Hipsterテーマでは、このサンプルをデモしていますのでぜひご覧ください。

https://demo2.welthemes.com/?cat=7&themedemo=welcart_hipster

背景色との境界=商品の輪郭となるだけでまるでファッション誌の1ページのように見えます。

服のように、平面的な商品の場合はとても使えるテクニックです。

3. イメージ写真

screen 2013-06-24 at 18.53.27

商品そのものではなく、それを使っている1シーンを見せていくテクニックです。
ロケーション、モデル等、周りに映り込む全てに配慮する必要がありますが、「その商品がどうか」ではなく「その商品のある生活がどんなに素敵か」を提案することは、物を売るにはとても重要なポイントです。

1つ1つの商品すべてに対してそういった写真を用意するのは難しいですが、トップページのイメージ写真だけでも、そういう写真を用意できるとよいでしょう。

商品写真の大切さ

商品そのものがどんなに良い物であったとしても、写真が良くなければ全く伝わりません。逆に、商品がさほど良い物ではなくても写真のセンスによって売れてしまうという面もあります。

問題は、どんな商品であれ適当に撮るよりはちゃんと撮る必要があること。また本当に良い商品が、良い写真で売られているというのは、売り手も買い手も継続的にハッピーになれる最高のショップだと言えるのではないでしょうか。

Welcartでカート内の商品数・合計金額を表示する

Welthemesのテーマでは、ヘッダーにあるカートアイコンの部分に「現在のカート内商品数」がアイコンと同化して表示されるようなデザインになっています。

この商品数合計は、<?php usces_totalquantity_in_cart(); > というタグで出力できます。

Novel というテーマでは「合計額」を表示しています。

novel01
Novelのライブデモ

商品金額合計は、<?php usces_totalprice_in_cart(); > というタグで出力されますので、お好みの場所にタグを挿入してCSSでスタイリングするだけで簡単に実装が可能です。

このようにショッピングサイトで必要になりがちなタグがちゃんと個別に用意されている所が、Welcartの良いところですね。

ここでよりスタイリッシュなショッピングサイトのためのアドバイスです。

古風なサイトでは、よく「只今カートに2点入っています」とか「現在の合計金額は00000円です。」とか、文章で表示されたりします。またサイドバーにカート画面が常に表示されていて、「現在はどれどどれがカートにありいくら」ということが表示されていたりします。

親切といえば親切なのかもしれませんが、それって買い物中にどうしても必要な情報でしょうか?カートにいれながら買い物を継続しているということは、やはり商品をちゃんと見せることが重要であり、「たった今どれだけカートに入れたか」なんてことは普通の人であれば覚えていますし、カート画面に行けばすぐに分かることです。

1度の購入点数が1点、2点といったショップであれば、余計なお世話な表示かもしれません。

逆に、卸販売サイトや細々とした資材屋さんのような「1度に沢山の物を購入することが多い」というショップであれば、サイドバーに大きく買い物カゴの中身を表示するのは便利かもしれませんね。

テーマデザイン全てに共通することですが、本当に必要と断言できないような要素は思い切って削ってしまうこと。それを徹底することで、本当に重要な情報がしっかりと浮き出てきます。

「ECサイトっぽいかどうか、ECシステムに機能が備わっているかどうか」ではなく、「自分のお店の利用者にとって必要かどうか?」を常に考えて最適化しましょう。

Next Posts