![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipA-lE5CzbwZsQ6FWsvbUMacbY4xZosP3XNzZvSjf_TZ3LSgYNVNDk-rtY3DaNDH4T1mRvJrXhvAmFEr1SQ_t4WfGsU4Ez_mJP_4nQdqVr_PDvv4Ebuor9THP-67_vUmNGDKzt45XVoJrQFZpPMQLp-uxIjspO3uPAhwqLJqK_Mn9lD1fGyBrOJCrAnDM/s1600-rw/website-3374825_1280.jpg)
AmazonアフェリエイトバナーをDIYしています。
もはや猶予も残されていないので、本当にこの方法でいいのか?という自問自答もありますが、ここまできたら突き進むしかないでしょう。
何かに背中を押されるような勢いで今回はバナーのデザインについて検討します。
これまでのバナーデザイン
オリジナル
Amazonアソシエイトツールでのバナーは、次の様なデザインでした。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUv652bnf0M5xqJi9x2reGBOoLIDkicLBJHLPGVgX4G8wNsVrWQGi3i3yu-0P0jBkVkcvHxAZTksLdYC9RzSebCXYi7w_gaX-z-jxmHithdfLkudQvYqOaem3G5QPOlA3ZLvJTdLaBfZImZsmH-hnYSoF37O7Xw_peoXBRHlmkzszMlNShnjMjbRBNsJA/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-09%207.03.06.png)
おなじみのアフェリエイトバナーですが、ブロガーたちはこの簡素でデザインを施せないこのバナーに不満たらたらだったことは言うまでも有りません。
でも、iframe構成でリアルタイムな金額表示などがあることから、致し方なく使っていたメジャーバナーでした。
カエレバ
カエレバという、アフェリエイトバナー生成サービスでは次のようなデザインで出力されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCfBulf3_I1DaZ7HZ22wL0ScU77T7LHRV1mT8QLDIrX_7hl_7-mW6YEakDCEibfArTU4iqtGdFEaxOlmFzX7Q9dMZHLZt-CWh7r_KMT28x8Wa_G7ov-wQ5_MI8KhDzKFTkazVc7tmdLG29mknc3QJx854XfVsg4LygSe1t56_nCZrtbECCVgdPzjDtecY/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-09%207.12.14.png)
今回開発している目標に一番近い形状です。
ちなみに、姉妹商品のヨメレバも似たようなツールのようです。
ヨメレバ
Wordpressプラグインや自作など
次によく見かけるのが、Wordpressプラグインで手軽に使えるモノだったり、自作するモノでは次のようなデザインが主流のようです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0A_i9RbAeG2GGgyR4q17wAVE-fYxKOYhkidhawLqejgPlct8gxL1IVWqOHUnmzJsR4bAiJZqBAiCt7md6S6PNxwGBBXy1aU_31VgnBzOgEJRRWspvT_Jla0c5EYMTMYRBivlTORIG_LkXiVxKeEvqDiN0X15u_phERU46YNq5MsBhyphenhyphen6IWPgwOWacXMVQ/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-09%207.17.18.png)
同じ商品の他アフェリエイトなどへのリンクもセットになっていて、クリック率が高くなりそうな感じです。
仕様検討
基本的な仕様として、レスポンシブデザインなバナーにする事は必須でしょう。
コンパクトにまとめようとしたAmazonオリジナルバナーは、画像と金額を主張したがっていて、タイトル文字数が決め打ちになっていますが、タイトル文字を全て表示する仕様にすることで、内容説明も兼ねてくれる商品が多くなる事が期待できます。
PCでは、画像が左で、文字情報が右という構成。
これが、スマホでは、
あとがき
さほど凝ったことをするつもりもなく、ありふれたバナーを安定的に表示できればそれだけでいいんです。
上記のデザインに、アフェリエイトIDを追加したURLをリンクすれば、お手軽アフェリエイトバナーの出来上がり。というワケです。
ちょっとだけ気をつけたいのは、マルチブラウジングを考慮して、できるだけ依存性のないcssの構築だったり、無駄情報の排除をしていきたいですね。
でも、こういうバナーって遊び心も必要なので、ちょっとした工夫もいれたいという野望も考えています。
引き続きお楽しみに!
0 件のコメント:
コメントを投稿