このサイトをレスポンシブ・ウェブデザインにしました

レスポンシブ・ウェブデザインって?

2012年6月12日付のGoogle ウェブマスター向け公式ブログでは、Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法として3つの構成をサポートすることを表明しました。

  1. レスポンシブ・ウェブデザインを使用しているサイト
  2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト
  3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト

Google公式ブログのページ

その中でも、Googleは「レスポンシブ・ウェブデザイン」を使用しているサイトを、推奨する設定方法としています。

レスポンシブ・ウェブデザインは、そのページを表示する画面サイズからデバイスを判断し、デザインを変更するようなウェブサイトつくり方です。

簡単にいうと、PCで見たときは開いているウェブブラウザの画面サイズで一番見やすい表示になり、これをスマートフォンや携帯電話のウェブブラウザから見たときにも、画面がはみ出したり、サイズが小さくならないように自動調整する機能を持たせることです。

このサイトもレスポンシブ・ウェブデザインで作りましたので、ためしに画面の幅を小さくしてみてください。

全体が画面の幅に収まるようになり、サイドバーが下に移動したり、画像も縮小したりすることがわかると思います。

Googleではこのようなレスポンシブ・ウェブデザインで作られているウェブサイトを、Googleの検索結果で良い結果が得られるようにすることも公式ブログで語っています。

つまり、検索結果の上位に表示されやすいという、SEOの効果があるということです

ただし、自分でデザインしようとすると、CSS3のメディアクエリを使用して見た目を変更するという、プログラミングの技術が必要です。
私には、そのようなプログラミングの知識がないので、テンプレートを使うことにしました。

このサイトはWordPressで作っています。
Webで探せばWordPress用のレスポンシブ・ウェブデザインで作成したテンプレートが見つかりますが、私はネットビジネスに最適化しているツールを利用しました。

このツールには、レスポンシブ・ウェブデザインで作成しているテンプレートが6種類も付いています。

さらにWordPressのインストールから設定までの方法、「ソーシャルメディア・ミックス」という考え方に基づき、SNSとブログとを連携させてインターネットで稼ぐためのマニュアルが付いています。
詳細は上のアイコンをクリックして商品説明をご覧ください。

私も、マニュアルを読んで稼ぐ方法を実践をしています。

皆さんも、レスポンシブ・ウェブデザインでGoogleに好まれるウェブサイトを作成してはいかがでしょうか?

 

関連するページ:

コメントを残す