スマートフォン用サイト、どう考えたらいいですか？

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

　　　　　　　　　　ネットの活用で、地方が変わる！

　　　　　　　　　　　～地方はネットをこう使え～

　　　　　　　　　　　　　　　　　　　　　　　　　　2014/2/6
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

みなさん、こんにちは。
ビーチューの雨宮です。

週前半の温かさから一転、昨日・今日と一気に冬に逆戻り…。

ここ標高1,000mの高原では、朝の気温が－15度！と、札幌よりも寒い朝でした。
明日からは－11度ぐらいだそうで、少し落ち着けそうです…(^_^;)

さて、今回もみなさんからお寄せいただいたご質問からピックアップして
お届けいたします！

取り上げてほしい質問がある方は、お気軽にお寄せくださいね♪　(^_^)/
このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。

■今週の質問━━━━━━━━━━━━━━━━━━━━━━━━━━■■■

┏…┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┓
┃Ｑ┃スマートフォン用サイト、どう考えたらいいですか？
┗…┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┛

インターネット関係の営業の方から、スマートフォン用のサイトを作らな
いとお客さんが逃げてしまいますよ！と言われました。

スマートフォン用のサイトは準備した方がいいのでしょうか。
準備すると言っても、どうすればいいんでしょう？

みなさんならどう考えますか？

┏…┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┓
┃Ａ┃スマートフォン用のサイトには、４つの対応方法があります♪
┗…┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━…┛

今回のご質問は、実は、先週の質問の続きです。
（先週の少し怖いお話しは、バックナンバーをご覧ください♪）

そもそも、スマートフォン用サイトとは何か。
ご存じの通り、iPhone などのスマートフォンではウェブサイト（ホーム
ページ）を見ることができます。その際、通常は、PC用のホームページが
小さいスマートフォンの画面に縮小された形で表示されます。画面がとっ
ても小さいコンピュータを想像していただければわかりやすいかと思います。
画面全体が「ギュッ！」と縮小れている感じ。

スマートフォン用サイトを準備すると、画面の小さいスマートフォン用に
画面レイアウトが自動的に変更されて、見やすく操作しやすい形で表示さ
れるようになるというわけですね♪　d(^_^)

●まずは、現状を確認 ＆ 必要かどうかを判断しましょう

まず一番最初に必要なのは、今のウェブサイトがどんな画面で見られている
のかを確認することです。Googleアナリティクスなどのアクセス解析ツール
を利用していただければ、PCの画面でご覧になっている方やスマートフォン
でご覧になっている方の割合がわかります。

例えば、私の会社のサイトは75パーセントの方がコンピュータでご覧になっ
ています。平日の昼間にアクセスが集中していますので、就業中に会社から
ご覧になっている方が多いことが予想されます。

一方、一般消費者向けにサービスを提供しているサイトでは、スマートフォ
ンの割合がもっと高いところもあるかと思います。サービス内容によっては、
半分以上がスマートフォンというところもあるかもしれません…。

その現状を確認し、さらに、今後自分のサイトにアクセスする人はどんな
人がどんな状況でアクセスしてくるだろうか…？ということを想像していた
だいて、最終的にスマートフォン用サイトを準備するか判断していただくこ
とになります。

特に、オンラインショップをされている方の場合は判断が重要ですね。
だって、小さいスマートフォンからPC用の購入画面を見て購入するのはとっ
ても大変ですもの。「購入しやすさ」「使いやすさ」がオンラインショップの
重要な要素の一つですから、特に注意したいですね♪

●スマートフォン用サイトを作る４つの手法

スマートフォン用サイトを準備しよう！と決まったら、次はどう進めるか…。
皆さんのサイトを作ってくださった制作会社さんがいらっしゃるでしょうから、
何はともあれまずはそちらにご相談されるのが一番の近道ですが、ここでは、
スマートフォン用サイトの作り方にどんなタイプがあるのかをご紹介します。

（１）PC用サイトとは別に新規に立ち上げる　（タイプＡ）

現在のPC用サイトとは別に、スマートフォン用専用サイトをゼロから準備
するやり方。PC専用サイトにアクセスがあったら、どの端末からアクセスし
ているのかを判別して、自動的にスマートフォン専用サイトに転送するとい
うスタイルです。今のサイトとは別にもう一つ別なサイトを作るようなイメー
ジです♪d(^_^)

（２）PC用サイトとは別に新規に立ち上げる　（タイプＢ）

考え方はタイプＡと一緒ですが、作り方がちょっと違います。
実は、今公開されているPC用サイトを基にして、自動的にスマートフォン用
サイトを作ってくれるサービスがいくつもあります。「変換してくれる」と
言った方がいいかもしれません。

例えば、下記のようなサービスです。

http://shutto.com/
http://www.domore.co.jp/mobify/

正確にはカウントしていませんが、海外を含めると10～20ぐらいはサービス
が見つかるかと思います。（１）と違う特徴は、月額費用が発生するという
こと。簡単に作れる分、月額料金を支払ってサービスを利用するというスタ
イルです。

（３）CMSのスマートフォン用テンプレート（モジュール）で対応

ここ最近、サイトの多くがCMS（コンテンツ・マネジメント・システム）で
構築されるようになってきました。そのCMSにスマートフォン用のモジュール
を組み込むことで、スマートフォンでアクセスされた時にはPC用とは別な
専用デザインで表示してあげることが可能です。

CMSのシステムを利用して、PCサイト・スマートフォンサイトを持つという
方法ですね♪

（４）「レスポンシブ・デザイン」で対応

ちょっと耳慣れない言葉かもしれませんが、今、ウェブの業界ではこの「レス
ポンシブ・デザイン」というものが一つのキーワードになっています。

レスポンシブ・デザインというのは、見ている端末の画面の横幅に合わせて
自動的にレイアウトが切り替わるというデザイン手法です。

実際に見ていただいた方が早いですが、例えば↓
http://www.recruit-rgf.com/

ブラウザーの横幅をマウスで狭めていくと、それに合わせて自動的にレイアウ
トが変わっていくのがおわかりいただけるかと思います。このやり方で、
PCやタブレット、スマートフォンと様々な横幅の機種に対応していこうという
考え方です。

ただしこれは、サイトを新規で立ち上げる時からこの形で作り込むのが基本的
な進め方ですので、今あるサイトをそのまま対応させることはできたりできな
かったりします…。

※ちなみに、私のところでサイトを構築する場合、
　最初からレスポンシブ・デザインを採用しています。

このように、スマートフォン用サイトとひと口に言ってもいくつかの手法が
あります。

いずれにしても王道の進め方は、
制作会社さんと一緒に、スマートフォンへの対応が必要か判断し、必要なら
ば、どんな手法で実現するのがいいのか検討するということです♪d(^_^)

今回はこれを覚えてくださいね！　d(^O^)

●スマートフォン用のサイトの作り方も、いくつかありますよ♪　d(^_^)

■今週のピックアップ━━━━━━━━━━━━━━━━━■■■

----------------------------------------------------------------------
■【2014年保存版】
　ソーシャルメディアまとめ一覧＆SNSの特徴・運用目的を徹底網羅！
　http://blogos.com/article/79145/
----------------------------------------------------------------------

少し難しく感じる方もいらっしゃるかもしれませんが、10個のソーシャルメ
ディアについて一覧でまとめられていますので、「へぇ～こんなサービスが
あるんだ…」と思って見ていただければ思います。

Facebook / Twitter / Google+ / LINE / Instagram / Pinterest
LinkedIn / WhatsApp / Snapchat / Tumblr

地方・中小がこれらを全部やるのは当然無理ですから、ポイントをおさえて
どれかに絞って活用するしかないと思います。
（と思うと気持ちもラクですし♪）

　　 　　　  　　 　　　　　　それではまた次回をお楽しみに！　(^_^)/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【発行元】株式会社ビーチュー
　　　　　http://be-chu.com/
　　　　　http://www.facebook.com/bechucom

　　　　　〒399-0213
　　　　　長野県諏訪郡富士見町乙事5162
　　　　　TEL / FAX : 0266-75-2076　(受付 : 平日 10:00-17:00)

【発行責任者】雨宮伊織　Amemiya Iori
    
■━━━━━━━━━━━━━━━━━━━━━━ Copyright (C) 2014 ■

このメールマガジンの転送はＯＫですが、掲載された記事の内容を許可なく
転載することはご遠慮ください。

※購読を解除される方は、
　下記フォームよりお手続きをお願いします。
　https://1lejend.com/stepmail/delf.php?no=138062

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━