【作ってみた】CSSを使わないWEBボタン無料作成サイト3選+α

目安時間:約 10分

「CSS使えないけど、

アクションボタンが欲しい」

 

「CSSは分からないけど、

少しオシャレなボタン作れないかな」

 

読者にアクションを促すとき、

ただリンクを貼ってあるよりも、

ボタンで誘導した方が分かりやすいですよね

 

欲を言えば

  • ボタンにアイコンが入っている
  • ボタンに押したアクションがついている
  • カーソルを重ねると色が変わる

など複数のアクションがあるのが理想的

 

さすがにこのレベルだとCSSでしかできません

 

ですが、

  • アイコン入りボタン
  • 影付きボタン
  • 角丸ボタン

などちょっとランクを落としたボタンであれば、

無料のボタン作成サイトで簡単に作れます

 

ここでは、3つの無料ボタン作成サイトを紹介します

 

Button Maker

かなり細かい設定ができる

『Button Maker』は日本語表示なので、使いやすいのが特徴

 

その他の特徴として、

 

  • 日本語対応フォントが9つ
  • 背景ラインが入れられる
  • 影入れができる
  • グラデーションをかけられる
  • クリア調を設定できる
  • 好きな色の指定ができる

 

などボタン作成に必要な基本的要素がそろっています

 

自由度が高いけど…

『Button Maker』は自由度の高いWebボタン作成サイトですが、

自由度の高さは使いづらさでもあります

 

たとえば色彩感覚に疎い場合、グラデーションをつけるにしても、

どういう色と相性がいいのか分かりません

しらみつぶしに相性を確かめていくことになります

 

またカラーパレットが画像のようなパレットなので、設定が難しいです

 

 

他にも、Webボタンのサイズも作りながら考えていかなければなりません

 

ここで重要になるのが余白

 

「このボタンいいなぁ」と思うボタンは、余白にも気が配られています

余白の適切なサイズなんて分からない…

 

それでも「見やすいかな?どうかな?」と作り続けていくので、

なかなか思ったようなボタンが作れません

 

可愛らしいボタンができた

日本語対応フォントがたくさんあるおかげで、可愛らしいボタンができます

これはこれで悪くない

 

 

可愛らしいボタンが作りたいときは、使えるサイトです

 

※クリックすると『Button Maker』へ飛びます

 

Da Button Factory

基本機能が充実している

『Button Maker』とほぼほぼ同クオリティのオーソドックスなWebボタン作成サイト

とりあえずWebボタンが欲しいなら、ここでOK

『Button Maker』より使いやすいです

 

作れるボタンは、丸ボタンと角丸ボタンの2種類

背景色は、2種類のカラーパレットから選べます

 

 

英語表記でシンプルだけど…

こちらのサイトは英語表記のため、若干の分かりづらさが…

 

また日本語対応フォントは『Zenhei(CJK support)』の1種類のみで、

フォントの追加もできません

 

ホントに基本的なフォントで、基本的なWebボタンができます

 

メタリックな仕上がりのボタンができた

実際にボタンを作ってみるとメタリックな仕上がりになりました

 

 

カッコいいボタンが欲しいなら、オススメのサイトです

 

※クリックすると『Da Button Factory』へ飛びます

 

Free CTA Button Maker

アイコンのあるボタンができる

『Free CTA Button Generator』では、

紹介する中で唯一アイコン付きのボタンが作れます

アイコンは検索で見つけることができ、種類も豊富

 

 

アイコンがある場合とない場合では、ボタンの印象が大きく変わります

見栄えもよくクリックしたくなること間違いなし

 

画面に表示はできるけど…

 

テスト画面では日本語表記や、影入り、アニメーションが設定された

アイコン付きのカッコいいボタンですが、画像をダウンロードすると台無しに…

 

日本語対応フォントがないので、表記は文字化け

影入りで作っても、表示されず

残念ながらCSSなしでは本来の実力を発揮しきれませんでした

 

スタイリッシュな仕上がりのボタンができた

それでもアイコンが入ると仕上がりがよく、スタイリッシュなボタンになりました

 

※Twitterアイコン

 

※Youtubeアイコン

 

※アイコンを後ろにつけることもできます

 

アイコン付きのボタンが欲しいなら、一度試してみては?

 

※ホントは影付きで作ったボタン…

クリックすると『Free CTA Button Generator』へ飛びます

 

まだまだあったボタン作成サイト

GR Sites

 

『GR Sites』では、通常の丸ボタン、角丸ボタンの他に、

 

  • 背景入りボタン
  • ハート型、星型などのファンシーボタン
  • 矢印ボタン

 

を作ることができます

 

が、

どうやら有料登録しないと、データをダウンロードできないようです

せっかく作ったボタンですが、使うことができませんでした

以前は無料でできたらしい

 

ちなみにですが、このサイトではボタン以外にも、

 

  • ボタンアイコン
  • メニューバー
  • テキストロゴ

 

などを作ることができます

 

登録料は月$9なので、約1000円ほどで使うことができます

 

 

As Button Maker

Webボタン作成サイトでは、なかなか有名な『As Button Maker』

しかし、残念ながらボタンを作ることはできませんでした

 

ひょっとすると僕のPCに必要環境がそろっていないだけかもしれません…

必要環境は

 

  • FlashPlayer 10
  • JavaScriptが有効なブラウザ

 

です

 

 

CSSがなくてもボタンは作れるけどCSSにはかなわない

いかがでしたか?

 

今回は様々なサイトで、ボタンを作ってみました

 

結果、形や色などの外観はどれもいいんですが、

日本語フォントに対応しているのはボタンメーカーのみ

 

ボタンメーカーなら可愛らしいボタンが簡単にできるので、

とりあえずボタンが欲しいならオススメです

 

CTAボタンメーカーで、日本語表記の

アイコン付きのボタンができればベストでしたね

 

やっぱりCSSにはかないません

 

特に

 

  • カーソルを置いたときの変化が欲しい
  • クリックしたら押し込むアニメーションが欲しい

 

ならCSSでないとできません

 

結局のところ僕はテンプレートに付属のボタンを使っています

※これを機にCSSも勉強してみようかな

 

※ボタンにアクションつくことが嬉しい

 

ちなみに有料テンプレートの場合、
専用コードを入力すると特定のボタンを呼び出す機能がついています

 

僕が使っているこのテンプレート『NEO』なら、
ファビコンが標準搭載されていたり、
たくさんのデザインボックスがあるので、使い勝手もいいですよ

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ