【アフィリエイト規制対策】「広告」の文言を明記したボタンのデザイン案

アフィリエイト規制が進む中、リンク部分にも「アフィリエイトリンクには広告である旨を表記しなさい」となる可能性があります。

そのため、ボタンに "広告" や "AD" などの追記をしないといけなくなるかもしれないので、いくつかデザイン案を考えてみました。

ボタン内に広告表記

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

コードを見る

余計な装飾を省いています。

<!-- 左に追記 -->
<div class="button btn-left-ad">
  <a href="#">詳細はこちら</a>
</div>

<!-- 右に追記 -->
<div class="button btn-right-ad">
  <a href="#">詳細はこちら</a>
</div>

<!-- 上に追記 -->
<div class="button btn-top-ad">
  <a href="#">詳細はこちら</a>
</div>

<!-- 下に追記 -->
<div class="button btn-btm-ad">
  <a href="#">詳細はこちら</a>
</div>

/*** ボタン用装飾 ***/
.button{
  text-align: center;
  margin: 2rem;
}
/* リンク部分 */
.button a{
  display: inline-block;
  padding: 1.2em 5.2em;
  color: #fff;
  background: #2e8b57; /*ボタン色*/
  text-decoration: none; /*下線削除*/
  border-radius: 100vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 20%);
  position: relative; /*疑似要素の基点*/
}

/**************************************
 広告表記の追加スタイル
**************************************/

/*** 左 ***/
.btn-left-ad a:before{
  content: "[Ad]";
  position: absolute;
  left: 4em; /*左から3.5em地点*/
  top: 50%;
  transform: translateY(-50%); /*縦軸中央*/
  font-size: 0.6em;
  opacity: 0.9; /*文字の濃さ*/
}

/*** 右 ***/
.btn-right-ad a:after{
  content: "[Ad]";
  position: absolute;
  right: 4em; /*右から3.5em地点*/
  top: 50%;
  transform: translateY(-50%); /*縦軸中央*/
  font-size: 0.6em;
  opacity: 0.9; /*文字の濃さ*/
}

/*** 上 ***/
.btn-top-ad a:before{
  content: "[Ad]";
  position: absolute;
  top: 0.4em; /*上から0.4em地点*/
  left: 50%;
  transform: translateX(-50%); /*センター*/
  font-size: 0.6em;
  opacity: 0.9; /*文字の濃さ*/
}

/*** 下　***/
.btn-btm-ad a:before{
  content: "[Ad]";
  position: absolute;
  bottom: 0.4em; /*下から0.4em地点*/
  left: 50%;
  transform: translateX(-50%); /*センター*/
  font-size: 0.6em;
  opacity: 0.9; /*文字の濃さ*/
}

ただ単にボタンの文言の傍に "[Ad]" と表記したもの。テキストは疑似要素で書いています。

シンプルすぎてダサいのですが、アフィリエイトリンクであることを強調し過ぎないぐらいの塩梅です。（"広告" の表記に変えれば更に明確に）

なお、重要なのは疑似要素の部分なので、aタグにposition: relative;と疑似要素を追加すれば、既存のボタンでも使えます。（若干の位置調整は必要です）

Font Awesomeを使って広告表記する

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

コードを見る

余計な装飾を省いています。

<!-- FontAwesomeの読み込み -->
<head>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

<body>
  
  <!-- ボタン -->
  <div class="button btn-right-ad">
    <a href="#">詳細はこちら</a>
  </div>
  
</body>

/*** ボタン用装飾 ***/
.button{
  text-align: center;
  margin: 2rem;
}
/* リンク部分 */
.button a{
  display: inline-block;
  padding: 1.2em 5.2em;
  color: #fff;
  background: #2e8b57; /*ボタン色*/
  text-decoration: none; /*下線削除*/
  border-radius: 100vh;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 20%);
  position: relative; /*疑似要素の基点*/
}

/**************************************
 広告表記の追加スタイル
**************************************/

/*** 右 ***/
.btn-right-ad a:after{
  font-family: "Font Awesome 5 Free";
  content: "\f641"; /*Unicode*/
  position: absolute;
  right: 1.5em; /*右から1em地点*/
  top: 50%;
  transform: translateY(-50%); /*縦軸中央*/
  font-size: 1.5em;
  font-weight: 900; /*必須*/
}

Font Awesomeには広告を意味する "Ad" のアイコンがあるので、それを使用するのも手です。

CSS自体は上記のものとほぼ同じですが、headタグにFont Awesomeの読み込み処理を追記する必要があります。

付箋っぽく広告表記

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

コードを見る

余計な装飾を省いています。

<div class="button btn-label-ad1">
  <a href="#">こちらはスタイル1</a>
</div>

<div class="button btn-label-ad2">
  <a href="#">こちらはスタイル2</a>
</div>

/*** ボタン用装飾 ***/
.button{
  text-align: center;
  margin: 2rem;
}
/* リンク部分 */
.button a{
  display: inline-block;
  padding: 1.2em 5.2em;
  color: #fff;
  background: #2e8b57; /*ボタン色*/
  text-decoration: none; /*下線削除*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 20%);
  position: relative; /*疑似要素の基点*/
}


/**************************************
 広告表記の追加スタイル
**************************************/

/*** スタイル1 ***/
.btn-label-ad1 a:before{
  content: "Ad";
  position: absolute;
  left: 0; /*左端*/
  top: 0;
  height: 100%;
  writing-mode: vertical-rl; /*縦書きにする*/
  text-orientation: upright; /*英数字を縦に*/
  font-size: 0.7em;
  font-weight: bold;
  color: #2e8b57; /*文字色はボタン色に*/
  background: #C9EDD8; /*背景色*/
}

/*** スタイル2 ***/
.btn-label-ad2 a:before{
  content: "[Ad]";
  position: absolute;
  left: 0; /*左端*/
  top: 0;
  height: 100%;
  writing-mode: vertical-rl; /*縦書きにする*/
  font-size: 0.7em;
  font-weight: bold;
  color: #2e8b57; /*文字色はボタン色に*/
  background: #C9EDD8; /*背景色*/
}

左端に広告表記 "Ad" を表示した付箋風のボタンです。
スタイル1はともかく、スタイル2の方は「アフィリエイト広告だとちゃんと表記していた」と言えるかどうかギリギリのラインですw

左端の "AD" の部分は縦書き表示にしておき、背景をボタンより明るい色、文字色をボタン色にしています。ボタンの色が明るい場合は、背景色を暗くするのが良いでしょう。

なお、スタイル1と2の違いは、text-orientation: upright;の有無です。これによって英数字の縦書き時の向きが変わっています。（スタイル1の向きでは "[ ]" が縦向きになってしまうので省いています）

縦書きについての詳細はこちら

文字を縦書きにするCSS