アイキャッチ画像の縦横比（アスペクト比）を統一するメリットと理由
2020.9.21
メディアサイトやECサイトで運用しやすいと考えるアイキャッチ（サムネイル）画像の縦横比についてのメモです。Twitterで書いていたことを編集してブログ記事にしました。Webサイト利用者への情報提供の継続を目的として、運用性を高める画像の取り扱いに焦点を当てています。
結論：メディアサイトの場合は16:9の縦横比で統一すると運用負荷を減らせる
主にメディアサイトやECサイト構築の場合ですが、アイキャッチ（サムネイル）画像の縦横比（アスペクト比）は統一したほうが運用負荷を減らせると考えます。まず結論から書きますが、特にメディアサイトの場合は16:9の縦横比で統一すると運用しやすくなると考えています。理由に続きます。
縦横比を統一したほうが良い理由と、統一しない場合に増える工程
Webサイト運営者やデザイナー、開発者の観点で「コンテンツの種類や場所によって画像のトリミングを変えたい」という気持ちはよくわかりますし共感します。一方で、運用し始めて少し経ったときに当初想定していたよりも工数が増えることに気付き、運用が苦しくなっている状況を何度か見てきました。
画像のトリミングとコンテンツ管理システム（CMS）への追加は、実は結構手間がかかります。例えば画像を制作してからブラウザで確認するまでに次の工程があり、画像が複数になると工数が増えていきます。
画像制作からブラウザで表示するまでの工程
- 画像制作
- 画像の確認（情報が正しいか、意図が伝わるデザインになっているか、訴求効果が望めるかなど）
- 画像の書き出し
- 画像書き出し後の確認
- 画像の軽量化（コンテンツ管理システム側でも可能な場合あり）
- コンテンツ管理システムへの画像追加（指定場所へのコンテンツ反映）
- ブラウザでの表示確認
メディアサイトのコンテンツ管理システム（CMS）にはWordPressがよく使われますが、おおよそ上記の工程で画像を登録（追加）します。
Webサイト構築初期こそ、運用負荷を最小限に減らす設計にしたほうが良い
Webサイト運用者も開発者も意気込みがあり熱量も高く、構築初期は「少し手間が増えるくらいなら画像のトリミングは何とかします！」という気持ちになりやすいです。ですが運用を続けていくと「少しの手間」が「多くの手間」に感じて苦痛になり、コンテンツ追加頻度が減る場面が結構あると感じます。
画像のトリミングは、トリミングだけで済むことは少ない
画像のトリミングと書きましたが、単純なトリミングだけで解決する場面は少ないです。例えばアイキャッチとしてデザインされている画像は、写真やグラフィック、イラスト、文字など複数の要素で構成されています。縦横比を変えるということはそれらの要素を全て再レイアウトすることになります。
その工程を画像の点数分繰り返すのは、時間も手間もかかります。さらに画像内の情報（例：日付、コピー、写真、価格など）を別のものに差し替えたい場合は、それら全ての画像に変更を加えるため必要な工数が膨らみます。その「手間をかけ続ける価値があるか」は事前に検討したほうが良いと思います。
どうしてもトリミングを変えたい場合には、CMSの自動トリミング機能を用いる
もしどうしても場所によって画像のトリミングを変えたい場合は、コンテンツ管理システム（CMS）に自動トリミング機能を導入したほうが良いです（導入済みの場合もあります）。画像をアップロードした時点で複数サイズの画像が自動で生成されます。自動トリミングは便利なのですが、注意点もあります。
自動トリミングの注意点
画像は必ずしもWebサイト運営者が制作したものとは限りません。外部から提供された画像をWebサイトに掲載する場合もあります。その際「トリミングはNG」もしくは「トリミングのルールが厳格に定められている」こともあり、システムで自動的にトリミングされた画像は掲載できない可能性があります。
これらの問題を解決するために、Webサイト全体でサムネイル画像の縦横比を統一したほうが良い場合が多いと考えます。過去にメディアサイトを構築した際は、サイト運営者の方にこれらのメリット・デメリットを事前に説明させていただいたうえで、「16:9の画像で統一しましょう」と決まりました。
ECサイトは商品の形状によって、使用頻度の高い画像の縦横比を基準にする
ECサイトでは商品の形状によって、縦長や正方形の画像が適している場合もあると思います。そのときは最も使用頻度が高い画像の縦横比を基準とします。その基準の縦横比で全体的に統一できないかをデザインの観点として設計すると、見た目の印象の良さとシステムの運用性を両立しやすいと思います。
おさらい：縦横比に16:9を用いるメリットと理由
結論で画像縦横比は16:9が良いと書いた理由は、汎用的に扱いやすいと考えるためです。以下の例は16:9の比率が使われていることが多いと思うものです。
- PC用のディスプレイ解像度
- 動画のフォーマット
- ゲームのキャプチャ
- スライド資料
これらをトリミングせずに画像の縮小のみで使えるのがメリットです。
Twitterでシェアされた場合の画像（summary_large_image）は16:9ではないので元の画像からはトリミングされますが、16:9の比率で制作した画像にある程度近い状態で表示されるので、許容できる場合が多いと判断しました。
Facebookでシェアされた場合は複数サイズにトリミングされるため、なるべく重要な要素は画像の中央にレイアウトしておくと良いと思います。
2種類以上の縦横比の画像を使いたい場合に、見た目の印象と工数のバランスを取る方法
もしどうしても2種類以上の縦横比の画像を使いたい場合は、次の方法が工数のバランスを維持しやすいかもしれません。
- メイン画像は16:9の比率とする。
- サブ画像は正方形の比率とする。
- 画像はメインとサブの2種類に限定する。
- 正方形の画像は自動トリミングによって生成することを許容する。
最後に
Webサイトは、ユーザーにとっては公開してからが始まりです。Webサイト利用者への情報提供を継続するために、見た目の印象の良さと運用者の運用負荷を減らす設計のバランス、さらにその積み重ねが大切だと考えています。
関連記事
関連記事として、WordPressによるWebサイトで、運用負荷をできるだけ下げて効率的に運用する方法の記事を紹介します。
