明確でアクセシブルなWebサイトCTAを作成

CTAボタン生成ツール

ウェブサイトのCTAリンクをデザインし、色やサイズをプレビューして、テキストのコントラストを確認し、安全なHTMLとCSSをコピーまたはダウンロードします。

CTAの詳細とスタイル

宛先と表示ラベルを入力し、ウェブサイトに適したボタンスタイルを選択してください。

英字、数字、アンダースコア、またはハイフンを含む1つのクラス名。
完全な HTTP または HTTPS アドレスを入力してください。トラッキングパラメータと最終的な宛先を確認してください。
任意。表示されているテキストだけでは目的先が明確にわからない場合にのみ使用してください。
0から48ピクセルまでの整数を使用してください。

CTAのテキストとリンク先を入力して、ボタンコードを作成してください。

CTAのプレビューとコード

公開する前に、表示されるリンク、リンク先ホスト、コントラスト、フォーカススタイル、および生成されたマークアップを確認してください。

CTAのプレビュー、HTML、およびCSSはここに表示されます。

ウェブサイトのCTAを作成する方法

1. 次の行動について説明してください

「見積もりを依頼する」や「製品仕様を確認する」など、訪問者に何が得られるかを伝える目立つテキストを使用してください。“

2. 被写体とコントラストを確認する

最終的なURL、デフォルト色とホバー時の色、ボタンのサイズ、アクセシビリティ名、およびキーボードフォーカスの表示スタイルを確認してください。

3. コードを追加してテストする

HTMLとCSSをサイトに配置したら、キーボード、スクリーンリーダー、スマートフォン、デスクトップブラウザを使って、実際のリンクをテストしてください。

コード、コントラスト、およびアクセシビリティに関する注意事項

このCTAはリンク先URLを開くため、ジェネレーターはスタイルが適用されたアンカーを作成します。ボタンのテキスト、アクセシビリティラベル、クラス名、およびURLは検証され、エスケープ処理が施されます。完全なHTTPまたはHTTPS形式のリンク先のみが受け入れられます。新しいタブで開く場合、自動的に `noopener noreferrer` が追加されます。nofollow は、選択された場合にのみ追加されます。

コントラストの計算は、WCAG 2.2 の相対輝度式に基づいています。「コンパクト」および「標準」のプリセットでは、4.5:1 の AA テキスト基準が使用されます。 「Large」プリセットは、ウェイトが700または800の場合、3:1の「大文字」基準を使用します。ウェイト600の大文字については、引き続き4.5:1が使用されます。 デフォルトの色とホバー時の色の両方を確認してください。このテストはCTAテキストの色のみを対象としており、フォーカス時の視認性、周囲のレイアウト、ズーム、タッチサイズ、リンクの目的、またはページ全体のアクセシビリティについては対象外です。

W3C:コントラスト(最低基準)について

データの取り扱い: CTAの詳細、プレビュー、生成されたコード、クリップボードへのコピー、およびダウンロードデータは、すべてお使いのブラウザ内に保存されます。ここに入力された内容は、このツールによってアップロードされたり保存されたりすることはありません。

キャンペーン資産を、連携のとれた市場での存在感へと変える

TradeGoAIのサービスを活用して、より分かりやすい販売コンテンツを作成し、市場投入可能な資産を整理し、国際市場での認知度を高めましょう。

Explore TradeGoAI Services →

よくある質問

このジェネレーターはリンクを作成しますか、それともフォームのボタンを作成しますか?

これは、CTA(行動喚起)ボタンのスタイルが適用されたアンカーリンクを作成します。CTAをクリックすると別のページが開く場合に使用してください。フォームの送信、ダイアログの表示、現在のインターフェースの変更などの操作には、実際のボタン要素を使用してください。

どのような宛先URLが許可されていますか?

宛先は完全なHTTPまたはHTTPSのURLでなければなりません。JavaScript、データ、ファイル、相対URL、および認証情報を含むURLは拒否されます。CTAを公開する前に、最終的な宛先とトラッキングパラメータを確認してください。

このコントラストの結果は何を意味するのでしょうか?

この結果は、選択したテキストの色を、デフォルトの背景色およびホバー時の背景色の両方と比較したものです。WCAG 2.2 AA 基準に基づき、通常のテキストについては 4.5:1、フォントサイズ 700 または 800 の「大」プリセットについては 3:1 のコントラスト比を使用しています。 この色に関するチェックに合格したからといって、それだけでページ全体がアクセシブルであることを証明するものではありません。

アクセシビリティラベルはいつ追加すべきですか?

オプションのアクセシビリティ用ラベルは、表示されているCTAテキストだけではリンク先が明確に説明されていない場合にのみ使用してください。まずは、明確で視認性の高いテキストを優先してください。生成されたaria-labelは、支援技術に対してリンク名として表示テキストに取って代わるため、同じ目的を説明するものでなければなりません。

CTA情報はアップロードまたは保存されていますか?

いいえ。検証、プレビュー、コントラストの計算、コードの生成、コピー、ダウンロードはすべてお使いのブラウザ内で行われます。TradeGoAIは、このツールに入力された内容を取得したり保存したりすることはありません。

上部へスクロール