サイトの具体的なモバイル・スマホ対応について 〜備忘録その2〜

19年11月22日Blog

みなさん、こんばんは本日もブログを見て頂きありがとうございます。

 

 

 

この時期になると、もう年末だな〜と気が抜けてしまいそうになりますが、私の大好きなプロ野球界では、契約更新のタイミングで年棒が上がる選手もいれば減棒してしまう選手もいます。

 

 

 

そして残念なことに引退や戦力外通知など、野球の世界から去っていく選手が毎年多数います。そんなニュースを見る度に目の前の仕事に対して真摯に最大限の努力でクオリティの高い仕事を出来ているだろうかと、考えさせられます。
今日も気合い入れてしっかりとSEO対策ブログを書いていきたいと思います。

 

 

 

たかがブログされどブログ!

 

 

 

 

 

 

<サイトの具体的なモバイル・スマホ対応>

 

 

さて本日の備忘録は、「サイトの具体的なモバイル・スマホ対応」についてです。
以前別のブログでホームページやサイトのモバイル対応スマホ対応の重要性をテーマに「ホームページのスマホ対応について」というブログを書きました。
その具体的な対策の方法を私なりに解説していきたいと思います。

 

 

 

検索エンジンのGoogleでは、”WEBマスター向け公式ブログ”というサイトを公開しております。 Google社として検索エンジンの今後のアップデートの予定を発表しているのです。(もちろん英語で・・・)
この公式声明を読み解き理解することでGoogleから好印象を受けるサイト運営が可能となり、結果として上位表示も可能となります。

 

 

 

過去に公式ブログで、モバイルスマホ対応に関しても公式の声明を発表しているのです。そのブログ内で提唱しているのは大きく分けて3つの方法になります。

 

 

1:個別にモバイルサイトを用意
2:レスポンシブ対応したWebデザインを採用
3:動的な配信に当たるダイナミックサービングに対応

 

 

よし! なるほど! で何したら良いの?
となりますよね。

 

 

1〜3の方法ですが、共有で言えることとしては
「モバイル・スマホ端末で見た時に見やすいデザインにレイアウト変更の対策をサイトに施してね。やり方は問わないけれども。」

 

 

と言った感じです。(私の感覚)

 

 

 

 

1:個別にモバイルサイトを用意
こちらに関しては、ざっくり言ってしまうとPCで見れているサイトとは別に、モバイル・スマホに適したサイトを別ドメインで作ってしまうというものです。
重複コンテンツになる上、構築費用やメンテナンスにも2倍の労力がかかる為、全くお勧めできません。

 

 

 

 

2:レスポンシブ対応したWebデザインを採用
結論から言うとこの2番が一番推奨したい対策です。モバイルやスマホで見られることを前提にサイト構築して、同じページだけど見ている端末によって画像や文字のサイズを変えたり、配置を組み替えたりすることで見やすくしようというものです。構築費用やメンテナンスも1サイト分で良いですし、同一ドメインの為重複コンテンツなどの悪影響も出ません。見ている端末の液晶の大きさによってデザインが伸縮するリキッドデザインと呼ぶらしいです(これは覚えなくても良いですね。)現に、この方法がもっとも採用されている手法になります。

 

 

 

 

3:動的な配信に当たるダイナミックサービングに対応
レスポンシブ対応とほとんど同じではあるのですが、それを実現している方法が異なります。ユーザーがアクセスしてきた端末がPCであれば、PC版のページを表示させ、スマホなどからアクセスした場合はモバイル版のページを表示させるという方法になります。ダイナミックサービングはそれぞれに2つのテンプレートを作らなければいけないのでやはり構築費用やメンテナンス面でお勧めはできません。しかし最近ではwordpressのようなCNSでPCサイトが構築されているケースが多く、その場合においては、プラグインによって簡易的に実現が可能なケースもあります。例えは、大手通販サイトのようにページ数が多く、全てのページをレスポンシブ対応とするとなると膨大な時間と労力がかかってしまう為あえて戦略的にこのダイナミックサービング対応を洗濯している企業も一定数実在します。

 

 

 

 

つまり

 

 

 

企業・店舗サイトはレスポンシブWEBデザインに対応させよ!

 

というのが結論です。 (・・・私的に!)

 

 

 

 

<自社サイトがモバイルスマホ対応出来ているか否か調査する方法>

 

ここまでで、ホームページやサイトをモバイル対応スマホ対応する意味合いや方法はご理解いただけたかと思います。
では実際にサイトをお持ちの方は、「自分のサイトは対応してると言えるのか?」と不安になる方もいらっしゃると思います。

 

 

 

 

心配いりません、誰でも無料で簡単にチェックする方法をGoogleさんは用意してくれています。それが ”モバイルフレンドリーテスト” です。
https://search.google.com/test/mobile-friendly?hl=JA

 

 

「モバイルフレンドリーテストページにアクセス」

「自社のホームページのURLを貼り付け」

「クリックしてチェック開始」

「ものの数分で結果が報告されます」

 

 

 

 

このように簡単に調べる事ができます。気になる方は、ぜひ試してみてください。
そしてここまででも十分ですが、サイトのチェックすることに興味を持ったのであれば、もうひとつ試してみて欲しい調査ツールがあります。
それが ”Page Speed Insights” です。
https://developers.google.com/speed/pagespeed/insights/?hl=ja

 

 

 

こちらもチャックの仕方は同じで、何がわかるのかと申しますとサイトの表示速度を測定してくれるツールとなております。(無料でここまで出来るってGoogleさん流石です)

 

 

Googleが推奨するダウンロード速度の速いモバイル対応ページを作る時に用いられるツールになります。1点注意点としては、点数で評価されるのですが100点取れることは私の経験上ほぼほぼあり得ません。70点超えていれば優秀だなという印象です。まずは50点以上、そして理想は60点以上を目標に改善してみてはいかがでしょうか。

 

 

 

 

 

 

<レスポンシブWEBデザインにする理由のまとめ>

 

 

「モバイル・スマホユーザーが快適に見れるようなる」
「モバイル・スマホ端末での検索結果に良い影響を与える」
「URLが同一になるので、サイトのページを共有するに際にリンクを送りやすい」
「インデックスされた際の割り当てが正確になる」
「同一コンテンツの維持管理が楽になる」
「URLを分けていない為、ページの読み込み時間が短縮出来る」

 

 

 

 

 

 

など、もう時代的には必須の対策かもしれませんね。
そしてモバイル・スマホ対応に関して考える中で上記対策したのちに考えなければならないのが ”デザイン” であると考えます。

 

 

 

 

 

 

どんなに上位表示されて、サイトが軽く、文字情報量が多いサイトでも読みずらいレイアウトで、興味の湧かないデザインだとしたらユーザーは逃げてしまうと思います。スマホのような小さな液晶画面だからこそPC版以上にデザイン・レイアウトにこだわってみることをお勧め致します。

 

 

 

 

 

 

本日はここまで、読んでくださったかたありがとうございます。訂正すべき点が見つかりましたら修正・加筆させて頂きます。

 

 

 

次回は最後記述した スマホサイトのレイアウトデザインのあり方 についてブログを書きたいと思います。