モバイルフレンドリー:スマホに対応しよう

はじめに

情報としては古い(2015年発表分)のですが、一般に広く知られているかと言えば、そうではないのかなと思い、改めて記事にします。

まだPC用のホームページのレイアウトに慣れていた発表当初「スマホ上で表示された(PC用の)ホームページを、自分の指で広げて見る方がわかりやすい」などの声もお聞きした事があります。
が、人間の慣れとは不思議なもので(世界のweb担当者の努力も大きいのですが)、今ではスマホ用のレイアウトじゃないと、見づらく感じるのではないでしょうか。

特に重要なのがseo(検索順位)に影響を与えるという事です。

グーグルの発表(2015年当時)

検索結果をもっとモバイルフレンドリーにという発表がありました。

今となっては、モバイル(スマホやタブレット)からのアクセスが、PCからのアクセスを超えるほど、浸透してきました。

グーグルは「ユーザー視点」を一番重要視しています。
当然、世の中にスマホやタブレットが普及して、その端末からホームページを閲覧するとなると、レイアウトの対応も必須となってきます。

モバイルフレンドリーとは?

  • 1. ユーザーが快適に利用できるサイトを作成する
  • 2. モバイル ユーザーが一般的なタスクをどの程度簡単に行えるかを基準に、ウェブサイトの有効性を測定する
  • 3. あらゆる端末に共通するモバイル用のテンプレート、テーマ、デザインを利用する(レスポンシブ ウェブ デザインを採用する)
  • レスポンシブ

    グーグルのお知らせでは、この様に書かれています。
    つまり、「見やすさ」、「扱いやすさ」、「表示速度の速さ」、「色んな端末のサイズに対応すべき」という事です。
    ちなみに1つのレイアウト(スタイルシート)で様々なサイズの画面に対応する事を「レスポンシブデザイン」と言います。

    余談ですが、この対応をするために、結局2倍近い作業(デザインやcssの記述)が増えたため、減少傾向だったホームページの制作料金が上昇しました。

    あなたのホームページはモバイルフレンドリー?

    こんな便利ツールがあります。

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

    モバイル フレンドリー テスト – Google Search Console

    このブログをチェックしてみよう

    自分のブログ(ホームページ)の調査結果って、ちょっと載せたくないですね・・

    URLの入力

    先ほどのリンクから、このブログのURLを叩きます。

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

    分析中

    分析されています・・・

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

    結果発表

    ジャン!
    結構早く完了します。

    結果は、何も問題なし!でした。
    (だってワードプレスの標準テーマそのままですから・・)

    モバイルフレンドリーでない場合

    こんな風に、怒られてるかの様なエラーが出ます。

    「クリック可能な要素同士が近すぎます」、「コンテンツの幅が画面の幅を超えています」、ばつ印と共に表示されました。

    モバイルフレンドリーではない例

    終わりに

    懐かしい情報の記事を書きましたが、webマーケティングを頑張りたいのに、こういうツールを知らないと勿体無いので、エンドユーザー様向けにお伝えしました。

    モバイル対応はseo(検索順位)に影響を与える大事な要素ですので、今一度調べてみてはいかがでしょうか。