Amazonバナー、挑戦と敗北と
Claudeへの丸投げ
Amazonアソシエイトの審査が通ったとき、正直かなりうれしかった。せっかくなのでブログにバナーを置いてみようと思い立った。それが今回の悪戦苦闘の始まりだった。
Amazonアソシエイトの管理画面には、公式のバナー画像が用意されている。サイズもいくつかあって、「これを貼るだけでいいんだ」と思った。コードをコピーして、ブログのHTMLに貼り付けた。
……できた。画面で確認してみた。
Amazonのセールバナー画像をそのまま設置した状態。でかい、オレンジ、圧がある。
うーん。
でかい。オレンジが強い。サイトの雰囲気に全然なじんでいない。落ち着いたデザインを意識して作ったブログに、いきなり大きなオレンジの塊が現れた感じ。「バナーを置いた」というより「バナーに乗っ取られた」に近い。
これじゃない、とはっきりわかった。でも代替案もなかった。
画像バナーをそのまま使うのは無理だと判断した。サイズを小さくしてもオレンジはオレンジだし、そもそも「Amazon公式の見た目」がサイトのトーンと合っていない。
じゃあどうするか。バナーを諦めるか、自分でなにか作るか——でも自分でデザインを作るスキルはない。そこでClaude Designに相談してみることにした。
「画像バナーではなく、サイトのデザインに合ったセール告知を作ってほしい」という趣旨を伝えたところ、提案されたのがCSSだけで作るテキストカード形式のバナーだった。
画像は一切使わない。文字と枠線と色だけで構成するカードで、セール名・期間・リンクをシンプルに伝える。実装してみると、こうなった。
CSSだけで作ったテキストカード形式に変更。サイトの雰囲気に自然に溶け込んだ。
いい。だいぶいい。
オレンジの圧迫感がなくなって、ページのデザインにちゃんと馴染んでいる。セール名と期間も読みやすく、リンクも目立つ。余計な主張がない分、むしろ情報が伝わりやすくなった気がする。
しかもセールが終わったら自動で非表示になる仕組みまで入っている。終了日時をコードに書いておくと、その日を過ぎると勝手に消えてくれる。毎回手動で削除しなくていい——これは地味に便利だと思った。
「公式が用意しているものをそのまま使う」が正解とは限らない。今回の場合、Amazon提供のバナー画像は汎用的に設計されているから、特定のサイトのトーンとは合わないことがある。
そういうとき、「できないから諦める」ではなく「別の方法を探す」という選択肢がある。自分ではデザインできなくても、Claude Designに相談すれば代替案を出してもらえた。
初心者でもできることの幅は、相談相手次第でかなり変わる。そういうことを実感した出来事だった。