無料CTAボタン作成ツール

プレビューを見ながら行動喚起ボタンをデザインし、数秒できれいなHTMLとCSSをコピーできます。プリセットを選び、色とホバー効果を決めたら、そのままランディングページに貼り付けるだけです。

スタイルから始める
テキスト
色
形とサイズ
効果
影
ホバー時
<a href="#" class="cta-button">今すぐ始める</a>

3ステップでCTAボタンを作る方法

ブランドに合った行動喚起ボタンをデザインし、そのまま使えるきれいなHTMLとCSSを1分もかからずにコピーできます。デザインツールもコーディングも不要です。

  1. 01

    プリセットを選んで文言を書く

    ソリッド、グラデーション、アウトライン、ピルなどのスタイルプリセットから始め、「今すぐ始める」「特典を受け取る」など、使いたい行動喚起の文言を入力します。

  2. 02

    色、サイズ、ホバーを調整

    各コントロールで色、サイズ、角の丸み、影、ホバー効果を設定します。設定を変えるたびに、プレビューがその場で更新されます。

  3. 03

    HTMLとCSSをコピー

    HTMLかCSSのタブに切り替えて「コードをコピー」を押します。ランディングページ、サイト、メールテンプレートに貼り付ければ、そのままボタンが動きます。

このツールでCTAボタンを作る理由

多くのランディングページで、いちばんクリックされる要素が行動喚起ボタンです。デザインが決まれば、訪問者は「はい」と言いやすくなります。望まないかぎり、コードに触れる必要もありません。

公開する前に見て確かめる

調整するたびに実物どおりのボタンがプレビューされるので、1行もコピーしないうちから、ページ上での見え方が正確にわかります。

そのまま貼れるきれいなコード

生成されるHTMLとCSSは整理されていて、標準に沿っています。どのサイト、ページビルダー、メールに貼っても問題なく動きます。

すぐ見栄えするプリセット

ソリッド、グラデーション、アウトライン、ピル、3D、ゴーストのプリセットが、ワンクリックで洗練された出発点をくれます。あとは好みに合わせて詰めるだけです。

無料、非公開、登録不要

すべてブラウザー内で動作します。アカウントも制限もなく、デザインが端末の外に出ることもないので、あなたのものであり続けます。

CTAボタン作成ツールが活躍する場面

ランディングページからメール施策まで、マーケターや制作担当が、手早いボタンデザインを日々の制作物にどう活かしているかを紹介します。

ランディングページ

ランディングページの主役となる行動喚起をデザインし、ファーストビューの中でも目立たせて、訪問者をオファーへ導きます。

メール施策

インラインスタイル付きのHTMLを生成すれば、外部スタイルシートなしでも各メールソフトでボタンが安定して表示されます。

サイトビルダー

WordPress、Webflowなど、独自スタイルを貼り付けられるビルダーのカスタムコード欄にCSSを入れるだけです。

ボタンのABテスト

色や文言の違うボタンを2〜3種類すばやく作り、どれがいちばん成果を出すかを試せます。

プロトタイプ・モックアップ

デザインツールを開いたりゼロから作ったりせずに、デモや社内共有用のモックアップに使える実物さながらのボタンを用意できます。

デザインシステム

統一したボタンのスタイルを決め、CSSを一度コピーすれば、同じクラスをすべてのページとキャンペーンで使い回せます。

よくあるご質問

CTA（行動喚起）ボタン作成ツールは、見た目を確認しながらボタンをデザインし、そのまま使えるHTMLとCSSをコピーできる無料ツールです。テキスト、色、サイズ、角の丸み、影、ホバー効果を調整すると、ツールがきれいなコードを書き出すので、どんなサイトやランディングページ、メールテンプレートにも貼り付けられます。
ソリッド、グラデーション、アウトライン、ピルなどのプリセットを選び、ボタンの文言を入力します。あとは色、サイズ、角の丸み、ホバー効果を、プレビューを見ながら整えていくだけです。納得できたらHTMLかCSSのタブに切り替えて「コードをコピー」を押します。ページに貼り付ければ、そのままボタンが動きます。
はい。CTAボタン作成ツールは完全無料で、登録も回数制限もありません。書き出されるHTMLとCSSは自由に使えるので、個人でも商用でも、いくつのサイト、ランディングページ、キャンペーンに使っても構いません。
はい、大丈夫です。スライダーとカラーピッカーでボタンをデザインすれば、コードはツールが書いてくれます。CSSがわかる方なら、出力は整理されていて拡張しやすいので、スタイルシートに入れてそのまま編集を続けられます。
はい。生成されるCSSは相対単位と標準的なプロパティを使っているため、最新のブラウザーや端末で同じように表示されます。全幅表示のオプションを有効にすれば、小さい画面に合わせてボタンを広げることもできます。
作れます。グラデーションのプリセットは好きな2色を混ぜて今どきの見た目にし、3Dのプリセットは重ねた影で奥行きを出します。どのプリセットも出発点にすぎないので、色、サイズ、丸み、効果の設定でさらに調整できます。
「ホバー時」の設定を開いて効果を選びます。リフトはボタンを少し持ち上げ、ダークは色を深くし、グローは柔らかい光の輪を足し、拡大は少しだけ大きくします。生成されるCSSには対応する :hover ルールが含まれているので、コードをページに貼った瞬間から効果が働きます。
成果の出るCTAボタンは、行動を促す文言（今すぐ始める、特典を受け取る）を使い、背景としっかり対比する色を選び、押しやすいよう余白をゆったり取り、そのセクションの中心だとわかる十分な大きさがあります。注意が分散しないよう、1画面につき主要なCTAはひとつに絞りましょう。
はい。「共有リンクをコピー」を押すと、デザイン全体がURLに書き込まれます。そのリンクを開いた人には、まったく同じボタンがコピーできる状態で表示されます。チームメンバーにデザインを送ったり、あとで使う版を保存したりするのに便利です。
いいえ。すべてJavaScriptによりブラウザー内だけで動作します。ボタンの文言やスタイルが端末の外に出ることはなく、当社のサーバーに送信されることもありません。

新しいボタンは、成果の出るランディングページに

優れたCTAボタンも、成果を出すために作られたページでなければ効きません。LanderLabなら軽快でスマートフォンにも最適化されたランディングページを数分で公開でき、そこにボタンを効果的に配置できます。

今すぐ始める - 無料です

クレジットカード不要

LanderLabロゴ