- 更新日: 2017年3月21日
- 公開日: 2015年8月7日
定番ボタンからアニメーションまで！ボタン素材サイト14選+α
webサイトの目的を達成するために「ボタン」の存在は非常に大きな意味をもっています。商用サイトであれば「購入」ボタンをクリックして欲しいですし、SNSサイトであれば「ユーザー登録」「投稿」などユーザーの利便性が求められます。今回は、そんなボタン・ストレスから少しでも開放されるように定番のボタン素材提供サイトからブラウザ上でボタンを作成できるサイト、それから今年トレンドのアニメーション・ボタンをマネできるサイトまで幅広くご紹介します。
目次
- web定番ボタンからトレンドボタンまでの素材サイト集
- オンライン・ボタン作成「Da Button Factory」
- オンライン・ボタン作成「FREE CALL-TO-ACTION BUTTON GENERATOR」
- オンライン・ボタン作成「As Button Generator」
- オンライン・ボタン作成「GRSites」
- オンライン・ボタン作成／円形「Wacky Buttons」
- オンライン・ボタン作成／円形「The Button Designer」
- オンライン・ボタン作成／CSS「CSS Button Generator」
- オンライン・ボタン作成／CSS「Online Button Maker」
- オンライン・ボタン作成／CSS「Button Generator」
- ボタン素材ダウンロード「ShanaBrian」
- ボタン素材ダウンロード「取り放題.com」
- ボタン素材ダウンロード「blue-green」
- ボタン素材ダウンロード「OCEANICS.NET」
- アニメーションボタンのサンプルサイト
- その他ボタン関係の便利サイト
- まとめ
web定番ボタンからトレンドボタンまでの素材サイト集
オンライン・ボタン作成「Da Button Factory」
ダウンロードのファイル形式／.png .gif .jpg .ico
** CSS コードの表示／可 ボタンアニメーション／不可**
機能がシンプルで使いやすい。とりあえずのボタン作成ならこちらで十分です。
オンライン・ボタン作成「FREE CALL-TO-ACTION BUTTON GENERATOR」
FREE CALL-TO-ACTION BUTTON GENERATOR
ダウンロードのファイル形式／.png
** CSS コードの表示／可 ボタンアニメーション／不可**
ボタン内に矢印や $ マークなどのアイコンを追記することが可能です。
オンライン・ボタン作成「As Button Generator」
ダウンロードのファイル形式／.png CSS コードの表示／不可
** ボタンアニメーション／不可**
日本語表示のサイトで安心してボタン作成を行うことができます。用意されている機能もシンプルで扱いやすくなっています
オンライン・ボタン作成「GRSites」
ダウンロードのファイル形式／.png .gif .jpg .bmp .tiff
** CSS コードの表示／不可 ボタンアニメーション／不可**
ノーマルボタン、背景画像挿入型ボタン、ファンシーボタン、矢印ボタンの4種を作成できます。標準のフォントでは日本語表示できなく、日本語フォントをアップロードして使う必要があります。
オンライン・ボタン作成／円形「Wacky Buttons」
円形状のボタン作成に特化したサイトになります。pngファイルは、プレビュー画面から右クリックで画像の保存を指定すると、png形式で保存可能となっています。
ダウンロードのファイル形式／.png .wb3
CSS コードの表示／不可
ボタンアニメーション／不可
ノーマルボタン、背景画像挿入型ボタン、ファンシーボタン、矢印ボタンの4種を作成できます。標準のフォントでは日本語表示できなく、日本語フォントをアップロードして使う必要があります。
オンライン・ボタン作成／円形「The Button Designer」
ダウンロードのファイル形式／.jpg
** CSS コードの表示／不可 ボタンアニメーション／不可**
円形状のボタン作成に特化したサイトで、ユーザー登録することによって画像の作成、管理が可能となります。通常は作成したボタンを印刷するのみですが、特定のアドレスにアクセスすると jpg ファイルを開くことができます。
http://www.button-designer.com/ButtonDesigner/buttons/ ユーザー名 / ファイル名 .jpg
後は画像を右クリックして、画像を保存すると jpg ファイルをゲットできます。
オンライン・ボタン作成／CSS「CSS Button Generator」
ダウンロードのファイル形式／ダウンロード無
** CSS コードの表示／可 ボタンアニメーション／可**
ブラウザ上でボタンのレイアウト、文字を調整し、表示される CSS コードをコピーして、自分の CSS ファイルに貼り付けるタイプのボタン作成サイトになります。予めアニメーションなども設定されているので、初心者の方でも比較的簡単に操作できます。
オンライン・ボタン作成／CSS「Online Button Maker」
ダウンロードのファイル形式／ダウンロード無
** CSS コードの表示／可 ボタンアニメーション／可**
ボタンアニメーションをマウスオンとクリックした時の2動作にわたって指定できます。細部まで設定できるようになっている半面、初心者には少し使いにくいかもしれません。
オンライン・ボタン作成／CSS「Button Generator」
ダウンロードのファイル形式／ダウンロード無
** CSS コードの表示／可 ボタンアニメーション／不可**
機能がシンプルで、直感的にボタンを作成することができます。ただし、画面上に広告がいくつか表示されているので、目障りに感じるかもしれません。
ボタン素材ダウンロード「ShanaBrian」
ダウンロードのファイル形式／.png
** 商用／OK 2次加工／OK**
典型的なボタン素材の無料ダウンロードサイトになります。お好みのサイズやカラーからボタンを選択することができます。文字入り版と無字版がありますので、用途に応じてダウンロードを使い分けることができます。文字なしボタンに文字を追記する場合はオンラインエディターやペイントソフトが有効と考えられます。
ボタン素材ダウンロード「取り放題.com」
ダウンロードのファイル形式／.png
** 商用／OK 2次加工／OK**
商用向けのボタン素材提供サイトになります。
ボタン素材ダウンロード「blue-green」
ダウンロードのファイル形式／.gif
** 商用／OK 2次加工／OK**
キュートなボタンを無料でダウンロードできるサイトになります。
ボタン素材ダウンロード「OCEANICS.NET」
ダウンロードのファイル形式／.gif
** 商用／OK 2次加工／OK**
6,000 種類以上の豊富なストック量を誇るボタン素材の提供サイトになります。
アニメーションボタンのサンプルサイト
アニメーションボタンのサンプルを紹介しているサイトをご紹介します。
ボタン枠にアニメーション
クリックで紙飛行機が飛んでいくアニメーション
ダウンロードの進捗をアニメーションするボタン
電気のスイッチ風ボタン
スマホ管理ボタン風のボタン
マウスオンで枠が回転するボタン
アニメーション・ボタンのコード集「Hover」
アニメーション・ボタンのコード集「codrops」
その他ボタン関係の便利サイト
webデザインにおいてボタン・レイアウトを検討する時に役立つツールをいくつかご紹介します。
アニメーションボタンのGIFファイル作成なら「GIFMaker.me」
オンライン・イラストツールイラストレーター風
オンライン・イラストツールフォトショップ風
オンラインCSSエディター「CODEPEN」
オンラインCSSエディター「w3schools.com」
＼一流デザイナーのスキルが身に付く／
まとめ
いかがでしたでしょうか？webデザインとマッチしそうなボタンは見つかりそうでしょうか？今年のトレンドは「ゴーストボタン」に「アニメ―ション」という組み合わせです。ボタン素材のダウンロードではこうしたトレンド採用は難しいですが、CSSでのボタン装飾なら簡単にトレンド・ボタンをwebデザインに取り入れることができます。WebデザインでCSSが慣れていない方でも、とりあえずサンプルコードをコピペしてトライしてみるといいと思います。ちなみにゴーストボタンの作成は、ボタンレイアウトのbackground部分を消しちゃえばゴースト・ボタンになりますよ。
- この記事を書いた人
- オシママサラ
