レスポンシブwebデザインのホームページなら アットウェブ

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

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

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

レスポンシブWebデザイン レスポンシブwebデザインとはスマートフォンやタブレット、パソコンなどあらゆるデバイスの画面サイズに、一つのソースで対応する制作手法の事です。

一つのHTMLファイルをCSS3のメディアクエリーで制御する仕組みなので、従来のようにそれぞれの端末ごとにページを制作する必要がありません。

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

  • 一つのHTMLで作成している為、サイトのメンテナンス工数を削減する事が可能です。
  • 端末の画面サイズに依存しないため、新たなデバイスが登場しても対応が可能です。
  • Googleのモバイルフレンドリーに対応している為、SEOに効果的。
  • PC用のページとスマホ用のページを同じURLアドレスで運用できるためシェアやリンクがしやすい。
  • まとめて1サイトとして作れるため、ホームページ制作コストを低減できる。

GoogleもレスポンシブWebデザインがGoogle検索面において、有効である旨の発表をしています。
「レスポンシブWebデザインを使うサイト、つまり同じ一連のURLですべてのデバイスに配信するサイトで、それぞれのURLがすべてのデバイスに同じHTMLを配信し、CSSを使ってデバイスでページをレンダリングする方法を決定します。Googleではこの設定をおすすめしています。」
(引用元:https://developers.google.com/webmasters/smartphone-sites/details?hl=ja

また、公式ブログでもレスポンシブWebデザインでのホームページ作成を推奨すると発表しております。
(引用元:Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

多様化するデバイスへの対応の必要性

2014年度のスマートフォン出荷台数比率は携帯出荷の80.3%を占めていたというデータがあります。

当然、現在も比率は右肩上がりで伸びていて、2017年度にはスマートフォン出荷台数は携帯出荷の84.4%を占めるという予測になっています。

スマートフォン以外にもタブレット端末も出荷台数はかなり伸びているのも事実です。

これまでも、携帯端末やスマートフォンに対応したウェブサイトはつくられてきましたが、今後はスマートフォンでも見やすいユーザーインターフェイスのウェブサイトが求められてきます。

スマートフォンやタブレットと一口に言っても画面サイズは多種多様です。

小さな画面から大画面までの種類がありますし、縦置き、横置き様々な使い方により画面サイズが異なります。

ディスプレーサイズだけでも既に500種の画面サイズがあるとも言われています。

今後もデバイスの多様化が予想される中で、レスポンシブWebデザインのニーズは増加するものと思われます。

レスポンシブWebデザイン

Responsive Checker

レスポンシブwebデザイン レスポンシブwebデザインのホームページが完成したら、レスポンシブデザイン検証サービス「Responsive Checker」でホームページを閲覧してみましょう。

12種類のデバイスごとに、自分のサイトがどのようにみえているのかを確認することができます。

対応ブラウザは以下の通り

  • Internet Explorer 8,9,10
  • Google Chrome Ver.26〜
  • Firefox Ver.20.0〜
  • Opera Ver.12.15〜
  • Safari Ver.6〜

チェックできるデバイスは以下の通り

  • iPhone5 縦
  • iPhone5 横
  • iPad mini 縦
  • iPad mini 横
  • iPad 縦
  • iPad 横
  • Galaxy Tab 10.1 縦
  • Galaxy Tab 10.1 横
  • Xperia AX SO-01E 縦
  • Xperia AX SO-01E 横
  • HTC Aria 縦
  • HTC Aria 横