基本設定

テキスト

ポイント:
ボタンに表示する文言を設定します。ユーザーが次に取る行動を明確に伝える役割があります。

この設定で変わること:
文言が変わるとクリック率や理解速度に直接影響します。

調整のコツ:
10〜18文字程度を目安に、動詞を含む文言（例: 詳しく見る / 申し込む）にすると意図が伝わりやすくなります。

設定項目

• テキスト: ボタン表示文言。デフォルト値は「BUTTON STYLE」です。

ホバー時に異なるテキストを表示する場合は、ホバータブを有効にしてホバーテキストを設定します。

タグ

実際と少し異なる場合があります。

ポイント:
出力するHTMLタグと属性を設定します。リンク遷移か、処理実行ボタンかをここで明確に分けます。

この設定で変わること:
SEO・アクセシビリティ・計測（GTM）に関わる情報もこの設定で確定します。

調整のコツ:
ページ遷移が目的なら a、フォーム送信やJS実行が目的なら button を選ぶと設計が破綻しません。

設定項目

• HTMLタグ: Link（<a>タグ）/ Button（<button>タグ）。デフォルトは Link です。

HTMLの意味的に、ページ遷移やURL移動が目的の場合は Link、JavaScriptによる処理実行やフォーム操作が目的の場合は Button を選択してください。SEOクローラーは <a> タグのリンクを辿るため、サイト内導線に使う場合は Link が推奨です。

Link選択時

実際と少し異なる場合があります。

実際と少し異なる場合があります。

• Link URL: 遷移先URLを設定します。計測対象ページは正規URLで登録してください。
• Link Target: 同一タブ（_self）か新規タブ（_blank）かを選択します。外部リンクは新規タブが推奨です。
• rel Attribute: noopener・noreferrer・nofollow などの属性を付与し、安全性やSEO要件を調整します。

target="_blank" を設定すると、rel="noopener" が自動的に付与されます（セキュリティ対策として内部で強制されます）。手動で noopener を外すことはできません。外部サイトへのリンクでSEO評価を渡したくない場合は nofollow を追加してください。

• Link Title: 補足的なリンク説明を設定し、アクセシビリティと意味補強に使います。

Button選択時

実際と少し異なる場合があります。

• Button Type: button / submit / reset を選択し、フォーム内での動作を定義します。

submit はフォーム送信を実行します。フォーム外で使用する場合は button を選択してください。reset はフォーム内の入力内容をすべて初期化するため、誤操作防止の観点から使用は慎重に判断してください。デフォルトは button です（フォーム送信は行いません）。

アクセシビリティ制限:
Link URL が空または # の場合、HTML出力に role="button" が自動付与されます。これにより、リンクとして機能しないボタンがスクリーンリーダーで正しく「ボタン」として読み上げられます。

ホバーテキストのフォールバック:
ホバータブでホバーテキストが未設定の場合、通常時のテキストがホバー時にもそのまま使用されます。

共通項目

実際と少し異なる場合があります。

• aria-label: 画面読み上げ向けラベル。表示文言で意図が伝わりにくい場合に設定します。スクリーンリーダー利用者へ正確な操作案内を提供します。
• Tracking ID: 計測用の識別子。GTMや解析ツールでイベント集計する際に使用します。
• Button Location: 配置位置の管理ラベル。複数CTAのABテスト時に識別しやすくなります。
• ID: 固有ID。CSS指定やJS連携で要素を一意に参照するために使います。

Tracking ID と Button Location はHTMLの data-* 属性として出力されます。GTMなどのタグマネージャーから参照する際に活用できます。ID はページ内で一意である必要があります。同じIDを複数のブロックに設定すると、CSSやJSが意図どおりに動作しない場合があります。

関連FAQ

• デバイス別設定が反映されない時の確認
• ボタンのクリック率を上げる設定順