スマートフォン対応に最適なECサイトは?

スマートフォン対応に最適なECサイトは?

通販サイトを運営されている方たちも、そろそろスマートフォンに対応をしなければならない時が来ました。

まだまだスマートフォンなんて。

と言っているとあっという間に置いていかれてしまうことになるでしょう。

主要都市だけなのかもしれませんが、確実にスマートフォンを持っている人が増えているのも事実です。1年以内にはシェアが50%を超えてくる事も予想できます。

さて、あなたの運営するサイトは、スマートフォンでアクセスすると、どう表示されますか?

PCのサイトが表示されているのならば、即刻、変更したほうが良いです。

こんなに小さな画面でPCサイトではユーザビリティーが悪いです。
スマートフォンでPCサイト表示

まれに、PCサイトが表示されたほうが見やすい。買いやすい。という運営者の方とお話をしますが、そんなことはありません。

スマートフォンは小さなPCという認識でいいと思いますが、あくまで、モバイル端末です。

ここまでくれば、スマートフォンで、PCサイトとモバイルサイトどちらを表示させれば良いかわかったと思います。

そう。スマートフォンはモバイル端末なのです。

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

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

1.なぜスマートフォン用CSSを作るのか
PC用のサイトへ誘導することも、携帯用のサイトへ誘導することもスマートフォンに対しては適切とは言えません。
スマートフォンではPC向けに作成されたサイトへもアクセスすることができます。しかし画面内にページの全体が表示されなかったり、全体が表示されても今度は文字サイズが小さすぎて読みづらかったり、またPC向けのファイルサイズの大きな画像を読み込むのに時間がかかったりと、決して快適なWEBブラウジングは行えません。
携帯向けサイトへアクセスすると、こうした問題の多くは解決されます。ですが携帯のようなナンバーキーでの操作ではなく、スマートフォンは画面に直接指で触れるタッチパネルで操作を行います。このユーザーインターフェースの違いが携帯向けサイトとスマートフォン向けサイトの大きな隔たりとも言えます。
携帯向けに最適化されたサイトは、このナンバーキーでの操作が加味されたサイトと言えるでしょう。それが逆にスマートフォンでは適さない、または扱いづらいといったこともあります。
更にスマートフォンは先述の通りPCサイトも閲覧できる高機能な端末です。携帯向けに最適化されたコンテンツよりも、もっとリッチなコンテンツを提供し、楽しんでもらうことが出来るのです。

このPCと携帯の良いところを併せ持った、スマートフォン向けに最適化されたサイトを作成することが、スマートフォン利用者が増加している今、サイトオーナー様に求められるものなのです。

2.スマートフォンCSSを使えばこんなことが出来る
CSS(カスケーディング・スタイル・シート)とは、HTMLソースとは別に用意されるデザインを指定するための専用ファイルです。CSSが読み込まれるまではシンプルなページでも、CSSを読み込ませることによってデザイン豊かに、リッチなページを表示することが出来ます。
aishipにはスマートフォンCSSが標準搭載され、簡単に管理画面からそのスマートフォンCSSを編集することで、スマートフォン向けにリッチなデザイン表示が可能となります。

3.スマートフォンECサイトデザインの特徴
スマートフォン用ECサイトでは、下記のような特徴があります。
・メニュー部
・カテゴリ表示部
・商品画像の見せ方

例えばメニュー部では、通常携帯サイトではテキスト一覧で表示されるものですがスマートフォンの場合、CSSを適応することでこのような表示を実現できます。

またカテゴリ用アイコンも、画像を並列に表記するだけではなく、画像を角丸にしたり、画像に影をつけて存在感や可愛らしさを表現することができます。

更に大きな特徴として、商品画像をアニメーション形式に回転させることができます。携帯サイトではFlashなどでなければ表現できず、また画像登録とは別にFlashの作成なども必要となる動作ですが、スマートフォンならCSSを使用することで、登録された画像を回転させることができるのです。

このように、スマートフォン向けにCSSを作成することで携帯向けサイトやPC向けサイトとは異なる、スマートフォンに適したサイトを提供することが出来ます。
スマートフォンCSSを活用して、適切なサイトレイアウトでアクセスした方にストレスを与えず、何度もサイトを訪れてもらえるような魅力的なスマートフォン向けサイトを作成しましょう。スマートフォンショッピングカートasp

「運用効率化 ~「モバイル端末」ごとに最適変換されるシステムを使いましょう!~」

「運用効率化 ~「モバイル端末」ごとに最適変換されるシステムを使いましょう!~」

■PC、モバイル、さらにスマートフォン用のページを作る時間なんてない!
私は仕事上、多くのWebショップの導入相談をされます。
Webショップのオーナー・店長・担当者から数多く寄せられる声は「PCの商品登録・情報更新、LP作成、メルマガ配信に受注処理・・・それだけ時間が無いのに、さらにモバイル・・・その上に、スマートフォン用のページ作成なんて・・・」
このような相談は、本当に多く寄せられます。
そうです。Webショップを運営している方々の大多数が、時間が圧倒的に足りないのが実情です。

■でも、モバイル端末用のページは必要・・・
これまで利用されている携帯電話、そしてスマートフォンを含めて「モバイル端末」と大きく括りましょう。
いづれにしても、これらのモバイル端末用のページ作成は必須でしょう。私が言うまでもなく、様々な研究機関の調査・統計データがそれを示してます。

■システムがモバイル端末ごとに最適に表示をしてくれれば・・・
では、一つのページを作成し、それがモバイル端末ごとに最適な表示をしてくれたらどうでしょう。かなりの運用効率化になるのではないでしょうか。
これまで多くのサイト運営者が、それぞれのモバイル端末ごと・・・携帯、スマートフォン・・・それぞれのページを作成してます。そして修正が入るたびに、またそれぞれに修正・・・。
サイト運営者にとっては悪夢の連鎖です。

■解決策=モバイル端末ごとに最適変換されるシステムを使いましょう。
もはや言うまでもなく解決策はただ一つ、モバイル端末ごとに最適変換されるシステムを使うことです。そうすることで、ショップ運営者は端末ごとにページを変換させている作業の時間に費やすよりも、より多くの時間をショップに訪れていただくお客様に対する「接客」のページ作成に費やすことが出来るのです。また本来はそうすべきなのです。
みなさん、システムを導入するときはこの観点を忘れないようにしましょう。

「モバイル端末」における最適変換の例

※このように、1つのページを作成するだけで、アクセスするモバイル端末ごとに最適変換される
スマートフォン向けのサイトを効率良く構築するには?

スマートフォン向けのサイトを効率良く構築するには?

1.スマートフォンは画面が小さい
2.携帯サイトをスマートフォンで表示してコストダウン
3.CSSを使ってスマートフォンらしく

 ■スマートフォンは画面が小さい

 スマートフォンで一般的なPC向けのレイアウトで作成されたWebページを閲覧するのには小さい画面では拡大縮小を繰り返さないといけません。また、画面を拡大してしまうと今どこを見ているのかわからなくなります。

 画面を上下左右とスクロールできてしまうと現在位置を見失ってしまいます。PCの画面は横長なので大体のWebページは縦スクロールだけで閲覧できます。

 また、携帯(ガラケー、フィーチャーフォン)は縦スクロールしかできないので縦長のレイアウトとなっています。

 スマートフォンでPC向けのサイトを表示してしまうと上下左右とスクロールすることになりとても大変です。これをPCや携帯と同じように縦スクロールのみにすると大変閲覧しやすくなります。

 そこで小さい画面で縦スクロールを実現するために、縦長のレイアウトを採用するのがスマートフォンに最適と考えられます。

 ■携帯サイトをスマートフォンで表示してコストダウン

 スマートフォンはPC向けのレイアウトが可能であることから、PC向けサイトで出来ることは大概のことが実現可能なので、PC向けでありながら小さい画面に合わせたスマートフォン向けのレイアウトを用意するのが理想です。

 ですが、PC向けも携帯向けも、さらにスマートフォン向けも運用していかないといけないとなると大変です。そこで、これまで運用してきたPC向けか携帯向けかをスマートフォンで利用できないかと考えます。

 スマートフォンに近いデバイスは携帯です。小さい画面でかつ縦スクロールでWebページを閲覧します。つまり、画面のサイズで大きく2つに分類し、大画面向けのレイアウトと小画面向けのレイアウトを用意すればよいのです。

 携帯サイトをそのままスマートフォンで表示することで、コストをかけずにスマートフォンに最適なレイアウトを提供することができます。

 ■CSSを使ってスマートフォンらしく

 しかしながら、携帯サイトをそのままスマートフォンで表示すると味気ないです。現時点ではスマートフォンはPCブラウザ以上の表現が可能です。これを活かさない手はありません。

 例えば、スマートフォンの場合に外部CSSを読み込ませます。携帯サイトにスマートフォンらしいスタイルを適応させることでよりリッチなサイトにすることができます。

 基本的なレイアウトは携帯サイトを利用することで手間がかかりません。さらに、CSSを利用することでスマートフォンならではの表現を実現することができます。最小限のコストでスマートフォン向けのサイトを効率良く構築するのです。 

ここから先はCSSのテクニックとなります。アイデア次第でいろいろなことができます。スマートフォン向けショッピングカートのaiship

[事例]モバイル通販サイトの転換率アップ!『ジェルネイルキット販売』のモバイルサイトでみる商品企画からページ作りまで

[事例]モバイル通販サイトの転換率アップ!『ジェルネイルキット販売』のモバイルサイトでみる商品企画からページ作りまで

【ユーザー事例】

株式会社IML

販売商品:ジェルネイルキット

ジェルネイルキット販売のモバイルサイトオープンから、着実に売上を伸ばしている同社。

商品企画やページ作りなど、モバイル通販事業の運営のポイントついてお聞きしました。

・どういった経緯でモバイルサイトの立上げに至ったのかを教えてください。

元々は、メーカー商品のネットショップの運営委託事業を行っていました。

そこでネットショップに関する手法やノウハウを蓄積していくうちに、「自分だったらもっといいものが作れる」と思うようになりました。

運営委託事業だと自社の取り分が少ないこともあり、自ら商品企画から製造、サイト制作からプロモーションまで全てを行おうと思いモバイルサイト立上げに至りました。

・販売商品の「ジェルネイルキット」を選んだ理由は?

それまで多くのネットショップ運営に関わってきたので、どのような商品がよく売れるのかをわかっていました。

ネイルは、よく売れていたのですが、需要は多い割には、供給が少ない商品でした。

また、当時ネイルの一般向け商品にまともな商品作られていなかったというのも、ネイルを選んだ理由のひとつです。

ネイル商品は「かわいさ」が求められるのですが、かわいいものが非常に少なく、中国などで作られた安くて粗悪な商品が多かったので、自分たちがこのギャップを埋める商品を作れば、必ず売れると思いました。

・なぜ(PCサイトではなく)モバイルサイト構築を考えたのですか

現在は、PCサイトも運営していますが、ネイルという商品は若年層(F0層)がターゲットなので、おのずと流通はモバイルしかないと思い、先行してモバイルサイトを構築しました。

・モバイルサイトとPCサイトでは何か違いはありますか?

若干ユーザー層が異なります。PCサイトの方が、年齢層が高く、モバイルサイトとPCサイトの売上比率は、73くらいです。

商品の価格は、若年層(F0層)向けに、ぎりぎりまで価格を下げました。

原価等を考えると今となっては安すぎると思ってます(笑)。

今後は、商品を拡充し、モバイルサイトは1020代向けの商品、PCサイトは30代向けの商品を中心に販売して、一人当たりの単価を上げていきたいです。

・どのような媒体に広告を出稿しているのですか?

広告出稿については、第三者に評価させる手法をとっています。

例えば、人気ブロガーを使ったタイアップ広告です。

人気ブロガーに、自社商品をブログで紹介してもらうことにより、そのブログからの自社サイトへの誘導、クチコミによる販売促進、ブランディングが可能になります。

ネイルという商品は、生活必需品ではないので、ニーズ商品ではなくウォンツ商品です。

ウォンツ商品は、インフルエンサー(消費者に対してカリスマ的に大きな影響を与える人)に「いい」と言い切ってもらわないと、なかなか売れません。

・ページ作りにおいて、転換率UPのために心がけていることはありますか?

商品が同じであっても、広告によって、ランディングページを変えています。

例えば、一般的なバナー広告であれば、通常のランディングページを用意しています。

でも、ブロガーとのタイアップ広告では、ブロガーに合わせて、ランディングページを変えています。

具体的には、人気ブロガーの画像を多用し、人気ブロガーの言葉で商品紹介をすることしています。

また、サイトを訪れた人を離脱させずに巡回させることが重要ですので、あるページの下部には関連するコンテンツのバナーを貼り、サイト内を巡回してもらうように工夫をしています。

また基本的なことですが、読んでほしい文言は、色を変え、動かしたり、点滅させたりすることも重要です。

広告も転換率が高い広告を選ぶことが重要です。広告の効果を測定するツールもあるので、そういったツールは利用すべきです。そうすれば、どの広告が効果的かがわかるので、結果的にはコストを削減できます。

・最後にこれからモバイルサイトを構築しようとしている人にアドバイスをお願いします。

私たちもまだまだこれからなので、恐縮ですが。広告は買いましょう(笑)。広告を使うことを恐れないことが重要です。

どんな商売でも共通する部分がありますが、広告を打たないことには新規客はつかまえられません。