非天マザー by B-CHAN

iPhoneの使い方、IT、金融、経済、不動産、保険、ビジネス、音楽、映画、ニュース、自己啓発などを語ります。

ブログ運営者が考えるレスポンシブWebデザインのSEO的意義

パソコンの画面とスマートフォンの画面

 

 

このブログも、解説してから8年半近く経ちました。

まあずいぶん、色んなジャンルの記事を書いて来ましたよ。

ボク個人のポリシーとしては、広く深くを目指しています。

もちろん、実際には誰にでも平等に1日は24時間しか無いので、広くすれば浅くなりますし、深くするためには狭くする必要があります。

なので、なるべく理想に近づくために、多くの人と異なる生活、例えば、

 

  • テレビを所有しない

 

などを実行してきました。

テレビを見なければ、その時間を他に使えるからですね。

 

最近はウェブ系のプログラミングを学んでいるので、それに使う時間が多めですが、ブログを運営しながら、長年、ボクの中でモヤモヤしていた件を、今回は書こうと思います。

 

それが、

 

レスポンシブWebデザイン

 

です。

正直言って、コンピュータ関係の世界って、猛烈なスピードで進化していて、5年前の最新技術なんて、今はもう古い技術だったりします。

なので、今回書く話がずっと有効かどうかは、ボクにはわかりません。

現時点で解決したモヤモヤをお話しします。

 

実は、ボクも、レスポンシブWebデザインと言う言葉はずっと前から知っていましたが、特段、気にすることも無く、調べることも無く、放置していました。

しかし、あらためて学ぶと、意義深いことがわかりました。

特に、ボクのようにブログをやっている人には。

 

基本的な前提として、

 

  • パソコンの画面は広い
  • スマートフォンの画面は狭い

 

この2つがあります。

昔、携帯電話、スマートフォンが一般化する前は、ウェブサイトはパソコンで見るのが当たり前でした。

しかし、今はスマートフォンを持ち歩く人がほとんど。

なので、スマートフォンでウェブサイトを見てもらう必要があるわけですが、パソコン用のウェブサイトのレイアウトをそのままスマートフォンの小さな画面で表示すると、見にくいですね。

 

そこで、

 

  • パソコン用
  • スマートフォン用

 

の2種類の画面を作る必要が出てきたわけです。

 

 

二度手間か自動か

 

さて、2種類の画面を作る場合、方法は2通り考えられます。

 

  • 2種類のデザインを作っておく
  • 表示する機器によって自動的にレイアウトが変化するページを作っておく

 

2種類のデザインを作っておくのはわかりやすいですね。

ぶっちゃけ、手間がかかります。同じ内容のページを、パソコン用とスマートフォン用と、2つも作らなくちゃならないんですから。

2種類のサイトが存在するので、URLも、

 

http://www.b-chan.jp/

http://www.b-chan.jp/sp/

 

のように2本立てになります。

ネット上に、見た目が違うだけで、同じ内容のサイトが2本、存在することになります。

合計で1万人の読者がいるとして、パソコンユーザー5000人が前者を、スマートフォンユーザー5000人が後者を見るとします。

つまり、サイトとしては、それぞれ5000人の読者を持つサイトと言えますよね。

それを頭に入れておいてください。

 

一方、自動的にレイアウトが変化するページ。

それを、

 

レスポンシブWebデザイン

 

と呼びます。

 例えば、元のページがこれ。

パソコンの大きな画面で表示した状態です。

 

パソコンパソコン画面

 

 

それと同じページを画面の小さなスマートフォンで見ると、次のようになります。

スマホ欠け

 

 

全体が入り切りません。なので縮小すると次のようになります。

スマホ縮小

 

 

全体は表示されますが、小さくて見にくいですね。

 

そこで、レスポンシブWebデザインでサイトを作っておきます。

仕組みはカンタンで、画面の幅が一定以下なら、画面にある要素の並び順や大きさを変化させてしまうのです。

例えば、スマートフォンで表示する場合は、次のようにします。

レスポンシブWebデザイン

 

 

よく見ると、画面に存在する要素はパソコンの画面とまったく同じですよね。

要素は変えずに、スマートフォンで見やすいように、縦並びにして、個々の枠の上下を狭くし、文字を相対的に大きめにしました。

 

つまり、表示する機器の画面サイズを自動的に判断し、横幅が狭い機器(スマートフォン)なら、自動的に、

 

見た目

 

だけを変化させるのです。

見た目を変化させる、つまり、CSSが変わるだけなので、HTMLはパソコン版もスマートフォン版も同じです。

作り手はラクですよね。

1種類だけ作っておいて、画面幅によって、要素の大きさや並び順などを変化させるだけ。

 

もちろん、URLも1種類だけで済みます。

さっき、読者が1万人と書きましたが、1万人全員が、1つのURLに見に来てくれるわけです。

 

5000人のサイトと1万人のサイト。

Google的に見ても、後者の方が人気があるサイトだと判断できますよね。

つまり、SEOの観点からも、レスポンシブWebデザインは有利だと考えられます。

少なくとも、SEOの点においては、レスポンシブWebデザインが不利だと考える理由はありません。

 

なので、レスポンシブWebデザインが使えるのなら、なるべく使った方が、アクセス数も稼ぎやすくなると言えます。

 

レスポンシブWebデザインの欠点をあえて言うなら、1つのページをパソコンの大画面にもスマートフォンの小さな画面にも対応させるため、デザインに制約ができることですね。

上記のようなカンタンなデザインのページなら、パソコンとスマホとで、並べ順やサイズを変えるだけです。

しかし、デザインを最優先の凝った見た目のページなら、

 

  • パソコン用はパソコン用で最大限に凝ったデザイン
  • スマホ用はスマホ用で最大限に凝ったデザイン

 

にしたいこともあります。

レスポンシブWebデザインはパソコン用のページのパーツをスマホでも使い回すので、表示速度で不利になることもあります。

例えば、パソコン用のページで大きな画像を表示している場合、その大きな画像は、スマホの小さな画像でも、見かけ上は小さく見せられますが、実際は同じ画像ファイルを使っているため、ファイルサイズは同じで、スマホでの読み込み時間がかかります。

これはスマホでのSEOの点では不利ですね。

 

つまり、レスポンシブWebデザインで設計するときは、その点も考慮しておく必要があるってことです。

 

まあでも、細かいことは工夫次第で解決できます。

 

 

ブログの場合は、見た目よりも本文の中身が重要なので、レスポンシブWebデザインが使えるなら、なるべく使った方が良いですよ。

 

と言うわけで、久しぶりに、SEO的な記事を書いてみました。