呆れる松村(右)

今回のエントリーでは、最近特にビックリするのが多いことをまとめておきます。
あなたは大丈夫ですか?

レスポンシブWebデザインで見落とされている5つの事

レスポンシブWebデザインという言葉も浸透してきたようで、私のところにも「レスポンシブWebデザインでサイトの作成をお願いしたいのですが」といったご相談を頂くことが増えてきました。
しかし、その一方で

1)なぜ、レスポンシブWebデザインがSEOに強いと言われるのか
ということや
2)なぜ、レスポンシブWebデザインが求められるのか
ということが抜け落ちている場合は少なくありません。
また、
3)レスポンシブWebデザインのWeb作成仕様は多種多様
ということや
4)レスポンシブWebデザインを採用する中で生じるデメリット
5)もっと必要なこと

これら5つのことが抜け落ち、更には技術的にも制作会社ですら抑えられていない重要な3つのポイントというものがあります。では、その技術的にも重要な3つのポイントをご紹介しながら、先の5つの項目を見ていきましょう。

対応ディバイスの選択

レスポンシブWebデザインとは、1つのホームページ・ソース(プログラム・コード)で多岐にわたるディバイス(アクセスする端末の画面サイズや解像度)に対応することを目的とした、webサイトレイアウトデザインの「考え方・フレームワーク」を意味します。

簡単に言うと、以前まではパソコンでアクセスするホームページと携帯電話でアクセスする「携帯サイト」やスマートフォンでアクセスする「スマホサイト」を別ドメインやサブドメインで作成したり1つのドメインの下層に作成し、該当する端末でアクセスされたときだけプログラムで強制的にそのアドレスに移動させる方法が主流でした。

こういったプログラムを排除し、1つホームページを作成しアクセスされる端末に応じてURLを変更するのではなく【レイアウト】を変更させるというのが、レスポンシブWebデザインの特徴です。

プログラムを用いてアクセスさせるページを強制的に移動させることは検索エンジンに取っては、推奨されることではありません。なぜなら、同じプログラムを用いて、検索結果とは異なるページへと移動させることも可能だからです。

まず、このことがレスポンシブWebデザインはSEOに強い、もしくは向いていると呼ばれるようになった所以です。








加えて、過去の仕様ですとパソコンサイト、携帯サイト、スマホサイトと同じ内容のページを、レイアウトを変更し追加更新する必要がありました。

同じ内容のコピーページやコピーサイトが複数存在しますので検索エンジンはこういった行為をスパムSEOと認識し検索結果から排除します。

これを回避する方法として、パソコンサイトだけを検索エンジンに認識させ、他の端末向けサイトは検索エンジンに認識させないようにするという方法もあります。しかし、更新作業の手間は3サイト分かかる訳ですから、制作会社に依頼していた場合は3倍の手数料を支払わなければなりません。

現在レスポンシブWebデザインで対応させるディバイスとしては、パソコン、タブレット、スマートフォンの4タイプが上げられ従来のガラケーサイトは視野に入れないことがほとんどのようです。

私たちの場合は、パソコン用レイアウトで3種類、スマートフォンで2種類、タブレット用レイアウトの計6タイプの画面サイズ(解像度)で実機を用いて調整を行ない作成します。

ディバイスチェック

  1. 21インチの大型モニター
  2. 13インチMac
  3. 13インチWindowsマシン
  4. iPhone6+
  5. iPhone6
  6. iPad mini

加えて、ブラウザ(インターネット閲覧ソフト)は

ブラウザチェック

  1. Windows インターネットエクスプローラーバージョン8以上
  2. Google Chrome
  3. ファイヤーフォックス
  4. Safari
  5. Opera
  6. ドルフィン(スマホ)
  7. Sleipnir(スマホ)

以上7種類で目視チェックを行ないます。

Android端末やWindowsタブレット、Googleタブレット、AmazonのKindleなどでの実機テストは行なっていません。その理由は、主要最低限の端末に絞って対応させることでコスト面と制作時間の短縮を狙っているからです。

スクロール・フック

正式名称は他にあるとは思うのですが、画面をスクロールさせるきっかけとなる(1)画像(2)色文字(3)マーカー文字などを、私の造語で「スクロール・フック」と呼んでいます(詳しくは『コンテンツ・デザイン』のページで解説しています)。

表示される画面から次のスクロールを促すためのアイキャッチ的な画像や、色文字、マーカー文字を配置し次の文章を読ませるきっかけとなる仕掛けを盛り込み、記事前文を読ませる工夫を施すわけです。

元々は、セールスページなどを作成する際のテクニックの1つです。この記事もそうですが、テキスト文字数が1,000文字を超える記事はほとんど最後まで全文を読まれることはないと、言われますので、こう言った仕組みを主要ページや訴求ページには盛り込むことがレスポンシブWebデザインには求められます。

元来、次の文章を読ませるためには、そのきっかけ(フック)となる見出しや小見出し、前文の導入文で動機付けし、次の段落に促すのが望ましいと言われます。しかし、そこまでの文章力や訴求力を高めるのは難しく、影響を受ける個人にも左右されるので、視覚的に「次の段落」「スクロール先」が気になるような仕組みを盛り込むわけなのです。

文章量と1文字改行

3つ目のポイントが1ページに含める文章量と1段落に含める文字数。加えて、1文字改行です。

これは、紙ベースの広告などで広く意識されている文章レイアウトテクニックで、記者に取っては最低限のマナーとも呼ばれる記事作成作法です。これが1文字改行です。
この段落以下で出てくる1文字だけ赤文字になっている「す。」などは、iPhone6+で見るとブラウザの自然改行の結果「一文字改行」になっている箇所を示しています。

また、小見出しの「文章量と1文字改行」の上部4段落は1段落の文字数も多い上に、スクロール・フックもありませんので、中だるみする、もしくは、このパーツでの離脱率が増加することが予測されます。

SEOを行いやすくする理由

冒頭でお伝えした通り、レスポンシブWebデザインが「SEOに強い」と言われたり「上位表示に有効」と言われるようになった理由は、別にレスポンシブWebデザインが特別に検索エンジンに好まれるプログラムコードが使われているからではなく、次のような理由からそのように考えられるようになっているのです。

  • プログラムによる、強制的なURL移動を行なっていない
  • コピーページがない
  • 更新、追加労力が適切に反映される
  • 文章デザインにまでレスポンシブデザインを考慮したコンテンツの精読時間は長くなる
  • 読みやすいサイトは、適切に閲覧者から評価され、再訪される

次の理由として、スマートフォンやタブレットの普及から、ホームページへのアクセス端末がパソコンからモバイル端末に移行してきており、それらに最適化されたレイアウトを実現することで「閲覧時のストレス」を緩和し、滞在時間やページビューを適切に蓄積することができるので、検索エンジンから良質なコンテンツと認識され、SEOされコンテンツだと評価され、検索上位表示に繋がりやすくなると考えられます。

デメリット

レスポンシブWebデザインのデメリットとしては、この記事のように「長文記事」は特に注意が必要という点です。

2ページ目、3ページ目へと分割するという方法もありますが、その場合はパソコン用レイアウトで言うところのサイドバーの内容と次ページへ促すフックにも工夫が必要となり、ページを分割したばかりに途中離脱が生じるというリスクが生まれてきます。

もちろん、メリットとデメリット(リスク)は何事においても取捨選択する必要があります。画面が狭くなることに加え複数の画面解像度(サイズ)に対応させることから生じる現象をひとつ一つ把握しておかなければ、後から「こんなつもりではなかった」ということは、これまでのホームページ作成以上に生じる可能性が秘められています。

また、閲覧者に読ませる文章量やスクロールストレスを気にするあまり、検索エンジンが内容の薄いコンテンツと判断せざるを得ないページになってしまうこともあります。

検索エンジンが判断するコンテンツの質とは、ページの滞在時間や離脱率、テキストの一貫性などから測定されますので、ページタイトルと導入文、解説文を工夫し動画を掲載するというのもレスポンシブWebデザインでは強く推奨されるコンテンツ内容と言えます。

まだまだ、レスポンシブWebデザインの仕様やメリット、もちろんデメリットも含めお伝えしたいことは細部にわたりますが、今回は私としては最低限レスポンシブWebデザインを採用する上で把握しておいていただきたい内容をまとめました。

また、ホームページ制作会社様においても安易なレスポンシブWebデザインの採用はクライアントへの負荷をますだけですので、流行り廃りでのレスポンシブWebデザインではなく、適切なホームページ活用をご提案頂きますよう合わせてお願い致します。