【WordPress】アイキャッチ画像の作り方

WordPressの各記事のトップには、アイキャッチ画像と呼ばれる見出し画像が貼り付けられます。

またアイキャッチ画像は、リンクを張ったときにはサムネイルとして表示されます。

そのためアイキャッチ画像は、記事の内容を分かりやすく示したものであり、読者の気を引くものであるほど良いとされます。

今回は、アイキャッチ画像の作り方を紹介します。

画像編集ソフト

結論から言うと無料で使えるもので十分です。好きなものを選んでください。

現在はスマホアプリも含めて、非常に多くの画像編集ソフトがあります。アイキャッチ画像を作る上で複雑な画像処理は必要ありません。無料のものでOKです。

Adobe製品を購入すべきか

Photoshop（Ps）は最も有名な画像編集ソフトです。高機能かつ、その他のAdobe製品とも連携できます。プロフェッショナルの世界ではPsが標準です。

しかしサムネイルを作るためだけにPsを購入するのは無駄が多すぎます。写真撮影が趣味だったり、印刷会社とのやり取りで必要でない限り、わざわざPsを買う必要はないでしょう。

私の使っているソフト

Preview

MacのPreviewでは簡単な画像加工ができます。明るさの調整、切り抜き、図形と文字の挿入など、これで十分です。

AFFINITY Photo

最近人気ですね。月額課金制ではなく買い切りのアプリです。定価は6,000円くらいでよくセールしています。私は半額以下で購入しました。

学会や論文用の写真もこれで十分に加工できます。というよりもPsでないとできない画像加工はもはや捏造です。

明るさ調整、色域指定などごく基本的な画像加工ができれば、研究業務に支障はありません。

Fiji（ImageJ）

研究者の間では有名です。Psより高機能で無料です。

操作自体は簡単ですが、用語がわかりにくいように感じます（用途が多様すぎることが原因です）。機能が多すぎて慣れるまで大変です。

ImageJにはプラグインと呼ばれる追加機能をインストールすることができます。そのためImageJを育てていけば、最強の画像処理ソフトになるでしょう。

Fijiは、ImageJにいくつかのプラグインをはじめからインストールしてあるソフトで、中身はImageJです。

画像の種類と適切な編集ソフト

画像は大別してベクターとラスターに分けられます。それぞれデータ形式が異なるので、それにあわせた編集ソフトが必要です。

ラスター画像

画素（ピクセル）から構成される画像です。ピクセルがタイル状に並ぶことで画像を作り出します。

そのため拡大すればピクセル1つ1つが大きくなり、人間の目にはギザギザな画像に見えてきます。

Psはこのピクセル画像を扱うのが得意です。大抵の画像編集ソフトはラスター画像を加工する機能を持っています。

ベクター画像

ベクター画像はいわば数式で作られた画像です。「座標Aから座標Bを結ぶ線」などの指示から画像が構成されます。

そのためピクセルという概念は存在せず、いくら拡大しようが画像が荒れることはありません。その一方で複雑な形態、色彩を表現することには不向きです。

Adobe製品ではIllustratorで編集できます（Photoshopでもできますが機能が制限されています）。

SVGファイルについて

SVGというファイル形式はベクター画像を保存するための方式です。

そのためWebページでいくら拡大されてもキレイな画像のままですし、小さく潰れた画像になることもありません。

ChromeやFirefoxなどのブラウザがSVGにある指示にしたがって、画像を描画します。そのためマシンスペックによってはうまく表示されないこともあります。

またファイルサイズが非常に軽量であることも魅力です。ラスター画像は大きく解像度の高いもの、つまりピクセル数が多くなるほどファイルサイズも大きくなります。ベクター画像はピクセルの概念がないため、表示される大きさとファイルサイズは無関係です。

サムネイル向きの画像

データの形式について

サムネイルにはラスター画像でもベクター画像でもOKです。

私はベクター画像を編集して、PNG形式で書き出しています（PNGはラスター画像です）。

軽いラスター画像を編集し、必要に応じて画像サイズを変更して出力しています。出力された画像はサーバーのみに保存して、自分のパソコンには保存しません。

画像の見た目について

これは個人の好みです。別にどんな画像をアイキャッチにしても構いません。

私はぱっと見たときにわかりやすいものが良いので、そのように作っています。

シリーズものの記事の場合は、配色等は同じにしています（作るときも楽ですし）。

オススメの画像サイト

当然ですが著作権には注意してください。ネット上にあるものを自由に使って良いわけではありません。

unDraw

上記の画像はunDrawからダウンロードしています。モダンで素晴らしいクオリティです。

StockPhoto

StockPhotoは画像サイトです。フリー画像もあれば有料画像もあります。ざっと検索するのに良いでしょう。

Unsplash

シンプルで美しい写真がほしいならUnsplashをオススメします。

Freepik

質の高いベクター画像を検索するのはなかなか難しいかもしれません。Freepikでは比較的多くの高品質な画像を探すことができます。

Noun Project

「なんでこんなアイコンまであるの?」とびっくりします。Noun Projectは世界最大のアイコン提供サイトです。

私は有料会員になって自由にアイコンを使えるようにしています。マウスや実験器具のアイコンまであるので学会でも大活躍です。

Font Awesome

Webフォントで超有名なFont Awesomeです。ありとあらゆるアイコンが揃っています。

WebフォントですがSVG形式でダウンロードすることもできるので、これをイラストに活用することもできます。

画像を検索する

直接画像を探してもOKです。

検索は必ず英語でしましょう。[ computer vector ]で検索すれば、ベクター画像が引っかかります。

データ形式を検索ワードにすることで不要なものを避けられます。

画像を作成する

アイキャッチ画像から記事の内容がわかれば、そこまでこだわる必要はありません。

もしこのサイトがコンテンツを売り物にしているのであれば、サムネイルには気を配る必要はありますが、本サイトは学習内容を載せるものです。

画像作成に時間を取られるのは本末転倒です。

一枚絵に枠をつける

枠をつけるのは非常に簡単な方法です。右下に三角形をおいて、連載回数を書くのも良いでしょう。

一色背景にアイコンだけ

これもシンプルな方法ですね。WordPressの記事であれば、WordPressのロゴを置いてしまいましょう。

背景写真の余白を使う

写真にあるスペースを利用する方法です。

写真が良ければいい感じに見えます。

背景をぼかす

これもよくある感じですね。

さて4例ほどを上げました。慣れれば3分くらいで作れる程度のごく簡単なものです。

線を二重にしたり、文字をグラデーションにしたり、色相を変えたりと、方法はさまざまですが、記事を書くのが目的なので簡単な方法を紹介しました。

サムネイル作成に限らず、発表スライドにも応用できる内容も盛り込みましたので、画像作成の際には参考にしてください。