Home > スマホ対応

マルチデバイスとどこが違う?今流行りのクロスデバイスについて

こんにちは。nex8事業部の井上です。 今回はマルチデバイスとクロスデバイスについてご紹介します。 最近よく「マルチデバイス対応」とか「クロスデバイス対応」など耳にはするものの、なんとなく知っているだけで違いがよく分からなかったり、混同してしまっている人も多いのではないでしょうか。 そこで、この2つの違いについて分かりやすく紐解いてご紹介出来ればと思います。 マルチデバイスとクロスデバイスの違い マルチデバイスとクロスデバイスの違いに入る前に、まずはそれぞれを説明していきます。 マルチデバイスとは マルチデバイスとは1つのコンテンツを複数のデバイス(端末)で同じように見られることです。 デバイスをまたいで相互に連携している状態のことをマルチデバイス化やマルチデバイス対応と呼びます。 マルチデバイス対応の代表的なサービスにLINEやTwitterが挙げられます。 これらはスマートフォンブラウザでもアプリでもパソコンでも、ほぼ同じ内容の閲覧・操作が可能になっているので、とても身近に感じるのではないでしょうか。 マルチデバイスに対応するためには ここではマルチデバイス対応する為の3つの手法について紹介します。 ・各デバイスに合わせた個別構築 パソコン用サイト、スマートフォン用サイト、タブレット用サイトというように、デバイスごとにURLを分けて専用のページ(HTMLファイル)を作成することで、ターゲットに合わせた情報発信が可能になります。 デバイスごとのデザインは個別に作成するのでこだわることができますが、サイト更新の際にはそれぞれのページをすべて更新することになるため手間がかかるなどのデメリットもあります。 ・自動変換サービス マルチデバイス化が進む中で手軽にマルチデバイス対応できる自動変換サービスも増えてきました。 メリットはパソコンサイトのURLを登録するだけで自動的にスマートフォンサイトを生成してくれるので、特別なメンテナンスなどが不要になる点です。 デメリットとしては、提供サービスの仕様によって構成が決まってしまうので細かなデザイン指定が出来なかったり、サービスの利用費がかかってしまう点が挙げられます。 ・レスポンシブWebデザイン こちらはページ(HTMLファイル)を分けること無く、ユーザーがアクセスしてきたデバイスの画像幅に合わせデザインを出し分け出来る制作方法です。 Googleが公式ページでレスポンシブWebデザインを推奨すると宣言してから、これに対応するサイトも増えていますが、ワンソース(ひとつの元データ)で行えるため更新の手間がかからないと言う点だけでも非常にメリットがあり、今後のマルチデバイス対応においては、このレスポンシブWebデザインが主流になってくるのではと思います。 マルチデバイス対応の際には、これら3つの手法から自社サイトの規模や目的に合わせて対応していく事をおすすめします。 クロスデバイスとは では続いてクロスデバイスです。 クロスデバイスとは、複数のデバイス間で1つのコンテンツが流通し使用出来ることです。 例えば、みなさんも普段の生活の中で朝の出勤時間やお昼休憩に調べていたECサイトのURLを、帰宅後の自宅でゆっくり見るためにタブレットやパソコンにURLを転送したり共有したりした経験はないでしょうか? このように、異なるデバイスで同じコンテンツをユーザーが利用するという行動をクロスデバイスと呼びます。 まとめると、「マルチデバイス」とは複数のデバイスでも同じコンテンツが閲覧できる状況を指すのに対し、「クロスデバイス」とはマルチデバイス対応しているコンテンツを複数のデバイスでユーザーが利用・共有すると行動を指しています。 つまりクロスデバイスはマルチデバイス対応が完了した状態(=各デバイスからのアクセス先URLは常に同じ)でないと成り立たない、ということになります。 ユーザー動向の変化 では次に、なぜ近年マルチデバイス・クロスデバイス対応が注目されるようになったのか考えてみましょう。 以下にご紹介するのは、Yahoo!JAPANの実施したマルチスクリーン環境におけるデバイスの利用実態調査からの引用データです。 ・2人に1人はほぼ毎日タブレットを利用 これには少し驚いたのですが、タブレットを利用している人が多くなってきているようです。 タブレットの場合スマートフォンの手軽さとパソコンの見やすさを兼ね備えているので、ネットショッピングや動画コンテンツの視聴が増えている現代ではマッチしているのではと思います。 自宅で利用する人が増えているのも納得がいきますね。 ・パソコン利用者の約8割が自宅で利用 古くからあるパソコンもなんだかんだ欠かせないデバイスですよね。 仕事の資料作成や編集などが用途として多い印象ですが、30代以上のパソコンからのネットショッピングは70%以上と非常に高い数値となっています。 ・5人に2人は毎日2台以上の異なるデバイスを利用 調査によると回答者の41%が毎日2台以上のデバイスを使っているとのデータが出ています。 改めて気づいたのですが自分自身も普段はスマートフォンを所持していて、職場ではパソコンを使用しているので、2台使用は今では当たり前になってきているのかも知れません。 デバイスの多様化が進んでいる中、このようにユーザーは自分の生活に合わせてデバイスを使い分けている状況にあります。 マルチデバイス対応が基本のSNSを通じた情報流通が今後ますます重要になってくると考えると、ユーザーの利便性を高めアクセスを取りこぼさないためにもマルチデバイス対応を早急に考えておいたほうが良さそうですね。 クロスデバイスにおける広告施策 前述した通り近年では使用目的や場所によってユーザーは複数のデバイスを使い分けています。 そして、そのような背景からマルチデバイスに対応する企業が増え、広告もそれに応じて出稿をしているところが増えてきている状況です。 この時注意しなければならないのが、効果計測やユーザーの紐付けをどのように行うかということです。 例えば、アパレル企業のECサイトでダイナミックリターゲティング広告の施策を行う事になった場合を考えてみましょう。 これまでであれば、Cookieを元にして、パソコンでサイトを閲覧したユーザーが再度パソコンのブラウザを見ている時に広告を配信し、効果を測定することが出来ていました。 しかし今ではこのユーザーはスマートフォンでもサイトに訪れます。 その時違うユーザーだと識別し計測してしまうのは避けたいですよね。 クロスデバイスにおける効果計測の代表例としてGoogleのユニバーサルアナリティクスがあります。 ユニバーサルアナリティクスでは、ユーザーを識別するための「User-ID」と呼ばれるIDを設定することでクロスデバイス計測が可能になります。 これにより、パソコンを閲覧した後のスマートフォンによる購入が多いのか、もしくは初めからスマートフォンで閲覧しそのままスマートフォンで購入するのが多いのかなどのレポートを見ることができるようになります。 またユーザーがスマートフォンでネットサーフィンしている時にも、そのユーザーがパソコンで閲覧していた情報を元に広告配信することが可能になるといった具合です。 ただし、あらかじめユーザーを識別するIDを付与できるサイトでないと、ユニバーサルアナリティクス上でパソコンとスマートフォンから訪問したユーザーとして紐づけることが出来ません。 ECサイトの場合、購入時にログインをするのであれば、このUser-ID機能を活用することが出来ます。 また、個別のIDやログイン情報を元に効果計測を行うので、個人の特定はされないもののプライバシーの観点からも難しい問題ではあります。 ユーザーのネット利用状況の変化に合わせて、より便利な技術の開発は進化していくことは間違いないのではないでしょうか。 まとめ いかがだったでしょうか。 日々進化していくアドテクノロジーですが、基本となるのは全て「ユーザー」であることは間違いないと思います。 ユーザーの利用に合わせて適したアプローチをするためにも、まずはマルチデバイス対応は必須と言えるでしょう。 ユーザーの利用状況に合わせ、クロスデバイスの行動履歴を横断的に取得していくことで、今後さらに精度の高い分析・プロモーション施策の実施が可能になると考えます。

もっと読む

ECサイトはスマホアプリ化必須!?Webサイトとの違いとメリット・デメリット

こんにちは。nex8事業部の井上です。 今回はECサイトのアプリ化について書いていきます。 皆さんのスマホにはアプリがいくつ入っていますか? ゲームや乗換案内、SNSや写真加工ツールといったアプリは、ほとんどの方が1つは入れていると思います。 さらに、ECサイトのアプリやフリマアプリが増えたことで、アプリで物を購入する方も増えてきているのではないでしょうか。 今回は、そういったユーザーのスマホ使用状況の変化に合わせたWebサイトのスマホアプリ化について紹介させて頂きます。 スマホアプリについて アプリとは スマートフォンの普及が進むに連れて「アプリ」という言葉が一般的になってきましたが、まずはアプリとは何か簡単におさらいしてみましょう。 「アプリ」はアプリケーションの略で、ユーザーが利用したい機能を追加するために端末にダウンロードして使用するソフトウェアの事です。 よく使われているもので言うと、例えばエクセルやパワーポイントなども「アプリ」に分類することが出来ます。 ※厳密には、アプリの中でもWebブラウザ上で動作する「Webアプリ」と呼ばれるものもあります。 YouTubeやGoogleマップなどがそれに当たりますが、このWebアプリと区別する目的で、ソフトウェアで提供されるタイプについては「ネイティブアプリ」と呼んだりもします。 本記事で「アプリ」と書くものは基本的にネイティブアプリとしています。 「スマホアプリ」は、スマートフォンで使えるソフトウェアのことで、カレンダーや乗換案内、ゲームをはじめ、現在ではECサイトや動画サービスなど様々なことができるようになっています。 進むスマホアプリ化 スマホの普及率は2010年ごろから急速に進み、現在では全年代合わせると7割以上がスマホを保有している状況ですが、これに一役買っているのが、スマホアプリです。 (出典:総務省「通信利用動向調査」) Webサービスとはまた違う新しい体験や便利さを提供するアプリが多く出てきた中で、 様々なアプリサービスを利用したいからスマホを購入した、というユーザーもいるくらいです。 スマホアプリの利用時間はスマホ利用時間全体のおよそ8割を占めているというデータも出ています。 さらにもう1つ、アプリは起動までの時間が早く、スキマ時間での利用ニーズも多いスマホとは非常に親和性が高いと言っていいでしょう。 こういった利用者の伸びやユーザーのアプリに対する意識、利便性の高さからもWebサイトのスマホアプリ化はユーザーニーズに沿うものであることが伺えます。 Webサイトとスマホアプリの違い では実際Webサイトとスマホアプリでは何が異なるのでしょうか。 端末に元々入っていないゲームなどはスマホアプリで利用するしかありませんが、ECサイトのようにWebサイトもあった場合を例に比較してみましょう。 使いやすさ Webサイトの場合、基本的にはPCの画面を前提に構成されているため、スマホ画面だと拡大やスクロールが多くなりユーザビリティを損なう可能性があります。 もちろんスマホ最適化していればここでの問題を防ぐ事ができますので、まだサイトをスマホ最適化されていないという方はこちらの記事をご参照ください。 スマホアプリの場合、初めからスマホでの利用を前提にしているため、使用する端末や機種に合わせてディスプレイが収まり、ページ内のリンクやアクセスもスマホに配慮した設計がなされているため快適な操作感を実現することが出来ています。 アクセスまでのスピード 一番の違いはこのアクセスまでのスピードです。 Webサイトの場合アクセスするには通常、ブラウザを立ち上げる必要があります。 またオフラインでは表示されなくなってしまいます。 私自身そうですが、スマホを所有してから不便だなと感じる点ではありました。 スマホアプリはトップ画面に専用のアイコンが置かれるため、見たいコンテンツに1度のタップで行き着けますし、オフラインでもコンテンツを閲覧することが可能です。 このように、使い勝手の良さがアプリとWebサイトの大きな違いになってくるのではないでしょうか。 スマホアプリ化におけるメリット・デメリット スマホが普及しアプリ利用率が高いという点からだけでもアプリ化するメリットは大いにあると考えられますが、もう少し具体的な活用方法を交えメリットとデメリットについて紹介していきます。 まずスマホアプリ化のメリットについてです。 ■スマホアプリ利用率の高さ ■Webサイトに比べリピートして利用しやすい ■プッシュ通知機能 ■アイコンによる認知の向上 ■スマホアプリ利用率の高さ スマホ保有者のほとんどが何かしらのアプリを利用している状況で、Webの閲覧時間よりアプリの利用時間の方が長いというデータが出ています。 そのため抵抗なくユーザーに使ってもらえて、またアプリでの情報提供は現代のユーザーのニーズに合わせていると考えることが出来ます。 ■Webサイトに比べリピートして利用しやすい ブラウザを通してサイトにたどり着くというルートに比べ、スマホアプリの場合は立ち上げるだけでサイトやコンテンツにアクセスすることが可能である、また操作性も高いことからユーザビリティを損なうことがないためリピート率向上にも繋がりやすいです。 ■プッシュ通知機能 これはスマホアプリならではの大きなメリットです。 アプリに対してプッシュ通知を送信する事でスマホ上にポップアップでメッセージを表示させたり、アプリアイコン上にバッジ表示させたりすることが可能です。 これにより、ユーザーの注意を引きつけアプリを使ってもらい新しい情報を見てもらうことが可能になります。 ■アイコンによる認知の向上 CMや交通広告などは繰り返し目にする事によって商品やサービスを消費者の記憶に留め、購入や利用に繋げるのが目的になりますが、スマホアプリの場合ホーム画面にアイコンがあることによって無意識にユーザーはブランドロゴや名前を見ることになります。 Webサイトに比べ目に入る機会は圧倒的に多くなるため再訪への効果が期待できます。   続いてスマホアプリ化によるデメリットについて、こちらは大きく2つが挙げられます。 ■アプリインストールのハードルの高さ ■開発コストが掛かる ■アプリインストールのハードルの高さ アプリの場合当然最初はインストールしてもらう必要があります。 ユーザー基盤が全くない状態でアプリを出す場合はしっかりとしたプロモーション戦略が必要になってきますが、既にWebサイトを持っているなどで、顧客となるユーザー基盤がある場合は、そこで告知することで効率的に認知拡大を狙うことが可能です。 ■開発コストが掛かる スマホアプリを作成するにもスマホのプラットフォーム(iOS、Androidなど)ごとに開発が必要になってくるため、アプリ開発にはそれなりのコストが掛かってきます。 公式ストアに初めて申請する際だけでなく、アップデートの際にも公式ストアの審査があり、一部変更しただけでも更新に手間がかかるといったハードルもあります。 Webサイトに比べると作成・更新に多少手間とコストがかかるのは否めないでしょう。 しかし今では、業界に特化した比較的手軽に依頼できるアプリ制作会社などもある他、実はコンテンツを更新してもストアに申請する必要のない、新しいアプリ化の方法も出ています。 次章ではこのアプリ化の方法をご紹介します。 ECサイトにオススメのハイブリッドアプリとは 各環境(iOS用、Android用など)に合わせて開発する必要や、公式ストアの審査があり一部変更しただけでも更新に手間がかかるといったハードルを解消するものとして、近年増えてきているのが、「ハイブリット型」と呼ばれるアプリです。 ハイブリット型アプリでは、ネイティブアプリの中の※Web View(ウェブビュー)と呼ばれる簡易ブラウザを活用し、表示するコンテンツ自体はWebで作られたコンテンツを表示します。 ※Web View: WebブラウザのようにWebページを取得・表示することができる機能の事で、Web Viewを呼び出すコードを記述するだけでWebページを表示する機能を組み込むことが可能。 冒頭で紹介したネイティブアプリとWebアプリの2つの特長を兼ね備えていることからハイブリッド型と呼ばれます。 この3つを表にまとめてみたものがこちらです。 ハイブリッド型では、ネイティブアプリのようにカメラ起動や加速度センサーなどスマートフォンに搭載されている機能を活用することができ、ストアにも掲載されるので効率的な集客が可能です。 また投稿された内容や変更が生じる箇所はWebコンテンツを修正することで行えるので、頻繁に更新が起きても、すぐに対応でき、ストアへの申請を何度もする必要がなくなります。 適切に役割を分担し、双方のいいところを合わせたアプリである、と言えるでしょう。 個人的にECサイトのアプリ化だとこのハイブリッド型を推奨します。 ECサイトの場合更新頻度が高くなる商品詳細ページをWeb Viewとする事で細かな変更にも柔軟に対応することが可能になるのと、ネイティブアプリならではのアクセスのスピード、認知の継続と再訪への機会を向上させることが可能になるため、既存顧客の維持が売上を左右するECサイトでは特にハイブリット型がマッチするのではないでしょうか。 実際にWebサイトをアプリ化するには自分達で一から開発を行う他に、アプリ開発サービスを利用することで手軽に低コストに抑える事もできます。 アプリ化するサービスはWordPressをベースとするサービスが多く見受けられますが、ECサイトの場合もう少し汎用性の高いサービスを選ぶ必要があります。 yappliやapplileなどはECサイトに特化したアプリ開発サービスで、日時指定やカゴ落ちユーザーを対象にプッシュ通知を出したりクーポン機能も出来ます。 プロモーションや自社課題にあわせ検討してみてはいかがでしょうか。 まとめ いかがだったでしょうか。 スマホアプリの利用率や利便性を鑑みると、ECサイトのスマホアプリ化は必須の考えになってきます。 今回ご紹介した内容はほんの僅かですがアプリ化するメリットは十分にあると思いますので、今の市場をチャンスと捉えさらに充実したECサイト運営を目指してみてはいかがでしょうか。 次回はアプリ化した後のプロモーション方法について少しご紹介させて頂きます。

もっと読む

まだ未対応?!EC担当者に伝えたい、今すぐスマホ対応したくなる話

こんにちは、nex8事業部の水井です。 今回は『あなたのサイトをスマホ対応したくなる話』について書きたいと思います。 今では、当たり前のように多くの人が持っているスマートフォン。 スマホの持つ大きな魅力の一つとして、パソコンを持ち歩かなくてもインターネットで検索し、Webサイトの閲覧、さらにはそのまま商品購入やレストランの予約などができるという点がありますよね。 普段何気なく閲覧しているWebサイトですが、スマホから見た時にもPCサイトがそのままギュッと小さくなってまったく同じように表示されるサイトと、スマホ専用のレイアウトで表示されるサイトの2通りがあることにお気づきでしょうか。 後者のようなサイトは「スマホ対応サイト」(=スマートフォン用に最適化されたWebサイト)などと呼ばれますが、今回はこの「スマホ対応」の必要性、メリット、対応方法概要をご紹介していきます。 スマホ対応が必要な3つの理由 なぜスマホ対応が重要なのか、大きく3つの理由をお話していきます。 PCとスマホの環境の違い まずは、PCとスマホの環境の違いが挙げられます。 皆さんも感じたことがあるかもしれませんが、PC用のWebサイトをスマホで閲覧しようとすると不便なケースが多々あります。 それは、以下のようにPCとスマホでは、共通点も多くある一方で異なる点も多いためです。 ■共通点 ・インターネットに繋いで、Webサイトを閲覧できること ・アプリケーションを使用できること etc.. ■異なる点 ・画面の大きさ(PC:1366×768など/スマホ:375×667など) ・操作方法(PC:マウス操作/スマホ:指操作) ・使用する時間帯や場所(PC:家や会社など/スマホ:家や通勤時間など) etc.. PCサイトをスマホで閲覧させる場合、離脱率が大きな問題となりますが、その要因としては、「見にくさ」「操作のしにくさ」が挙げられます。 上記のように、PCもスマホもWebサイトを閲覧できるのは同じですが、画面の大きさが異なっていますね。 そのため、表示できる文字の量、画像の量が格段に違い、PCと同じ分量をスマホでも表示しようとすると、文字も画像もかなり小さく見にくくなってしまいます。 せっかく素敵なWebサイトでも、文字が小さい、画像が小さいという理由だけで、離脱してしまうユーザーは多いです。 また、「操作のしにくさ」は、離脱率だけでなくコンバージョン率にも影響してきます。 PCの場合はマウスがあるので画面のどこでもクリック、スクロールが容易です。 小さなボタンもマウスポインタなら簡単にクリックできますよね。 一方、スマホの場合は、指による操作のみのため、スクロール幅やクリックできるボタンの大きさには限度があります。 そうすると、せっかく気に入った商品もスマホでは詳細ページに遷移できずに検討をやめてしまったり、カートに入れるまでに時間がかかってユーザーのイライラにつながったりすることで、見込み顧客をみすみす逃してしまうこともあり得ます。 見やすく、操作もしやすいWebサイトにすることで、離脱率を改善して、滞在時間、閲覧ページ数、さらには購入率の向上へとつなげることが出来るのです! このようなPCとは異なる点に対応し、スマホでも快適にWebサイトを閲覧できるようにすることが「スマホ対応する」ということであり、閲覧してくれるユーザーの使い勝手を考えた思いやりであるとも言えますね! スマホの普及 それでもまだPCからのユーザーが多そうだから、とりあえずスマホユーザーは後回しでいいかな・・なんて思っていませんか? いまやスマホはほとんどの人が持っている時代です。 世帯保有率は急激に伸びていますし、個人での利用状況を見ても圧倒的にPCよりもスマホが多く使われている事がわかります。 (スマートフォンの世帯所有率) (PCとモバイルの1日の平均利用時間) (出典:総務省「平成28年版情報通信白書」) また日本国内のEC市場規模は、13.8兆円まで拡大し、年々右肩上がりを続けている中で、スマホでネットショッピングするユーザーも多いのは言わずもがなでしょう。 そんな時代において、スマホユーザーに合っていないWebサイトではそれだけで選択肢から外れることもあり得ます。 これは大きな機会損失となり、かなりもったいないですよね。 検索エンジン対策 スマホ対応していないことのリスクは、ユーザーがサイトに来た時の離脱率だけでなく、その前の集客にも響いて来ます。 Googleでは2013年、「スマートフォンユーザーへの更なる検索体験の向上と、スマートフォン環境での閲覧の支障を減らす」といった目的のもと、スマートフォンで閲覧できないコンテンツが含まれているなど、誤った対応を行っているサイトのモバイル検索順位(スマートフォンでの検索結果順位)を下げる方針を発表しました。 つまりスマホ対応できていないサイトは、スマホユーザーから見つけられにくくなっている可能性があると言うことです。 スマホ人口が増え、スマホからのサイト閲覧が伸びる中で、ユーザーの利便性を向上し検索時の優位性も高められるスマホ対応は、もはややらない理由のない、一石二鳥の施策ということがわかっていただけたかと思います。 スマホ対応で得られるメリット 離脱率・購入率の改善 スマホ対応でまず期待できるのは離脱率の改善です。 下記は、今年の11月にスマホ対応したあるサイトのGoogleアナリティクスのデータです。 スマホ対応前の前年度と比べて、スマホユーザーの直帰率が低くなり、閲覧ページ数(セッションあたりページ数)や滞在時間(平均セッション時間)が伸びていることがわかります。 このサイトはECサイトではないので購入率(コンバージョン率)の推移例は出ていませんが、サイト内をしっかり見てもらえる機会が増えれば自ずと購入率の向上にもつながっていくでしょう。 見やすく、操作もしやすいWebサイトにすることで、離脱率を改善して、滞在時間、閲覧ページ数、さらには購入率の向上へとつなげることが出来るのです! 購入機会・経路の拡大 次に期待できるのが、購入機会と経路の拡大です。 下図は、弊社サービスnex8の時間帯ごとの配信量を表したグラフです。 nex8はスマートフォンのメディアサイトやアプリに対して広告を配信するので、ユーザーがよく使っている時間帯に配信が増加します。 つまりスマホをよく使用している時間帯が分かるグラフということです。 グラフを見てみると通勤時間やランチの時間などが、スマホをよく使うタイミングであることがわかります。 また外出時だけでなく、自宅にいる時間(PM7時~AM8時)、特に就寝前の時間(PM10時~AM2時)にもスマホが良く使われている事もわかりますね。 この時間帯は、ユーザーがWebサイト閲覧のためにまとまった時間が確保できるので、商品訴求や購入に繋げることの出来るゴールデンタイムともいえるのではないでしょうか。 この時間帯のユーザーを逃さないためにも、スマホ化はかなりオススメと言えます。 加えて、最近ではスマホでの商品購入のハードルがぐっと下がってきています。 スマホでの決済方法は多岐にわたっていて、クレジットカード払いはもちろん、代金引換や、銀行振り込み、キャリア課金での支払いなどなど、ユーザーの要望に合わせた決済が可能となっているのも1つの要因です。 そのため、「スマホで購入する」という行為自体がかなり身近なものとなっており、20~30歳ではすでにPCと同様の割合で商品購入をしています。 将来的には、スマホの普及率と同様に大幅に広がっていくことは容易に予想できるので、EC施策においてスマホ対応は急務の対策とも言えるのではないでしょうか。 スマホ対応は難しくない 「スマホ対応」「スマホ最適化」と言うけど、一体何から手を付けたらいいのか。 ここでは押さえておきたいポイントと、ゼロからすべて自分で対応しなくて済む、便利なツールについてご紹介します。 押さえておきたい、スマホ対応の具体例 ユーザーにとって利便性の高いスマホ対応サイトを作るためには具体的にどんなことに気をつければ良いのか、基本的なものを挙げてみます。 ・表示速度を改善する(ページ容量を軽くする) ・flashなど、スマホで再生不可能なコンテンツをなくす(HTML5にするなど) ・スマホ画面で読みやすい文字サイズにする ・スマホの一画面で見せるのに適切な情報量やレイアウトにする(レスポンシブデザインにするなど) ・クリッカブルなテキストや画像をわかりやすくする(マウスオーバーしないとわからないようなものはスマホではNG) ・指でも簡単にタップできるよう、クリッカブルな要素同士の間隔に注意する スマホに慣れた若い人が多いのか、女性やお年寄りなどあまり詳しくない人が多いのかなど、サイトの利用者層にもよるので、文字サイズにしてもレイアウトにしてもこれが最適、という正解はないのですが、ターゲットや業種があなたのサイトと似ていそうなサイトなど、いろいろなサイトを見て研究してみると参考になるでしょう。 PCブラウザでスマホの表示確認ができるエミュレータも便利ですが、ぜひ、実際にスマホでさまざまなサイトを使ってみて、この導線はわかりやすいな、ボタンが右手でも左手でも押しやすいな、といったユーザー目線を磨いてみてください。 難易度&利用環境別・スマホ対応2パターン スマホ対応の基本がわかったところで、実際にどのように実装していくかに移ります。 内製または外注でオリジナルに作り込むパターンを想像される方が多いと思いますが、実はWordpressやカートシステム等を利用しているサイトの場合、それらの提供するツールで手軽に対応できることもあるのです。 それぞれ簡単にご紹介していきましょう。 ① 内製/外注で作り込む 一般的に大きく2つのやり方がありますが、1つ目として、PCサイトのHTMLとは別に、スマホサイト用のHTMLを用意するパターンがあります。 この場合、サイト更新時はPC/スマホそれぞれのページを更新する必要があるため、運用管理が少し複雑になります。 また、それぞれのURLも別になります。 もう1つは、レスポンシブデザイン(レスポンシブサイト)にするパターンがあります。 レスポンシブデザインとは、PCやスマホ、タブレットといったデバイスの横幅を判断基準に、それぞれに適応するようサイトのレイアウトを調整してくれるデザイン、またその技術のことです。 (レスポンシブデザインサイトの例。左:PCサイト、右:スマホサイト) HTMLは1枚で、CSS(※)によってデザインだけを分けるため、1度作ってしまえば、サイト更新時も1つのHTMLを更新するだけで他のデバイスの内容も反映されます。 ※カスケーディング・スタイルシートの略。デザインについての指定が書かれたファイル。 マルチデバイス対応ができますし、共通のURLで管理ができることに加え、Googleでもデザインパターンとしてこの手法を推奨しています。 ですが、専門知識が必要になるため、自社に技術のある人がいなければ制作会社等に依頼する必要があります。 ② ツールで手軽に対応する ■Wordpress利用サイトの場合 最近ではWordpressにおいて、レスポンシブデザイン対応のテーマもあります。 このテーマを利用して、簡単にレスポンシブサイトを制作しても良いかもしれません。 また、Wordpressでは下記のようなプラグインを使用してスマホ対応することも可能です。 ・WPtouch ・WordPress Mobile Pack ・MobilePress これらは、インストールと簡単な設定だけで自動的にスマホ対応サイトを生成してくれるため、手間がかからずに実施できます。 それだけでなくデザインの変更やSNSとの連携など、様々なカスタマイズもできます。 プラグインについて、より詳しくご紹介した記事はコチラ ■ショッピングカート利用サイトの場合 例えば、nex8も連携しているショッピングカートサービスの『FutureShop2』、『ショップサーブ』では、スマホ対応機能を備えています。 スマホサイトのデザインは、テンプレートの中から選択も可能ですし、オリジナルデザインで作成することも可能です。 支払方法もPCサイトと同様のままで、作成することが可能なので、とても便利ですよね。 このように、スマホ対応する方法は様々ですが、費用はもちろん、デザインや機能の自由度、Webサイトの構造、管理方法などから、最適な方法を選んでいて頂ければと思います。 まとめ いかがでしたでしょうか。 今回はWebサイトのスマホ対応についてお話しました。 ご紹介した以外にも、たくさんのメリットはありますし、アパレル大手の企業ではスマートフォン経由での売上が6割以上という事例もあり、検討してみる価値は十分にあるのではないでしょうか。 まだWebサイトがスマホ対応していない場合には、是非、一度ご検討してみてください!

もっと読む