WEBデザインの必須スキル レスポンシブデザインの基礎知識

ホームページを作るにあたって、もはや避けては通れない道、レスポンシブデザイン。

でもレスポンシブデザインを採用する場合には、ASPとの相性、サイトの重さ、設計の複雑さなど注意する点も多くあります。

サイト全体のページ数が多く、時代遅れだとは感じていて、レスポンシブデザインの必要性も十分理解しているものの、なかなか移行に踏み切れない方も多くいらっしゃることでしょう。

でも、このままではいつまで経っても状況は好転せず・・・、というか後退するのみです。

モバイルフレンドリー化、SNSや動画コンテンツとの連携、そもそものサイトデザイン・・・。変えるなら今じゃない？

ということで、今回はサイトのレスポンシブデザイン化を行う前に理解してほしい、レスポンシブデザインの基礎知識を徹底的にピックアップしてみました！この記事を読んで、ぜひレスポンシブデザインの重要性を感じてほしいと思います。

そして最初に言っておきます。

どんなサイトでもレスポンシブデザイン対応は可能です。あきらめずに最後までお付き合い下さい。

レスポンシブデザイン基礎知識

レスポンシブデザインとは

レスポンシブデザインとは、スマートフォンやタブレット、デスクトップモニターのワイド化など、モニターの多様化に対応して表示を最適化するWEBサイト制作のことです。

よく、スマートフォンでサイトを見ていると、文字が小さすぎてみえねーやんっ！ってあれがレスポンシブデザイン非対応のサイトです。

これまでのようにWEBサイト制作を行なっていると、実はスマートフォンで見たときに文字は小さいし、画像も見にくい、ボタンも押しにくいサイトになっています。

多様化したサイト表示ができるようになった現在において、こんな見づらいサイトだと、それこそ時代遅れ、使い物になりません。

こういった古いサイトでも、いまからでも決して遅くありません。レスポンシブ対応して使いやすい、ユーザビリティの良いサイトに生まれ変わりましょう。

レスポンシブデザインとその他のモバイルサイトデザインの違い

レスポンシブデザインは多種多様な機種・モニターの違いに問わず、同一URLで表示方法を変えることができます。

一方、パソコン、携帯電話、タブレットとURLを変えてサイトを表示することもあります。

または、PHPなど動的なプログラムにより、サイトを見る状態により表示を切り替えることもできます。

モバイル表示方法3種類

レスポンシブデザイン
パソコン向け、モバイル向けそれぞれにURLが用意されているサイト
PHPなど動的プログラムにより表示を切り替える

サイトの表示の最適化にはさまざまな方法がありますが、今現在、その中で断トツに採用されているのがレスポンシブデザインです。

レスポンシブデザインとその他の表示方法とは、どんな違いやメリット・デメリットがあるのでしょうか。

レスポンシブデザインのメリット

デバイスの違いに問わず同一ファイルで制作が可能。(管理が楽)
多くのブラウザで採用されているcssで書かれているためエラーや表示崩れが少ない
デバイスの数だけファイルを増やさなくていい(制作が楽)

レスポンシブデザインのデメリット

レスポンシブデザインのデメリットとしては、特にスマートフォン環境で起こることがあるが、一つのHTMLファイルで制作を行うため、ファイル容量が大きくなることがある。

そのため、スマートフォンではしばしばサイトが重く、読み込みが遅くなったり、読み込めなかったりする場合がある。

このサイトの重さの改善点としては、ボタンや見出しなど、cssで対応できる部分は画像で作らずにcssでデザインすること。

サイトが重くなることは致命的です。レスポンシブデザインを設計する際は、特に重さに気を付ける必要があります。（詳しくは下部参照）

もう一点、制作者側の事情で言うと、ページ制作が複雑化すること。

これまでは主にパソコン用画面を見て作ればよかったものが、設計の段階から、PC用、スマホ用(モニターサイズ別)で考えていかなければなりません。

レスポンシブデザイン制作の注意点

デメリットであるファイル容量が重くなる、サイトの読み込みが遅くなるという点を理解し、制作の際にはできるだけ容量を小さくすることを心掛ける必要がある。

具体的には以下のような対策がおすすめです。

HTMLファイル容量を抑える方法

画像をできる限り小さく・軽くする
ボタンは画像を使わずcssでデザインする
見出し画像は使わずcssでデザインする
テキストを中心としたサイト設計にする
スマートフォン優先で設計する
サーバーの高速化

レスポンシブデザインと検索順位の関係

実はレスポンシブデザインと検索順位には関係性があります。

簡単に言ってしまうと、レスポンシブデザイン非対応サイトはペナルティーを受けています。

至急対応させましょう。

Google アップデート

Googleは検索エンジンの一つです。ほかの検索エンジンとは、Yahooが有名ですよね。

Google、Yahoo!、二つの検索エンジンでシェアのほぼ9割を占めています。

(参照：statcounter 2017年4月現在 )

ちなみに同一データサイトでは、世界に目を向けるとGoogleだけで92％のシェアを占めていました。

そして、Yahoo!の検索エンジンはGoogleのものを使用しています。

つまり、Googleの優れた検索エンジンに大きな変更があれば、それはYahoo!も同様に変化してきます。

そんなGoogle天下の中で、Googleの仕様変更、アップデートには多くのWEB管理者、製作者が対応に追われることになるのです。

そんなアップデートの一つが、実はレスポンシブデザインの必須化なのです。

なぜレスポンシブデザイン化への流れは止まらないのか

レスポンシブデザイン化へのGoogleのアップデートは必然的なものです。

Googleの立場になって考えてみましょう。SEOを行なっている優れたサイトでも、スマートフォンで見たときに、文字が小さく読めないようなサイトばかりだったらどうでしょう。

ユーザビリティが著しく損なわれる結果となってしまいます。

なぜこんな使いにくいサイトばかりが優先的に検索結果上位に来ているんだと、Googleへの批判の元となってしまいます。

多様化した機種が多くある現在において、レスポンシブデザイン必須化の流れも必然的に起きたという訳です。

サイトの高速化と検索順位の関係

レスポンシブデザインはサイト容量をできるだけ軽く制作するというお話はしましたが、実はサイトの読み込みの速さは検索順位にも影響を与えます。

このサイト高速化の後押しをするように、Googleはサイトの高速化評価が行えるツールを提供しています。

Google PageSpeed Insights

グーグルページスピードインサイト

サイトのスピード測定とともに、具体的な改善点を提供してくれます。

Google Analytics

グーグルが無料で提供するもっとも有名なアクセス分析ツールです。

行動＞サイト速度＞ページ速度

サイト速度を測定することができます。

このように、Google自身もサイト速度を確認しなさいよ！改善しなさいよ！と後押ししてくれています。

モバイルフレンドリー

モバイルフレンドリーとは

モバイルフレンドリーとは、モバイルページを見たときにモバイル用に最適化できているかどうかを意味しています。

最適化できていればモバイルフレンドリー対応済みということですね。

具体的には、下記のような項目をチェックして下さい。

モバイルフレンドリーのチェック項目

文字サイズ
横幅
ボタンの大きさ
画像の見やすさ

モバイルフレンドリーとSEO

実はモバイルフレンドリーもSEOと関係があります。Google検索エンジンで、モバイルフレンドリー化できていないサイトには、ペナルティを課しているのです。

もしまだパソコン用のページしかない場合には、自分のサイトは検索順位において、評価されていない状態だということを認識しておいてください。

モバイルファースト

モバイルファーストとは、これまで説明してきた内容を前提に、WEBサイト制作自体をスマートフォンから行うという考え方です。

これにより、サイトはスマートフォン用に最適化され、さらにさまざまなメリットが生まれます。

モバイルファーストのメリット

モバイルの小さな画面内で最大限のユーザビリティを実現しようとするため、洗練され、優れたデザイン設計が生まれやすいことが挙げられます。

余分なコンテンツや情報、ソースを削り、これによりサイトの軽量化にも貢献します。

これらの結果、サイトは画期的に向上し、優れたデザインやサービスを実現することができます。

ユーザビリティの向上、サイトの軽量化、サイトの高速化、SEO的にも有利。

これが、モバイルファーストを採用したWEBデザインのメリットです。

以上、レスポンシブデザインとSEO、モバイルファーストの考え方まで説明しました。

レスポンシブデザイン対応フレームワーク

Bootstrap

最初にご紹介するのは、Twitter社が開発したcssフレームワーク「Bootstrap」です。cssフレームワークとは、いろんなモニターサイズに対応して表示してくれるcssが、あらかじめ用意されているテンプレートのようなものです。

制作の際には、Bootstrapであらかじめ用意されているcssを使って組み立てていきます。ただし、Bootstrapを使う際に注意する部分が何点かあります。

Bootstrapを使う際の注意点

Bootstrapの注意点

DreamweaverCC2015以前のものは使えない
Bootstrapをマスターするのに時間がかかる
使わないcssやjsも大量に存在する。(重くなる)
HTMLが複雑
css同士の干渉が発生しやすい

以上のデメリットはしっかりと理解した上で、Bootstrapを使うようにしましょう。もっとも大きい注意点は、Bootstrapの設計は複雑なこと。そのため、まずBootstrapそのものを理解するのも時間がかかりますし、編集する際にも時間がかかる。修正する際にも時間がかかることが多くあります。