「ボタンジェネレーター(button generator)」で検索すると、見つかるのはほとんどが開発者向けにCSSコードを吐き出すツールばかりです。ウェブサイトを作っていて、コードを貼り付ける場所が分かっているなら、それで十分でしょう。でも、ただ見栄えのいいボタンを画像として手に入れたいだけだとしたら?動画のサムネイルに載せる登録ボタン、メール用のコールトゥアクション、ゲームに置くピカピカの「Play」ボタン、ストアページのダウンロードボタンが欲しいだけなら、どうでしょう?

まさにそのためにあるのがボタンジェネレーターです。これは、本物の立体感と仕上がりを備えたボタンをビジュアルにデザインし、そのまますぐ使える画像としてダウンロードできる無料のオンラインツールです。コードもCSSも、会員登録もいりません。

コードではなく、画像のボタン

ここが決定的な違いなので、はっきりさせておく価値があります。多くのボタンジェネレーターはHTMLとCSSを生成します。一方、TextStudioのボタンジェネレーターが生成するのは画像です。背景が透明なくっきりしたPNG、あるいはボタンを動かしたいならアニメーションするGIF、APNG、WEBMです。

だからこそ、コードを書けない(あるいは書きたくない)さまざまな場面にぴったりです。

  • YouTubeやTwitchのサムネイル、イントロ、オーバーレイ
  • ボタン画像がほぼ唯一の確実な選択肢になるメールマガジン
  • ゲームやアプリのインターフェース
  • マーケットプレイスやストアの出品ページ
  • SNSの投稿やバナー

出力が本物の画像なので、3Dのベベル、グラデーション、グロー、シャドウ、アイコンなど、素のCSSボタンではなかなか得られない表現まで、クリエイティブを完全にコントロールできます。

ボタンをデザインする

すべてはDesign(デザイン)タブから始まります。ここはText(テキスト)、Style(スタイル)、Icon(アイコン)という3つのシンプルなサブタブに分かれています。

ボタンジェネレーターのデザインパネルでカスタム3Dボタンをデザインする様子

Textでは、ラベルを入力して形を整えます。フォント、サイズ、色、揃え方、行の高さ、文字間隔を調整できます。遊び心のあるものから企業向けのものまで、どんな雰囲気にも合う数百種類のフォントが用意されています。

Styleは、ボタンが平坦な見た目をやめ、本物らしく見え始める場所です。使えるのは次のとおりです。

  • 単色または滑らかなグラデーションによる塗り(Fill)
  • 角を鋭くも、完全に丸めたピル型にもできる角丸(Corner radius)
  • コントラストをつけるボーダーとアウトライン
  • 押せそうな本物の3D感を出すベベル(Bevel)
  • 奥行きを生むドロップシャドウとインナーシャドウ
  • あの光沢のあるガラスのような仕上がりを与えるハイライト

Iconでは、テキストの隣にシンボル(ハート、再生の三角、矢印、星など多数)を添えられるので、「Watch now」や「Like」ボタンがひと目で伝わります。

変更はすべて、左側のライブプレビューにリアルタイムで反映されます。つまり、実際にダウンロードするものをそのままデザインしていることになります。

動きをつける

静止したボタンでも構いません。でも、アニメーションするボタンは注目を集めます。そして、このツールが本領を発揮するのがまさにここです。Animation(アニメーション)タブを開けば、Bounce、Bounce 3D、Breathe、Drop、Explode、Flip、Flashなど、数十種類の完成済みエフェクトから選べます。

Animationタブで数十種類のボタンアニメーションのプリセットから選ぶ様子

ボタン全体、テキスト、アイコンをそれぞれ独立してアニメーションさせ、再生時間、ループ間の間隔、イージングカーブを細かく調整できます。登録ボタンにさりげない「Breathe」を、ゲームボタンにインパクトのある「Bounce 3D」を。こうした細部こそが、人にクリックさせるのです。

正しいフォーマットで書き出す

ボタンが思いどおりになったら、Export(書き出し)タブへ進みましょう。出力サイズ(非常に大きな高解像度ファイルまで対応)と、背景を透明にするかどうかを選べます。

Watch NowボタンをPNG、GIF、APNG、WEBMとして書き出す様子

静止したボタンなら、PNGでダウンロードしましょう。透明を保持するので、どんな背景の上にもきれいに乗ります。

アニメーションボタンなら、3つの選択肢があります。

  • GIF:ほぼどこでも動く、汎用のアニメーション形式
  • APNG:完全な透明を保ったまま、より高品質なアニメーションを実現
  • WEBM:ウェブ向けの軽量な動画

個々のフレームをまとめたZIPとして書き出したり、あとで編集を続けられるようプロジェクトを保存したりもできます。フレームレート(FPS)を設定すれば、アニメーションの滑らかさをコントロールできます。

テンプレートから始める

まっさらなボタンから始める必要はありません。Templates(テンプレート)タブは、ワンクリックで読み込んで手直しできる、完成済みデザインの検索可能なライブラリです。

すぐ使えるSNS向け・ゲーム向けボタンが並ぶボタンジェネレーターのテンプレートギャラリー

SNSプラットフォーム向け(登録、フォロー、今すぐ聴く)、ゲーム向け(プレイ、ゲーム開始、オプション)、定番のコールトゥアクション向け(ダウンロード、お問い合わせ、依頼する)のボタンがそろっています。必要なものに近い1つを選び、テキストと色を変えれば、数秒で完成したボタンが手に入ります。

これで作れるもの

その幅の広さを示すアイデアをいくつか。

  • YouTubeサムネイル用の赤い「Watch now」ボタン
  • 配信オーバーレイ用の光沢のある「Subscribe」ボタン
  • アプリページ用の、矢印アイコン付きの明るい「Download」ボタン
  • モバイルゲームのメニュー用のアニメーションする「Play」ボタン
  • マーケットプレイスの出品用のすっきりした「Buy now」ボタン
  • 季節のメールキャンペーン用の、華やかでアニメーションするボタン

よくある質問

ボタンジェネレーターは無料ですか? はい。アカウントなしで、無料でボタンをデザインして書き出せます。

背景を透明にできますか? はい。PNGやAPNGを書き出す前に透明背景のオプションをオンにすれば、後ろに不格好な四角形が残ることなく、どんなデザインにもボタンをなじませられます。

ボタンをクリックできるようにするには? 画像そのものはリンクを保持できません。クリックは常に、その周りのページ側から生まれます。だからリンクは、ボタンを置く場所で追加します。ウェブサイトビルダーならPNGを挿入してそのリンク機能や「リンクを追加」オプションを使い、ウェブ版のGmailやOutlookなら画像を挿入して選択し、リンクボタンでURLを指定します。画像は見た目を担い、リンクはそれを使う場所に宿ります。

ボタンは何に使えますか? ビジュアルなものなら何にでも。動画、配信、メール、ゲーム、アプリ、ストア、SNS投稿、モックアップなど。書き出すのは標準的な画像なので、画像を受け付けるどんなツールでも使えます。

最初のボタンをデザインしよう

洗練されたコールトゥアクションが1つ必要なときも、プロジェクト用にそろいのボタン一式が必要なときも、ボタンジェネレーターならコードを1行も書かずにそこへたどり着けます。

👉 ボタンジェネレーターを開くして、今すぐ最初のボタンをデザインしましょう。無料です。