【自作プラグイン】コードが書けない総務担当がAIだけを頼りにAffiliate Card Proを作った話

「プラグインって、自分で作れるものなんですか？」

よく聞かれる。答えは「作れる」だ。少なくとも、僕には作れた。

僕はエンジニアじゃない。製造業のシステム推進室で総務兼IT担当をやっている。PHPもJavaScriptも、ちゃんと学んだことはない。それでも、ブログで使うWordPressプラグインを自分で作って、今は販売までしている。

この記事では、「Affiliate Card Pro」というアフィリエイトカード作成プラグインを作った経緯と全工程を正直に書く。AIをどう使ったか、どこでつまずいたか、完成したときに何を感じたか、全部。

書いているのは、ブログ歴6年・副業でWordPressプラグインを自作・販売しているよっちんです。

そもそもAffiliate Card Proとは？

先に完成物を紹介しておく。

Affiliate Card Proは、WordPressの投稿画面から操作するだけでアフィリエイト用の商品カードを作れるGutenbergブロックプラグインだ。

商品名・画像・説明文・リンクを入力すると、ブログに馴染むデザインのカードが自動で生成される。CSSを触る必要はない。Gutenbergのブロックとして動くので、ドラッグ＆ドロップで記事のどこにでも配置できる。

なぜ自作しようと思ったか

ブログを始めた当初から、アフィリエイトカードはPochipp Proを使っていた。機能は十分だし、デザインもきれいだ。今でも一部の記事では使っている。

ただ、使い続けるうちに細かい不満が溜まってきた。

• カードのデザインをもう少し自分のサイトに合わせたい
• 特定のASPリンクを入れる構造を変えたい
• 不要な機能が多くて動作が重く感じる
• カスタマイズしようとするとCSSを直接書くしかない

「こういうものが欲しい」というイメージは頭の中にあった。でも、それを実現するプラグインが見当たらない。

そこで思った。「作ればいいんじゃないか」と。

当時、社内業務でPower Automate Desktopを使って自動化フローを組んだり、XServer VPSにWebアプリを立ち上げたりと、「コードは書けないけどAIに聞きながら動かすことはできる」という経験が積み上がっていた。WordPressプラグインも、同じやり方でいけるんじゃないかと思った。

作り方：AIだけを頼りにした全工程

使ったのはClaude（Anthropic）とChatGPT、それとVS Codeだ。コードは一行も自分では書いていない。全部AIに出力させた。

ステップ1：「こういうものを作りたい」を言語化する

最初にやったのは、作りたいものを文章で書き出すことだ。機能一覧みたいなものを箇条書きにして、「これをWordPressのGutenbergブロックプラグインとして作るにはどこから始めればいいか」とClaudeに聞いた。

返ってきたのは「まずplugin.phpのヘッダーを作る」「block.jsonでブロックの定義を書く」「edit.jsでエディタ上の表示を作る」という手順だった。

PHPもJavaScriptも分からなくていい。「何を書くべきか」をAIが教えてくれるから、それをそのままファイルに貼り付けて動かすだけだ。

ステップ2：動くものを先に作る

最初の1週間は「とにかく画面に何かが表示されるプラグイン」を目標にした。デザインは後回し。「ブロックを追加すると、テキストエリアが出て、入力内容が保存される」だけの状態を先に完成させた。

エラーが出たらエラーメッセージをそのままAIに貼り付ける。「このエラーはなぜ起きているか、どう直すか」と聞く。たいていは1〜2回のやりとりで解決した。

[画像挿入：開発中のVS Code画面のスクショ（任意）]

ステップ3：デザインを整える

動くものができたら、CSSを追加してデザインを整えた。「こんなデザインにしたい」というイメージをAIに伝えて、CSSを出力させる。「カードっぽく見せたい」「影をつけたい」「スマホで崩れないようにしたい」——こういう日本語の指示を出すだけでいい。

微調整はブラウザの開発者ツールで確認しながら進めた。これも「この部分の余白を広げたい」とAIに相談すれば、変更箇所を教えてくれる。

ステップ4：自分のブログで実際に使う

完成したプラグインを自分のブログ（blog-lab.org）にインストールして、実際の記事で使い始めた。

使ってみると、また新しい「ここを直したい」が出てくる。それをまたAIに相談して改修する。このサイクルを数回繰り返して、今の形になった。

完成まで、実質2〜3週間ほどだった。毎日触っていたわけではなく、「仕事から帰ってきて30分」「週末に2時間」くらいのペースでも、それだけで形になった。

作ってみて気づいたこと

完成したとき、最初に感じたのは「あ、これ普通に動く」という静かな驚きだった。大げさに言えばプログラマーが何日もかけて作るようなものが、コードを書いたことのない人間でも形にできた。

もう一つ気づいたのは、自作プラグインは「ブログの記事」としても強いということだ。

「Affiliate Card Pro」で検索したとき、ヒットするのは自分の記事しかない。競合がゼロだ。商品の解説記事は競合だらけでSEOが難しいが、自分だけが持っているコンテンツは最初から競合がいない。

さらに、開発秘話という切り口は「エンジニア出身じゃない人間がAIで作った」という話なので、同じ属性の読者——非エンジニアでブログ運営や業務効率化に関心がある人——に刺さりやすい。

Affiliate Card Proの入手方法

Affiliate Card Proは現在、[販売プラットフォーム名：STORES / note / 自サイト等 → ここに挿入] で販売している。

価格：[PRICE] / 買い切り / WordPressにzipファイルをアップするだけで使える

→ 販売ページリンクをここに挿入（nofollow）

インストール後の設定方法や使い方は、別途ガイド記事を公開予定。

[画像挿入：Affiliate Card Proの実際の使用画面 or 設定画面のスクショ]

まとめ：「コードが書けない」は言い訳にならない時代になった

Affiliate Card ProはAIなしでは絶対に生まれなかったプラグインだ。コードを書く技術がなくても、「何を作りたいか」を言語化できれば、あとはAIが道案内をしてくれる。

同じように「こういうツールがあればいいのに」と思っているブロガーや業務担当者に、この話が少しでも参考になればうれしい。

僕の他の自作プラグインについても、順次記事を公開していく予定です。