2025-09-03

ChatGPT風リンクバッジをCSSで作成する方法

はじめに

ブログ記事やウェブサイトにリンクを設置する際、単なるテキストリンクよりも「視認性が高く、デザイン的に洗練されたリンク」の方がユーザー体験を向上させます。本記事では、小さい字で端が丸いChatGPT風のリンクバッジをCSSで実装する方法です

なぜリンクデザインが重要か？

クリック率向上：デザイン性のあるリンクは視覚的に目立ち、ユーザーがクリックしやすくなります。
滞在時間の増加：読みやすく整理されたデザインは、サイト全体のユーザー体験を向上させます。
SEO効果：Googleは直接的にリンクのデザインを評価しませんが、ユーザー行動（CTRや滞在時間）が改善されれば間接的にSEO効果が期待できます。

ChatGPT風リンクバッジのCSSコード

以下のコードをHTMLファイルの<style>タグ内に記述してください。

/* 行内で並べやすい行コンテナ（任意） */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ベースの丸い小型リンク */
.chip-link {
  --fg: #0f172a;       /* 文字色（ライト） */
  --bg: #f1f5f9;       /* 背景色（ライト） */
  --bd: #e2e8f0;       /* ボーダー色（ライト） */

  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .78rem;      /* 小さめ文字 */
  line-height: 1;
  font-weight: 600;
  padding: .4em .7em;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  border-radius: 999px;   /* 端まる */
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.chip-link:hover {
  transform: translateY(-1px);
  background: #e2e8f0;
  border-color: #cbd5e1;
  text-decoration: none;
}

.chip-link:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}

.chip-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45); /* アクセシブルなフォーカス */
}

/* さらに小さくしたいとき */
.chip-link--xs {
  font-size: .7rem;
  padding: .32em .6em;
}

/* ChatGPT風：緑～青系グラデ＋白文字 */
.chip-link--brand {
  --fg: #ffffff;
  --bg: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  --bd: rgba(255,255,255,.28);
  color: var(--fg);
  border-color: var(--bd);
  background: var(--bg);
  box-shadow: 0 4px 14px rgba(16,185,129,.22);
}

.chip-link--brand:hover {
  filter: brightness(1.05);
}

/* 外部リンクの矢印（target=_blankのとき自動で付与） */
.chip-link[target="_blank"]::after {
  content: "↗";
  font-size: .9em;
  margin-left: .25em;
  line-height: 1;
  aria-hidden: true;
}

/* ダークモード最適化 */
@media (prefers-color-scheme: dark) {
  .chip-link {
    --fg: #e5e7eb;
    --bg: #0b1220;
    --bd: #1f2937;
    box-shadow: none;
  }
  .chip-link:hover {
    background: #111827;
    border-color: #374151;
  }
  .chip-link--brand {
    box-shadow: 0 6px 18px rgba(16,185,129,.28);
  }
}

/* 高コントラストユーザー向け */
@media (prefers-contrast: more) {
  .chip-link { border-width: 2px; }
}

/* 実要素で外部リンクアイコンを追加する場合のスタイル */
.ext-icon {
  font-size: .9em;
  line-height: 1;
  display: inline-block;
  margin-left: .25em;
  vertical-align: middle;
}

/* スクリーンリーダー向けにだけ読ませる */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

HTMLでの利用例

<div class="chip-row">
<a class="chip-link" href="https://mojeld.com">通常リンク</a>
<a class="chip-link chip-link--brand" href="https://mjeld.com/headline/" target="\_blank" rel="noopener">HEADLINE</a>
</div>

出力イメージ

通常リンク HEADLINE

「通常リンク」 → グレー背景の丸いバッジ
「HEADLINE」 → ChatGPT風の緑〜青グラデーション背景バッジ

アクセシビリティの配慮

疑似要素で外部リンクアイコンを追加した場合、スクリーンリーダーに正しく伝わらない可能性があります。その場合は以下のように実要素を使い、aria-hidden="true" を付与すると安心です。

<a class="chip-link chip-link--brand" href="https://mojeld.com" target="_blank" rel="noopener">
サンプルリンク
<span class="ext-icon" aria-hidden="true">↗</span>
</a>

サンプルリンク

まとめ

ChatGPT風のリンクバッジは、CSSで簡単に実装できる。
アクセシビリティ対応を忘れずに行うと、より多くのユーザーに優しいデザインになる。