リスクのないスマートフォンサイトのプロモーション方法

リスクのないスマートフォンサイトのプロモーション方法

スマートフォンでのプロモーションはとても難しいですね。
実際にいろいろとスマートフォンのEC広告を出してみて、私は実感しています。

スマートフォンの集客というと、現状、ネットワーク広告かリスティング広告くらいしか主だった集客方法がなく、また、PCページをそのまま表示させた方がいいのか、モバイルページの流用なのか、スマートフォン用に最適化したページにすればよいのか、売れる方法が確立されていないので、試行錯誤が必要です。

だからと言って、いつまでも待っているだけにもいきません。

確実に伸長している市場である為、今の状況だからこそ、きちんと取組んで、自ら「スマートフォンで売る方法」を見出し、ノウハウ蓄積をする方は未来が明るいと思います。

そこで、ノウハウは蓄積したいが、広告出稿はまだ抵抗があるという方におすすめなのがアフィリエイトになります。

▼スマートフォンでのアフィリエイト

上記のようにスマートフォン対応サイトは作った。でもプロモーションにお金を掛けるのはまだ怖い。そういったショップ運営者様も多いのではないでしょうか?

事例作りのために、様々な手法や、媒体に出稿していますが、自分が実際に経営者であったら、スマートフォンでの広告出稿に関しては慎重になると思います。

アフィリエイトならば、売れた後に成果報酬を払えばいいので、売れるかわからない商品ページ・媒体でも安心して掲載することができます。

▼各アフィリエイトサービスプロバイダ(ASP)会社の動き
アフィリエイトで有名な会社といえば、みなさんファンコミュニケーションズ社やインタースペース社などを思い浮かべると思います。

この両社は、すでにスマートフォンのアフィリエイトに取り組んでいます。

まだ、スマートフォンのアフィリエイトに対応していないASPもありますが、どの会社も開発は進んでいるようです。
スマートフォンアフィリエイト
私の携わっているショップでも、アフィリエイトでのプロモーションをしていますが、まだまだインプレッションやクリックは少ないのが現状ですが、確実に成果は上がり始めています。みなさんも早く始めてください。

▼アフィリエイトを活用する場合のポイント
①まず、大前提として、ASPがスマートフォンに対応したサービスを提供しているかということになります。

②次に自社のショッピングシステムがスマートフォンアフィリエイトに対応できるかどうか。
(aishipならば、スマートフォンアフィリエイトとの連携にもすでに対応しています。)

③ランディングページをPCサイトへそのまま誘導すると、50%離脱率が高まるという結果が出ていますので、ランディングページはPCサイトではなく、スマートフォン用のページへ誘導するようにしましょう。

上記3つのポイントを押さえていれば、アフィリエイトでスマートフォン経由の売上をあげることができます。

5月に入り、ASP各社がスマートフォンのアフィリエイトに力を入れています。事例作りのためにクライアントを探しているので、今始めれば料金面など、交渉次第で少し優遇してもらえますので、是非、アフィリエイトを始めてください。

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(4)~

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(4)~

過去「スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎~」というタイトルで、スマートフォンらしいレイアウトを作成するためのご案内を3回配信してきました。全て静的な、見た目を変えるためのご案内でしたが、今回はいよいよ動的な「折りたたみコンテンツ」の作成方法についてご案内致します。


折りたたみコンテンツと言えば、スマートフォンでも比較的よく見られる形式のレイアウトです。ページが縦に長くなる場合、見出しだけをあらかじめ表示しておいて、その見出し部分をクリック(タッチ)することで、隠されていたコンテンツを表示する、というものです。aishipではこういった動きのあるコンテンツも作成することができます。

動的、と言っても独自にプログラムやjavascriptなどを記述する必要はありません。aishipにはあらかじめスマートフォン向けCSSが用意されているように、折りたたみコンテンツを作成するためのスマートフォン向けjavascriptも準備されています。
ですので折りたたみコンテンツを作成するために必要な操作も、やはり過去3回の記事と同様に「HTML内にclass名を指定するだけ」なのです。
それでは実際に操作を行っていきましょう。

操作手順
まず事前に作成をしておきたい内容として
○見出し部分(タッチさせる部分)
○コンテンツ部分(通常折りたたまれて隠れている部分)

の2つが必要になります。

この準備が整ったら、さっそく見出し部分にclass指定をしましょう。
見出しに指定するclass名は【sp-toggle】です。

さて、この【sp-toggle】の使い方ですが、
「sp-toggle」が指定された部分をタッチすると
そのすぐ下にある部分が開閉する
という動きになります。


です。

つまり開閉させたい部分についてはここからここまでが開閉する領域である、ということを指示しておかないといけません。
手っ取り早い方法としては、開閉させる領域をdivタグで囲んでおくことです。そうすると<div>~</div>で囲まれた部分が、見出しをタッチすることで開閉されるようになります。

開閉するコンテンツ部分へのclass指定は必須ではありません。レイアウトの調整が必要であれば指定してあげるといいでしょう。また、開閉させたい部分が全て1つのtableなどに収まって作成されている場合は、改めてdivタグで囲まなくても問題ありません。
また開閉するのは「sp-toggle」の「すぐ下にある部分」なので、見だし部分とコンテンツ部分との間に改行タグなどは入れてはいけません。

ここまででHTMLの準備は完了です。
続いてCSSですが、aiship管理画面内の「デフォルトCSS」内に

.sp-toggle + * {    display: none;}

という記述があることを確認して下さい。この記述が開閉のポイントです。
(もしも無ければ「ユーザーCSS」内へ追加してください)

「sp-toggle」の指定や開閉させる範囲の指定が出来たら、折りたたみコンテンツは完成です。あとは実際にスマートフォンでアクセスし、折りたたみの動作がするかどうかを確認して下さい。

まとめ
いかがでしたか? aishipではあらかじめ作成されたclass名を指定することで、動きのあるスマートフォン向けレイアウトもすぐに作成することができます。
ポイントとして、見出し部分は実際にタッチされる部分になるので、タッチできることを視覚的に伝えられるようなデザインにすることも忘れてはいけません。前回の記事を参考いただき、背景の装飾やテキストの装飾でボタンらしいレイアウトにしてみましょう!

QRコード・メルマガからのスマートフォンへの誘導

QRコード・メルマガからのスマートフォンへの誘導

本日はとても初歩的なことですが、ショップ運営者として気付いた点があったので記事にさせていただきます。

▼PCサイトからのQRコードでの誘導について
最近、PCの方で様々なネットショップを見ていると多くのサイトで下のような画像を見ることが多くなった気がします。
スマートフォンQRコード
サイトの左メニューに「携帯サイトはこちらから」の文言とともにQRコードを表示していますが、このQRコード、スマートフォンの中に埋め込まれています。
ということは、スマートフォンでも見れるという認識で、スマートフォンでQRコードを読み取りアクセスしてみると…

楽天市場
この、携帯で見てくださいという画面が表示されることが多いです。
なぜこのようなことが起きるのか。それは簡単です。

楽天では
PC用URL[http://rakuten.co.jp/]
モバイル用URL[http://m.rakuten.co.jp/]
となっていますが、スマートフォンでアクセスする場合、PC用URLのhttp://rakuten.co.jp/にアクセスしなくてはならないのです。

▼メルマガからのスマートフォンへの誘導
モバイルのメルマガを配信する際も注意が必要です。
楽天でショップでモバイルメルマガを配信する際には
http://m.rakuten.co.jp/ではじまるURLでメルマガを送信しますが、
spモードの登場により、フィーチャーフォンで使用していたメールアドレスが引き継げるようになったため、スマートフォンでhttp://m.rakuten.co.jp/ではじまるURLのメルマガを受信している人もいるのです。
その場合、http://m.rakuten.co.jp/ではじまるURLにアクセスした時に先ほどと同じ「携帯で見てくださいという画面」が表示されてしまいます。
スマートフォンユーザーの購入機会損失を防ぐために、モバイルのメルマガを送信する際は、

ケータイはこちら
http://m.rakuten.co.jp/(モバイル用URL)

スマートフォンはこちら
http://rakuten.co.jp/(PC用URL)

というように、モバイル用URLとPC用URLを記載するようにしましょう。

意外とこのあたりに気付いていないショップ様が多いので、今日から早速実践してみてください。

~スマートフォン広告(アドネットワーク)のCVRアップ方法~

~スマートフォン広告(アドネットワーク)のCVRアップ方法~

スマートフォン広告(アドネットワーク)のCVRアップ方法 3つのポイント

今回はスマートフォン広告においてのCVRアップ方法について3つのポイントをご紹介します。

▼アドネットワークによるスマートフォン広告

前回スマートフォンにおけるアドネットワーク広告についてご説明したと思います。
アドネットワーク広告はバナーで提携サイトに露出させる広告ですが、CVRを上げる方法として下記2つの要素の親和性が必要不可欠です。

・クオリティの高いバナー
・スマートフォン対応のLP
これらに留意して“スマートフォンショッピングサイト見せ方”を考える必要があります。

CVRを高めるために、単純にアクセスを上がるバナーデザインが良い訳ではありません。だからと言ってLPのクオリティだけを上げても、肝心なバナーが良くなければ意味がありません。

興味を持ったら『とりあえず商品の詳細をみたい』という目的を持ってアクセスしている人が多いので、UIを考えたページのデザイン表示を大前提にしてください。

■まずクオリティの高いバナーについて、バナーサイズがガラケーは192×53pixだったのに対し320×48pixになります。

ガラケー用バナー

スマートフォン用バナー

キャッチ等は今までのガラケーユーザー向けに考えていただいてかまいません。
しかし、スマートフォン広告はクリック単価が高めなので、斬新なキャッチでクリックを
上げる事よりも、商品の『価格』『内容』を記載し無駄クリックを避けるようにし、ランディングページとマッチしているバナーにしましょう。

■スマートフォン対応のLPについてですが、まず手を加えずPCサイトをそのまま表示されても購買につながらないのはこの情報サイト自体でも良く紹介されているのであえてかきません。

その上で『スマートフォン対応のLPとは何?』とご質問を頂きますのでそれをわかりやすいように下記の図に記します。

ポイントは、バナー経由できたユーザーのコンバージョンを上げるためのページ作成が必要になります。問題は『スマートフォンはモバイルと同じようなデバイス。では今までと同じようなガラケー用LPで表示させるのが良いのか?』ということです。

実際にある商品を、そのままのガラケー用LPとスマートフォン用に作成したLPでアドネットワークに掲出し、ABテストを行いました。


※Bは全部文字も画像できれいに作ってあります。テキストで表記するよりよりも
スマートフォンではガラケーと違ってサイズを気にすることもなく鮮明な画像を見せられます。

結果はAのページよりも、Bのページ(リッチコンテンツ)の方が2.33倍の転換』

この結果を持ってしても、多くのEC事業者様は「スマートフォンで物を買うことが浸透してないから」と思われるかもしれません。
でもガラケー用LPをスマートフォンで表示させると、スマートフォン用に作成したLPと比べてCVRは落ちているのは事実です。

同じようなデバイスでもUIは異なり、ガラケーサイトと同じ表示ではスマートフォンの特性を生かすことができなくなるのです。もはや『売れないのはスマートフォンだから』という理由で迷っていては、取り残されてしまいます。

■まとめ
スマートフォン広告においてのCVRアップ方法の3つのポイント

①『価格』『内容』を記載し無駄クリックを避けるようなバナー
②テキストで表記するよりも鮮明な画像表記のLP
③これまでの携帯向けサイトをそのまま表示するのではなく、ユーザーの使い勝手を意識し、スマートフォン向けにデザインしたLPを表示。

スマートフォンECサイトでユーザ満足を高める3つのポイント

スマートフォンECサイトでユーザ満足を高める3つのポイント

▼ パソコンでのECサイト利用者はすでに減少傾向?

先日の日経MJの記事(2011年4月25日)で興味深いデータがありました。外出先でスマートフォンでのネット閲覧の機会が増えているというD2C社がまとめた調査ですが、中でも私が興味深く感じたことは「パソコンでの閲覧頻度が約2割減った」という点です。

個人的な消費に関しては、PCでのECサイト利用が減少し、スマートフォンという新たなモバイル端末での閲覧が増加していくという仮説について以前の記事『スマートフォンECサイト対応』で記載しましたが、これらを裏付けるデータでもあります。

いずれにしても個人消費向け商品を提供するECサイト運営はスマートフォンユーザへの対応が益々重要となりますので、今回はスマートフォンECを実施していく中で、ユーザ満足を高めるポイントを整理してみます。

▼ まずはスマートフォンECサイトユーザの不満を克服するために

スマートフォンECサイトのユーザ満足を高めるために、まず実施すべきことはスマートフォンECサイトのユーザの不満点を認識し、それらを加味したスマートフォンECサイト構築・運営を心がける必要があります。

そこでスマートフォンECサイトに対する不満点を見てみましょう。以下は2011年3月の調査でのスマートフォンECサイトユーザの不満点について、不満が高い順にその項目を並べたものです。

① 1ページの情報量が少ない(ページ遷移が多い)
② 商品比較がしにくい
③ ページ読み込みに時間がかかる
④ テキストの入力が面倒
⑤ 同じサイト内で商品比較がしづらい

(出典:IMJモバイル「スマートフォンユーザのECサイト利用実態調査」2011年3月29日)

これらそれぞれの不満を解決したスマートフォンECサイト作りを心がける必要がありますが、その非常に良いお手本があります。それは既に国内でノウハウが確立されているモバイル(ガラケー)ECサイトです。

以下の調査データは2007年にモバイル(ガラケー)ECに関しての不満点の調査をまとめたものです。この結果と上記を比較いただくと非常によく分かります。スマートフォンECユーザもモバイル(ガラケー)ECユーザも感じている不満な点やその順番も全くと言ってよいほど同じなのです。

ですから1999年以降、既に10年以上も改善されてきたモバイル(ガラケー)ECの満足度を高める工夫(モバイル(ガラケー)ECのノウハウ)、例えば「1ページ容量」、「入力を最小限にしたカートステップ」、「空メール」、「回遊性を高めるページレイアウト」などの工夫をスマートフォンECに活用することが、スマートフォンECユーザの不満点を解決する近道と言えます。(ここではモバイル(ガラケー)ECのノウハウ・工夫の詳細については割愛します)



(出典:IMJモバイル「モバイルショッピングサイトのユーザビリティに関する調査」2007年12月25日)

▼ スマートフォンECサイトユーザの満足

それではスマートフォンECサイトユーザの満足点を満足が高い順に見てみましょう。
(この調査ではユーザがこれまでのモバイル端末(ガラケー)と比べてこのように答えているのでしょう。)

【スマートフォンECサイトユーザの満足点】

① 画像が見やすい
② 画像のズームがしやすい
③ 文章が読みやすい
④ リンクが押しやすい
⑤ レビューが見やすい


(出典:IMJモバイル「スマートフォンユーザのECサイト利用実態調査」2011年3月29日)

スマートフォンはリッチなモバイル端末で、PCのようにJSを利用して・・・など色々なことが出来るのですが、ことECに関して最も重要なコンテンツは「商品」ですので、ユーザが感じている満足点としては「JSを使った・・・」というようなテクニック的なものではなく、「画像」「リンク」という商品情報の見やすさや操作のしやすさという基本的なことなのでしょう。

▼ スマートフォンECサイトでユーザ満足を高める3つのポイント

以上を加味すると、スマートフォンECサイトのユーザ満足を高める3つのポイントは以下のように整理できます。

1.モバイル(ガラケー)ECのユーザ不満を解決させる工夫を取り入れる
2.画像や文章の見易さを工夫する
3.リンクの押しやすさを工夫する

JSを利用してあれこれ工夫して「かっこいいサイト」を作ることに時間を費やすよりも先ずはストレートに、上記の3点が加味されたスマートフォンECサイト構築が出来ているか?ということの方が転換率やサイトの顧客ロイヤルティを高めることにつながるでしょう。

スマートフォン集客にも!メールマガジン(デコレーションメール)の転換率をアップさせる4つのポイント!

スマートフォン集客にも!メールマガジン(デコレーションメール)の転換率をアップさせる4つのポイント!

神村:
梶山さん、メルマガから商品を購入ってしたことあります?

梶山:
私、メルマガはほとんど読まないの。
件名でメルマガだとわかったら読まずに削除することが多いかも。

神村:
まぁ、大多数の人がそうでしょうね・・。

梶山:
あ、でも、興味を引かれる件名の時は内容を見てみるよ。

神村:
そこなんです!
メルマガ全般に言えるのですが、とっても重要なポイントなんです!
どんなに内容の良いメルマガを作っても、読んでもらえなければ無意味ですよね。
ユーザーの興味をひく件名をつくることがメルマガ攻略の第1歩です。

梶山:
おぉ、確かに!!
メルマガって配信数が多いから、件名だけで判断しちゃう人は多いよね。
第1歩の件名問題をクリアしたとしても本文が重要だよね。
まずは第1印象!!
見た目も文字ばっかりのメルマガだと読みづらいし、逆に画像が多くてもガチャガチャしていて読みづらい。

神村:
はい、多くてもスクロール1回につき1画像が限度です。
でも、画像で一番注意するべき点はリンク先のページです!

梶山:
リンク先?

神村:
はい、
商品ページをより良く見せようとして画像をベタベタ貼り付けると容量オーバーで見れなくなるんですよ。
3キャリア(ドコモ・au・ソフトバンク)ともに100KBという制限があるの要注意です。
実は、このミス・・意外と多いんですよ。

梶山:
あー!!
過去にそういうページがあったよ。
そうなると、購入意欲が下がるよね。メルマガの対応もまともにできていない店舗で商品を購入しても大丈夫かしら?と思っちゃうもの。

神村:
はい。信頼につながる細かい部分は重要ですよね。
あと注意すべき点はリンクの見せ方です!

梶山:
リンク?

神村:
現在、メルマガはテキストに直接リンクを貼るのが主流です。
ところが、この方法・・どういう危険が潜んでいるのか分かります?

梶山:
うーん、なんだろう。
当たり前のことのように思えるけど・・・

神村:
これはクリック率をあげるプチポイントです!
テキストに直接リンクを貼ってしまうと、ユーザーがリンクに気づかない場合が多いんです。
当社で何度かテストをしたのですが、テキストに直接リンクを張るよりも「URLを記載してリンクを貼る」方がクリック率が高かったという結果がでたんです!!

梶山:
あー!
確かに。デコレーションメールマガジン(以下デコメ)の場合、他が華やかに装飾されているからテキストに直接リンクが貼ってあっても見落としてしまう可能性は高いよね。
URLが記載されていて、そこにリンクが貼ってあると嫌でも目にとまるかも!!
デコメのない時代は直リンクのみだったので、昔からの通販ユーザーには直リンクの方が馴染みがあって、クリック率が高くなるのかもしれないね。

神村:
はい。
極力機会損失を防がないと、せっかく読んでくれたのに勿体ないですよね。 
スマートフォン向けのメルマガのポイントもあるのですが、これは近いうちにご紹介しましょう!!

梶山:
端末に合ったメルマガのポイントがあって、それぞれに細かい工夫が大切になるんだね。

神村:
そうですね。
あとは内容。一番重要です!

梶山:
読み物として面白いメルマガは最後まで読んじゃうなぁ。
しかも、次回配信をちょっと楽しみにしたりして・・。

神村:
ですよね。
ただ、商品の紹介だけではなく、コンテンツ的な要素が含まれているとよりユーザーに受け入れてもらえるんです。

梶山:
うん、
スタッフの近況とか豆知識とか・・内容が面白かったら次回の配信が楽しみになるよね。

神村:
「あ、また来た」と思われないデコメを作る工夫は大切です。
担当しているお客様にはお話しするのですが、基本はユーザーの立場にたって、読みやすい・気づきやすい・楽しいページを作ること・・なんですね。
   
梶山:
うん、そう考えると店頭の接客と似ているんだね。
一方的に商品説明をするのではなく、相手とのコミュニケーションをとることが大切。

神村:
はい、「楽しませる工夫」「相手とのコミュニケーション」が競合との差別化につながります!
メルマガから購入してくれるユーザーは意外と多いんです。
奥は深いです!!工夫すればするほど、結果もでてきます。
自社のカラーを出しながら、よりよいメルマガを作り上げていくことは売上増加に直接つながります!

ポイントとして

 1.件名を工夫する。
 2.商品リンクはURLを記載しリンクを貼る方がクリック率が高い。
 3.コンテンツ的な要素(担当者の世間話当)も入れる。
 4.リンク先ページの容量に気をつける。

梶山:
なるほどー!
勉強になります。
モバイル・スマートフォン通販は奥が深いね。
ちょっとした心遣い、工夫が大きな差となる・・本当に面白い。
もっともっとこの業界と関わっていきたかったけど、私・・産休に入っちゃうので、これからは読者として、このサイトで勉強させてもらうね。

神村:
はい!
梶山さんが戻ってくるまでに、ECのプロになっています!

梶山:
おぉ、頼もしい!
・・と、いうことで次回からは当社のツートップ営業マン松本と良知が加わり、ハイクオリティな情報をお伝えします!
お楽しみに~!!

ECにおけるスマートフォン広告の現状

▼スマートフォン広告と既存のモバイル広告の違い
今回はスマートフォン向けの広告について取り上げます。
PCの広告とも、モバイル広告とも一味違うラインナップになっています。
既存モバイル広告と比較すると、携帯サイトで多かった、
「会員に対しメールを配信する」広告メニューがほとんど見られません。
これまでの携帯サイトがスマートフォンでは見られなくなっている場合が多いため
スマートフォンサイトではまだ有効な会員を集めるほどの規模になっていないのが
要因と推測されます。
また、サイト閲覧と合わせてアプリを利用する方が多いため
サイトごとの純広告というよりは、アドネットワークが主流となっているようです。 Read More
スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(3)~

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(3)~

by 上林洋介 0 Comments

さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。
大まかな流れは前回と同様、あらかじめ準備されているスマートフォン用CSSを用いてHTMLにデザインを適応していく、というイメージです。CSSサンプル内から必要なクラス名を取り出し、HTML内に入力してレイアウトを整えていきましょう。
また、今回は少しステップアップしてサンプルCSSを元に少し独自でCSSを操作・追加する流れもご案内します。

前回は「スマートフォンでよく見かけるレイアウト」としてメニュー部のご案内をしました。今回は同じくよく見かけるレイアウトとして「リンクをボタン化する」手順をご案内したいと思います。

リンクをボタンにするということは、一見すると大したことではないように思えるかもしれません。ですが実際にスマートフォンを操作していただくと、通常のテキストリンクのクリックのしづらさを実感いただけると思います。
リンクをボタン化することは、レイアウトとしてリンク部を強調するだけではなく、タッチパネルでの操作性を向上するという点においても重視すべきポイントです。またリンクのボタン化は汎用性があり、ボタンレイアウトの調整をすることで様々なシーンで活用いただけます。

今回はシンプルかつ解りやすいボタン化についてご案内します。
最終的なレイアウトの比較は下図の通りです。

ステップ1:まず囲んでみる
それではHTMLを作成しましょう。
携帯サイト作成画面上でまずテキストリンクを作成します。

リンク作成後、このリンクにスマートフォン用サンプルCSSから、ボタンに使用するための記述をいくつか選択して適応します。
まずはテキストリンクを枠線で囲んでみましょう。

リンク部分が灰色の枠線で囲まれました。

ステップ2:余白を設ける
少し窮屈に感じられるので、枠内に余白を設けます。

リンクを囲むdivタグ内に、余白を設けるクラス名を追加しました。
これでボタンの大枠は完成です。

ステップ3:グラデーションを付ける
さて、ここからオリジナルCSSを作成し、追加していきます。
最終的なレイアウトではボタンにうっすらと影がついています。これはCSSでグラデーションを適応しているのですが、aishipで用意されているサンプルCSSを用いた場合、最終的なレイアウト図とは異なるレイアウトになってしまいます。

最終的なレイアウト図に近づけるため、サンプルCSSを活用して新たに「ボタン用のグラデーション」を追加していきましょう。
サンプルCSS内に記述されているグラデーションは下記の通りです。

これは実は同じグラデーションの指定が、形をかえて2回記述されています。サイトへアクセスされる端末やブラウザにあわせて2回記述が必要となるのですが、両方とも
「上から下へ向けてグラデーションをする」
「グラデーションの開始時の色は#888888(濃い目の灰色)」
「グラデーションの終了時の色は#ffffff(白)」
と記述しています。

最終的なボタンイメージ図のグラデーションを上記に沿ってまとめると
「上から下へ向けてグラデーションをする」
「グラデーションの開始時の色は#ffffff(白)」
「グラデーションの終了時の色は#efefef(白に近い灰色)」
となります。


サンプルCSSからグラデーションに関する記述をコピーし、
1.開始時の色
2.終了時の色
3.クラス名
を書き換えて、管理画面内のユーザーCSS欄にペーストし、保存しましょう。クラス名を変更しないとグラデーションがうまく適応されない場合があります。必ず変更して下さい。

保存が完了したら、さきほどのソースイメージに新しいクラス名を追加しましょう。

これでボタンは完成です。

まとめ:
このように、スマートフォン向けショッピングカートASP『aiship』ではサンプルCSSを元に新しいCSSを増やすことも可能です。今回はボタンの背景にグラデーションを適応することで、ボタンらしい(クリックできそうな)質感をイメージしましたが、例えば背景色や背景画像を指定したり、ボタンの横幅を指定することで更にバリエーションに富んだ表現ができます。
サンプルをもとに様々なCSSを追加して、色々なレイアウトを試してみて下さい。ただし、あくまでもタッチパネルで操作をするということを忘れないでくださいね。

ユーザーに共感してもらえるようなレビューを書いてもらうためには?

ユーザーに共感してもらえるようなレビューを書いてもらうためには?

(神村)前回レビュー導入によって得られる効果についてお話ししましたけど実際にうまくレビューを導入している店舗って、どうやって商品レビューを書いてもらっているんでしょうか?
売れ筋商品であればたくさんレビューを書いてもらえると思いますが、発売したばかりでまだ誰もレビューを書いていない新商品やまだ売れていなくてこれから売り出すような商品はただ売っているだけじゃ中々レビューは書いてもらえないですよね?

(梶山)売れ筋商品に関しては購買レビューで十分だよね。
でもこれから売り出す商品についてはレビューを書いてもらうために色々な工夫をしている店舗もあるんだよ。どういう時に商品レビューを書いてみようと思う?

(神村)うーん、私が商品を買う立場だったら「レビューを書いたら送料無料」など自分に何かしら特典やメリットがあれば書きますね。
レビューを書くこと自体そんなに手間ではないですし。

(梶山)そうだよね。いかに“ユーザーにメリットがあるか”ということがレビューを書いてもらうコツなんだね。またユーザーにメリットがあるほうが良いレビューを書いてもらいやすいよね。

(神村)なるほど!いかに “ユーザーメリット”を考えられるかが重要なんですね。

(梶山)あとはサンプルレビューっていうのもあるんだよ。これは商品を購入したユーザーにレビューを書いてもらうのではなく、商品サンプルをプレゼントする代わりにレビューを書いてもらうことなの。

(神村)サンプルレビューはこれから売り出す商品の場合は凄く効果がありそうですね。ただ“ユーザーメリット”を優先してしまうと店舗側で送料を負担したり、サンプル商品も負担したりとある程度コストがかかってしまいますよね。
コストをかけずにレビューを書いてもらうコツってないんですか?

(梶山)私が凄く効果的だと思ったのは、フォローメールだよ。
商品到着後に店舗から届くフォローメールの内容で、お買い物レビューだけを単純に要求するようなメールではなく、丁寧な挨拶とお礼の内容の後に『よろしければ商品についての感想・ご意見をお聞かせいただければ幸いです』とレビューのURLと一緒に書かれていたの。

(神村)丁寧な挨拶とお礼から始まっているせいか、全く嫌味は感じないですね。その方法だと気持ちよく買い物が出来るのでレビューも書きたくなりますし店舗への信頼も高くなります。リピーターにもなってくれるかもしれませんね。

(梶山)そうなの。商品を買ってもらうまでで終わるのではなく、その後のアフターフォローも大切なんだね。お客様を大切に思う気持ちが次のお買い物にもつながるんです。

ECサイトのスマートフォン対応事例 ~PC/モバイル商品ページの流用~

ECサイトのスマートフォン対応事例 ~PC/モバイル商品ページの流用~

▼スマートフォンに最適化したサイトのお話で、みなさんはトップページばかり気にしていませんか?
実際に、商品が売れるのは、買い物カゴに入れる商品ページですから、「どのような商品ページを作成すれば売れるのか」というところもスマートフォン最適化をするうえで考慮しなければなりません。

私の運営するサイトで、『スマートフォンではどのような最適化方法(見せ方)がよく売れるのか?』実際に広告を出して検証しているので、今回はその事例を少しご紹介します。

▼今回はコンテンツが同じで以下の2種類の商品ページを作成し、どちらが売れるかを試してみました。
1つは「モバイルサイト(ガラケー向け)で比較的転換率が高いのページデザインをそのままを流用したページ」です。もう一つは「PCサイトで比較的転換率が高いページデザインをそのまま流用し、サイズを最適化したページ」です。

これらのページデザインは以下に示します。左が、ガラケー流用ページ。右が、PC流用品ページです。(カゴに入れる等のリンクについては、どちらも押しやすいボタンにデザインの最適化をしてあります。)
 
実験期間:2011年3月21日~2011年3月27日
集客方法:バナー広告(アドネットワーク) 期間中約5000ユニークアクセス

▼どちらのページが売れたと思いますか?
実は、どちらも変わらないという結果(期間中の販売数約:10件)でした。
厳密に言えば、PCサイトを最適化して表示させたページの方が若干売れましたが、誤差の範囲です。またスマートフォンユーザをPC向け商品ページに誘導するよりかは今回の2つのページの方が転換率が向上していますが、転換率0.2%とどちらも思わしくない結果で、しかもどちらもモバイルサイトやPCサイトで利用しているページの転換率よりも悪い結果でした。

この実験結果から言えることは以下です。

・スマートフォンユーザをPCページに誘導するよりも、スマートフォンに最適化したページへ誘導したほうが、転換率は向上する。

・最適化方法はモバイルサイトベース/PCサイトベースどちらでもあまり変わらない。

・スマートフォンでの転換率向上に対して重要なことは、モバイル/PCどちらをベースにスマートフォン対応するか?ということよりも、スマートフォン向けに訴求性を高めたデザインが必要。

▼運営者になってしまうと難しいことですが、ここで消費者目線に戻って再度2つのページデザインをスマートフォンで確認して検証してみますと以下2点について転換率を下げる要素があります。

①モバイル流用ページをスマートフォンで見ると、ホワイトスペースが多く、少し物足りない。
②PC流用ページをスマートフォン見ると、リッチな作りのページではあるが、あくまでリサイズしただけなので、ところどころ拡大をしなければ見づらい部分がある。

ですからスマートフォンではこれら2つのことが解決できるページが必要ということになります。

まだまだ、手探りの状態ですが、スマートフォンで商品を売る為にこの後も様々なテストを行っておりますので、次回更新も楽しみにしていただければと思います。