より優れたモバイルフレンドリーサイトのために 画像編

今回は、「より優れたモバイルフレンドリーサイトのために 画像編」と題しまして、もう一段踏み込んだモバイルフレンドリーについてお伝えしていきます。

モバイルフレンドリーとは、ウェブサイト・ホームページが、スマートフォン表示の際に、閲覧しやすいように配慮されているということを指します。このモバイルユーザーへの配慮は、検索エンジンからの評価にも影響があるため、SEOとして語られがちですが、それよりもユーザビリティ向上の方が重要なポイントです。モバイルフレンドリー（スマートフォン最適化） 

以前、サイトの「スマホ対応」とスマホ用サイトでは、ホームページ（ウェブサイト）のレスポンシブデザインによるモバイルフレンドリーと、スマートフォン用特設ページについてお伝えしました。

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作においてレスポンシブデザインによるモバイルフレンドリーサイトを制作しています。また、モバイルフレンドリー未対応サイトへのホームページのスマホ対応化である「モバイルフレンドリー化サービス」を提供しています。

弊社制作のホームページ（ウェブサイト）は全てモバイルフレンドリーサイトですが、「テーマのモバイルフレンドリー化 WordPressカスタマイズ事例・実績」などでお伝えさせていただいている通り、レスポンシブ対応していないWordPressテーマのレスポンシブ化などのWeb制作サービスも提供しております。

こうしたサービスにおいては、ホームページ公開後の運用のしやすさを考えて設計しています。スマホ未対応のホームページを運用されている場合はぜひ一度ご相談ください。

ホームページのスマホ対応とその後の運用を考えた設計

さて、なぜ検索順位への影響もサイトユーザーへの配慮、ユーザビリティが、「優れたサイト」の一つの基準として採用すべき事柄だと考えられているからでしょう。検索結果順位という「結果」に先立つものは「ユーザーへの配慮」です。

そこで、ホームページ（ウェブサイト）のレスポンシブデザインやリンク距離などで「検索エンジン」としては「合格」の評価を得たとしても、まだもう一つ踏み込んで考えるべきポイントがあります。

それは、画像のモバイルフレンドリーです。

サイトレイアウトや画像のサイズがある程度最適化されていれば、検索エンジンとしては「モバイルフレンドリー」として判断されますが、実際にサイトを閲覧するユーザーとしては、もしかしたらまだ「閲覧しにくいサイト」になっている可能性があります。

今回はそんなもう一段踏み込んだモバイルフレンドリーについてお伝えしていきます。

ホームページ画像の最適化

ホームページに掲載している画像の最適化にはいくつかの側面があり、それぞれモバイルフレンドリーとして寄与する部分は異なりますが、概ね次のようなポイントが重要になるでしょう。

1. ファイルサイズ・画像解像度
2. その中でも画像の横幅やアスペクト比
3. 画像内のテキストの大きさ
4. WebP、JPEG 2000、JPEG XRなど次世代フォーマット画像の利用

ファイルサイズ・画像解像度などは、スマートフォン表示だけでなく、ウェブサイト・ホームページ全般に関わるポイントです。

モバイル特有の問題は、スマホ表示時の画像の横幅や画像内テキストなどが挙げられるでしょう。

画像のキレイさはある程度維持したいところですが、ユーザービリティやSEOの観点からページの応答速度、表示速度との兼ね合いがあるため、次世代フォーマット画像を利用するなどが最も理想的かもしれません。

WebP

WebPは、Googleが開発している次世代静止画フォーマットで、JPEGやPNGを30％程度圧縮することができます。ファイルの拡張子は「.webp」です。

スマートフォンで撮影した写真素材の取り扱いと最適化

スマートフォンのカメラ性能は飛躍的に向上しており、ホームページ（ウェブサイト）の素材として十分に活用できるクオリティの写真が撮影できるようになりました。しかし、撮影したデータをそのままサーバーにアップロードするだけでは、表示上の不具合や速度低下を招く恐れがあります。ここでは、特にiPhoneユーザーが多い日本において注意すべき点と、素材をより良く見せるための手法について解説します。

iPhone標準「HEIC」フォーマットの現状とWeb利用時の課題

iPhoneやiPadで写真を撮影すると、標準設定では拡張子が「.heic」というファイル形式で保存されます。これはHEIF（High Efficiency Image File Format）と呼ばれる規格で、高画質を保ちながらデータ容量を小さくできる優れた形式です。しかし、ホームページ制作の現場においては、このHEIC形式が課題となることがあります。

HEICの高い圧縮効率と、ブラウザ互換性の問題点

HEICは従来のJPEGに比べて約半分の容量で同等の画質を維持できると言われています。容量削減の観点からは理想的ですが、ChromeやSafariなど主要なブラウザの一部や古いバージョンでは、標準で表示できない場合があります。せっかく用意した写真がユーザーの環境によって「表示されない」という事態を防ぐため、現時点ではWeb標準の形式に変換してから使用するのが一般的です。

ホームページ（ウェブサイト）で使うためのHEICからJPEG/WebPへの変換手順

HEIC画像をホームページで使用するには、JPEGや、より軽量なWebP（ウェッピー）への変換が必要です。Macをお使いの場合は「プレビュー」アプリで書き出しを行うことで変換可能です。Windowsやスマートフォンの場合は、無料のオンライン変換ツールを使用するか、Photoshopなどの画像編集ソフトを介して保存し直します。このひと手間を加えることで、すべてのユーザーに正しく画像を表示させることができます。

スマホ写真のクオリティをプロ並みに見せる工夫

スマートフォンで撮影した写真は、一眼レフカメラで撮影した写真に比べて、センサーサイズの違いから暗所でのノイズが目立ちやすい傾向があります。しかし、撮影時の工夫と事後の調整で、十分に商用レベルの素材として活用できます。

手ブレやノイズを抑える撮影の基本と加工アプリの活用

室内などの光量が少ない場所での撮影は、画質劣化の大きな原因となります。可能な限り自然光を取り入れるか、照明を工夫して明るさを確保してください。また、撮影後はAdobe Lightroomなどのモバイル版アプリを使用し、「ノイズ軽減」や「シャープネス」の数値を微調整することで、クリアな画質に仕上げることができます。過度な加工は不自然になりますが、適切な補正は素材の質を大きく向上させます。

モバイル表示で映える構図と色の調整

スマートフォンの縦長画面で表示されることを前提に、被写体を中央に配置したり、あえて余白を多く取ったりする構図が有効です。また、スマートフォンのディスプレイは発色が鮮やかな傾向があるため、彩度（色の鮮やかさ）を少し控えめに調整するほうが、落ち着いた洗練された印象を与えられる場合があります。

ファイルサイズ・画像解像度

こちらはモバイルフレンドリーだけではなくホームページ制作全般に関して言えることなのですが、高解像度の画像をサイト内に設置しても、それを映し出す画面によって、細かいところまでは再現されないため、ホームページ用に合わせて画像を小さくしておく配慮が必要になります。

例えば、iPhoneなどで撮影した画像であっても、元のファイルサイズは、2MBから4MBほどあります。

一眼レフなどであれば5MBを超えることが一般的です。

仮にトップページにこのファイルサイズの画像が10枚設置されていた場合、少なく見積もって20MBほどになります。

しかしながらウェブ用に使用する画像は500KBもあれば十分すぎるほどです。

画像の表示サイズにもよりますが、ロスレス圧縮すれば100KB台でも十分です。

こうした画像のファイルサイズはホームページの表示速度に影響します。画像の軽量化はSEOを考える上で見逃せないポイントでもあります。

ホームページ設置画像のSEO【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だけでなくスマートフォンなど様々なので、自分の閲覧環境以外にも配慮すべきかなぁと、友人のブログのおかげで気付きました。

画像の最適化もさることながら、一見内容の重複でスマートさが失われそうなそういった事柄にも、少しだけ注意してみる、それがより優れたモバイルフレンドリーのポイントなのかもしれません。

モバイルフレンドリー（スマートフォン最適化）

サイト速度とSEOに直結！最新の画像最適化技術

「写真容量」、「画像のデータサイズ」はホームページの表示速度に直結します。特にモバイル回線を利用するユーザーにとって、重い画像はストレスの元となり、離脱率を高める要因になります。ここでは、表示速度を劇的に改善し、SEO評価を高めるための技術を紹介します。

次世代フォーマット「WebP」と「AVIF」の導入メリット

長らく画像の標準形式として使われてきたJPEGやPNGに代わり、現在はGoogleが開発した「WebP」や、さらに圧縮効率の高い「AVIF」という次世代フォーマットの利用が推奨されています。

圧倒的な圧縮率がもたらすページ表示速度の改善

WebPは、画質をほとんど落とさずにJPEGと比較して25%から35%程度の容量削減が可能です。AVIFはさらに高い圧縮率を誇ります。これにより、ページの読み込み時間が短縮され、ユーザーは待たされることなくコンテンツを閲覧できます。多くの画像を使用するギャラリーサイトやECサイトでは、この形式変更だけで劇的な速度改善が見込めます。

これらのフォーマットへの具体的な変換方法

主要な画像編集ソフトや、Squoosh（Googleが提供する圧縮ツール）などを使用することで、簡単にWebPやAVIFへ変換できます。また、WordPressなどのCMSを利用している場合は、プラグインを導入することで、アップロード時に自動的に次世代フォーマットへ変換・配信する仕組みを作ることも可能です。

画像を遅延読み込み（Lazy Load）させる実装方法

ページを開いた瞬間にすべての画像を読み込むのではなく、ユーザーがスクロールして画像が表示領域に近づいたタイミングで読み込みを開始する技術を「遅延読み込み（Lazy Load）」と呼びます。

ページの初期表示速度を向上させる技術的な仕組み

HTMLのimgタグに loading=”lazy” という属性を追加するだけで、現代のブラウザでは標準的にこの機能が動作します。これにより、初期表示にかかる通信量が減り、ファーストビュー（最初に表示される画面）が素早く表示されるようになります。ユーザー体験の向上に非常に効果的です。

画像の非同期デコード「decoding=”async”」と遅延読み込み「loading=”lazy”」

画像容量削減がもたらすGoogleのSEO評価向上

Googleは「Core Web Vitals」という指標を用いて、ページの表示パフォーマンスを評価しています。画像の最適化によって表示速度（LCP）が改善されると、この評価が上がり、検索順位にも良い影響を与える可能性があります。画像最適化は、ユーザーのためだけでなく、事業の集客力を高めるための重要な施策です。

画像最適化を外注する費用対効果と判断基準

もし画像の最適化の外注依頼を検討されている場合、制作費用の内訳を理解しておくことが重要です。画像の最適化処理は、自分で行うことも可能ですが、枚数が多い場合や高度な設定が必要な場合は、プロに依頼するほうが結果的にコストパフォーマンスが良い場合もあります。

画像最適化作業の内製化と外注の費用目安

画像の枚数が数枚から数十枚程度であれば、無料の圧縮ツールを使って自社内で対応することで、費用を抑えることができます。しかし、商品点数が数百を超えるECサイトなどの場合、手作業での変換は膨大な時間がかかり、人件費のほうが割高になる可能性があります。

ツールの利用料と専門家への依頼費用の比較

内製化する場合のコストは主に人件費ですが、外注する場合は「画像調整費」や「コーディング費」として計上されます。単純なリサイズや圧縮であれば、安価な単価設定の業者もありますが、Retina対応や次世代フォーマットへの変換、遅延読み込みの実装を含めると、技術料が発生します。

数が多い場合のバッチ処理（一括処理）の依頼費用

大量の画像がある場合、プロはプログラムを用いて一括処理（バッチ処理）を行うため、1枚あたりの単価を抑えられることがあります。数千枚規模の画像最適化が必要な場合は、手作業で行うよりも、システムによる一括変換を制作会社に相談するほうが、安く、かつ品質も均一に仕上がります。

モバイルサイト制作において「安さ」だけで依頼を決めない重要性

制作費用を安く抑えることは大切ですが、画像の最適化を省いてしまうと、結果として重くて使いにくいサイトが出来上がってしまいます。

容量最適化を疎かにすることが事業にもたらす隠れたコスト

表示速度が1秒遅れるだけで、コンバージョン率（成約率）は下がると言われています。制作費が安くても、売上につながらないサイトになってしまっては本末転倒です。見積もりを比較する際は、単に「安い」かどうかだけでなく、「画像最適化やモバイル対応が適切に含まれているか」を確認することが、事業成功のための重要な判断基準です。

（初回投稿日 2016年6月9日）