ホームページをスマホ対応させる方法
 2020.12.04

Googleが、いよいよ2021年3月をもってスマートフォンに対応していないホームページはインデックスから外す的なことを発信しました。つまりホームページのスマートフォン対応はもはや必須ということになった訳です。

そこで、今の時点で最適なホームページのスマホ対応について説明していこうと思います。

ホームページのスマホ対応ってどういうこと?

スマートフォンで見える=スマホ対応ではない

以前、お客さんとスマホ対応はこれから必須になりますよ的な話をしているときに、「うちのホームページはスマホでも見えているから、特別な対策は必要ないんじゃない?スマホ対応できてるじゃん。」と。

PC用にしか作られていないサイトもスマホの親切機能のおかげで確かに見ることはできますね、確かに。

でも、これは所謂スマホ対応ではありません。

スマホ対応とは、スマートフォンでの閲覧に最適化されていること

スマホ対応というのは見えればいいということではなく、スマートフォンでの閲覧に最適化されているということで、具体的には以下の要件を満たしていることかと思います。

  1. ホームページの内容(文字や画像)がスマートフォンサイズの画面でもしっかり認識できる
  2. 原則として、スマートフォンの画面幅から内容がはみ出ない
  3. PC環境と微妙に異なる操作方法への対応(例)マウスをのせると情報がでてくる仕掛けなどはスマホには向かない

他にもあるんでしょうが大きく言えばこんな感じだと思います。

この点からも、PCにしか対応していないサイトの場合

  1. ホームページの内容が小さすぎてほぼ読めない
  2. 内容を見るためには拡大が必要で、拡大すると画面からいろんなものがはみ出す
  3. オンマウスでの動作はほぼ期待できないか、あるいは、そういう操作はあまりやられないので、その情報は読まれない

という感じになる訳です。

スマホ対応の方法は大きくわけて2通り

それでは、具体的にスマホ対応をするにはどうすればいいのかというと、その方法は大きく分けて2通りの方法があります。

1,レスポンシブデザイン

PCやタブレット、スマートフォンなど異なる画面幅を基準に表示を変化させることで、幅広いデバイスで見やすい最適な表示を実現するデザイン手法のことです。

例としてあげれば、今、ご覧いただいている弊社のホームページはまさしくレスポンシブデザインで作られています。スマートフォンでご覧いただいる方にはわかりにくいですが、PCなどで見ていただき画面の幅を色々と変えてみてもらえるとよく分かるかと思います。
※スマホでも縦横で幅が変わるので一応確認はできます。

2,PC用、スマホ用などホームページを別個に用意して振り分ける

要するに、画面幅の異なるデバイスごとにホームページを用意する方法です。

詳しい説明は省きますが、ホームページにアクセスするとどういった種類のデバイスでアクセスしようとしていかという情報が伝わる仕組みがあり、この情報を利用して最適化されたホームページへとアクセスを振り分けるということをやっています。

Googleが推奨しているのは「レスポンシブデザイン」

どちらの手法にも長所短所があるのですが、Googleが推奨しているのは「レスポンシブデザイン」のほうです。

検索エンジンは事実上Googleの独占ですからGoogleに従い何も考える必要はないのですが、一応、レスポンシブデザインを推奨する根拠はあります。

根拠をあげていけばいくつもあるのですが、

同じような内容のページが異なるURLでいくつも存在することでGoogle側もホームページ制作者・所有者側も、利用するユーザにも不利益があることですね。

  • Googleとしては、同じ内容のページがデバイスごとに分けられているページであることを認識しなければ、検索結果の表示や順位付けに支障がでる場合がある。
  • ホームページ制作者・所有者としては、一つの内容に対して複数のページを用意しなければならないことやPC用のURLにスマートフォンからのアクセスがあった場合などに備えて自動でリダイレクトかける仕組みを用意するなど手間をコストがかかる。
  • 気づかないレベルですがユーザにも負担があります。ホームページにアクセスする都度、デバイスを判定し振り分ける仕組みが動くので読み込みに時間がかかってしまっています。

加えて、レスポンシブデザインを避ける大きな理由はないというのも大きいですね。

詳しくは書きませんが、可変幅に対応させるには昔は色々と不具合・不都合があったのですが、そのあたりの対応方法も確立されておりもはや避ける理由がない上に、上記のようなデメリットもないということでGoogleとしてはレスポンシブデザイン一択なのでしょう。

スマホ対応とは、レスポンシブデザイン化するということ

結論として「スマホ対応=ホームページをレスポンシブデザイン化」するということになります。

弊社では特別な理由がない限りレスポンシブデザインでの制作が標準なので、ホームページの制作なりリニュアルなりをご依頼いただければ、すべて解決です(笑)。

レスポンシブデザイン化する具体的な方法

1,変換ツールを使う

PC用ホームページからスマホ対応ホームページ生成してくる変換ツールというものがあるらしいです。

レスポンシブ 変換 ツール:Google検索

ただし、夢のツールという訳ではなさそうなので、サービスごとの説明をよく読んでから使うのか否かはご検討くださいね。また、変換ツールの中にはレスポンシブ化ではなく、自動振り分けタイプのサービスのあるようなのでお気をつけください。

2,自力でレスポンシブデザイン化する

今どきのWordPressの無料テンプレートなんかは、基本、レスポンシブデザインで作られていることがほとんどだと思いますし、その他のレスポンシブ対応のホームページテンプレートは調べればいくらでも出てきますので、やる気と根性があればそういったものを活用して自作するのもありだと思います。

レスポンシブ 無料 テンプレート 日本語:Google検索

3,レスポンシブ対応のホームページ制作会社に依頼する

レスポンシブ対応できないホームページ制作会社はほぼないと思いますので、レスポンシブデザインでと確認して依頼すればいいかと思います。

もちろん、弊社にご連絡いただければ万事解決です(笑)。

いづれにしても、2021年3月までにはホームページをレスポンシブデザイン化するのは必須ですので、間に合わないというようなことがないように今から対応策を考えることをおすすめしておきます。

カテゴリー:技術情報メモ