2017年8月版 スマートフォン対応とレスポンシブデザイン

No Tags | お知らせ · SEO


総務省 通信利用動向調査(PDF)
によると2016年9月末にはスマートフォンでのインターネット利用率は57.9と半数を超えています。
もちろんBtoBのビジネスの場合や、業種によっても割合は大きく異なりますが、グーグルがモバイルフレンドリー(ウェブサイトをスマートフォンからの表示に最適化すること)を推奨し、SEOの評価基準にもしているためウェブサイトをスマートフォン対応にすることは今後新規での制作やリニューアルする際必須ともいえます。

スマートフォン対応していないサイト。表示はできるがユーザビリティに劣る

ウェブサイトをスマートフォン対応にすることは大切ですが、スマートフォン対応していないウェブサイトはスマートフォンで表示できないかというとそうではありません。
(フラッシュサイトなどは表示できない場合もありますが)
PCで表示されているデザインが基本的にはそのままスマートフォンの小さな画面に表示されることになります。
スマートフォンの画面は縦長なのでサイト全体を確認しやすいメリットはありますが、メニューをタップしようとすると都度画面をピンチアウトで拡大させる必要がでてきて操作性(ユーザビリティ)が悪くなってしまいます。
そこでウェブサイトをスマートフォン対応させメニューやフォントサイズをスマホで閲覧操作しやすいサイズに変更することでユーザーの利便性が増すとともに、サイト運営者の目的(資料送付や申込み獲得等)も達成しやすくなります。
ではモバイルフレンドリーに対応するにはどうすれば良いでしょうか。
大きくはスマートフォン専用の別デザインを作る方法とレスポンシブデザインを用いる方法があります。
対応する状況や目的にもよりますが、新規でウェブサイトを制作したりウェブサイト全体をリニューアルする場合はレスポンシブデザインがお勧めです。
実はグーグルのサイトもレスポンシブデザインに対応しています。
レスポンシブデザインのグーグルサービス

グーグルも取り入れるレスポンシブデザインとは?

ではレスポンシブデザインとはどんなデザインでしょうか。
簡単に言うと、スマートフォンやタブレットなど画面の幅に合わせて表示が最適化されメニューがタップしやすいデザイン。
技術的なことを言うと、一つのHTMLの記述でブラウザサイズ(画面幅)を元にCSSの部分を切り替えてレイアウトを調整し決められたサイズ(ブレイクポイント)での最適なサイトを表示させるということです。

レスポンシブデザインの確認方法

自分のサイトがレスポンシブデザインかどうか確認するにはパソコンを使用して確認できます。

方法1:ブラウザがモニター一杯に広がっている場合。

1、右上の3個のメニューの真ん中をクリック。

2、画面の右隅にマウスを持ってきて矢印マークに変わったらドラッグ。
3、少しづつ広げたり、縮めたりしてデザインが変わった場合はレスポンシブデザインです。

方法2:グーグルクロームを使用している場合は下記でも確認可能です。

1、キーボード上部のF12を押す。
2、デバイスサイズの切り替えボタン。

3、下三角のプルダウンでresponsiveの選択、サイズは横400ぐらいを指定。

4、念のためページの再読み Ctrl+F5
5、上記でデザインが変わった場合はレスポンシブデザインのウェブサイトです。

レスポンシブデザインはスマートフォン対応だがスマートフォン用デザインではない!?

レスポンシブデザインはスマートフォン対応のデザインという言い方をするのでスマートフォンでもPCでもちゃんと綺麗に表示されるかというと厳密には異なります。
デバイス(PC、スマホ、タブレット等)の区別でデザインを変更しているのでなくブラウザ(画面)の幅によって変えているだけなのでスマートフォンも画面の小さいPCと同じ扱いということになります。
もちろん全体のデザインとしては綺麗に表示されますが、コンテンツページ内で任意の位置に変に改行を入れたりするとスマートフォンで閲覧した時にバランスがおかしくなる場合があります。
イメージ:PCの場合


イメージ:スマートフォンで見た場合


基本は改行を使わずひとかたまりの文章で続けた方がスマートフォンで表示した時は綺麗になります。
下記にレスポンシブデザインにおけるメリットデメリット簡単にまとめます。

メリット

・スマートフォン用デザイン作成よりはコスト的に安い。
・今後色々な画面サイズのデバイスが増えてもある程度柔軟に対応できる
・管理更新の手間は変わらない。(スマートフォン専用別デザインの場合は2倍)
・ページのURLを共通に使用できる

デメリット

・スマートフォン対応していないPCサイト制作の1.5倍程のコストがかかる。
・デザイン的な制約もあるので制作後の導入が困難
・基本全てのコンテンツを表示させるので場合によっては見にくくなる。
・任意の位置で改行を挟むとPCサイズでは綺麗なレイアウトになるけれど、スマートフォンサイズでは変にずれる。
・PCもスマホも同じ画像情報を読み込むので画像を多く使ったサイトはスマートフォン用デザインでの作成よりも表示速度が遅くなる場合がある。

まとめ

レスポンシブデザインか、スマホ専用デザイン。どちらを選択するのが良いかはこだわりたい部分や状況によって異なりますのでメリットデメリットを踏まえて検討してみましょう。