WordPress のプラグイン「Coverpeek」を wordpress.org で公開するまでの連載の番外編です。
今回は、ストアのページに載せるバナーとアイコン、プラグインに同梱する背景画像を作った話です。
ストア用の画像の置き場所やファイル名のルールは↓こちらに書いています。
先に書いておくと、私はデザインすることはあっても本職はデザイナーではありません。
今回は早く公開したかったので、デザインは AI（Claude）と Figma に任せて、スピードを優先しました。
結論から書くと、こだわりのない部分は AI に任せ、「どんなプラグインか伝わるか」だけは自分で判断するという分け方にしました。
まずは背景画像から：Claude だけだと装飾が少なかった
Coverpeek は、記事タイトルを背景画像の上に載せてアイキャッチを作るプラグインです。
なので、まず必要だったのは同梱する背景画像でした。
最初は Claude だけで作ってもらいました。
できあがったのがこちらです。
悪くはないのですが、装飾が少なくてデザインとしては物足りない…。
そこで、Figma も使ってみることにしました。
参考画像探しで迷った話
デザインしてもらうときに、参考になるかと思って note や YouTube のサムネイルを見てみました。
ただ、どれもちょっと装飾過多で、イメージしていたものと違いました。
記事のアイキャッチの背景にするなら、タイトルの文字が主役なので、もう少し控えめなほうがよさそうです。
結局、Google 画像検索で出てきた「ほどよい装飾」のものを参考にしました。
Claude から Figma を操作して作ってもらった背景がこちらです。
だいぶ印象が変わりました…！
Claude だけのときより、装飾のバランスがよくなりました。
Figma MCP を使える状態にする
Figma には、Claude などの AI から Figma のファイルを直接操作できる仕組みが用意されています。
これを MCP サーバーと呼びます。
私は Figma の Professional プランを使っています。
接続の設定は Claude に任せたので、ここは特に詰まりませんでした。
作業は、背景画像を作ったのと同じ Figma のファイルに、ストア用の新しいページ（「WP.org Assets」）を足して進めました。
同じファイルにまとめておくと、配色やフォントをそろえやすいです。
指示は「プラグイン詳細画面でよく見る感じに」だけ
バナーとアイコンについて、私が出した指示はほぼこれだけです。
プラグイン詳細画面でよく見る感じに配色は背景画像と同じ系統（teal から sky へのグラデーション）、フォントはプラグインに同梱している Noto Sans JP Bold に合わせてくれました。
使ってみた感想としては、思いどおりのものにするには何回か指示が必要です。
その代わり、強いこだわりがなければちゃんと使えるものを作ってくれます。
今回は「とにかく早く公開したい」という目的があったので、細かい調整までは追い込みませんでした。
最初のバナーを作り直した理由
最初にできたバナーは、写真のアイコンにスパークル（キラキラ）を添えた、シンプルなものでした。
（このバナーは Figma にも Git にも残っていなかったので、画像はありません…）
見た目は整っていたのですが、画像から「どんなプラグインか？」が想像できない。
これが作り直した理由です。
ストアのバナーは、プラグインを探している人が最初に目にする画像です。
写真のアイコンだけだと、「画像に関係するプラグインかな？」くらいしか伝わりません。
そこで、プラグインの機能そのものを見せる方向に変えました。
次の2枚は Git に残っていた途中の版です（改名前なので旧名の「Live Thumbnail Generator」になっています）。
1枚目でもプレビューは伝わりますが、2枚目は入力欄と矢印があるので、「タイトルを入れると画像になる」という流れが一目でわかります。
差はわずかですが、伝わり方はずいぶん違うと思います。
最終的に、名前を Coverpeek に変えたものがストアに載っています。
最初のバナーの「写真＋スパークル」は、アイコンのほうで生かしています。
小さなアイコンなら、細かい流れを見せるより、シンプルなマークのほうが合っているかなと。
途中で起きた問題は Claude Code に直してもらった
作っている途中で、いくつか問題が起きました。
直すのはどれも Claude Code に任せています。
パスの座標にカンマを使うとエラー
スパークルなどの形をベクターのパスで描こうとしたところ、次のエラーが出ました。
Error: in set_vectorPaths: Failed to convert path. Invalid command at ,パスの座標をカンマで区切っていたのが原因でした。
スペースで区切るように書き直すと通りました。
画面に出るものではないので、Claude Code が自分で気づいて直してくれたものです。
スパークルに黒い枠線が付いた
最初に書き出した画像を見ると、スパークルに黒い枠線が付いていました。
これは見ればすぐわかる問題で、枠線を消す（strokes を空にする）ことで直りました。
アイコンの角にグレーが焼き込まれた
同じ書き出しで、アイコンの四隅にうっすらグレーが残っていました。
原因は、Figma のフレームに角丸を付けて切り抜いた状態で書き出したことでした。
角の透明になるはずの部分に、Figma のキャンバスの背景色（#F5F5F5）が焼き込まれていました。
角の色は、次のようにして実際のピクセルの値を確かめています。
magick icon-256x256.png -format '%[pixel:p{0,0}]' info:wordpress.org のストアでは、アイコンの角はページ側の CSS で丸められます。
なので、角丸にせず、全面を塗った正方形で書き出すのが正解でした。
書き出しは大きいサイズだけにして、小さいサイズは sips で作る
完成したら、Figma から PNG で書き出します。
ストア用の画像は、バナーとアイコンにそれぞれ2つのサイズが必要です。
| ファイル名 | サイズ |
|---|---|
banner-1544x500.png | 1544×500 |
banner-772x250.png | 772×250 |
icon-256x256.png | 256×256 |
icon-128x128.png | 128×128 |
大きいサイズで書き出してから、Mac の sips で小さいサイズを作りました。
sips -z 250 772 banner-1544x500.png --out banner-772x250.png
sips -z 128 128 icon-256x256.png --out icon-128x128.pngsips -z は「高さ 幅」の順なので気をつけたいところです。
まとめ：AI に任せた判断基準
今回、AI にデザインを任せてみて、次のような分け方に落ち着きました。
- こだわりのない部分は任せる：配色やレイアウトの細部は、AI の案で十分だった
- 何回か指示する前提で使う：一発で思いどおりになるとは考えない
- 「伝わるか」は自分で判断する：最初のバナーのように、整っていても機能が伝わらなければ作り直す
- 目的で線を引く：今回は「早く公開する」が目的だったので、仕上がりより速さを取った
デザインに強いこだわりがある場合は、自分で手を動かすか、デザイナーさんに頼むほうがいいでしょう。
それでも「早く形にしたい」という場面なら、AI と Figma の組み合わせで十分だと感じました。
次は、ストア用のスクリーンショットを撮り直した話を書く予定です。
改名のせいで、設定画面のスクリーンショットを撮り直すことになってしまったので…。
Coverpeek はこちらから入れられます。
- 紹介ページ: Coverpeek｜rcwas
- wordpress.org: Coverpeek – Auto Thumbnails with Live Preview
