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


総務省 通信利用動向調査(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もスマホも同じ画像情報を読み込むので画像を多く使ったサイトはスマートフォン用デザインでの作成よりも表示速度が遅くなる場合がある。

まとめ

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

Related Posts

第三者のプロ目線でホームページをチェック!

第三者のプロ目線でホームページをチェック!

今や企業としてホームページを持つことは当たり前の時代ですがホームページを作ったまま放置していませんか?ホームページは不変的なものではなく、車などと同じく定期的なチェックやメンテナンスが必要です。 車のメンテナンスは安全性を守るため。それではホームページはというと情報の鮮度を保ち、本来の目的を果たし機会を損失しないためにもメンテナンスが大切になってきます。...

SDGsの取り組みで優秀な人材を獲得!?

SDGsの取り組みで優秀な人材を獲得!?

ここ数年SDGs(エス・ディー・ジーズ)が盛んに取り上げられていますが、SDGsの取り組みによって優秀な人材獲得を目指しましょう。 SDGs(エス・ディー・ジーズ)とは SDGsは国連が「持続可能な開発のための2030アジェンダ」で示した2016年から2030年までの国際的な持続可能な開発目標です。 アルファベットそのままに読むとエス・ディー・ジー・エスになりますが、Sustainable Development Goalsの略であり最後はジーエスでなくジーズと呼ぶのが正しいです。...

兵庫県内の事業者は最大30万円の一時支援金が受けられる!?

兵庫県内の事業者は最大30万円の一時支援金が受けられる!?

兵庫県内の事業者の方は最大30万円の一時支援金が受けられる可能性があるのでご紹介です。 原油価格や原材料価格高騰等への対策として、売上の減少した中小法人・個人事業主等の事業継続を支援するため最大30万円の兵庫県中小企業等原油価格・物価高騰対策一時支援金が受給可能です。 返還義務はありませんが、要件に該当しない、不正受給などはもちろん返還対象となるのでお気をつけ下さい。 対象 ①次の「ア」または「イ」を満たすこと ア 国の事業復活支援金を受給していること (対象月:令和3年11月分から令和4年3月分までのいずれかの月)...