JINMUSOFTWARE

間違ってAmazonのプライムに登録しないようにStylusでCSSを調整する

prime

現状の問題

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ページから入れます。ご利用は計画的に。

参考

参考ページ

YouTubeのレイアウトを変更して見やすくする。「Stylus」を使用します。