第７回　レスポンシブ Web デザイン
（PCでもモバイルでも快適に表示！）

目　　次：　 １．モバイルフレンドリー
２．レスポンシブWebデザイン
３．Viewport（ビューポート）
４．レスポンシブWebデザインによるサイト作成

１．モバイルフレンドリー
　 Googleアナリティクスを利用する中で「モバイルフレンドリー」という言葉を知りました。2015年7月にGoogleサーチエンジンが変更になり、スマートフォンなどモバイル機器に優しいページを検索結果の上位に表示するというものです。

パソコン用に作られたページをスマートフォンで見ると文字が小さく、行間が狭いので読みにくく、リンクをタッチしにくいのです。スマートフォンの普及により、モバイル機器で見やすくスムーズな操作ができることを重視するようになったのです。まさに、モバイルファーストの時代になったということですね！

Google側でも「モバイルフレンドリー」なページ作成を奨励し、その必要性、モバイルフレンドリーにする方法を説いています。


また、指定したページがモバイルフレンドリーであるかを診断する「モバイルフレンドリーテスト」というサイトもあります。ページのURLを入力し、テストしてみてください。
２．レスポンシブWebデザイン
　 そして、どのようにすれば「モバイルフレンドリー」なページが作成できるか調べている中で、「レスポンシブWebデザイン」という方法を知りました。

今まではパソコンで閲覧することを前提にページ作成していました。そのページをスマートフォンで見ると、文字が小さく行間が狭いので見づらく操作しづらいのです。

そこで、１つのHTMLコードで、閲覧するデバイスの画面サイズによって表示を変えるという画期的な方法が「レスポンシブルWebデザイン」です。具体的に説明すると次の通りです。



デバイスの画面解像度やブラウザのウィンドウサイズ、デバイスの向きにより、レイアウトを変更するのです。
３．Viewport（ビューポート）
　 パソコン用とスマートフォン用のHTMLを作成するのではなく、１つのHTMLで画面サイズにより、それぞれのCSS（スタイルシート）を適用することで表示を変えるのです。

それを可能にしたのが、「Viewport（ビューポート）」という手法です。

次のHTMLをご覧ください。



まず、①の部分で、「viewport」のタグを設定しています。

②の部分で、ブラウザのウィンドウ幅が767px以下の場合は、「style-smart-device.css」スタイルシートを適用し、768px以上の場合は、「style-desktop.css」スタイルシートを適用するとしています。

スマートフォン用のスタイルシート（CSS)とパソコン用のスタイルシート（CSS)をあらかじめ作成しておきます。


４．レスポンシブWebデザインによるサイト作成
　 レスポンシブWebデザインに大変興味を持ちましたが、自分のサイトを作り直すのは大変です。そこで、１ページだけレスポンシブWebデザインを取り入れたページを作成することにしました。

１冊本を購入し、そこに掲載されていたサンプルHTMLとCSSを参考に、１ページだけ作成してみました。

それが、下図の「中小企業のIT広場」というページです。



このページを「１．モバイルフレンドリー」の中で紹介した「Googleフレンドリーテスト」サイトでテストしたところ、こんな風に表示されました。



今回このサイトを作ってみて実感したことは、「もはや自分でホームページを作る時代ではない！」ということです。

こんな苦労をしなくても、見栄えが良くモバイルフレンドリーを考慮したページ作成できるサービスがあるからです。私はその中でも「はじめてWEB」というサービスをおすすめします。自社ドメイン名も取得でき、操作性に優れ、１年間無料で利用できるサービスです。

自社でITを有効活用したい企業のために「中小企業のIT広場」を開設しました。そこでは、「はじめてWEB」はじめ、便利なサービスをご紹介しています。ぜひご覧いただき、参考にしていただけたら幸いです。

１社でも多くの企業に自社ホームページを開設し、有効活用していただきたいと願っています。
Copyright(C) 2016 Yoshie Yamamoto All Rights Reserved.