レスポンシブWebデザインとは?
レスポンシブとは「反応がよいさま」という意味です。
反応がよいWebデザインという意味です。
まだ分かりにくいと思いますので、図を使って分かるように書いてみようと思います。
もともとは、ユーザーがとあるサイトを閲覧しようとするときに、
使用しているブラウザやOSをサーバーが判断して、
PCサイト、スマホサイトに振り分けるという作業を行っておりました。
この人はパソコンで閲覧しているから → パソコン用のHTMLを表示
この人はiPhoneで閲覧しているから → スマホ用のHTMLを表示
というように、複数のHTMLを割り振っています。
これに対してレスポンシブWebデザインは、
ユーザーの使用している環境(PCかタブレットかスマホか?)の横幅で判断して、
表示します。
1280pxの横幅の画面で閲覧しているから → ○○という表示
480pxの横幅の画面で閲覧しているから → ■■という表示
というように、ひとつのHTMLで表示します。
すなわち、前述の反応がよいWebデザインとは、
htmlが一つしかないので、
画面の横幅を判別することなく、○○、■■という表示をする。
つまりサーバー側から見て反応がよいという見方でその名前がつきました。
レスポンシブWebデザインの必要性
IT技術が進み、スマホ、タブレットが消費者の中で浸透していく一方、
パソコンの売れ行きがますます減少していくこのごろ。
画面はより小さく、解像度はより大きく進化し、
スマホ、タブレット市場はますます大きくなっていっています。
10年前はパソコンで情報を収集するということがセンセーショナルで、
企業もこぞって自社や自社商品をPRしようとB to B(Business to Business)向けの企業サイトを構築しました。
しかし、現在、SNS(Facebookやtwitter)の進化と共に、消費者へ直接PRすることで企業イメージを高めようとする動きが活発となっています。
するとB to Bの企業も消費者向けのサイトが必要なってきます。
現在は企業サイトにアクセスするスマホの割合は全体の6割です。
ではスマホサイトだけ作ればいいということになりますが、
スマホサイトのみの制作ですと、ソースの繁雑化により、SEO対策(検索結果上位表示)が不利となります。
企業サイトのレスポンシブ対応は、
htmlひとつ、cssもひとつで対応できます。
この点に関して、運用が簡単というメリットがあります。
その他、レスポンシブWebデザインの優れている点は、
SEO対策で有利という点です。
Googleでは、サイトを構成する手段としてレスポンシブWebデザインを以下のように評価しています。
- PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
- ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。
現在Yahooの検索エンジンもGoogleの検索エンジンを採用していますので、
Googleの指し示す方角にならっておけば大丈夫といえるでしょう。
レスポンシブWebデザインにリニューアルするには?
運用方法の決定
1.ご自分で記事を更新したい
2.記事更新は全てお任せにしたい
1 を選択された方は、Wordpressにて制作させて頂きます。
WordPressについてはこちらを参照してください。
レンタルサーバーの情報とネームサーバー(ドメイン管理の場所)及び、ドメインが必要となります。
現在ホームページを運用されていない場合は、新規で取得する必要があります。
取得代行も致しております。
2 を選択された方は、レスポンシブウェブデザインにて静的なホームページを制作させて頂きます。
『静的な』とはWordPressなどで管理画面をもたない方法ということです。
つまり、更新は全て制作会社にお任せするという形をとります。
(html、cssの知識がない方の更新は、ご遠慮ください。)
お客様の方でご用意していただくものがあります。
上記3つともWebページを制作する上で必要となります。
もしご用意頂けなくても、制作は可能です。
記事等原稿がない場合(またはリニューアルしたい場合)
取材ノートに基づき取材をさせて頂きます。ページ量にもよりますが、別途料金が必要となります。
写真がない場合(またはリニューアルしたい場合)
カメラマンによる写真撮影が必要な場合、拘束時間にもよりますが、別途料金が必要となります。
会社ロゴがない場合(またはリニューアルしたい場合)
会社ロゴの制作には別途料金が必要となります。