ブログのアイキャッチ画像を美しく作るコツ「アイソレーション」を理解する

ブログのアイキャッチ画像

Developers.IOでは、各記事にアイキャッチ画像を設定するルールがあります。アイキャッチ画像は1200x630ピクセルサイズで作成する規定になっており、ブログ記事内で表示されるほか、SlackやTwitterなどでシェアされた際に展開されるOGPにも利用されます。

ロゴマーク入りのアイキャッチ画像

Developers.IOではさまざまなサービスを試してみた記事が投稿されることが多いので、サービスのロゴマークを利用したアイキャッチ画像が日々作成されています。もちろん、サービスでロゴマーク利用が禁止されていない限りです。よりサービスの魅力を伝える上でも、サービスのロゴマークを用いたアイキャッチ画像は大切です。

ロゴマーク入りのアイキャッチ画像はかんたんに作ることができます。ロゴマークが透過画像で用意できた場合、1200x630ピクセルの背景画像に重ねるだけで完成します。

しかしながら、この「ロゴマークを配置する」作業で、美しいアイキャッチ画像とそうではないアイキャッチ画像の差が生まれます。そのポイントが アイソレーション です。

アイソレーションとは

アイソレーションとは、ロゴマークの上下左右に設ける 余白 のことを言います。この余白が十分に設けられているか、そうではないかによってロゴの見栄えが大きく変わってきます。

アイソレーションは一般的に企業ロゴをデザインする際に用いられる用語です（クリアスペースと書かれていることもあります）。アイソレーションについて解説されているブログをいくつか引用します。

ロゴマークの識別性、独立性を高めるため、周辺に一定の余白（アイソレーション）を設けます。

ロゴマークは余白も含めてデザインされています。しかし、協賛企業として羅列される場合やWebサイトのヘッダー・フッターに使われる場合などは、スペースの関係で上下左右をギリギリに詰めて配置されかねません。それを防ぐために、識別性を守れる余白をしっかりと定めておきましょう。

デザイナーがロゴマークを作る時・使う時に知っておくべき「ロゴマニュアル」より引用

いくつかルールがあり、これは設定する企業によってマチマチなのですが、デザインに対するルールも設定されます。 それが、「余白」。 上下左右に十分な余白を取って使ってくださいと必ず記載があるものです。

実はこの余白がロゴのアイソレーションゾーンと呼ばれるものなのです。

ロゴデザインというのは、適切な余白を取って使用しないと全く見え方が変わってしまいます。

ロゴのアイソレーションとは？アイソレーションゾーンの重要性より引用

ロゴマークは、デザインガイドラインにアイソレーションが記載されているものがほとんどです。例えば、下記はFacebookのロゴマークのガイドライン内の解説です。

良い例と悪い例

クラスメソッドの企業ロゴを使った、2種類のアイキャッチ画像を用意しました。どちらが見栄えが良いか、一目瞭然です。

アイソレーション領域が小さいと、使っているロゴが美しく見えなくなってしまいます。アイキャッチ画像の見栄えだけの問題に止まらず、ブランドイメージを毀損することにつながりかねません。

アイキャッチ画像におけるアイソレーション

Developers.IOでは、アイソレーションについてのガイドラインは暗黙的でした。この記事をもって、推奨のアイソレーション領域を定義してみたいと思います。

• 上下左右に 140ピクセル以上 の余白を設ける。
• 長辺合わせ でロゴを中央に配置する。

ベストな見え方はロゴマークのデザインに依るところがありますが、このルールに従って作ることでよりベターな見栄えにできるかと思います。

まとめ

アイキャッチ画像を作る際、アイソレーションを意識するとしないとでは見栄えがだいぶ変わってきます。意識したことのない方は、作成する際にぜひ意識してみてください。作っているうちに、感覚が身についてくると思います。