Googleアドセンスを開いたらヘッダ部分にこんな一文が。

Google 検索でランキングを決める要素の 1 つに、サイトがモバイル向けかどうかを示すモバイル フレンドリーの要素が含まれるようになりました。

おお、ついに来たか!
という感じですね。

どういうことかと言うとまぁスマホ対応のレイアウトになってるサイトをGoogle検索の上位に載せますよ。
ということです。

普段からスマホ対応を意識している人には「へー」くらいの話題ですね。
よく分からずにブログサービスなど使ってる人には自分のサイトがスマホ対応できてるか簡単に確認する方法を載せておきます。

friend

モバイルフレンドリーチェック

モバイルフレンドリーチェックは簡単です。
Google Developpersのサービスの一つであるモバイル フレンドリー テストに自分のサイトURLを入力するだけ。

試しにこのブログをチェックしてみました。
mobile friendly test 01

イケてるっぽいですね!
mobile friendly test 02

モバイルフレンドリーにするには?

ユーザがWebサイトを開いた時、見づらい状態というのをGoogleは懸念します。
見づらい、使いづらいサイトというのは自然とユーザが離脱する確率が上がります。

スマホなのにPC用のデザインが表示されるとユーザは右に左に、上に下にスワイプを繰り返す羽目になるわけですが、スマホ対応のサイトだとユーザは基本的に上下のスワイプのみで全ての情報を閲覧することができるので、快適にサイトに滞在していただくことが可能になるのです。

そう、お客様(ユーザ)は神様なのです!

要するにパソコンで開いたときはパソコン用の、スマホで開いた時はスマホ用の画面が表示されるのが望ましいということですね。

スマホ対応のデザインを用意する

さて、スマホ対応するにはどうすればいいか。
大体以下の方法に分けられると思います。

  • スマホ専用デザインを準備したサイトを作成する
  • レスポンシブデザインで表示を切り替える

レスポンシブデザインで表示を切り替える

CSSによって表示されいている機器の横幅でデザインを切り替えるという手法です。
レスポンシブデザインと呼ばれる主流の方法です。

メリット
  1. デザイン時間の短縮
  2. HTMLやWordpressのテンプレートにすでにレスポンシブデザインに対応している物を拾ってくることができるので、デザインに掛ける作業が必要最低限で済みます。

  3. 記事の管理が楽
  4. 一つの記事に対して一つのHTMLで管理できるので楽です。
    SNSにシェアされた場合も同じURLがシェアされるので、ページの評価が上がりやすくなります。

  5. SEOに有利
  6. SEO的にもGoogleが推奨しているだけあって有利になります。

デメリット
  1. 表示に時間が掛かる可能性がある
  2. レスポンシブデザインはCSSで表示を切り替えます。
    「表示を切り替える」というのはPCで表示している要素をスマホでは表示しない、スマホでは表示する要素をPCでは表示しない、という動きをしているので、必然的に重くなります。

  3. 予期せぬことでデザイン崩壊
  4. CSSによる表示切り替えは非常に複雑です。
    このため、ちょっとPC用のデザインをいじっただけなのに、スマホ用のデザインまで崩れてしまうというリスクが発生します。

スマホ専用デザインを準備したサイトを作成する

スマホ専用にデザインを1から考え、専用のURLに配置します。
モバイル機器からアクセスが合った場合はスマホ用サイトにリダイレクトするという方法です。

メリット
  1. PC用とスマホ用にHTMLを分離できるので、お互いの影響が少ない。
  2. HTMLを完全に分離しているため、デザインをガシガシいじれます。

  3. スマホに特化したデザインというのが可能になる。
  4. レスポンシブデザインだとどうしてもメインのPC用の画面にデザインが引きづられるということが起こりますが、完全分離することで思い切ったレイアウトを組むことも可能になります。

デメリット
  1. HTMLの分離によってSEOが弱くなる。
  2. せっかく記事を書いてもHTMLが分離しているので、Googleからすると別の記事と判断されるため、SEOで不利になる可能性があります。
    また、SNSのシェアも分離されるので効果が半減、ということも・・・。

  3. デザインにかかるコストが増加
  4. 個々にデザインすることでかなりのコストがかかります。
    分業することができれば別ですが、サイトの立ち上げまですんなり進まないで挫折する可能性もあるかもしれません。

編集後記

現状レスポンシブデザインがファーストチョイスであることに変わりはないと思います。
個人のブログレベルであればデザインをモバイルに特化する必要もないと思います(スキルや興味があれば別)。

モバイルの比率が増加してる現在、モバイルデザインを最初にするべき、という話もちらほら聞くようになりましたが、PCが駆逐されない限りはそこまで大幅にスイッチする必要もないのかなと。

それよりも個人ブログという観点で言えば、デザインというのは最初の壁となりうる障害で、これが決まらないばかりに挫折してしまうということもあり得ることを考えれば、レスポンシブデザイン対応のテンプレートを拾って来てサクッと初めてしまうというも手です。

続けていればどうしても変更したい箇所というのは出てくるのでそういう時に随時勉強していけば良いのではないかなぁと。

かくいうこのブログもテンプレの恩恵に預かってますから!

いつもシェアありがとうございます!気に入ったらシェアしていただけたら幸いです。