Canvaでサイト用画像を作る｜アイキャッチからOGPまで

画像づくりは、絵心よりも段取りで決まります。ここでは、寸法を決めるところから書き出すところまでを、あとで作り直さずに済む順番に並べます。道具はCanvaを前提にしますが、考え方は他のツールでもほぼ同じです。

始める前に用意するもの

作り始めてから探し物をすると、そのたびに手が止まります。最初に3つだけそろえます。

サイトの色と書体

サイトで使っている色と書体を、先に書き出しておきます。見出しの色、本文の色、ボタンの色あたりが分かれば十分です。画像の中の色がサイトと合っていないと、記事に貼ったときにその画像だけ浮いて見えます。書体も1〜2種類に決めておくと、どの画像も同じ雰囲気にそろいます。

使用許可を確認した素材

写真やイラストは、自分で用意したものか、使える範囲を確認できているものだけを使います。ツールに入っている素材でも、無料で使える範囲と有料の範囲が分かれていることがあります。作り終えてから差し替えるのは手間なので、置く前に表示を確かめておきます。

必要な画像の一覧

作る画像を先に書き出します。記事の先頭に置くアイキャッチ、リンクを共有したときに出る画像、プロフィール写真あたりが定番です。必要な種類が見えると寸法もまとめて決められ、一度の作業で作りきれます。

新しいデザインを作る手順

ここからが実際の作業です。4つの段階に分けると、どこまで進んだかを見失いません。

STEP1 目的に合う寸法を決める

最初に、その画像をどこに置くかを決め、それに合う寸法で新規作成します。記事の先頭に置くものは横長、一覧に並ぶものは小さく縮み、共有用は端が切り取られます。このように置き場所で必要な形が決まります。寸法をあとから変えると配置が崩れるため、ここだけは先に決めます。

STEP2 背景と画像を配置する

背景の色か写真を先に敷き、その上に主役の要素を置きます。写真の上に文字を載せるときは、写真を少し暗くするか、無地の帯を敷くと読みやすくなります。要素は端に寄せすぎず、少し内側に余白を残しておくと落ち着きます。

STEP3 文字と余白を整える

文字を置いたら、大きさと位置をそろえます。大きい文字を1つ、補足を1つ程度に絞ると、縮んでも読めます。左端をそろえ、上下の余白を均等にするだけで、素人っぽさはかなり消えます。

STEP4 名前を付けて保存する

作り終えたら、あとで探せる名前を付けます。用途が分かる名前にしておくと、修正のときに迷いません。作業内容が自動で保存される仕組みは一般的ですが、書き出したファイルは自分が分かる場所に整理して置きます。

記事のアイキャッチを作る

アイキャッチは、一覧の中で小さく表示されることの多い画像です。小さくなる前提で作ります。

タイトルを短くする

画像に載せる文字は、記事タイトルをそのまま入れず、短く言い切った形にします。10文字から15文字ほどに縮めると、大きく置けて読みやすくなります。詳しい説明は本文の仕事なので、画像は看板に徹します。

主役の写真を一つに絞る

1枚の中に写真もイラストも図形も詰め込むと、何の記事か伝わりません。主役を1つ決め、残りは背景として控えめにします。要素が少ないほど、縮小しても意味が残ります。

一覧表示で読める大きさを確認する

作り終えたら、縮小して見ます。画面上で4分の1ほどに縮めても文字が読めるかが目安です。読めなければ文字を減らすか、大きくします。パソコンの編集画面では大きく見えるので、この確認は毎回入れます。

SNS共有用画像を同じルールで作る

リンクを共有したときに表示される画像はOGP画像と呼ばれ、アイキャッチとは役割が違います。切り取られる前提で作ります。

安全領域へ文字を置く

共有先によって、上下や左右が切り取られることがあります。文字やロゴは中央寄りに置き、端から少し内側までを「切られても残る範囲」と考えます。端いっぱいに置いた文字は、表示のされ方によって消えます。

サイト名と記事情報を分ける

共有用の画像には、記事の内容とサイト名の両方が入ることが多くなります。この2つを同じ大きさで並べると、どちらも読みにくくなります。記事の内容を大きく、サイト名は小さく隅に置くと、役割が分かれて伝わります。

複製して更新しやすくする

図柄ができたら、それを原本として残します。次の記事では、複製して文字と写真だけを入れ替えます。毎回ゼロから作らないことが、続けるうえでいちばん効きます。

書き出し形式と画質を選ぶ

同じ絵でも、書き出す形式で見え方とファイルの重さが変わります。用途で選び分けます。

PNG・JPEG・WebPの使い分け

写真が主役ならJPEG、文字や図形をくっきり出したいならPNGが基本です。WebPは写真と図のどちらにも使え、同じ見た目でもファイルを軽くできる形式です。対応している環境では表示が速くなります。迷ったら、写真はJPEG、図はPNGと覚えておけば大きく外しません。

透明背景が必要な場合

ロゴや切り抜きを、背景の色を問わず重ねたいときは、背景が透明な状態で書き出す必要があります。透明を保てるのはPNGなど一部の形式で、JPEGでは白などで塗りつぶされます。透明が要るかどうかは、置き場所を思い浮かべて決めます。

容量を確認して圧縮する

書き出したファイルの大きさは必ず確認します。1枚が重いとページの表示が遅くなり、読者が離れる原因になります。表示に必要な幅より大きすぎる画像は縮め、それでも重ければ圧縮してから使います。

テンプレートを運用しやすくする

画像づくりが続くほど、探す時間と迷う時間が増えます。最初に決めておくと、あとが楽になります。

ファイル名とフォルダ

日付・記事の識別名・用途をつなげるなど、一覧に並べたときに意味が分かる名前にします。フォルダは用途ごとに分け、編集中の作業ファイルと書き出した画像を同じ場所に混ぜません。半年後の自分が探せるかを基準にします。

複製元を固定する

アイキャッチ用、共有用というように、用途ごとに「これを複製する」という原本を1つずつ決めます。原本には直接手を入れず、必ず複製してから編集します。原本が崩れると、そこから作った画像すべてがそろわなくなります。

色・書体・余白を記録する

使った色の指定、書体、余白の幅をメモに残します。数か月後に画像を追加するとき、この記録がないと同じ見た目を再現できません。文章で残すだけでも、作り直しの時間はかなり減ります。

うまく作れない時の確認

手が止まるときは、たいてい原因が決まっています。よくある3つを挙げます。

文字が読みにくいときは、文字を大きくする前に背景を単純にします。情報量の多い写真の上に載せた文字は、どれだけ大きくしても読みづらいままです。背景を暗くするか、無地の帯を敷いてから文字を置きます。

素材が使えない、書き出せないというときは、有料の要素が混ざっていないかを確認します。無料で使えるものと有料のものは画面上で見分けられることが多く、1つ混ざっているだけでも全体に影響します。

作ったのに野暮ったく見えるときは、要素を減らします。飾りの図形、複数の書体、多すぎる色のどれかが原因になっていることがほとんどです。1つずつ外して見比べると、犯人が見えてきます。

まとめ

サイト用の画像は、寸法を先に決め、写真と文字を同じルールで並べ、用途に合う形式で書き出すという順番で作れました。原本を1つ決めて複製していけば、記事が増えても見た目はそろいます。整え方の考え方そのものは、デザインの基本の記事で確認できます。