当サイトの購入特典「アイキャッチ工房」でどんなことができるのか。
この記事では概要をお伝えします。
ここに並んでいるアイキャッチは、全部このツールだけで作っています（画像編集ソフトは使ってません）。
ツールを開くと左側に設定がずらっと並んでいるので、最初は「多いな」と感じるはずです。
でも、1枚作るのに触る場所は3つだけ。まずそこから説明します。
基本は3ステップだけ
手順1：プリセットを押す
画面上部の「プリセット」から好きな見本を1つ押します。
ティール系、教科書風、青ポップ、写真×紺パネル、座布団タイトル、黒板風の6種類。
プリセットを基に、自分らしくアレンジしたデザインを作成してください。
手順2：文字を打ち替える
ここが一番大事なところです。
画像に出ている文字は4か所（プレミアム版で帯を使うときは6か所）あります。
開いた状態では、それぞれの欄にその欄の名前がそのまま入っています。
「上バッジ（見出しの上）」と書かれた文字が画像に出ていれば、それが上バッジの位置です。
どこを直せば画像のどこが変わるのか、押して打ち替えれば分かるようにしてあります。
| 欄の名前 | 画像のどこに出るか |
|---|---|
| 見出し | 中央の大きな文字（改行できます） |
| 上バッジ | 見出しの上の小さなラベル |
| 下バッジ | 見出しの下の小さなラベル |
| キャプション | 一番下の小さな一行 |
| 上帯・下帯（プレミアム版） | 画像の上下いっぱいの帯 |
何を入れるかは自由です。
参考までに、
全部埋める必要はありません。使わない欄は空にすれば、その要素は消えます。
手順3：画像をコピーして記事に貼る
「画像をコピー」を押したら、あとはWordPressの編集画面でそのまま貼り付けるだけでOK（Chrome・Edge対応）。
貼り付けた時点でメディアへのアップロードも済んでいます。
もし画像をファイルとして手元に残したいときは「画像保存」で対応できます（PNG・WebP・JPEGから選べます）。
これで1枚できます。
慣れると、記事を書き終えてから公開ボタンを押すまでの間に作れる作業量です。
サイズは用途で3種類
画像サイズは、サイズ欄で切り替えます。
- 1200×630：記事のアイキャッチ用。OGP（SNSでシェアされたときの画像）もこのサイズです
- 1920×1080：大判。YouTubeのサムネイルやスライドの表紙にも使えます
- 1200×400：横長の帯。記事の見出し前に置く区切り画像に向いています
文字やアイコンの大きさは、画像サイズに合うよう自動で調整されます。
写真を背景にする（プレミア版）
プレミア限定版のいちばん大きな機能です。
ブログでよく使う「写真の上にタイトルの帯が乗った」アイキャッチが、このツールだけで作れます。
手順
- 「背景」の塗りを「画像」にする
- 「画像を選ぶ」で写真をアップする（試すだけならサンプル写真も入っています）
- 「拡大」と「横位置・縦位置」で、見せたい部分を切り取る
写真はキャンバスを隙間なく埋めるように自動で配置されるので、余白や引き伸ばしで崩れる心配はありません。
文字が写真に埋もれるときはこの3つで直します。
- 暗幕の濃さを上げる：写真全体が少し暗くなり、白文字がくっきり浮きます
- 見出しの下地で「パネル」を選ぶ：文字ブロックの下に1枚色を敷きます。写真×紺パネルのプリセット④がこの作りです
- 同じく下地の「座布団」：行ごとに色が付く、雑誌の見出しのような形です
それと、もうひとつ。
こんなアイキャッチもこのツールだけで作っています（冒頭に並べた最後の2枚もこれです）。
これは「写真分割」というレイアウトで、写真を右か左に寄せて、境目をぼかして色の面となじませています。
細かな設定やきれいに見せるコツは、購入者限定の特典配布ページで紹介していきます。
気に入った型は保存して次から量産する
「マイテンプレート」に今のデザインを保存しておくと、次からは呼び出して文字を打ち替えるだけで使えます。
1つ気に入った型ができたら保存して、それを使い回すのがおすすめです。
テンプレートはファイルへの書き出しと読み込みもできるので、パソコンを買い替えても安心です。
アイコン特典と組み合わせる
アイコン欄を「タグ貼り付け」にすると、アイコン図鑑のSVGコードをそのまま貼れます。
図鑑でコピーして、工房に貼って、色と大きさを調整するだけで、自作アイコンがアイキャッチの主役になります。
細かい調整は触れば分かるように作ってあります
ここから先は説明を読むより触ったほうが早いので、名前だけ紹介します。
- 整列：見出し・バッジ・キャプションを、それぞれ別々に左・中央・右へ寄せられます
- バッジ：見出しの上下に置ける小さなラベル。ピル・二色・六角・吹き出し・枠線から選べます
- 縁取りと影：文字の視認性を上げる袋文字と、ドロップシャドウ
- 装飾：背景に重ねるあしらい。有機ブロブ、飾り罫、木漏れ日風の光、コンクリ質感
- マイパレット：よく使う色を10個登録しておくと、どの色選びでも候補に出てきます
各項目に「リセット」ボタンが付いているので、いじりすぎて戻れなくなる心配はありません。
設定は自動保存されるので、ブラウザを閉じても続きから再開できます！
スタンダード版とプレミアム版の違い
スタンダード版とプレミア版の違いは以下になります。
| スタンダード版 | プレミアム版 | |
|---|---|---|
| 基本のアイキャッチ作成（見出し・背景色・アイコン・3サイズ） | ||
| 起点にできるプリセット | 3種 | 6種 |
| 写真背景（拡大・位置調整・ぼかし・暗幕） | ||
| フォント | 14種 | 37種 |
| フレーム（枠飾り） | 7種 | 15種（文字入りの上下帯つき） |
| 上下バッジ（二色の左右色指定つき） | ||
| 文字の縁取り・影 | ||
| 装飾レイヤー（有機ブロブ・光の帯など） | ||
| 整列（見出し・バッジ・キャプションを個別に左中右） | ||
| マイテンプレート（型の保存・書き出し／読み込み） | ||
| 「画像をコピー」でそのまま記事へ貼り付け |
ここで紹介したのは基本の流れだけです。細かな使い方やデザインのコツ、そのまま使えるテンプレート（読み込むだけで同じ型が使えます）は、購入者限定の特典配布ページの方に用意していきます。
受け取り方
アイキャッチ工房は、当サイト経由でAFFINGER7をご購入いただいた方限定の購入特典です。
アイキャッチ工房は、特典配布ページからご利用いただけます。
スタンダード特典・プレミア特典それぞれの配布ページに、ツールへのリンクを置いています。
このツールは自分が記事を書くときに使うために作ったので、これからもブラッシュアップしていく予定です。
追加や変更があったときは、特典アップデート情報でお知らせしますね。