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