アフィリエイトボタン（かんたんリンクがモデル）を自作する（nextjs & tailwind）
公開日:
更新日:
最初に
WordPressなどでブログを作成している方であればアフィリエイトリンクのボタンを配置するのは比較的簡単です。
もしもアフィリエイトでは「かんたんリンク」などのプラグインでAmazon、楽天と言った各種サービスのアフィリエイトリンクを網羅的に設置できます。
こんな感じです。↓
かんたんリンクについての詳細は下記の記事などで知ることができます。
【2025年最新版】もしもアフィリエイト「かんたんリンク」の設定方法
しかしWEBサイト、ブログを自作している場合は上記のようなプラグインを簡単に利用することができません。
なので今回は上記のようなアフィリエイト用のボタンを自作しました。
使用環境は下記になります
・言語: typescript
・ライブラリ: React
・フレームワーク: Nextjs
・CSSフレームワーク: tailwind
WEBサイトやブログ記事をコードから作成している方はコピペなどで使えるので参考にして下さい。
デモ 完成イメージ
下記の形になります。
当サイトでは こちらのページで実際に使用しているので参考にしてみて下さい。
やり方 コード実例
まず実際のコンポーネントです。↓
Item.tsx
1import React from "react";
2import Image from "next/image";
3
4type text = {
5 name: string;
6 image: string;
7 amazonUrl: string;
8 rakutenUrl: string;
9 yahooUrl: string;
10 alt: string;
11};
12
13const Item = (props: text) => {
14 const { name, image, amazonUrl, rakutenUrl, yahooUrl, alt } = props;
15 return (
16 <div className="w-11/12 bg-gray-200 p-5 items-center shadow-lg md:flex md:justify-between ">
17 <div className="items-center p-1 mb-3 md:mb-0">
18 <Image
19 src={image}
20 height={75.6}
21 width={144}
22 alt={alt}
23 className="mx-auto"
24 />
25 </div>
26 <div className="flex flex-col gap-2 p-2 items-center">
27 <p className="font-semibold mb-3">{name}</p>
28 <a href={amazonUrl}>
29 <button className="bg-orange-400 border-orange-200 font-bold group relative inline-flex h-12 items-center justify-start overflow-hidden rounded-md border w-72 px-6 text-white transition-all duration-100 [box-shadow:5px_5px_rgb(82_82_82)] hover:translate-x-[3px] hover:translate-y-[3px] hover:[box-shadow:0px_0px_rgb(82_82_82)] gap-5">
30 <svg
31 className="w-[20px] h-[20px] fill-[#ffffff]"
32 viewBox="0 0 448 512"
33 xmlns="http://www.w3.org/2000/svg"
34 >
35 <path d="M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 94 87 94 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 35.5 29.8 35.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1 0 27.1-6.5 43.1z"></path>
36 </svg>
37 Amazonで見る
38 </button>
39 </a>
40 <a href={rakutenUrl}>
41 <button className="bg-red-500 border-red-200 font-bold group relative inline-flex h-12 items-center justify-start overflow-hidden rounded-md border w-72 px-6 text-white transition-all duration-100 [box-shadow:5px_5px_rgb(82_82_82)] hover:translate-x-[3px] hover:translate-y-[3px] hover:[box-shadow:0px_0px_rgb(82_82_82)] gap-5">
42 <svg
43 xmlns="http://www.w3.org/2000/svg"
44 width="20"
45 height="20"
46 viewBox="0 0 24 24"
47 >
48 <path
49 fill="currentColor"
50 d="M23.277 21.3L3.939 24L.722 21.3zM7.6 19.276H3.939V0h6.052a6.653 6.653 0 0 1 6.65 6.646c0 2.234-1.108 4.204-2.799 5.418l5.418 7.211h-4.585l-4.486-5.979H7.6zm0-9.64h2.392a2.99 2.99 0 0 0 2.989-2.989a2.994 2.994 0 0 0-2.989-2.986H7.6z"
51 />
52 </svg>
53 楽天市場で見る
54 </button>
55 </a>
56 <a href={yahooUrl}>
57 <button className="bg-purple-500 border-purple-200 font-bold group relative inline-flex h-12 items-center justify-start overflow-hidden rounded-md border w-72 px-6 text-white transition-all duration-100 [box-shadow:5px_5px_rgb(82_82_82)] hover:translate-x-[3px] hover:translate-y-[3px] hover:[box-shadow:0px_0px_rgb(82_82_82)] gap-5">
58 <svg
59 className="w-[20px] h-[20px] fill-[#ffffff]"
60 viewBox="0 0 512 512"
61 xmlns="http://www.w3.org/2000/svg"
62 >
63 <path d="M223.69,141.06,167,284.23,111,141.06H14.93L120.76,390.19,82.19,480h94.17L317.27,141.06Zm105.4,135.79a58.22,58.22,0,1,0,58.22,58.22A58.22,58.22,0,0,0,329.09,276.85ZM394.65,32l-93,223.47H406.44L499.07,32Z"></path>
64 </svg>
65 Yahoo!ショッピングで見る
66 </button>
67 </a>
68 </div>
69 </div>
70 );
71};
72
73export default Item;
74次に上記のコンポーネントを呼び出しているコードです。↓
example.tsx
1
2<Item
3 amazonUrl={"amazonのアフィリエイトリンクURL"}
4 rakutenUrl={"楽天のアフィリエイトリンクURL"}
5 yahooUrl={"yahooのアフィリエイトリンクURL"}
6 image={"商品画像のURL"}
7 name={"商品の名前"}
8 alt={"商品画像の説明文"}
9/>ポイント
・各ボタンにはtaiwindで簡単なアニメーションを施しています（hoverされると沈む）。
・各ボタンにはSVGで各サービス会社のロゴを入れています。
・レスポンシブ対応をしていて、スマホ画面では商品画像の下にボタンが表示されます。
本記事は以上になります。
ご一読頂きありがとうございました。