アイキャッチ画像のトリミング要件まとめ【ウェブディレクター虎の巻 #1】

ここのURLをクリップボードにコピー(copied!)

サムネイルやアイキャッチ画像（ここではアイキャッチ画像として統一して呼びます）の表示において、お客さまから次のような要望が寄せられることは多いはずです…

どれも求めようとすると要件が複雑になりそうな気がしますが、全部盛り盛りで対応すると、それはそれで運用コストが高くなったり、お客さま側でも混乱する事態になってしまいます。

そこで、ウェブディレクターとお客さま双方がシンプルにわかりやすく納得していただくべく、今回虎の巻として情報をまとめさせていただきました。

結論

この1〜3についてお客さまと制作側で取り決め・理解をし、要件策定時に双方認識合わせを行うことが重要です。

以降でそれぞれ解説します。

その1：アイキャッチ画像の「アスペクト比を決める」

アイキャッチ画像を作成するデザイナーさんも自由に決められたサイズの画像を作成することは難しいため、適切なアスペクト比ならびに解像度をお伝えする必要があります。

特にアイキャッチ画像で用いられる画像は、横長なものが一般的となるため、次のようなパターンで作成することで理解しやすくなります。

もちろんデザインによっては、もっと横長で2:1のようなアスペクト比もあり得るかと思いますが、アイキャッチ画像に記載する文字などの表示領域が狭まり、運用に支障が出るためあまり得策ではないかと思われます。

特にパターンCでは、OGP画像が利用できるため、OGP画像とアイキャッチ画像をそれぞれ2つずつ作成しなくても良いなどのメリットもあります。

その2：アイキャッチ画像は「オブジェクトフィットカバー」でいい感じに自動トリミングする

サイト運用において、運用コストは重要です。
アイキャッチ画像に設定する画像を都度デザイナーさんに依頼するわけにもいかず、できれば作業者自身で調達した画像をそのまま利用できるのがベストです。

そこで手元にある画像素材をそのままアップロードすることで「いい感じに」自動トリミングしてくれる、オブジェクトフィットカバー の要件の出番です。

サイトの制作要件に、アイキャッチ画像はオブジェクトフィットカバーを適応する、とすることで運用コストを低くすることが可能です。

オブジェクトフィットカバーとは？

アイキャッチ画像にオブジェクトフィットカバー（object-fit : cover）のCSSを適応すると、横長画像では「左右が自動で切り取り」され、縦長画像では「上下が自動で切り取り」されます。

詳しい解説は次のブログをご覧ください。

coverの説明（CSSのobject-fitで画像を自動でトリミング）

その3：切り取られてほしくない画像は「決められたアスペクト比」の画像を「専用で」用意する

オブジェクトフィットカバーを用いるといい感じに自動トリミングされますが、場合によってはトリミングしてほしくない画像も出てきます。
例えばポスター画像などの文字が重要なコンテンツだったり、キャラクターが主役の画像などです。

その場合、2で解説した自動トリミングである「オブジェクトフィットカバーが適応されないようにしたい」ということになりますが、オブジェクトフィットカバーのON／OFFを要件に追加することは実装コストとしても高くなってしまいます。

そこで登場するのが、「決められたアスペクト比の画像を用意する」です。
アスペクト比を要件で決定し、その比率で画像を用意することで、オブジェクトフィットカバーを用いても実質トリミングされない表示が実現できます。

決められたアスペクト比とは異なる元画像をそのまま入れた場合

決められたアスペクト比で作った画像を入れた場合

まとめ

この3箇条でアイキャッチ画像について複雑な議論はせず、サイト内におけるもっと重要なコンテンツやディスカッションに時間を割きましょう！