Webメディアのアイキャッチサイズ
アイキャッチ（縮小してサムネイル）画像を制作する際、画像の解像度（縦横の大きさ）の設定は必須です。 どの大きさで作るか決まっていないと、作業もしにくいですよね、
ですので、最初にアイキャッチ画像のサイズについて見ていきましょう。 ネット上でよく紹介されている「〇〇pxで作ると良い」という話の理由も分かります。
OGP画像について知る
OGP（Open Graph Protocol）とは、SNSでwebページのURLがシェアされた際、そのWebページのタイトルや画像などを表示する仕組みです。
SNSでは紹介したいページのURLを貼り付けると、自動で記事カードのようなものが作られますよね。 例えば、Facebookなら以下のようになります。
この自動的に表示される、記事のタイトルや画像などがOGPです。 何を表示して欲しいかは、ページ所有者の方で以下のようなmetaタグを使って設定しています。
【例】
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:image" content="表示させたい画像" />
...
</head>
記事ページの場合、このog:image（SNSで表示させたい画像/OGP画像と呼びます）にはアイキャッチを指定することが多いです。
いくつも画像を作るのは大変ですし、全く画像が違うとユーザーにも分かりにくいですしね。
アイキャッチ画像がリサイズ・トリミングされ、サムネイルとOGP画像になるわけです。
オウンドメディア（自社メディアやブログ）で使用するアイキャッチやサムネイルは自由。 極端な話、どんな大きさ、縦横比の画像であっても問題ありません。
OGP画像としても使いたい場合に、サイズ設定が重要になってきます。
TwitterやFacebookなどSNSごとに、表示画像の規定があるため、それを意識していないと重要な部分が切れてしまうのです。
アイキャッチのサイズは●●にすべし！というような話は、OGP画像としても問題のないサイズを言っているのです。
画像サイズとアスペクト比
お仕事でアイキャッチやサムネイル制作をする場合、基本的に画像サイズはクライアントの指示に従えばOKです。クライアントにある程度知識があれば、制作する画像のサイズは依頼時に指定してくれます。
問題はクライアントがWebに詳しくない場合。 「サイズはお任せします」なんて言われた際は、SNSシェア時に使われる画像について説明し、以下のサイズをおすすめしましょう。
◆アスペクト比は『1.91：1』がおすすめ
アイキャッチ画像の大きさは、アスペクト比（長辺と短辺の比率）から考えます。 これはシェアされる機会の多いFacebookとTwitter（Summary Card with Large Image）で、OGP画像はアスペクト比『1.91：1』で表示されるため。アスペクト比が異なる画像を設定していると、画像の中心を基点にトリミングされます。
最適なアスペクト比で作成しておけば、そのまま縮小されるだけ。 ですので、アイキャッチをOGP画像としても使う場合は、トリミングされないアスペクト比『1.91：1』で作成しておくと楽なのです。
以下はアスペクト比『1.91：1』の画像サイズ例です。
| 長辺 | 短辺 |
|---|---|
| 800 | 418 |
| 960 | 502 |
| 1200 | 628（※630pxで制作する場合もあり） |
| 1280 | 670 |
| 1440 | 754 |
| 1920 | 1005 |
※小数点以下切り捨て
Facebookでは高解像度デバイス向けに、推奨は1200px以上。 このため、ハイライトを入れた幅1200pxもしくは1280pxで画像を作ることが多いです。
Webページで表示させたいアイキャッチのサイズがもっと大きい場合は、そちらに合わせて作成して構いません。 ただし、あまりにもファイルサイズが大きくなる（重くなる）場合は別途リサイズした方が良いでしょう。
アイキャッチ画像制作で意識したい５つのポイント
アイキャッチ画像をサムネイル、OGP画像としても使う時に注意したいのは、画像サイズ（アスペクト比）だけではありません。 初心者の方が制作時に意識したい、5つのポイントについて解説します。
1.コンテンツをイメージできる画像にする
当たり前……と言えば当たり前ですが、内容と乖離しない画像を使いましょう。 アイキャッチも、サムネイルやOGP画像にしても、目的は「ユーザーの目をひきつつ、内容を簡潔に伝える」ことです。
例えば、商品紹介の記事や料理レシピなどでは、そのものズバリの写真を使うことが多いです。 写真が良ければ、Photoshopなどで少し補正するだけで、そのままアイキャッチやOGP画像として使えるでしょう。
画像だけよりもわかりやすくしたい、より目を引くようにしたい……という場合は文字を入れたり、写真を組み合わせたりしてアイキャッチ画像を作成します。イメージ画像やイラストなど“イメージビジュアル”を使う場合、何の話題かを文字で示すことでコンテンツをイメージさせる必要性は高くなります。
例えば、以下のferretさんのアイキャッチ。 目をひきますし、内容をイメージしやすい（わかりやすい）ですよね。 ですが、同じ画像でも文字部分がなかったら……何についての記事かわからなくなるものが大半です。
このように、取り扱う内容・素材画像によってアイキャッチの構成は変わってきます。 共通しているのは、何についてのWebページ・Webコンテンツかを想像させる、詳しく見たいと思わせる画像ということです。「サムネ詐欺」のようなことにならず、かつ魅力的にコンテンツを見せるよう工夫すること＝アイキャッチ画像制作と言えますね。
2.細々しすぎない
スマホ幅でアクセスされた際、SNSにシェアされタイムラインで表示される際、作成したアイキャッチ画像は縮小されます。スマホ幅を大まかに幅400pxとしても、1200px × 630pxで作った画像なら3分の1。実際は余白などもありますから、もっと縮小されるわけです。
以下の画像は幅1200pxで作成した画像を、幅300pxに縮小したものです。 それぞれ書いてあるフォントサイズ、アイコンサイズが画像制作時の設定です。
▼クリックで画像拡大
左側の小さいものは、潰れてしまってなにか分かりませんね。 あまりに小さい文字やイラストを細々と配置して画像を作ると、縮小された時に「ごちゃごちゃしていて、よくわからない画像」になってしまう危険があります。
ちょっとしたあしらいなど、縮小時に潰れても問題ないものは小さくてもOK。 ユーザーの目を引くために大事なパーツは、幅300pxまで縮小しても視認できるサイズで作りましょう。
3.文字と画像を見やすく
アイキャッチ画像は、Webページ上でも、シェアされたときの表示でも、ページタイトルとセットで使われることが多い存在。 『1.コンテンツをイメージできる画像にする』の参考サイトのように、画像だけも十分なこともあります。 必ずしも、タイトルなどを文字として入れる必要はありません。
ユーザーの目を引く、分かりやすさをアップさせるために、文字をアイキャッチ画像内に配置する場合。 キーワードやキャッチコピーなど重要なテキストは、ユーザーにとって読みやすい・瞬時に理解できるものである必要があります。読みにくい（可読性が低い）テキストを入れても、ユーザーに伝えるという目的は果たせません。
文字を際立たせるために、画像の大半を背景色で潰すのも良くありません。 ほとんど画像が見えないくらいなら、いっそ画像がない方がユーザーの視線を分散させず良い、ということもあります。 写真と文字がお互いを殺してしまわないように注意しましょう。
画像ほぼ全体に背景図形を入れるのなら、画像自体を暗くしたほうがスッキリします。 画像自体のトーンを変えたくないときは、文字に縁取りを加える方法もあります。
一部分だけ背景色を敷く方法もありますね。 縁取りなどと組み合わせると、アイキャッチっぽい仕上がりになります。
4.メリハリを意識する
画像の中で強調したい部分は、コントラストやジャンプ率をつかってメリハリをつけると良いでしょう。 テキストを入れる場合、色・サイズ・装飾などを変えてワードに優先順位を付けると、分かりやすさは段違いに上がります。
デザインの基礎知識については、下記の動画講座で詳しく解説しています。
無料 動画講座
例えば、上でも使ったアンケート記事の画像。 下図の様にテキストを入れれば、文字も写真も見えます。ですが、全く目は引かないですね。
上の“組み合わせ”や“一部分だけ背景色を敷く”の画像は、文言ごとに色やフォントサイズに差があります。 フォントサイズや色、角度を更に変えると、より「モチベーション下がる…」や「ウンザリ」の文字に視線を誘導できます。
テキストを際立たせる方法に関しては、You Tubeのサムネイルが強いです。 どのように目を引く工夫をするのか、という点ではYouTubeサムネイルはとても参考になります。
多くの人が投稿する中で、自分の動画を見てもらえるように工夫が凝らされていることが分かります。 とはいえ、自社メディア・ブログで使うアイキャッチだと“やりすぎ”感があるので、そのあたりは調整が必要ですね。
5.重要なアイテム・キーワードは端に置かない
『1.91：1』ではないアスペクト比を採用しているwebサービスもあります。 代表的なメディアと言えるのが、LINEとはてなブックマーク。
どちらもOGP画像の表示場所は、アスペクト比『1.78 : 1』のスペースが確保されています。
そのほか、WordPressのプラグインなどで「URLからOGP画像やタイトルを取得して、リンクカードを生成する」ものもあります。こうしたプラグインの使用、サイトの設定によって1：1や4：3に強制トリミングされる場合もあるでしょう。 このため、アイキャッチ画像で重要なコンテンツは中央付近に配置するのが確実です。
以下は、ラッコツールズさんが提供されているOGP確認ツールです。 アイキャッチ画像をアップロードすると、トリミングされた際にどの様に見えるか確認できます。（※はてブ、LINEは旧サイズ）
Twitterの欄を見ると、『1：1』と『1.91：1』の場合の差がよくわかります。
1：1でも完全に見える状態まで考えると、デザインの難易度は上がります。 ひたすら中央に寄せると、アイキャッチとしてや、主要SNS上では微妙な仕上がりになってしまうこともあります。
特に指示がない場合、上図の準セーフエリア内（1.78 : 1にトリミングした表示）で問題なく見られることを基準に、デザインを考えると良いでしょう。デザイン上の飾りニュアンスが強いアイテム・文言は、ある程度は割り切ることも必要です。
まとめ
Webメディアやブログで使うアイキャッチ制作のポイント
- アイキャッチ画像は「どんなコンテンツか」がわかるようにする
- OGP画像と兼用する場合は、アスペクト比1.91 : 1で作ると無難
- 文字の可読性、情報の優先順位を意識して制作する
- 他サイトからリンクされた際、両端がトリミングされることも考慮する
- 幅400～300pxに縮小しても、重要なアイテムや文字は視認できるようにする
次のレッスンからは、実際にWebメディア風のアイッキャッチを作成します。