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

ブログランキング

WEBデザインを行うものにとって、もはや避けては通れない道、レスポンシブデザイン

いまさら、なにそれ?

って寝ぼけたようなことは禁句っす!

でも…、

これはマジか!?

と思ったんですが、我がサイトでレスポンシブデザインを一度も本題として扱っていなかったんですよね。

キーワードこそちらほらと出てきてはいたものの、いまさら、当たり前すぎて…

と、言い訳を行ったところで…

レスポンシブデザイン移行をいま現在行なっているサイトも多く、まさに今レスポンシブデザインについて詳しくしりたいっす!というあなたのために、今回はレスポンシブデザインを取り上げたいと思います。

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

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

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

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

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

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

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

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

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

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

レスポンシブデザイン

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

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

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

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

モバイル表示方法3種類

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

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

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

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

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

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

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

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

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

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

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

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

  • 画像をできる限り小さく・軽くする
  • ボタンは画像を使わず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、モバイルファーストの考え方まで説明しました。

具体的にはどうやって制作を行うのかは、今回は触れていませんが、興味がありましたら調べてみて下さい。

ちなみに、Dreamweaver CC2015からは、レスポンシブデザインに対応し、Bootstrapという機能が標準サポートされています。少しマスターするまでに時間がかかりますが、優れたレスポンシブデザインを実現する事が可能です。

また、同じくDreamweaver CS5.5から追加されたjQueryモバイルを使うと、スマホ専用サイトを優れたデザインで制作可能です。

どちらも面倒だという方は、WordPressなら、レスポンシブデザイン対応のテーマをインストールすることで、デザイン制作することなく、レスポンシブデザインを手に入れる事ができます。

スポンサーリンク
ブログランキング

シェアする

フォローする