AmazonアフィリエイトツールAmakuriの使い方とCSSデザインサンプル

2017-02-02

Amazonアフィリエイトツール Amakuri

Amazon アフィリエイト用の外部非公式ツールはたくさんありますが、ブロガー御用達といえばカエレバやヨメレバかなと思います。

Amazon だけではなく、楽天や Yahoo! ショッピングのアフィリエイトリンクも一括生成できるので便利ですよね。いろいろなデザインサンプルも公開されているので、ブログに合ったボタンを設置することができます。

ただ、「Amazon のリンクだけさくっと生成したい」「posted width ～（クレジット）を消したい」「もっと自由にデザインしたい」ときは Amakuri というサービスがおすすめです。

では、使い方やオリジナルテンプレートの HTML ・ CSS サンプルをご紹介していきます。

Amazon の仕様変更（PA-API）により、残念ながら Amakuri は 2019 年 1 月 15 日に閉鎖してしまいました。素晴らしいサービスをありがとうございました。

Amakuriを使うメリット

Amakuri
Amakuri

説明を見なくても簡単に使えるシンプルさ

Amakuri は「誰でも簡単に使えるAmazonアフィリエイトリンク作成ツール」とあるように、かなりシンプルなツールです。

  1. 検索する
  2. 商品を選ぶ
  3. アソシエイト ID を入れる
  4. 画像サイズや表示項目を選択する
  5. コードをコピペする

これだけで、以下のようなリンクを生成できます。

エンジニアのためのWordPress開発入門 (Engineer's Library)
エンジニアのためのWordPress開発入門 (Engineer’s Library)
Posted with Amakuri
野島 祐慈
技術評論社
Amazonで購入する

同じデザインを使いまわすのであれば 3 と 4 は省略できるので、かなり素早いリンク作成が可能です。

後述しますが、ブラウザ拡張機能を使えば検索の手間すら省けます。

クレジットの非表示が可能

ほとんどのサービスは、クレジット必須となっています。

ヨメレバだと、このように「posted width ヨメレバ」というリンクが入りますよね。

沈黙のWebライティング —Webマーケッター ボーンの激闘—〈SEOのためのライティング教本〉

posted with ヨメレバ
松尾 茂起 エムディエヌコーポレーション 2016-11-01
Amazon
Kindle

しかし、Amakuri はこのクレジットを非表示にできるので、（読者にとって）よけいなリンクを省けます。

また、コメント付きのデフォルトテンプレートを選択すると、以下のように購入リンクの上にコメントを挿入できます。

沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション
沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション
松尾 茂起
エムディエヌコーポレーション
ブロガーなら必ず読んでおくべき一冊。記事の書き方に迷ったときは、何度も読み返すと新しい発見があるはず。
Amazonで購入する

ヨメレバと比べたときのデメリットは、書籍版と Kindle 版のリンクを同時生成できないこと、楽天など他のサービスは使えないということです。

しかし、それを補って余りある機能が「カスタムテンプレート」です。

表示したいパーツ・位置を自由に変更できる

カエレバやヨメレバは CSS でリンクをボタン化したりデザインを変えられますが、Amakuri は HTML コードもカスタマイズできるのが最大の魅力です。

Amakuriカスタムテンプレート機能

商品画像や購入ボタンを好きなところに置いたり、あらかじめ非表示にしておくこともできちゃうわけです。

見出しタグやリストタグを使うこともできますし、クラス名を入れておけば CSS で自由にデザインできますね。ブログサービスやテーマ・テンプレートに合わせて自分だけのコードを作りたいならぴったりです。

カスタムテンプレートは複数（現時点で 8 個）登録しておけますので、一般商品／Kindle／ビデオ などで使い分けることもできます。

AmazonメインならAmakuriを使ってみよう

このように、「Amazon のリンクひとつしか生成できない」こと以外はかなり使い勝手のよいツールです。もっとも、『Amazon の購入リンクさえあれば十分』という方にとっては、メリットしかないとも言えるでしょう。

WordPress で AmazonJS を使っているなら、そのまま乗り換えても違和感ないですよ（AmazonJS っぽいデザインサンプルを下に載せています）。

Amakuriの使い方

Amakuri はすごくシンプルなので使い方の説明は要らないと思います。

Chrome 拡張機能だけご紹介しておきますね（Firefox 用エクステンション／ブックマークレットもあります）。

Chrome拡張機能でさくっとリンク生成

Amakuri（Chrome拡張機能）

Chrome に拡張機能を追加後、Amazon の商品ページで右クリックし、コンテクストメニュー「Amakuri」からアフィリエイトリンク作成ページをどのように開くか選択。

Amakuriコンテクストメニュー

そのままクリックすればリンク作成ページに飛びます。

Amakuriリンク作成ページ

あとは、アソシエイト ID などを設定してコードをコピペするだけ！

これ以上ないシンプルさですね。

ちなみに画像は HTTPS で取得していますので SSL 化したサイトでもそのまま使えます。

カスタムHTMLテンプレートとCSSサンプル

それでは、Amakuri 最大の特長である「カスタムテンプレート」について見ていきましょう。

とは言うものの、こちらもサイトにサンプルコードなどが記載されていますので、「利用可能なタグ一覧」を見ながら組み上げていくだけです。

以下、Naifix オリジナルのテンプレート＆ CSS を載せておきますので、よければ使ってみてください。

CSS デザインは WordPress の Twenty Seventeen で調整しているので、お好みで微調整してください。

生成されるリンクにはすべて rel="nofollow" を入れ、別タブで開くようにしています。

HTML タグは Amakuri の「カスタムテンプレート」にコピペ、CSS はブログの style.css などにコピペしてください。

Amakuriカスタムテンプレートの使い方
Amakuriカスタムテンプレートは8個まで登録可能

画像と商品名だけの超シンプルテンプレート

「余計なものは不要！」ということで、画像と商品名だけを入れた最もシンプルなテンプレートです（以下、サンプルはすべて画像なのでクリックできません）。

Amakuri シンプルデザイン

■HTML

<div class="nfx-amkr-box"><div class="nfx-amkr-image"><a href="<%link_url%>" target="_blank" rel="nofollow"><%image_medium%></a></div><div class="nfx-amkr-content"><p><a href="<%link_url%>" target="_blank" rel="nofollow"><%title%></a></p></div></div>

■CSS

.nfx-amkr-box {
	border: 1px solid #ddd;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	margin: 2em 0;
	padding: 1em;
}
.nfx-amkr-image img {
	max-width: none;
}
.nfx-amkr-content {
	margin-left: 1em;
}

超シンプル＋コメントテンプレート

シンプルテンプレートにコメント欄を追加したテンプレートです。

商品名とコメントを区別するために、商品名を太字にし、コメントはフォントサイズとカラーを少し変えてあります。

Amakuri コメント欄つきシンプルデザイン

■HTML

<div class="nfx-amkr-box"><div class="nfx-amkr-image"><a href="<%link_url%>" target="_blank" rel="nofollow"><%image_medium%></a></div><div class="nfx-amkr-content"><p class="nfx-amkr-title"><a href="<%link_url%>" target="_blank" rel="nofollow"><%title%></a></p><p class="nfx-amkr-comment"><%comment%></p></div></div>

■CSS

.nfx-amkr-box {
	border: 1px solid #ddd;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	margin: 2em 0;
	padding: 1em;
}
.nfx-amkr-image img {
	max-width: none;
}
.nfx-amkr-content {
	margin-left: 1em;
}
.nfx-amkr-title {
	font-weight: bold;
}
.nfx-amkr-comment {
	color: #666;
	font-size: .9em;
}

カエレバ・ヨメレバに似せたテンプレート

書籍はヨメレバを使い、Amazon ビデオは Amakuri を使う、というようなときに違和感を軽減するためのテンプレートです。

クレジットや著者名・出版社名を入れ、Amazon のリンクはボタン化しています（テキストは Amakuri で変更可能）。

Amakuri ヨメレバに似たデザインテンプレート

■HTML

<div class="nfx-amkr-box"><div class="nfx-amkr-image"><a href="<%link_url%>" target="_blank" rel="nofollow"><%image_medium%></a></div><div class="nfx-amkr-content"><p class="nfx-amkr-title"><a href="<%link_url%>" target="_blank" rel="nofollow"><%title%></a></p><p class="nfx-amkr-credit"><%amakuri%></p><ul class="nfx-amkr-desc"><li><%author%></li><li><%label%></li></ul><p class="nfx-amkr-comment"><%comment%></p><p class="nfx-amkr-amzlink"><a href="<%link_url%>" target="_blank" rel="nofollow"><%link_text%></a></p></div></div>

■CSS

.nfx-amkr-box {
	border: 1px solid #ddd;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	margin: 2em 0;
	padding: 1em;
}
.nfx-amkr-image img {
	max-width: none;
}
.nfx-amkr-content {
	margin-left: 1em;
}
.nfx-amkr-title {
	font-weight: bold;
}
.nfx-amkr-credit {
	color: #666;
	font-size: .8em;
	text-align: right;
}
.nfx-amkr-desc {
	list-style: none;
}
.nfx-amkr-desc li {
	display: inline;
	margin-right: .8em;
}
.nfx-amkr-comment {
	color: #666;
	font-size: .9em;
}
.nfx-amkr-amzlink a {
	background-color: #666;
	box-shadow: none;
	color: #fff;
	display: block;
	padding: 1em;
	text-align: center;
	text-decoration: none;
}

AmazonJSに似せたテンプレート

WordPress プラグイン AmazonJS から乗り換えられるよう、デザインを真似してみました。著者名などが表示される書籍用と、何でも使える一般商品用のテンプレートにわけていますが、CSS は共通です。

価格を固定表示すると規約違反となる可能性がありますので、その点だけご注意ください。

Amakuri AmazonJSに似たデザイン

■HTML（書籍用）

<div class="nfx-amkr-box"><div class="nfx-amkr-image"><a href="<%link_url%>" target="_blank" rel="nofollow"><%image_medium%></a></div><div class="nfx-amkr-content"><p class="nfx-amkr-title"><a href="<%link_url%>" target="_blank" rel="nofollow"><%title%></a></p><ul class="nfx-amkr-desc"><li>著者&nbsp;<%author%></li><li><%hanbai_tag%>価格&nbsp;<span class="nfx-amkr-price"><%hanbai_price%></span><%/hanbai_tag%>&nbsp;<%hanbai_datetag%>(<%hanbai_year%>/<%hanbai_month%>/<%hanbai_day%>&nbsp;<%hanbai_hour%>:<%hanbai_minutes%>時点)<%/hanbai_datetag%></li><li>商品ランキング&nbsp;<%ranking%>位</li><li>出版社&nbsp;<%label%></li></ul></div></div>

Amakuri一般商品テンプレートサンプル（AmazonJSっぽいデザイン）

■HTML（一般商品用）

<div class="nfx-amkr-box"><div class="nfx-amkr-image"><a href="<%link_url%>" target="_blank" rel="nofollow"><%image_medium%></a></div><div class="nfx-amkr-content"><p class="nfx-amkr-title"><a href="<%link_url%>" target="_blank" rel="nofollow"><%title%></a></p><ul class="nfx-amkr-desc"><li><%label%></li><li><%hanbai_tag%>価格&nbsp;<span class="nfx-amkr-price"><%hanbai_price%></span><%/hanbai_tag%>&nbsp;<%hanbai_datetag%>(<%hanbai_year%>/<%hanbai_month%>/<%hanbai_day%>&nbsp;<%hanbai_hour%>:<%hanbai_minutes%>時点)<%/hanbai_datetag%></li><li>商品ランキング&nbsp;<%ranking%>位</li></ul></div></div>

■CSS

.nfx-amkr-box {
	border: 1px solid #ddd;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	margin: 2em 0;
	padding: 1em;
}
.nfx-amkr-image img {
	max-width: none;
}
.nfx-amkr-content {
	margin-left: 1em;
}
.nfx-amkr-title {
	font-weight: bold;
}
.nfx-amkr-title a {
	box-shadow: none;
	color: #d2691e;
	text-decoration: none;
}
.nfx-amkr-desc {
	color: #666;
	list-style: none;
	font-size: .9em;
}
.nfx-amkr-desc li {
	margin-bottom: .2em;
}
.nfx-amkr-price {
	color: #b00;
}

オリジナルのテンプレートを作ってみよう

というわけでテンプレートをいくつかご紹介いたしましたが、Naifix ではこんな感じにしてみました。

コメント付きのシンプルテンプレートをベースに、ボックス全体をクリックできるようにしています。

エンジニアのためのWordPress開発入門 (Engineer's Library)

エンジニアのためのWordPress開発入門 (Engineer’s Library)

WordPressカスタマイズを極めたい方におすすめの一冊！

手間はかかりますが、工夫すれば Kindle と一般書籍リンクをふたつ並べる、ということもできますので、いろいろ試してオリジナルテンプレートを作成してみてください。

まとめ

Amakuri は Amazon アフィリエイトツールのなかでもイチオシです。

クレジット非表示についてはサービス運営者さまに直接確認をとっていますが、自由に使えるということは責任も伴うということです。Amazon のロゴを勝手に入れてしまうなど、規約違反には十分気をつけくださいね。

かっこいいデザイン・テンプレートができたら、どんどんブログで紹介しましょう！

それでは、また。

ブログ雑記

Posted by Ellora