間違ってAmazonのプライムに登録しないようにStylusでCSSを調整する
現状の問題
Amazonの商品購入ステップにPrime勧誘広告が挟まれています。
意図せず押しやすいレウアウトになっています。
悪意のあるレイアウトです。
AmazonはUIにダークパターンを採用しています。
自分のタイミングで計画的にサービスに加入しましょう。
対策
CSSで緩和します。
ブラウザ拡張機能「Stylus」を使用します。
対策CSS
CSS
@-moz-document domain("amazon.co.jp") {
#prime-signup-button {
/*display:none*/
visibility: hidden;
opacity: 0.5;
pointer-events: none;
position: relative;
}
#prime-signup-button::after {
content: "---無効化---";
visibility: visible;
position: absolute;
left: 10%;
top: 25%;
}
#prime-decline-button {
font-size: 1.1rem;
background-color: #b7ffb3;
padding: 0.5em 1em;
border: 1px solid black;
border-radius:5px;
color: black
}
}確認
では確認してみましょう。

商品をカートに入れてレジに進みます。
Prime広告が表示されます。
直前の「レジに進む」ボタンと同じレイアウトが採用されています。
次に進むつもりで推してしまうとサービスに登録されてしまいます。

CSS適応後

どうでしょう?間違い難くなったかな?
Amazon Prime に加入したいときは、Topページから入れます。ご利用は計画的に。
参考
- Stylus – chrome web store
- Stylus – Firefox
- JAVA TEA – Amazon
- Amazon Prime