今回は、「より優れたモバイルフレンドリーサイトのために 画像編」と題しまして、もう一段踏み込んだモバイルフレンドリーについてお伝えしていきます。
モバイルフレンドリーとは、ウェブサイト・ホームページが、スマートフォン表示の際に、閲覧しやすいように配慮されているということを指します。このモバイルユーザーへの配慮は、検索エンジンからの評価にも影響があるため、SEOとして語られがちですが、それよりもユーザビリティ向上の方が重要なポイントです。モバイルフレンドリー（スマートフォン最適化）
以前、サイトの「スマホ対応」とスマホ用サイトでは、ホームページ（ウェブサイト）のレスポンシブデザインによるモバイルフレンドリーと、スマートフォン用特設ページについてお伝えしました。
ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作においてレスポンシブデザインによるモバイルフレンドリーサイトを制作しています。また、モバイルフレンドリー未対応サイトへのホームページのスマホ対応化である「モバイルフレンドリー化サービス」を提供しています。
弊社制作のホームページ（ウェブサイト）は全てモバイルフレンドリーサイトですが、「テーマのモバイルフレンドリー化 WordPressカスタマイズ事例・実績」などでお伝えさせていただいている通り、レスポンシブ対応していないWordPressテーマのレスポンシブ化などのWeb制作サービスも提供しております。
こうしたサービスにおいては、ホームページ公開後の運用のしやすさを考えて設計しています。スマホ未対応のホームページを運用されている場合はぜひ一度ご相談ください。
さて、なぜ検索順位への影響もサイトユーザーへの配慮、ユーザビリティが、「優れたサイト」の一つの基準として採用すべき事柄だと考えられているからでしょう。検索結果順位という「結果」に先立つものは「ユーザーへの配慮」です。
そこで、ホームページ（ウェブサイト）のレスポンシブデザインやリンク距離などで「検索エンジン」としては「合格」の評価を得たとしても、まだもう一つ踏み込んで考えるべきポイントがあります。
それは、画像のモバイルフレンドリーです。
サイトレイアウトや画像のサイズがある程度最適化されていれば、検索エンジンとしては「モバイルフレンドリー」として判断されますが、実際にサイトを閲覧するユーザーとしては、もしかしたらまだ「閲覧しにくいサイト」になっている可能性があります。
今回はそんなもう一段踏み込んだモバイルフレンドリーについてお伝えしていきます。
ホームページ画像の最適化
ホームページに掲載している画像の最適化にはいくつかの側面があり、それぞれモバイルフレンドリーとして寄与する部分は異なりますが、概ね次のようなポイントが重要になるでしょう。
- ファイルサイズ・画像解像度
- その中でも画像の横幅やアスペクト比
- 画像内のテキストの大きさ
- WebP、JPEG 2000、JPEG XRなど次世代フォーマット画像の利用
ファイルサイズ・画像解像度などは、スマートフォン表示だけでなく、ウェブサイト・ホームページ全般に関わるポイントです。
モバイル特有の問題は、スマホ表示時の画像の横幅や画像内テキストなどが挙げられるでしょう。
画像のキレイさはある程度維持したいところですが、ユーザービリティやSEOの観点からページの応答速度、表示速度との兼ね合いがあるため、次世代フォーマット画像を利用するなどが最も理想的かもしれません。
WebP
WebPは、Googleが開発している次世代静止画フォーマットで、JPEGやPNGを30％程度圧縮することができます。ファイルの拡張子は「.webp」です。
ファイルサイズ・画像解像度
こちらはモバイルフレンドリーだけではなくホームページ制作全般に関して言えることなのですが、高解像度の画像をサイト内に設置しても、それを映し出す画面によって、細かいところまでは再現されないため、ホームページ用に合わせて画像を小さくしておく配慮が必要になります。
例えば、iPhoneなどで撮影した画像であっても、元のファイルサイズは、2MBから4MBほどあります。
一眼レフなどであれば5MBを超えることが一般的です。
仮にトップページにこのファイルサイズの画像が10枚設置されていた場合、少なく見積もって20MBほどになります。
しかしながらウェブ用に使用する画像は500KBもあれば十分すぎるほどです。
画像の表示サイズにもよりますが、ロスレス圧縮すれば100KB台でも十分です。
こうした画像のファイルサイズはホームページの表示速度に影響します。画像の軽量化はSEOを考える上で見逃せないポイントでもあります。
サイトのトップページの読み込み速度
以前、ホームページ（ウェブサイト）の高速表示化のご依頼を受けた時に、お客さまのサイトのトップページの読み込み速度を計測したところ、平均で12秒、遅い時には18秒という数字が出てきたことがありました。
サイトの読み込み速度は、サーバースペックをはじめ、様々な要因がありますが、この事例の最大の原因は、トップページのスライドショーと、その下にあった画像でした。
トップページに6枚の画像を使ったスライド、その下に8枚ほど画像が設置されていました。
そしてそれぞれのファイルサイズは4MBから6MBほどありました。
もし3G回線であれば、最大で秒間14.4MBの通信しかできません。
仮に4MBでも56MBの容量をダウンロードする場合は、ダウンロードだけで4秒弱、サイトの描画までならばもっと時間がかかります。
しかし実際の通信速度はそれほど速くありません。
事実、PC閲覧のブロードバンド環境で、サイトの読み込みに12秒かかりました。モバイル環境ならばおそらくそれ以上の読み込み時間が想定されます。
この事例では、画像ファイルを縮小するだけで2秒台まで表示速度が速くなりました。それからさらにカスマイズを施して、1秒台にまで縮めることができました。
画像の横幅・アスペクト比
レスポンシブデザインの欠点として、画像の横幅の問題があります。
CSSでスマートフォンなどからのアクセスの際に、サイトのレイアウトを変更することはできますが、スマートフォン専用の画像が必要になるケースがあります、
よく問題が起こるのが画像で制作した「横並びメニュー」です。
例えば、各ボタンが横幅200pxで制作されていた場合、レスポンシブで縦方向にリスト化した場合に、左右などに余白ができてデザイン面での工夫が必要になったり、逆に画面幅に合わせて目一杯引き延ばすと画像が粗くなったり、とさまざまな問題が生じます（150pxで一行2列ということも一考の余地があります）。
また、PC表示でリストが横方向にたくさんあった場合、それをスマホ表示で縦方向に変更すると、メニューだけでかなりスクロールを要するレイアウトになることもあります。
これには、アスペクト比（画像の縦横比）も関係してくるでしょう。
この場合は、CSSだけでの対応が難しく、スマートフォン用に画像を再制作する必要が生じる可能性もあります。
もしくは、スマートフォン表示の際は、横並びメニューを「スマートフォンバージョン」として再構築するということも一つの手です。
最近では、閲覧と操作性を向上させるために、トグルを用いたメインメニューがよく実装されています。
右下のボタン（トグル）
画像内のテキストの大きさ
この項目が、「より優れたモバイルフレンドリーサイト」のために最も重要なポイントです。
レスポンシブデザインによって、例えば、PC表示では横に二つ並んだ画像も、上下に1つずつ横幅いっぱいの画像表示をすることはできますが、iPhoneであれば、画面の横幅は320pxや375pxであるため、画像内に埋め込まれた文字が小さくて読みづらいということが起こりえます。
これは特に広告用ランディングページのようなワンカラムレイアウトでは、顕著に現れます。
ワンカラムレイアウトの場合
二つに分割されたものが左右から上下にレイアウト変更される場合は、影響は比較的少ないものの、一枚物の画像が横幅いっぱいで設置されている場合、スマートフォン表示では、PC表示に比べて横幅が1/3から1/4になります。
それがイメージを伝える「風景の写真」などであれば、特に問題は生じないかもしれません。
しかしながら、ワンカラムレイアウトで、PC表示で横幅1200pxなど、横幅を目一杯使ったページの場合、同じページがスマートフォンで表示され、約1/4まで縮小表示された場合は、画像内に埋め込まれたテキストもやはり1/4になります。
フォントサイズで言えば、仮に画像内に埋め込まれた文字が20pxの場合、スマートフォン表示で縮小された時は、5px程度の小ささになります。
画像内のテキストの大きさの問題を解決する方法
モバイルフレンドリーサイトであることを維持しつつ、画像内のテキストの大きさの問題を解決する方法としてこの問題を解決するには二つの方向性が考えられます。
一つは、スマートフォン表示の際でも読める程度の大きさでしか文字を画像に入れないこと。
もう一つは、スマートフォンからのサイトアクセスの場合に、表示する画像を振り分けるか、ページを振り分けるという方法です。
そして、どうしてもそういった面で再構築が難しい場合は、読めない部分のテキストを画像の下部などに記載するということもユーザーへのよい配慮になります。
表示する画像を振り分ける
スマートフォン表示の際に画像内の文字が読めるようにする方法の一つが、PC表示用画像とスマートフォン表示用画像の2つを用意して、アクセスデバイスごとに表示する画像を振り分けるという方法です。画像作成に手間がかかる他、施策内容によってはページのファイルサイズが少し大きくなってしまうといったデメリットがあります。
ページを振り分ける
また、根本的にレスポンシブデザインではなく、PC用とSP用のページを別に作成して、アクセスデバイスごとにページを振り分けるという方法もあります。しかしこうした方法は、ページ作成に手間がかかり、また、アクセスごとの振り分けの設定も必要になってしまいます。
コンテンツ部分へのチラシ・フライヤー画像の掲載など
こんなことを記事にしようと思ったのには、実は原因があります。
ホームページ制作・ウェブサイト制作にあたっては、弊社ではもちろんこういった配慮をさせていただいており、カスタマイズの際にも同様の配慮をさせていただいています。
どうしても画像の再作成が難しい場合は、「画像を全て入れ替え、もしくはCSS化」ということもケースとしてはよくあります。
しかしながら、今回の記事でお伝えしようと思った動機は、WordPressをはじめとしたブログCMSでの記事の配信、WordPressでなくても、レンタルブログからソーシャルに至るまで、チラシ・フライヤー画像の掲載をされている場合に、
「読めない…」
と思った経験がたくさんあるからです。
結構前になりますが、以前友人のブログにライブのフライヤーが掲載されていたのですが、細かいところが読めない、と。
結局PCからもう一度ブログを観て、読めたのですが、スマートフォンではなかなか読みづらかったため、「画像の下の方に小さくて読めない部分を書いておいてくれたらなぁ」と思いました。
一応引き伸ばせばなんとか読める場合もありますが、画像が粗くて数字などが読みづらいことがたまにあります。
サイトのコンテンツ内に、画像と重複する内容を記載することも、なんだかスマートさが無いように感じることもありますが、閲覧環境はPCだけでなくスマートフォンなど様々なので、自分の閲覧環境以外にも配慮すべきかなぁと、友人のブログのおかげで気付きました。
画像の最適化もさることながら、一見内容の重複でスマートさが失われそうなそういった事柄にも、少しだけ注意してみる、それがより優れたモバイルフレンドリーのポイントなのかもしれません。
