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

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

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のために心がけていることはありますか?

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

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

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

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

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

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

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

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

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

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