モバイルフレンドリーとは | テスト方法やSEOとの関係について

2019年11月17日

スマホを眺める女性

本日はモバイルフレンドリーとは何という事やその確認をする為のテストの方法、SEOとの関係性等についてお話を進めて行きたいと思います。

ご自身でホームページを運営されている方にとっては非常に重要なお話になります。
自分のサイトに問題が無いのか問い確認方法等については下記に詳細を記しておりますのでよろしくお願いいたします。

目次

ユーザビリティとSEOとの関係性について

デジタルなイメージの画像

SEOの観点から見て重要とされている項目は様々ですが、その項目の一つ一つを理由も含めて考察してみると全てにおいて最終的には「ユーザビリティ」を重視したサイト作成をしているかという点に主眼を置いている事に気がつきます。

ユーザビリティという言葉にも色々と意味がありますが、ここでは「ユーザー(アナリティクス的な考え方ではデバイスの事を指し示す。アナリティクスについては今後の記事で改めて詳しく説明を致します。)にとっての使いやすさ」という事を言っており、現在のGoogleの基本理念と言っても差支えの無いほどの大切な指針となっています。


要はサイトを訪問するユーザーにとってそのサイトが如何に有益で価値のある情報を(無償で)提供しているサイトであるかという事が重要なのは勿論(ここまでは超基本中の基本)、サイトの構成自体も分かりやすく訪問者にとって優しい造りになっているか、という部分が重要になります。

ユーザビリティからのつながりで言うと、現在のWEBやSEOにはモバイルフレンドリーという概念が存在します。

モバイルフレンドリーとはスマートフォン等の携帯端末でのサイト閲覧時の快適度を示す一つの指標としてGoogleが2015年4月に行ったアップデートにより実装された指標です。

モバイルフレンドリーとSEO

黒い画面とソースコード

これは今どきのインターネットを利用するユーザーの過半数以上がスマートフォン等の携帯端末である為、そういった層がインターネットを利用際にも、より快適にサービスを受ける事が出来る様にという考えから生まれた指標です。

この指標も当然ユーザビリティを意識したが故に生まれた考え方であり、非常に納得のいく内容のアップデートであったと言えます。

「ユーザビリティ」や「モバイルフレンドリー」の事は何となく分かったけど、じゃあ自分がサイトを作成する際にはどういった事などに気を付ければいいの?となりますよね。


そこで大切になるのが、まあ世間でもよく言われている基本的なSEOを意識したサイト造りなのです。
まあ結局はそれだけなんです…。基本が一番(´・ω・`)

ただ、それだけなら今回語る必要も大してなかったですよね。
時間返せ!と言われても仕方がありません。

なので少しだけ私が行っている、誰にでも今から直ぐにでも出来るモバイルフレンドリー&ユーザビリティを重視したサイトの作り方として、表示する画像の設定方法についてのお話をして本当に今回の記事は締めさせていただきます。

モバイルフレンドリーの為の画像サイズの設定

ソースコード

モバイルフレンドリーの為の画像サイズの設定方法は超簡単です。

サイト上に表示される画像のサイズと、投稿する画像のサイズを合わせましょう!以上です!

意味が分からないかもしれないので少し補足をすると、私達がwebサイト上で目にしている画像というものは、実際にその画像が持っているファイルのサイズ(「px」ピクセル数)と必ずしも同じとは限りません。

むしろwebサイトの仕組みから考えて、表示サイズと実際のファイルサイズが違う場合が殆どです。
もしも画像のファイルサイズがブラウザ上での表示サイズよりも極端に大きすぎる場合は、ユーザーにとって非常に大きな負担となってしまいますので注意が必要です(特にスマートフォンユーザーにはかなりの負担になります)。


実際に私が仕事先で関わった案件の中にも、ブラウザ上での画像の表示サイズ自体は「400px」程度であるのに対し、その画像の持つファイルサイズは「5000px」を越えていたなんていう事例がありました。

この場合は400pxでも5000pxでも表示されている画像の見た目は何ら変わりはありませんので、どう考えても残りの4000px以上は不要ですし只々ユーザー側には負担となっているだけなのです。

またこういったズボラなサイトの場合は、ここで挙げた400pxサイズの画像以外についても無駄に大きすぎるpx数のファイルを使用している場合が多く、そのせいで兎に角サイトの読み込みが異様に遅かったり、場合によってはJS系の読み込みに不具合を起こす事もあります(再読み込みなどをすれば一応正しく表示されるのですが)。

サイト全体の挙動も何処かぎこちない場合が多いんですよね。

モバイルフレンドリーテストについて

フォーマルな格好の女性

上記の様な事例からも、画像サイズの管理が如何に大切かという事が分かっていただけると思いますし、もしも現在自分のサイトがモバイルフレンドリーではなくて悩んでいるという方や、今後サイトを作成する場合は「自分がそのサイトを利用する立場であればどう思うか」という相手の目線に立ってサイト制作をされる事が今後は必要なのだと思います。

※自分のサイトがモバイルフレンドリーかどうかについては、こちらで任意のサイトのURLを入力してクリックを押すだけで簡単にテストする事ができます。

紹介するついでに本サイトのトップページもテストしてみましたが、ちゃんとモバイルフレンドリーになっておりました(´・ω・`)ヨカッタ


因みに本サイトで使用されている画像の多くは下記のサイトを利用して1度か2度の圧縮を行ってから投稿をする様にしております。

下記サイトを利用する事により画像の持つ元々の美麗さは維持しつつ、通常よりも小さなファイルサイズで表示をする事が出来る様になるのでユーザビリティの点からも個人的には推奨しています。

まあ私の様に2回圧縮をかけると流石に多少の粗さは出てきますが、1回ならそれ程劣化は致しませんのでオススメです。
※圧縮では画像の縦横の幅は変わりません。
 同じ表示サイズのままファイルサイズを落とす事が可能になります。

画像圧縮サイトについてのご紹介

BLOGと書かれた木材

また、ブログをどんどん更新していくとどうしても画像等のファイルが増えていきサイト全体のファイルサイズも大きくなってしまという問題が発生します。

そうなるとサーバーの容量も大きいプランを選ばないといけなくなりますので年間の維持費も割高になってしまいます。
日頃からマメに画像ファイルのサイズの最適化を行う事は自身のサイト運営の助けにもなります。

■ 圧縮:
https://www.iloveimg.com/ja/compress-image

下記の様なサイトを利用する事で画像の縦横の幅を変更する事が可能になります。

私の場合は基本的にはPhotoshopを使用して、レタッチのついでに画像の表示サイズの方も最適化をしてしまう場合が多いのですが、そういったソフトを持っていないという方であれば下記の様なサイトを利用しましょう。

■ サイズ変更
・jpg用:
https://www.iloveimg.com/ja/resize-image/resize-jpg
・png用:
https://www.iloveimg.com/ja/resize-image/resize-png
・gif用:
https://www.iloveimg.com/ja/resize-image/resize-gif

「モバイルフレンドリーとは | テスト方法やSEOとの関係について」の総評

本日はモバイルフレンドリーやそのテスト方法などについてのお話になりました

モバイルフレンドリーが如何にSEOにとって重要な要素であるかは、本記事を読んでいただけた方には十分にご理解いただけたと思います。
自身のホームページがまだ未対応であるという方は早急に対応を進められることをおすすめいたします。

それでは今日はこの辺で(´・ω・`)ノ

関連記事

デジタルなイメージ

SEO対策の基本や方法 | SEO会社の実態などについて

コーディング中の人

ワードプレスとは | CMSツール

編集中の画面

健啖隊について | ニャゴラ | YouTuber

Macのキーボードとディスプレイ

副業ブログはワードプレスと無料ブログのどちらがおすすめ?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA