魅力的なアイキャッチの作り方【デザインの重要な3つのコツも紹介】

アイキャッチ画像の作成方法について、基礎的な知識含めデザインのコツを紹介しています。アイキャッチ作成だけでなく、色々なデザインレイアウトにも活かせる内容になっています。

kubo

2022.05.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

記事の顔にもなるアイキャッチ画像。一番重要なのはもちろん記事の内容ではありますが、アイキャッチ画像も読みたいと思わせる重要なポイントです。

アイキャッチ画像が魅力的だと、読み手の目を惹き、見にきてくれる人も増えることでしょう。

しかし、なかなかしっくりくるアイキャッチ画像が作れず、作成に意外と時間がかかってしまったなんてこともあるかと思います。クラスメソッド社内でも、アイキャッチ画像を作る時のポイントが知りたい！という声がありましたので、アイキャッチ画像の作成方法についてまとめます！

今回は初心者デザイナーに向けて、アイキャッチ画像を作成する上で最低限意識すべきことにフォーカスします。上級テクニックではありませんので、基本の部分を知りたいという方の参考になれば幸いに思います。

アイキャッチ画像は目を引くために欠かせない！

アイキャッチは、サイト記事やYouTubeなど何かしらのWebページの見出しとして表示されている画像のことです！

ちなみにサムネイルと何が違うの？という疑問の簡単な回答としては、アイキャッチ画像をより小さく表示した画像を指します。記事を開いた時にトップに大きく表示れている画像がアイキャッチ。記事の一覧など小さく表示されているアイキャッチ画像をサムネイルと呼びます。ただ、アイキャッチは和製英語なので、この辺は少し曖昧です。総称してサムネイルと呼ぶ場合もあるので、もし依頼を受けて作成する際には認識合わせをしておくと安心かと思います。

サムネイルとして小さく表示された場合にも見やすいアイキャッチ画像を作ることが理想です。そして、OGP画像として表示されることも想定すると、なお良いです。

OGPについて説明します。

「OGP」とはWebページをSNSにシェアするときに使われる仕組み

OGPとは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略です。

TwitterやFacebookなどのSNSでWebページがシェアされた際に、サムネイル画像やタイトル、説明文などをタイムライン上で意図した通りに正しく表示させる仕組みです。Webページのアイキャッチ画像はSNSでシェアされると、タイムラインに小さく表示されますよね。あれはOGP画像です。OGP画像として縮小される際に、サイズや描画領域が適切でないと重要な情報が見切れてしまったりします。正しく設定された画像を使用することでSNSを見ているユーザーに、適切に魅力が伝わります。

このOGPの仕組みも踏まえた上で、どの形でシェアされても問題のないアイキャッチを作成するという大切なポイントを覚えておいてください。

作り始める前に知っておくべき大切な3点のポイント

まず、レイアウトを考える前に必要なポイントが3つあります。

セーフゾーン内に大切な情報を入れる
公式ロゴ、画像などの扱いには注意する
素材は美しいものを使う

それぞれご紹介します。

①セーフゾーン内に大切な情報を入れる

ポイント1つ目は、セーフゾーン内に大切な情報を入れることです。先ほどOGP画像となった場合も情報が見切れることがないアイキャッチ画像を作成しましょうと書きました。セーフゾーンとは、SNSでシェアされる際に画像サイズがカットされる場合にも見切れることのないゾーンです。

具体的なサイズは、汎用性が高く綺麗に表示されるので基本的に「横1200px × 縦630px」で作成します。

主要なSNSで推奨されているOGP画像サイズは以下です。

Twitter / Facebookの推奨画像サイズ：横1200px × 縦630px
LINE：正方形で表示される

「横1200px × 縦630px」から正方形でカットされた場合にも情報が消えてしまわないよう、可能な限りセーフライン内に情報を入れます。可能な限りで構いません。

横600px × 縦600pxをセーフゾーンとして作成すると、OGP画像となった場合も大切な情報が見切れることがありません。

補足として、横1200px × 縦630pxのサイズは汎用性が高いというだけなので、表示させる媒体に合わせて適切なサイズを選ぶことが重要です。また、セーフラインに入れることに縛られすぎるのもデザインの幅が狭くなってしまう要因になりますので、状況に応じて使い分けるのが良いでしょう。この知識があるのとないのでは違うと思いますので、ぜひ参考にしてみてください。

②公式ロゴ、画像などの扱いには注意する

ポイント2つ目は、公式のロゴや画像を使用する際は必ずガイドラインに目を通すことです。

公式のロゴや画像を扱う際は、以下の2点に留意し、著作権を侵害しないように注意しましょう。

ロゴは基本的に公式のものしか使用してはいけない。また、ガイドラインなどがあれば必ず目を通す。
画像素材のライセンスなどを必ず把握し、権利範囲内での使用を行う。

また、公式のロゴは最新のものを使います。公式だからと確認せず使用することの無いよう、常に最新の情報をチェックします。

ロゴなどの扱いについて、もう1点重要なポイントをお伝えします。それは「ロゴの形によっては真ん中に配置しても真ん中に見えないことがある」という点です。目の錯覚ですね。

目の錯覚にもいろいろありますが、今回は「三角形分割錯覚」をご紹介します。下の画像を見てください。

三角の中に赤い点があります。皆さんの目には、中心よりも少し上に赤い点があるように見えるのではないでしょうか？しかし赤い点は、底辺と頂点を結んだ三角形の高さの中心にあります。

私たちの人間の目は、無意識に物の重心を探す習性があるようです。物を実際に触ったり持ち上げたりする際に、その物の重心を把握することが大切だからですね。なので、高さの数値的な中心ではなく、重心の中心をこの三角形の中心だと感じるようです。

こちらが、三角形の重心の中心に赤い点を置いたものです。真ん中に見えますね。

このように、人間の目には多くの錯覚がありますので、ロゴなどの配置は数値上の中心に捉われずに自分の目で見て調整するようにしましょう。

③素材は美しいものを使う

素材を使用する際、必ず美しいものを使用するようにしましょう。ジャギった画像、汚い画像などの使用はNGです。（シャギった画像とは、周りがギザギザと劣化してしまっている画像です。）

なぜ画像がギザギザしてしまうのでしょうか？これは、PNGやJPEGなどの画像を拡大すると起こります。これらはビットマップ形式のため拡大するとギザギザに見えてしまったり、繰り返し編集することで画質が劣化してしまう性質があるのです。

これに対し、SVGはどんなサイズでも美しく表示することができます。SVGはベクター形式のため拡大・縮小を伴う編集を行っても画像の劣化はありません。

画像を数値データをもとに再現する方式で作られているため、デバイスの解像度や画面サイズによって画質が変わってしまうということが起こらないのです。また、多くの場合はファイルサイズも小さくなるため、Webページのレスポンス向上も期待できます。

と、ここまでSVGのメリットを多く挙げましたが、必ずしもSVGがベストという訳ではありません。ロゴやアイコン、平面的なイラストはSVGでの管理が美しいかつ扱いやすいですが、写真などの複雑な色や形を表現するにはラスタ形式の方が優れています。どんな素材を使うのか、状況に応じて使い分けましょう！

アイキャッチ作成におけるデザインの3つのコツ

見やすいレイアウトには、きちんと根拠があります。画面上に配置されているすべてのものに理由がなくてはならないのです。

イラストを一つ置くにしても、なぜそれを選ぶのか・なぜその大きさなのか・なぜそこに置くのかをデザイナーは常に考えています。その根拠となるものは知識です。なんとなくレイアウトするのではなく、知識に基づいて配置するようにしましょう。これを聞くととても難しいことのように聞こえてしまうかもしれませんが、そんなことはありません！最初は3つのコツを意識するだけでOKです。

知っていると、デザインが良くなるコツを3つご紹介いたします。

1. デザインの原則を踏まえてレイアウトする

デザインの原則については、「デザインの現場で絶対に必要になる基礎知識７選」の記事にまとめていますのでこちらをご一読ください。今回のアイキャッチ作成では、この記事の中の【デザインの4大原則】の部分をピックアップします。

画面上のグラフィックをなんとなくで配置するのではなく、ルールを守りましょうということです。

上記の記事にも書いてある内容ですが、こちらでも再度おさらいしたいと思います。【デザインの4大原則】を簡単にご説明すると以下です。

①近接→関連し合う情報は近づける

近接とは、「関係するデザイン要素を近づけてグループ化すること」です。人間は近くにあるものを一つのグループとして認識する習性があります。

こちらは近接の一例です。色とその名前が関連し合う情報です。これらを近づけることで、同じ情報を指していることが伝わります。近接で大切なのは、関連する情報を近づけるだけでなく、関連しない情報との間に空白を取ることです。

②整列→デザイン上のグラフィックやテキストの色・大きさ・フォント・位置などを揃える

整列とは、「デザイン上の様々な要素を視覚的に関連させること」です。

ただ同じルールで配置しようというだけではありません。大きさ・色・フォントなども整え、一貫性を持たせましょうということです。

こちらは整列の一例です。先ほどの近接と組み合わせ、同じ情報同士は近づけて、同じスタイルで整列させています。

整列のコツは見えない線で繋げることです。この名刺の例では、名前とアドレスなどの情報の間に空白を取っていますが、配置位置は左端の見えない線で繋がっているので整って見えます。

③強弱→異なる要素同士が類似することの無いよう、はっきりと差をつける

強弱は、「異なる要素同士が類似することの無いよう、はっきりと差をつけること」です。コントラストとも言います。

こちらは強弱の一例です。異なる情報を思いきってスタイルをはっきりと異ならせることで、伝わりやすいかつインパクトのあるレイアウトになります。

④反復→デザインのスタイルやルールも繰り返す

反復は、「デザイン上のある特徴を繰り返すことで統一感を生み出すこと」です。

一つの画面内で複数のルールを採用していると、画面が多くの要素で溢れ分かりにくくなってしまいます。最低限のルールの中で、スタイルを統一することで全体に一貫性のあるデザインになります。Webデザインでは、デザイン上のレイアウトのスタイルやルールを「トーン&マナー」といいます。

2. 色えらびに配慮する

色は無限の組み合わせがありますよね。何色を採用するか迷うことも多いかと思います。

基本的にテキストを入れる場合には、見やすさ・読みやすさが最も重要です。多くは、「背景が薄い色→テキストは濃い色」「背景が濃い色→テキストは薄い色」となります。背景はいわば家の壁紙のような役割なので、はっきりとした強い色にしてしまうと目が痛くなってしまいます。背景に色を使う場合には、少し落ち着いたカラーを採用するのがおすすめです。

色を使用する際の考え方は多く存在しますが、「デザインの現場で絶対に必要になる基礎知識７選」でも紹介した【トーン】について見ていただけるとより色について理解が深まるかと思います。

技術紹介ブログを書く場合には、公式のロゴとそのサービス名を載せる場合もあるかと思います。サイズや扱い方、背景色についての指定がある場合もありますのでまず規約を確認して見ましょう。特に記載ない場合は、公式のロゴなどは基本的に白い背景に置くのが大きな問題もなく見やすくていいかと思います。公式のサイトを確認して、同じ背景色を採用するのもありです。ただし何度も言いますが公式のロゴを使用する際には、必ず規約を確認しましょうね！