読者目線で使いやすい商品リンクを目指して

このブログは自分が使って良かった物を紹介する、使ってみて良い物（性能、デザイン、使い勝手、持つ喜び）を価格に関係なく紹介するのをモットーにしています。
なので、純粋なアフィリエイトのように商品を売るためだけのブログとは異なっています。

ただ、純粋なアフィリエイト案件は報酬が高いです。高い案件は1件成立するだけで3万円とか……。

一方、物販の商品リンクによる成立（具体的にはAmazon、楽天、Yahoo!ショッピング）ですが、2020年9月執筆時点での代表的な料率を見ると、もしもアフィリエイト の場合、Amazonが2%（カテゴリー別・1商品の報酬は最高1,000円まで）、楽天が2%、Yahoo!ショッピングが0.77%。ValueCommerce（バリューコマース） の場合は、Amazonが1.65%、楽天が1%、Yahoo!ショッピングが1.02%と、これに命をかける気にならないレベルの料率です。

つまり当時の条件では、Amazonでたとえ10万円の物が売れたとしても1,000円しかもらえません（※注：その後各社の条件は改定されており、楽天アフィリエイトのカテゴリー別料率化・1商品1,000円上限導入や、バリューコマースでのAmazon提携終了、また2024年8月にはAmazon側での「1商品あたり報酬上限1,000円」撤廃などが行われています）。

そこで商品リンクは、「自分で商品を探すのは面倒だし、いつも利用しているショップで一番安い所を探してくれる」サイトを目指すのが目標です。
楽天なら数ある店舗で送料込みで一番安い所を表示したり、送料条件を表示して一番安い所を表示したりする仕組みがあれば一番いいのですが、現実にはなかなか難しいところです。

2020年8月14日からブログを始めて、まず最初にしたのはAmazonアソシエイトの申し込みです。
正式な承認（180日以内に3件以上の適格販売。さらにAPIの継続利用には直近30日以内の販売実績維持も必要）がないとAmazon公式APIを利用することができないため、最初は商品リンクを作れるツールも限られてきます。

以下に、私の商品リンクの変遷を紹介します。
題材は、豊岡鞄の New Dulles TOUCH2 DS0-TO2-75 を例にして解説します。

Amazonアフィリエイトによる商品リンク

最初は公式のAmazonアソシエイトのiframe商品リンクです（※この公式「画像」「テキストと画像」iframeリンク機能自体も、2023年末〜2024年1月のSiteStripe仕様変更で廃止されました）。
もし楽天とYahoo!ショッピングも載せるなら、楽天アフィリエイトから商品リンクを作り、Yahoo!ショッピングを ValueCommerce から商品リンクを作らないといけません。
Amazonしか使わない、楽天しか使わない、Yahoo!ショッピングしか使わないのならそれでもいいかもしれませんが、複数ショップを個別に貼るのは効率が悪すぎます。

• 関連トラブル：Amazonの商品リンク画像が表示されない

カエレバによる商品リンク

続いて当時試したのが カエレバ による商品リンクです。

• Amazonで調べる
• 楽天市場で調べる
• Yahooショッピングで調べる

残念ながら当時の私の環境（API未承認状態）ではYahoo!ショッピングがうまく検索されず、またPHP環境やプラグインへの依存もあったため、その後廃止して現在のGemini独自の商品リンク方式へ移行しました。

当時の環境では、カエレバはリンクリストのみが使えており、「画像＋リンクリスト」は使えませんでした。

もしもアフィリエイト「かんたんリンク」

次に試したのが、もしもアフィリエイト の「かんたんリンク」による商品リンクです。

• Amazonの商品検索ではレッドが拾えずブラックがヒットするため、Amazon・楽天・Yahoo!ショッピングのどれもブラックを表示してしまう
• 楽天の商品検索ではレッドがあったのでYahoo!ショッピングはレッドを表示するものの、Amazonは商品とは関係ない別商品を表示してしまう

もしもアフィリエイト の「かんたんリンク」は、検索した商品がAmazonにある場合、Amazonの商品名で楽天とYahoo!ショッピングを検索し、それらを合体しています。
そのため、Amazonの商品名に独自の文言などが入っていると、楽天やYahoo!ショッピングで検索してもヒットしません。楽天やYahoo!ショッピングでもヒットしそうな名前の組み合わせや型式などを試していく必要があります。

Amazonで検索して該当がない場合は、まず自分で楽天のサイトへ行き、自分で検索し、よさそうな店舗のURLをコピーして「かんたんリンク」に貼り付けます。これでYahoo!ショッピングは検索できるし、Amazonも検索してヒットすることがあります。
つまり、「かんたんリンク」は初心者には便利ですが、検索して一発でヒットしなかった場合の手間がかかりすぎて面倒です。

そしてなにより、スマホ表示での商品リンクの見た目が気になりました。

スマホで見ると縦に大きく伸びてしまい、記事を読む上で邪魔に感じてしまいます。CSSをカスタマイズもしてみましたが、いまいち納得できませんでした。

カッテネによる商品リンク

ここにたどり着くまでに、何度試行錯誤したことか……。
カッテネ を使うと、以下のようなショートコード記述で理想の商品リンクが作れます。

[kattene]
{
  "image": "【商品画像URL】",
  "title": "New Dulles TOUCH2 DS0-TO2",
  "description": "",
  "sites": [
    { "color": "orange", "url": "【Amazon URL】", "label": "Amazon" },
    { "color": "blue", "url": "【楽天 URL】", "label": "楽天", "main": "true" },
    { "color": "red", "url": "【Yahoo URL】", "label": "Yahoo" }
  ]
}
[/kattene]

スマホでの表示もPCで見るのと変わらずスッキリしています。

外観はカッテネでOKになりました。
ただし、カッテネは設定が少し面倒です。WordPressテーマのCocoonを使っているので「アフィリエイトタグ管理」を使って管理していましたが、以下のように画像URLや各ショップの商品リンクを自分でかき集める必要があります。

当時は画像をもしもアフィリエイトの正規「商品リンク」等から取得し、Amazonか楽天市場のものを参照していました（Yahoo!ショッピングは店舗ごとに規約が異なるため不使用）。
そして記事にはショートコードで貼り付けていました（※なお、現在は画像リンクの規約厳格化やリンク切れリスクも踏まえ、このカッテネ方式は廃止しています）。

Amazonと楽天を もしもアフィリエイト から引っ張り、Yahoo!ショッピングを ValueCommerce から引っ張っていますが、本家のAmazonアソシエイトや楽天アフィリエイトから引っ張ることもできます。URLをコピーして貼るだけです。

この設定を商品ごとに行う必要がありますが、これを「面倒」と感じるか、「一番安い一覧を載せられるし、画像がAmazonになくても楽天にはあるといった小回りが利くので便利」と思うかで利用価値が異なります。

ちなみに、本来のカッテネの定義ではボタンを最大5個付けることができます。例えばヨドバシカメラ、ビックカメラ、Apple Storeなどを追加することもでき、自由度は非常に高いです。

さらに工夫した点として、もしもアフィリエイトの通常の「商品リンク」だと、商品を選んだ特定の1店舗へダイレクトに繋がってしまいます。これだと日々価格が動くのに対応できないため、検索結果の価格一覧を表示するために、もしもアフィリエイトの「どこでもリンク」を使う ことにしました。

画像はもしもアフィリエイトの「商品リンク」、Amazon・楽天・Yahoo!へのジャンプは「どこでもリンク（検索一覧URL）」を使い分けています。
ますますマニアックになっていきますが、利用者からすれば自分で一番安い物を探せるので、そちらの方が親切かなと思うのです。

理想の商品リンクは、価格.comのようにいろいろな店舗から一番安い所を探し出すとか、配送料・数量制限・送料無料条件・ Amazon Prime 会員かどうか・定期おトク便かどうかまで考慮して比較できる仕組みですが、個人ブログではそこまでは難しいため、「各ショップの検索結果一覧へ案内する」形に落ち着きました。

諦めたテーブル一覧方式

やはり、アフィリエイトだとすぐわかる大きな商品画像のリンクが記事の途中に何度も出てくるのは、自分が見ても邪魔に感じます。
そこで一度、「文中はテキストリンクのみにして、文末にその記事で扱う商品の一覧をショップ別（Amazon・楽天・Yahoo・価格.com）のタブ切り替えテーブルで作る」という方式も考えました。

しかし、これは4ショップ分のテーブルを毎回個別に作るのに無茶苦茶工数がかかって生産性が悪いため、諦めました。

最終形：PHP非依存のGemini独自商品リンク方式

カエレバやカッテネといったプラグイン（ショートコード）はPHPに依存しており、PHPのバージョンアップ時にエラー（Fatal Error）を引き起こす原因になるためすべて廃止し、当サイト自体もWordPressからAstroによる静的サイト環境へ移行した上で、PHPに一切依存しないGemini独自の商品リンク方式（静的コンポーネント <AffiliateCard>） へ切り替えました。

その上で、レイアウトとして最終的に辿り着いたのは、「記事の導入部にシンプルなテキストアンカーを載せ、記事の文末にその記事で紹介している商品一覧をまとめて載せる」という構成です。

まず記事の導入部に、以下のようなテキストアンカー枠を載せます。

そして記事の文末に、記事で紹介している商品一覧をまとめて載せることにしました。

もっとも原始的な仕組みですが、パソコンの初心者だったり、水槽の初心者だったり、愛玩動物の初心者だった場合、長文の本文中から必要な道具を一つずつ汲み取るなんて面倒なことはしないでしょう。
文末を見れば必要な物が一式書いてあるので、あとは自分で普段利用しているショップから探せば手間も省けるかなと思います。綺麗な商品リンクを記事中にたくさん載せられても見ないですからね。

商品リンク運用で守るべきステマ規制と保守の鉄則

これからブログに商品リンクを設置・移行する方が押さえておくべき法的ルールとセキュリティ保守のポイントも補足しておきます。