MAPディレクション > レスポンシブならSEOにも効く構造化を

「いまさらか!」と叱られそうですが、はい、いまさらです。2014年8月、はやるよ本舗サイトをレスポンシブ化いたしました。 今後、当社で新たに制作させていただくサイトはすべてレスポンシブ対応とさせていただきます。 今回の課題は、固定サイズでできてしまった既存のサイトを、見ばえを変えずにレスポンシブ化することでした。

レスポンシブならSEOにも効く構造化を

>いまさらか!

叱られそうですが、
はい、いまさらです。
2014年8月、
「はやるよ本舗」サイトを
レスポンシブ化いたしました。
新規のデザインならともかく、
レスポンシブ対応を考慮せずにできてしまった既存のレイアウトを、
見ばえを変えずにレスポンシブ化するのが億劫で、
いままでズルズル引き延ばしてしまいました。
めんどくさがり屋ですからな、
はやらせ太郎は。
そもそもレスポンシブが好きじゃなかった
っていうのもあるかもですね。
スマホだからっつってパソコンとぜんぜんちがうレイアウトが出てきて、
ひどく使いにくいなぁと感じることがありましたし。
なかなか気持ちが乗りませんでした。
どんだけめんどくさいか、
想像するだけでも気分がウツになりそうでした。
あーめんどくせえぇぇ!!
とか、
ボヤいているあいだに夏休みになって、
ちょっとヒマができたもんで、
気分は乗らなかったけどもスタイルシートをいじりはじめた。
いざ取りかかってしまえばあっけなく、
3日で作業終了。
なんじゃそりゃ(ё_ё)
メディアクエリーとかviewportとか、
世間のデザイナー諸君がややこしそうにワーワー言ってるので、
もっとややこしいのかと思ってたら、
ぜんぜんたいしたことなかった。
どっちかっていうと楽しんでしまいました。
ブラウザの横幅をマウスでドラッグして縮めていったときに、
画像がキュッてちっこくなったり、
サイドメニューがシュッと下にまわりこんだりっていう、
この
きゅっきゅっ、しゅーっ
っていう感じの動きがね、
妙にツボにはまってしまい、
気がついたらずいぶん夜ふかししてしまいましたがな。
もっとも
わたしはしょせん三流デザイナーですからな、
あらゆるスマホとタブレットのスクリーンサイズに完ぺきに対応‥‥
みたいな大それたことはぜんぜん考えずに、
ツボのところだけを大雑把にやっつけただけですがな。
どうせレスポンシブ対応するなら、
ですね、
ここだけは押さえときたいなぁと思うツボがあったんです。
2014年8月以降、はやるよ本舗で制作させていただくサイトは、すべてレスポンシブ対応となります。 WordPressでも静的HTMLでも、自由度の高いテンプレートを準備してお待ちしております。ご相談ください。

検索エンジンに好かれるサイトの構造って?


それは‥‥
グーグルさまに好かれるようなページ構造にするためにですね、
肝心の本文を
できるだけソースの上段にもってくる。
すなわち、
ヘッダやらフッタやらサイドバーを、
本文より後に記述するソース構造(下図参照)
です。
横幅のサイズをかたっぱしから設定しなおして、
やみくもにレスポンシブ化すりゃええってもんじゃないんじゃないの?
──と。
大切なことは、
ページのソースが綺麗に整理されていて、
何が言いたいサイトなのかが伝わることが肝心。
サイトを訪れた「ヒト」

伝わることが大切なのはいうまでもないとして、
クローラー
と呼ばれる検索エンジンの巡回ロボットくんたち

効率よく情報が伝わることがめちゃくちゃ大切。
だって、
グーグルさまが操っている巡回ロボットくんたちに
何回も何回もサイトに遊びに来てもらって、
狙いどおりのキーワードをおみやげに持って帰ってもらって、
それで
自社のサイトが検索順位の上のほうに出てくるようにしてもらわないと、
結果として
わたしたちのページには「ヒト」が来なくなってしまうんですから
ねε=( ̄。 ̄;)
巡回ロボットくんたちはホームページのを読んでいます。
ウェブページで右クリックしたら開くことができる、
ページのソース
ってやつですよね。
いかにロボットくんたちの気持ちになってソースを書いていくか

サイトのファインダビリティ(見つけられやすさ)向上のキモになるんです。

スタイルシートを見直すチャンス


サイトをレスポンシブ化するとなると、
スタイルシート
ってもんを、
これまで以上に強く意識することになります。
スタイルシートっていうのは
文字どおりスタイルを決めるためのシートなので、
SEOとは直接的に関係しないように思ってしまいがちですが、
実は大ありです。
巡回ロボットくんに好かれやすいサイトの構造をきちんと理解して、
スタイルを的確に定義していけば、
SEO上の効果が劇的に向上する可能性があるんです。
ページに書いてある文言が同じでも、
文章の配列しだいでは
ちゃんと検索順位が上がってくる。
ちなみにこのサイトは、
WordPress等のCMSを使っていないレトロな静的HTML。
はやらせ太郎が手作業でコーディングしてます。
サイドバーが両側にあって、
それに挟まれる形で
ヘッダ部、メインコンテンツ部、フッタ部という構成(上図参照)。
ページで伝えたいこと(=本文)は
メインコンテンツ部に書かれていて、
そのサマリー(本文を要約したもの)を最上段に記述している。
つまり、
グーグルさまの巡回ロボットくんたちに拾ってもらいたいメッセージは、
メインコンテンツ最上段のサマリーに集約されているってことで、
ページ全体のソースの流れとしては、
タイトルやURLの次に、
そこが目につくようにしておきたいわけで、
ヘッダやフッタやサイドバーは、
ちっっとも目立たなくてもかまわない。
だから、
このたびのレスポンシブ化に際しては、
ヘッダとサイドバーのソース記述を、
メインコンテンツよりも下に配置することにしました(下の図)。
レスポンシブ対応した場合のソース構造
この並び順が気持ちいいです。
はやるよ本舗のレスポンシブデザインは、ヘッダやサイドバーのソース記述が、メインの本文より後に配置されます。

クローラーにゴミを拾わせないサイトづくり


グーグルさまから派遣されたクローラーさんたちは、
できるかぎり社会の役に立ちそうな有益情報を探しまわっています。
>キミはホームページで、
>いったい何を伝えたいのさ?
>ページのタイトルを見れば、
>だいたい察しがつくけどさ、
>ちょっと待ってよ。
>本文にはぜんぜんちがうことが書いてあるんじゃない?
>あれれ?
>読めば読むほどチンプンカンプンだよ。

とかなんとか、
ぶつくさ言いながら、
世界中のウェブサイトを調べまわっているんです。
たいへんなお仕事ですよね。
少しでも社会のお役に立ちたいという視点で、
良質なコンテンツをつくることだけを考えましょう。
電車が止まっただの、
ランチは何を食っただの、
身内に不幸があって悲しいだの、
そんな、
思いやりのカケラもない戯れ言は、
クローラーさんたちにとってはゴミ。
拾い集める価値はまったくありません。
もしあなたが、
クローラーさんたちにゴミ拾いのようなまねをさせているのだとしたら、
当然、
主のグーグルさまがあなたを評価することはないでしょう。
社会全体を幸福に導く、
有益な情報を最優先で伝えなければなりません。

文字サイズしだいで印象に雲泥の差が


念のためのおさらいですが、レシポンシブWebデザイン(Responsive Web Design)とは── パソコン、タブレット、スマートフォンといった多様な端末の異なるスクリーンサイズに対応するウェブデザインの手法のひとつ。 で、ページにHTMLで記述されるソースの内容を変えるのではなく、適用されるスタイルの定義を変更することにより、 見かけ上のレイアウトをスクリーンサイズに合わせて変化させようとするもの──です。

あなたの会社のホームページを
レスポンシブにしたほうがいいかどうか。
もちろん、
やらないよりはやったほうがいいでしょうね。
どれだけ読みやすいか
というテーマに無頓着だということは、
せっかく来てくださる顧客に対してあまりに不親切です。
特に、
自分の老眼が進行しているから言うわけじゃないですが、
文字サイズ
には
それなりに注意を払うべきであると、
わたし自身の反省も含めて強く感じます。
たしかに、
レスポンシブデザインにしたために、
かえって見づらくなってしまった残念なサイトもありますが、
それはディレクターやデザイナーのセンスの問題であって、
レスポンシブ自体が悪いわけではありません。
(具体的にいうと、
「メニューの折りたたみ」が多用されたページは、
使い勝手がよくないのではないかと感じます。)
以前はけっこうなアクセスを集めていたサイトが、
じわじわと人気を落としているとするなら、
スマホからの訪問客に対してあなたが不親切なことが原因かもしれません。
今回のレスポンシブ化で、
はじめて文字サイズの指定に「rem」っていう単位を採用しました。
わたしの感覚では「em」よりはるかに使いやすいので、
これからはこっちでいくでしょうね。
目にやさしく、
脳にもやさしい。

そういうページ制作を、
これからも心がけていきます。
はやるよ本舗のレスポンシブデザインは文字サイズ重視。 目にやさしくちょっと大きめを推奨。サイズの単位には「rem」を(意図的に固定サイズを指定するときは「px」を)使います。

サイドバーを iframe に入れこむ珍プレー


蛇足かもしれませんが、
最後に、
このサイトで使っている珍プレーをご紹介します。
ぜんぜん一般的ではないので、
別に推奨しているわけではありませんが、
わたし自身がこれでずいぶん楽になったので。
どういう工夫をしたかというと、
左右両側にあるサイドバーの部分に、
iframeを使って別のページを表示することにした。
ページの見かけ上は両側にサイドバーのあるレイアウトでも、
そこのソースは実はページの中に存在しない。
むかしは640とか720pxの横幅で違和感なかったのに、
パソコンのモニタがワイドになったおかげで、
720pxでは貧相に見える‥‥
という理由で、
あとからサイドバーをつけ足したのが2012年。
しかし‥‥
実際にやってみるとそのレイアウトはしんどかった。
さっきも言いましたが当サイトは、
CMSを使っていないために、
サイドバーのコンテンツをいちいち手作業で埋めないといけない。
それだけのネタもないし、
コピペで使いまわすにしても陳腐化が早すぎて追いつかない。
──というわけで、
こういう珍プレーを思いついたわけなんですが、
ページのソースの中でサイドバーの記述は2行だけで終わります。
これにはクローラーさんたちも喜んでくれていることでしょう。
もちろんiframeを使わずに、
ページごとに異なるサイドバーに置き換えることも簡単にできます。
──ま、
そんなこんなで、
もしまだあなたのサイトがレスポンシブ化されていないのであれば、
はやらせ太郎にご相談ください。
これから世間で新たに作られるサイトは、
ほとんどレスポンシブになっていきますからな。
なんとはなしに
時代遅れな感じ

あなたのサイトに漂ってしまうことになる前にですね。
え?
おまえがすでに時代遅れですと?
ばれたか(ё_ё)
標準/ページトップ

UP