WordPress アイキャッチ画像上手に作りたい

WordPressの道

WordPressの道

スクリーンショット 2023-09-30 18.49.39.png

投稿画面の顔であるアイキャッチ画像、上手に作って綺麗に表示させたい。WordPress開設時には誰もが思う事ですね。長くサイト運営している先駆者たちは知識と技能を持っていますが、初心者や中級者には難解なところがあります。まずWordPressはWEBデザイナーの知識が必要になります。

WEBデザイナー…？話が難しくなって来た。いやアイキャッチ画像の簡単に真似出来る説明です。デザイナーの為のセミナーではありませんから。

制作にはAdobe Photoshopで説明してあります。画像処理ソフトであれば同じ機能が用意されている筈ですので、そちらは割愛させて頂きました。

1 アイキャッチ画像を作る
2 アイキャッチ画像のマスクを作る
3 アイキャッチ画像とマスクをレイヤー別に呼び込みます。
4 サムネイル画像の設定サイズを見直してみよう
5 バナー広告を参考にして真似よう
6 デザイナー御用達のAdobe Creative Cloud
- 6.1 サイト装飾にあると重宝「Adobe CC」
7 終わりに

アイキャッチ画像を作る

普段通りアイキャッチ画像にしたい画像をリサイズします。
当サイトの画像サイズはこうです。
幅768px、縦512px、解像度96pxです。

サイズが大きかったり解像度が大きかったりすると、容量が大きくなるのはご承知だと思いますが、反対に小さかったり、72pxより解像度が低かったりすると見た目が悪くなります。

Webが72dpiと言う訳はディスプレイの解像度に依存すると言うことです。72dpiでも96dpiでも変化はありません。大きくしても鮮明になる訳では無いのですね。72dpiでも大丈夫です。ただ気分的に96pxにしているだけです。

アイキャッチ画像のマスクを作る

アイキャッチ画像の場合はホバーエフェクトで、画像が見切れてしまうことがありテキストなどの配置に気を使います。見切り範囲が分かると配置が楽ですよね。

新規にレイヤーの作成をします。ピンクか水色の淡い色が良いでしょう。768px*512pxのレイヤーを作ります。
次に長方形ツールを使い塗りは赤・紺どちらでもOKです。576px*417pxの枠を作成します。※長方形ツールを選択、画面ウィンド上でダブルクイックするとサイズ指定できます。
中央に配置します。中央に配置できたら一度画像を統合します。統合したレイヤーをレイヤーパレットに複製します。

スクリーンショット 2023-08-14 5.40.08.png

上段に複製レイヤーが出来たら、下段の背景のレイヤーは削除してします。何故背景レイヤーを削除するかと言うとこの後切り抜きで透明に出来ないからです。

レイヤー複製.png

長方形ツールで作った赤・紺のアイテムを自動選択ツールで選択削除してしまいます。透明な窓が出来ました。

透明.png

レイヤーパレットから不透明度スライダーを使って25％まで透明度を下げます。
保存はPNGです。768px*512px、解像度96dpiのマスクレイヤーが出来ました。

アイキャッチ画像とマスクをレイヤー別に呼び込みます。

まずアイキャッチ画像を呼び込みます。次にマスクレイヤーを呼び込みます。マスクレイヤーがアクティブ上でしたらアイキャッチ画像だけです。
別々のウィンドになった筈です。マスクレイヤーのレイヤーパレットに「レイヤーを複製」があります。

レイヤー移動.png

ドキュメントでメイン画像に複製レイヤーを呼び込みます。マスクのレイヤーは最後に削除するので画像の統合はしないで下さい。このまま作業を続けます。

「レイヤーを複製」したマスクレイヤーはコピーです。終了時には保存して保管して下さい。

テキストツールを使ってマスク見切り内に文字の配置をします。ロゴや他の画像があればここで「レイヤーを複製」を使って挿入していきます。挿入する画像は縮小しても保存しなければ何度でもリサイズ出来ますよ。リサイズしたアイテムを「レイヤーを複製」を使って挿入していきます。
出来上がったら、マスクのレイヤーを削除して画像を統合、別名保存でjpeg名前を付けて保存で終了です。

test A.jpg

サムネイル画像の設定サイズを見直してみよう

サムネイル画像(アイキャッチ画像)サイズは初期値150になっています。表示サイズを大きい値に変更します。
設定➔メディア➔サムネイルのサイズ
こうすることにより、ぼやけることなく綺麗にサムネイル画像を表示させることが出来るようになります。若干ですが。

画像サイズ.png

バナー広告を参考にして真似よう

冒頭にWEBデザイナーの知識が必要になります。と言いました。アイキャッチ画像も単に写真やイラストを配置して文字を入れればお仕舞いでは、味気ないですよね。ちょっと工夫したいです。

WEBデザインを勉強するのが最良の方法ですが、もっと簡単に初心者は覚えたいです。そんな楽な方法があるの？…。

私は広告系グラフィックを扱うのですが、WEBデザイナーも基本的には同じです。見た目とキャッチコピーが主眼です。WEBデザイナーの方はSEOやHTML・CSSの知識も必要なのですが、WordPress初心者には難易度が高いですね。そこでWEBデザイナーのデザインを拝借しましょう。

WEBデザイナーの方のバナー広告のギャラリーサイトです。
https://bannnner.com

画像の使い方、文字の見易さ、色使いなど参考になると思います。バナー広告とアイキャッチ画像とはちょっと似通っていますよね。広告と表紙の違いですが、制約のあるバナー広告よりはアイキャッチ画像の方が制約の幅が広いでしょう。どう感じてどう活かすかは貴方の感性にお任せしますが、見て真似して試行錯誤するのは勉強になりますよ。

もしAdobe CCをお持ちであれば、Illustratorで作成することをお勧めします。
その訳はIllustratorは描画するタイプのドローソフトと呼ばれ、ベクターファイルですので、無限に拡大できる複雑なグラフ状の形式で構成されているためです。ベクターファイルは拡大・縮小時に解像度が低下しません。従って制作時の自由度が格段に違います。寸法通りに仕上げ、希望のファイル形式に変換することが出来ます。壁紙やイラスト入りの作品には最適です。日本語形式の縦組みも出来ます。