求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

レスポンシブデザイン基礎1

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

レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレットスマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチデバイスに対応したWebサイトを制作できます。

マルチデバイス対応にする必要性

この数年でスマートフォンからのネット利用者数、接続時間ともにものすごい勢いで増加しています。それに比べPCからの利用者は減少しています。国内の主要サイトもスマホからの利用者数の方がPCからの利用者より多くなっています。これは大手のサイトに限った事ではありません。このような状況を考えると、スマホファーストスクリーンという事が現実的に起こってきます。特にB to C向けのサイトに関してはマルチデバイス対応が必須です。

Googleが推奨するスマートフォンに最適化されたサイト構築

現在、Googleはマルチデバイス対応を強く推奨していて、対応したサイトの掲載順位を全世界的に引き上げています。(ただし、タブレットやパソコンからの検索には影響しません。)
Googleがマルチデバイス対応されていると認めたサイトには検索画面に「スマホ対応」のラベルが表示されます。

f:id:yachin29:20160508074826j:plain


Google ウェブマスター向け公式ブログ: ウェブをさらにモバイル フレンドリーにするための取り組み



という事はGoogleが求めるスマートフォンに最適化されたサイト構築の方法をしっかりと理解する必要があります。
Googleのモバイルフレンドリーテストというサービスを使って、そのサイトがGoogleが求める方法で作られているか確認する事が出来ます。