Googleに学ぶアートディレクション(レスポンシブ画像)

2018/07/15 2020/04/19 0

vanillaice (Akira)

大スマートフォン時代が到来し、GoogleのMFI(モバイルファーストインデックス)も始まった今、Googleはゴリゴリのレスポンシブデザイン推しとなっております (´・ω・｀)

Googleの推している「レスポンシブ」とはサイト全体構成なので、FC2ブログ的に言えば「テンプレートのレイアウト構成」のことです。
が、広義としてのレスポンシブというのはテンプレートレイアウト・デザインのことだけを指すとは限りません。

例えばFC2ブログではユーザー環境(テンプレート設定)がパソコン・スマホ共通のレスポンシブであろうと、パソコン専用とスマホ専用の併用であろうと、書いた記事内容は全てのデバイスで共通です。
ユーザーがどの端末で記事を書くにしろ、その内容はパソコン専用テンプレートにもスマホ専用テンプレートにも、レスポンシブテンプレートにも全て同じものが使われます。

仮にユーザーがパソコンのことだけを考えて記事を書いた場合、もしかしたら画像や動画の表示サイズが多きすぎてスマホ専用版でははみだしているかもしれません。
テンプレート製作者は予測しうる不備・不具合については配慮してコーディングをしますが、予測不可能な内容、予測が出来るとしても様々な理由から配慮できない(しない)内容などもあります。
原則としてユーザーが書く記事内容については不可侵です。

ですからあなたがFC2ブログでレスポンシブテンプレートを採用していようといまいと、どのデバイスから閲覧されてもコンテンツが問題なく表示されるようにしておく必要があります。
それがレスポンシブです。
くれぐれもここで言う「レスポンシブ」はテンプレートの仕様のことだけではないですよ。もちろんテンプレートつまりサイト(ブログ)全体がレスポンシブになっているに越したことはありませんが、簡単に言えば画像などのコンテンツがスマホで見てもはみ出したり見切れて閲覧不可になったりしないようにする。それがレスポンシブ。

パソコンやタブレットやスマホといったデバイス全てに対応できるよう、画像のサイズなどを上手いことゴニョゴニョすることをアートディレクションと呼ぶそうなんですが、繰り返しますが FC2ブログではパソコンもタブレットもスマホも記事内容が共通なのですから、このアートディレクションに気を配ろうね、ということですね。

今回は特に画像に的を絞って、Googleのweb開発者(主にChrome開発)の Pete Lepage氏の提案をFC2ブログの仕様を絡めながらなるべくわかりやすく説明しようと思います。

画像 | Web | Google Developers

1 枚の写真は 1000 語にも匹敵する内容を伝えます。また、画像はすべてのページにおいて非常に重要な役割を果たします。一方で、ダウンロードされるデータ量のほとんどを画像が占めることも少なくありません。レスポンシブウェブデザインでは、レイアウトだけでなく画像もデバイス特性に応じて変えることができます。

Googleが言いたいこと

パソコン・タブレット・スマートフォンはそれぞれ画面のサイズが全く違うのですから、ある特定のデバイスのことだけを考えていたのでは具合の悪いことになるかもしれません。
Googleが最も言いたいことは
画像がビューポート(デバイスの画面)を超えないようにしましょう
ということです。

平たく言えば「画像がはみ出だしたらアカンよ」ってことですね。
何故アカンかというと至って単純な理由で、閲覧が困難だからです。
パソコンでもコンテンツが画面より大きい場合には横スクロールバーが出ますよね。
スマホでも同じことが起こります。何かがはみ出せば横スクロール状態になるわけです。
意図的かつ部分的に横スクロール状態にするテクニックが使われることがありますが、それは全体コンテンツがきっちりとビューポートに収まっており、その中の一部分だけがスムースに横スクロールができる状態であることが大前提。
意図しない横スクロールは指で縦スクロールを行う最中に画面が安定せず右に左にグラグラ落ち着きがない状態になりますので閲覧者に大変なストレスを与えます。

さらにGoogleはページの表示スピードにも重きを置くと発表しています。

The Speed Update, which enables page speed in mobile search ranking📱, is now rolling out for all users!

More details on Webmaster Central 👉 https://t.co/fF40GJZik0
— Google Webmasters (@googlewmc) 2018年7月9日

2018年7月9日には「全ユーザーを対象としたスピードアップデートを開始しました」と発表されています。
画像というのは容量が大きすぎるとページスピードに影響することが多いですよね。
画像の容量を減らす最も効果的な方法はサイズ(寸法)を小さくすることです。
Googleが画像について言いたいことのもう一つは
大きすぎる画像を使わないようにしましょう。
です。

「大きすぎる」というのは、表示サイズと実寸とが著しく異なっている場合を指します。
1000px以上は使わないでね、とかそういう意味ではありません。
300pxで表示したいのならば、実寸1000pxの画像をCSSで300pxに縮尺するのではなく、実寸を300pxにしなさいね、という意味です。

ところが実際はこういう問題があります。

スマートフォンで画像がぼやける際の対処と画像容量削減 - カスタマイズ

スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀)...

スマートフォンで画像がぼやける対策【2倍じゃもう足りない！】 - webのあれこれ

何も考えずに画像を掲載するとスマートフォンでめっちゃぼやけるよ。という記事を以前に書き、その原因・対処なども記しています。その記事だけやたらアクセスが多いんですよね。つまり多くのスマートフォンユーザーさんが困ってるってことよね。...

高解像度ディスプレイでは「実寸を表示サイズの倍にしておかないとぼやける」問題。
そこで提案されるのが次章の内容です。

マークアップを用いた画像処理

デバイス別に表示する画像を切替えるという手法です。それはCSSではなくhtmlで以て行われます。
picture要素のことです。

picture要素についてはFC2ブログで利用する場合の提案などを既に記事にしていますので参照して頂くとして。

Lazyloadを使ってみる【上級編】 - カスタマイズ

検討編、初級編、中級編を経て最終の上級編です。私が制作したテンプレートを利用していることを前提とした記事内容です。検討編では「Lazyloadingを導入するかしないかの判断」初級編では「テンプレートに導入済みのLazyloadingを個別記事でも利用する方法」中級編では「関連記事リストと新着記事リストにも適用する方法」を説明しました。今回の上級編では html5 picture要素の使い方とLazyloading用ブログカー...

こういうのがまさしくアートディレクションですよね。
で、Googleはpicture要素の「解像度別振り分け」についても提案をしているわけですが、FC2ブログではかなり厳しいと思います。
1枚の画像を掲載するのに5つも6も同じ画像のサイズ違いを準備するというのはなかなか大変というか、無理筋 (´・ω・｀)
また、現存するほとんどのスマートフォンが高解像度ディスプレイを採用していることも併せ、私からの提案は解像度に基づく画像切り替えではなく、ビューポートに基づく切り替えです。
もちろん手間を惜しまないという方はGoogleの提案に沿った掲載をされると良いと思います。
私は無理(笑)

imgとdataURIとwebフォントアイコンとSVG

一般的な「画像」とdataURI

一口に「画像」といってもいろんな種類があるんです。
例えば以下のような絵文字

2つとも全く同じに見えると思いますが、最初のものは gif画像で、2つ目は dataURI です。

gif画像の絵文字

<img class="emoji" src="https://static.fc2.com/image/e/257.gif" width="14" height="15" alt="">

dataURIの絵文字

<img class="emoji" src="data:image/gif;base64,R0lGODlhDgAPALMJAP//mf/Mmf+Zmf+ZZv9mAMxmM5mZmTMzMwAAAP///wAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAAJACwAAAAADgAPAAAERDDJSetEGNuEQfiDdgHeBxaIZCDeYbqhwZWmOaCciejBne4CQS0QxAGFteKPKMwwcavhCSFLHHa1QehAWWUy1Y14XIkAACH5BAUUAAkALAMACAAHAAIAAAQHEKU5pawpAgAh+QQJZAAJACwCAAgACQADAAAECxAlROmcJGeZZuURADs=" width="14" height="15" alt="">

dataURIというのは画像データをテキストデータに置き換えたものを指します。

gif画像の方は通信リクエストが発生します。
dataURIの方は通信リクエストが発生しません。
dataURIはサーバーとの送受信で表示するのではなく、ブラウザが直接表示を行っています。

画像表示の仕組み

DNSルックアップ(問い合わせ)
サーバー接続
データリクエスト
レスポンス待ち
取得情報のダウンロード

実際にはもっと複雑な工程を経て表示されますが、dataURIはリクエストの必要がありませんので当然待ち時間なども不要となります。
ただしご覧頂いてわかるとおり文字数がとても多いのでhtml量は増えます。

また、jpg, gif, png などといった画像はキャッシュが効きますがdataURIは効きません。
キャッシュが効かない点を考慮しても、絵文字などの小さな画像の場合はdataURIで表示させた方がメリットが大きいと言えるかと思います。
ただしサイズの大きい画像や複雑な画像(色彩が多い, 精密など)の場合はdataURIにするとかえって負担となることがあります。

FC2ブログであれば絵文字はdataURIで掲載すると良いかもしれないですよね。
いや、「そうした方が良い」という表現にしておきます。

画像をdataURIに変換するサイト
Data URI Scheme 変換

webフォントとSVG

FC2ブログではsvg画像のアップロードが不可なので自前でどうこうというのは殆ど無いと思います。
利用するとすればアイコン系ライブラリですかね。

引用元でもサンプルとして利用されている Font Awesome を例にします。
現在のFont Awesome最新バージョンは5.1.0です。
CSS と JS と選べるようになっています。
CSSの方は webフォントでの表示です。
JSの方は SVG画像での表示です。

使い勝手で言えば初心者にも扱いやすいwebフォント形式に軍配が上がるところですが、Googleも指摘する通り

アンチエイリアス問題
セマンティック(定義が正確)ではない

などのデメリットがあります。
web一般を見てもwebフォントからSVGへ、という感じになってますね。
Font Awesomeの従来のCSS + webフォントから JS + SVG への移行についても諸問題があるとはいえ、どのみちいずれはSVGに傾いていくのですから早い段階で切り替えた方が良いと思います。
ただし疑似要素での利用が非推奨となっている点は辛いかなぁ、と思います。

ファイル容量は削減する

これはもう基本中の基本というか。
画像の寸法を変えなくとも容量だけを削減することは可能です。

Exif情報を削除する
圧縮サービスを利用する

Exif(イグジフ)情報の削除はFC2のファイルアップロード画面に「共通設定」として用意されていますのでチェックを入れておきましょう。

掲載したい画像が有るならばとにもかくにも以下のサイトを訪れ、容量を削減してもらいましょう。

TinyPNG – Compress PNG images while preserving transparency

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

「画像を載せる前に絶対やる。」と思っておくと良いですね。絶対やってください(笑)

その画像装飾はCSSでできるかもしれない

例えば以下のようなもの。

html + CSSグラデーション + CSSドロップシャドウ

ほとんど同じに見えると思います。
PNG画像の方は先程の「Tiny PNG」で圧縮していますのでよーく見ると寧ろ画像よりもCSSの方が綺麗じゃないでしょうかね。
ちなみに圧縮前 64.3KB、圧縮後 8.7KBですから86%もの削減です。どんどん使ってこ (´・ω・｀)

画像の場合は繰り返しになりますが通信リクエストが発生します。この程度の装飾ならば画像にする必要はありませんし、ドロップシャドウやボーダーなどを画像として作成してしまうと、サムネイルになった時に上下だけ、あるいは左右だけ枠が出てるだとか、ちょっと都合の悪いことになったりもします。
ですから装飾は画像に直接つけるのではなく極力CSSで行うようにすると良いですね。

Googleは「画像に直接テキスト入れるな」とも言っています。
画像は「レスポンシブ掲載」を目指すのですから、作成時はちょうど良いと思っていたテキストがスマートフォンから見たら画像自体が小さくなってテキストも連動して極小に… といったことになります。
除外できるのはウォーターマークの場合でしょうかね。
ウォーターマークは著作の所在を示すために入れるので目的や用途が違います。

遅延読み込みの使用を検討する

長いページの未表示の部分に画像が多く含まれている場合は、遅延読み込みによって、読み込み時間を大幅に短縮できます。

私が制作した最近のテンプレートには遅延読み込みが使える状態になってます。
記事内で利用できるかどうかはご利用になるユーザーさんのキャパ次第です。
画像を多用される方は積極的に利用するとかなり快適に閲覧できるようになるのではないでしょうか。
ただしテンプレート変更時には遅延適用画像が不可視(表示されない) というデメリットもあります。
もちろん必須ファイルを移設すれば引き継ぐことができます。

無限スクロールへの言及もありますね。

無限にスクロールするページを作成する場合、コンテンツは表示される時点で読み込まれるため、検索エンジンでコンテンツを認識できない場合があることに注意してください。また、ユーザーがフッターにある情報を見たい場合でも、新しいコンテンツが次々と読み込まれるため、フッターにたどり着きません。

これなんですよね。私が無限スクロールを嫌う理由。
フッター情報にたどり着けないですし、途中で個別記事に入ってブラウザバックで戻ると勝手にリロードされて(スマホではよくある)また一番上からとかマジでストレス。

まとめ

画像の容量は必ず削減する
なるべくpicture要素を活用する
小さい画像はdataURIに変換する
Font AwesomeはSVGで
なんでもかんでも画像にくっつけない(シャドウなど)

あと忘れてましたが、image-set というプロパティの利用提案も出てますね。
これはまだ使えないと思います。
IE11, Edgeが非対応というだけならほかっとけば良いのですが ←
Firefoxが未実装となるとやっぱり使えないかな、という感じです。

いろんなブログを拝見してもやっぱり重たいんですよね。画像のせいで。
遅延読み込み(lazyloading)が必要な人ほど使ってないというか。
画像だけではなく、プラグインやブログパーツなんかもそうです。「それホントに必要？？」と思わせるような装飾過多だったり。
それ以上にスマホで画像がはみ出してる人がめっちゃ多い。
その件については引用元に答えがありますので、スマートフォン版テンプレートCSSに追加してください。
スマホ版の方ですよ。パソコン版の方にだけ入れても意味ありませんのでPC版SP版双方に入れてください。
レスポンシブテンプレートではみ出してるという方はまず居ないと思います(たぶん)
作業も一度で済みます。

Education Google SEO 上級者向け