ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

コンバージョン率1.3倍!Amazon Pay・楽天ペイを導入で。

コンバージョン率1.3倍!Amazon Pay・楽天ペイを導入で。

Amazon Payとは

Amazon以外の通販サイトで、Amazonアカウントを利用して、購入ができるようになるサービス。
Amazonアカウントを利用することで、住所やクレジットカード情報などの入力を省くことができます。

楽天ペイとは

Amazonペイメント同様、楽天アカウントを利用して購入ができるようになるサービス。
楽天ポイントの使用と獲得もできます。

カラーミーショップで運営する通販サイトにAmazon Pay・楽天ペイを導入

しばらく運営をしておった通販サイト。
カゴ落ち率が80%を超えるなど、非常に高かったです。
住所入力やクレジットカード情報入力の際に、面倒さを感じ、離脱しているのかもしれないと考え、少しでも解消ができればと、Amazon Payと楽天ペイの導入を検討しました。

カラーミーショップの場合の、Amazon Pay・楽天ペイの利用料は以下。

Amazon Payの利用料

月額2,000円(税抜)+決済手数料4%

楽天ペイの利用料

月額2,000円 + サービス利用手数料:5%(決済手数料 4% + 楽天ポイント原資負担分 1%)

Amazon Pay・楽天ペイ導入前との購入数比較

Amazon Pay・楽天ペイを導入する前とで、各決済ごとの購入数を比較してみました。

ある月の購入件数を1年前の同月との比較

  1年前 今年
クレジットカード 75 59
商品代引 46 31
銀行振込 18 18
Amazon Pay 0 47
楽天ペイ 0 21
合計 139 176

1年前と比較して購入件数が27増えました。
もちろん1年前はAmazon Pay・楽天ペイをやっていなかったので、そこがまるごと増えています。
とはいえ、購入件数合計の176に対して、68件と約40%も占めています。
クレジットカード決済は16減り、商品代引も15減りました。Amazon Pay・楽天ペイの導入で、普段クレジットカードや商品代引で購入していた方がそっちに流れた、とも考えられますが、全体で増えた27件は、やはり新たな決済方法の導入のおかげではないかと思います。

Amazon Pay・楽天ペイ導入前とコンバージョン率を比較

今度はコンバージョン率を比較してみます。
これはAmazon Pay・楽天ペイ導入から数ヶ月を見てみます。

  1年前 今年
1ヶ月目 0.41% 0.53%
2ヶ月目 0.48% 0.61%
3ヶ月目 0.42% 0.55%
4ヶ月目 0.30% 0.44%
平均 0.4025% 0.5325%

すべての月で前年を上回りました。
増加率にして、約1.3倍です。


自分に置き換えて考えてみても、住所入力やクレジットカード情報の入力をせずに、Amazonのアカウントとなるとめちゃくちゃ便利なので当然の結果だと納得しています。

アパレルブランドのECサイトを制作しました

f:id:webbibouroku:20171117185653j:plain

とあるアパレルメーカーのECサイトを作成しました。

それまではセレクトショップなどへの卸のみで展開していたのですが、今後を見据え自社ECサイトを立ち上げたいとのことで相談をいただきました。

カラーミーショップのスタンダードプランで作成

なるべく予算を抑えたいとのことでカラーミーショップをご提案。

レギュラープラン
月額:3,240円/月
初期費用:3,240円

決済方法は、打ち合わせの上

  • クレジット
  • 商品代引
  • 銀行振り込み

の3種類としました。
※ 手数料等は各種決済サービスのサイトなどを参照ください

公開時の商品登録数は30点ほど。

公開まもなく売れる

誘導は、公開と同時に既存のブランドサイトに、ECサイトへのバナーを貼ったのみ。
ブランド名や商品名で検索しても、今回作成したECサイトはもちろん上位に上がってきません。
既に卸先が運営する通販サイトでも、今回作成したECサイトよりも安で売られています。なのでなかなか売れないだろう、とは思っていたのですがそんなことはありませんでした。
公開1週間で数点の購入があり、初月は数十点売れました。
そこから数ヶ月、コンスタントに売れ続けています。

1.ブランド名で検索

2.ブランドサイトに辿りつくECサイトは検索上位にないため)

3.バナーからECサイトへ移動

4.購入

というフローで商品を買う方が一定数いらっしゃるということを知ることができました。

雑誌掲載商品がちゃんと売れる

数点の商品が、雑誌にも掲載されたのですが、その商品がよく売れました。

1.雑誌を見る

2.掲載されている商品が欲しくなる

3.ネットで検索する

4.ブランドサイトに辿りつくECサイトは検索上位にないため)

5.バナーからECサイトへ移動

6.掲載されている商品を探し、買う

というフローをちゃんと辿ってきたのだろう、と想像できます。
雑誌って意外とちゃんと見られているのですね。

4.、5.の手順を省くことが出来ればもう少し売れていたのかもしれません。

雑誌に掲載されることがわかっている場合

  • 検索で上位に表示されるようにしっかりと最適化を行っておく
  • このキーワードで検索すればスムーズにサイトに辿りつける、というキーワードを表記しておく
  • 掲載商品をトップページなどの目立つところに表示しておく

といった工夫で、効果を上げられそうです。

あとはポイント導入や、メルマガの配信などでリピーターを増やしていく、とかでしょうか。



プログラミングは手書きで効率よく覚える

f:id:webbibouroku:20160205143117j:plain

プログラミングを覚えるために、たくさん参考書を読んで、たくさんサンプルコードを写しました。
手書きで、PCで、とどちらもやりましたが、どうも手書きのほうが頭に入るようが気がしています。

手書きからPCへ

最初は手書きでやっていました。
勉強はもっぱら昼休みに喫茶店で行っていたのですが、当時はノートPCを持っておりませんでした。
参考書を読み、出てきたサンプルをノートに書き写す。それをひたすら繰り返していました。

その後、すぐに動作を検証したいのと、より実際の作業時に近い環境のほうが身につくのでは、ということでノートPCを買いました。
昼休みになればノートPCと参考書を持って喫茶店へ行きました。
参考書を読み、出てきたサンプルをPCに打ち込む。すぐさま動作を確認することはできたのですが、コードは右から左へすり抜けていったように、記憶には残りませんでした。

手書きのほうが頭に入る理由

以下のふたつの理由で、手書きのほうが頭に残るのではないか、と思います。

1.ひとつひとつ形の違う文字を書くということ

たとえば「a」と書くのと、「a」と打ち込むのとの違いです。
独特の丸みのある「a」と書いた場合、「a」と書いたということが指先から脳に伝わる。
「a」とキーボードを打つ場合は左小指を落とすだけです。動きでいえば「q」や「z」と打つのとほぼ同じ。いま何の文字を打ったのか、ということが記憶に残りにくいのではないかと思うのです。

2.時間がかかるということ

キーボードで打つよりも書いたほうが時間がかかります。(計ったわけではないですがたぶん)
なので書いている間、多くのことを考えることができます。
「これは英語そのままの意味やな」「何回もでてきたな」などと考えながらなので記憶に残りやすいのではないかと思います。

*

人によるのかもしれませんが、僕には手書きのほうがしっくりきているようなので、しばらくは手書きで勉強してみます。 

おうちで学べるプログラミングのきほん

おうちで学べるプログラミングのきほん

 

 

ペンタブで作業効率2倍

f:id:webbibouroku:20160112164636j:plain

ある制作会社で、打ち合わせ。 その会社の打ち合わせスペースから見えた作業者は、皆ペンタブレットを使っていました。 「イラストの仕事もされるんですか」と聞くと、「いえ、マウス代わりにペンタブを使用しています」とのこと。 マウスだと、カーソル動かしたい分、動かさないといけないが、ペンタブだと座標で認識しているので、一発で目標の位置をクリックすることができるとか。 マウスよりもかなり速く作業ができるそうです。 2倍ぐらい作業が速くなりました、とも言っていました。

早速試してみたい、と思っていますが、以前「デュアルディスプレイにすると効率2倍になるよ」と言われ、早速試して、そうでもなかったことが思い出されて、なかなかペンタブを買うまでに至っておりません。

先見の明と時代の先を読んだアイデア

最近気になったウェブサイトを2つ紹介します。

Bascule

f:id:webbibouroku:20160112164437j:plain

http://www.bascule.co.jp/

制作会社のバスキュールさんです。つい最近見る機会がありました。 5年ほど前からデザインはほぼこのままなのですが、「今でも通用するデザインだな」という印象です。 5年前と言えば僕がまだ駆け出しのころ。当時このサイトを見て「すごいなー」とワクワクした記憶があります。 当時の感覚で「これは5年後も通用するデザインだな」と予感していました。 やはり5年たった今見ても素敵なウェブサイトでした。

Wix

f:id:webbibouroku:20160112164442j:plain

http://ja.wix.com/

格好いいテンプレートを提供しています。 無料でそれなりのデザインのウェブサイトが作れるというサービスです。 こんなサービスをやったら人気が出るのでは、と以前から考えていたやつです。Wixに先を越されてしまいました。

この2つの事例からわかるように、僕には先見の明と時代の先を読んだアイデアがあります。信用してみませんか?

あと、第三者が形にした後で「これ僕が考えてたやつ」と言う癖もあります。

アンチ眠気

昼ご飯を食べると、眠たくなります。 僕は仕事に集中しているので眠たくなったりしません、と強がってみたいですが、どうしても眠たくなります。 眠たくなると、歩き回ったり、積極的に電話に出たりして、まぎらわそうとします。

なんとか眠気をまぎらわす方法はないかと、試行錯誤をしているうち、エスタロンモカという薬を知りました。

f:id:webbibouroku:20160112164415j:plain

エスタロンモカ錠は、ねむけを防止する医薬品です。主成分の無水カフェインが大脳皮質に作用してねむけを除き、ビタミンB1がカフェインとともに働いて倦怠感を取り除きます。会議の時、深夜の残業、受験勉強など、ねむけをとりたいときに効果的です。

薬とかはあまり飲まないのですが、先日はじめて飲んだロキソニンというものの効き目から、あまり辛いときは薬に頼るのも悪くはない、と考えを改めたところでもありました。

エスタロンモカは、24錠入りで420円。1錠あたり17.5円。 17.5円で眠気が覚めるなんて、どれだけすばらしい薬なのか、と感動しました。 Amazonのレビューでも高評価が多く、かなりの効果が期待できそうでした。

家の近所のドラッグストアには置いていませんでした。 次の日には、通勤途中にあるドラッグストアに寄ってみました。ここにも置いていませんでした。 手に入らないと余計に欲しくなってしまいます。 僕のエスタロンモカへの思いは日に日に強くなっていきました。

しばらく経ったある日の昼休み、会社の近所のドラッグストアに行くと、ありました。 ついに念願のエスタロン・モカを手に入れました。

飲みました。

【第3類医薬品】エスタロンモカ錠 24錠

【第3類医薬品】エスタロンモカ錠 24錠

レスポンシブについて学んでみた。

f:id:webbibouroku:20160112164356j:plain

レスポンシブデザインとは

あらゆるデバイスに最適化したWebサイトを、ひとつのHTMLで制作する方法です。

基本的にページはひとつなので、目的のデバイス用にページをつくらなくてもいいから、コスト面でのメリットがあります。

実際に制作してみると、慣れていないせいもありますが時間がかかります。 工程としては大幅には変わらないが、慣れればこちらにシフトしても良いかも知れません。

では、どうやってレイアウトを振り分けているか? 参考にさせていただいたサイトがこちら。

株式会社アイ・エム・ジェイ f:id:webbibouroku:20160112164334j:plain

実際にウィンドーサイズを変えてみてください。 みるみるうちに、レイアウトが変わります。 私が確認したもので約4パターンでしょうか。 どれも素敵なデザインです。

振り分け方法は

<link rel="stylesheet" href="PC用.css" media="screen and (min-width:641px)"> <link rel="stylesheet" href="モバイル用.css" media="screen and (max-width:640px)">

でOKです。

元々、CSSの書き方が汚い私ですが、今回の案件で「改めなくては!」と思うほど書く量が多い。 レイアウト上に不具合がある場合は、HTML上にPC用とモバイル用の両方を記述して、 一方はdisplay:noneで削除、みたいな作業の繰り返し・・・。 デザインからも勉強せねばなりません。

レスポンシブデザイン普及の背景などについての記事はこちらのページが参考になります。

いやぁ、WEBの世界はめまぐるしい。 勉強しても勉強してもキリがないですが、がんばって覚えようと思います。