*

Photoshop不要!ボタン素材を自動生成してくれるButton Makerの使い方

公開日: : 最終更新日:2017/01/16 Webサービス, ネットショップ

ボタン

Web 上にはボタンというものが至る所に存在しています。検索ボタン、閉じるボタン、送信ボタン、クリアボタン、これらは Web 上でよく見られるボタンです。

このボタン画像は一見簡単に見えて地味に手間がかかるんですよね。CSS を使ってボタンを作ると画像を一から作るよりは手間はかかりませんが、背景に模様があったり光沢があったりするボタンは高度で別の意味で手間がかかります。

Web 制作をしていると、ボタン素材が足りない!時間もないのに一から作るのか…とガックリしてしまいます。

そんな時に便利なのがボタンジェネレーターとも呼ばれるボタンの自動生成ウェブサービスです。色や文字、サイズなど簡単な指定をするだけでいとも簡単にボタン素材を作る事ができます。Photoshop がなくても綺麗なボタン素材を作れますよ。今回は Button Maker(ボタンメーカー)というウェブサービスをご紹介します。

WEBボタン素材自動生成サイト – ButtonMakerアフラット

Button Makerの使い方

buttonmaker2

サイトにアクセスするとこのようなボタン作成画面が表示されます。ここでサイズや色、文字の他、背景や模様まで細かなカスタマイズが可能です。例として検索ボタンを作ってみることにします。

buttonmaker3

まずはボタンサイズと背景色です。ボタン画像自体のサイズをピクセルで設定します。上が縦、下が横サイズなので要注意。

背景色は単色であれば1番だけに色を設定します。1の横のテキストボックスをクリックするとカラーピッカーが表示されるので好きな色を選択します。グラデーションにしたい場合は、2番の色を設定します。最後にグラデーションの方向をドロップダウンリストから「↑」か「↓」から選びます。

ちなみにこの時点で青い Create ボタンをクリックすれば現在のプレビューが表示されるのでここまでの結果をご覧ください。

buttonmaker4

次に枠線と背景の模様の設定です。背景色と同じく枠線の色をカラーピッカーから選択しましょう。太さもドロップダウンリストから1pxか2pxの中から選べます。

背景の模様はボーダー模様を付ける事が可能です。8種類の中から選べます。濃さをドロップダウンリストの中から数値を大きくするとボーダー模様がはっきりします。

buttonmaker5

続いてはテキストの設定です。検索ボタンを作るので「検索」と入力しました。そして、フォント、カラー、文字サイズ、位置を設定します。通常はテキスト1だけを設定すれば問題ありませんが、テキスト2も設定する事で、テキストを2行にする事ができます。(位置は細かく設定する必要有り)

ちなみにフォントは(J)と左に記載があるもののみ日本語対応となっています。

buttonmaker7

さて、最後の仕上げです。更なる装飾を設定可能です。

まずは丸い角。角丸ボタンを作りたい場合はここを設定します。角丸にしたくない場合は飛ばしましょう。角丸にしたい角を「左上・右上・左下・右下」にチェックを入れます。半径の数を大きくすると角がゆるやかなカーブになります。

タブは、上下左右に違う色の線を入れる事ができます。検索ボタンには使わないので飛ばします。

クリア調では、よく見る光沢ボタンのような光沢を入れる事ができます。7種類の中から選べますが、3番がおすすめです。

以上、ここまで設定できたら青色の Create ボタンを押してみましょう。

buttonmaker8

検索ボタンができました!気に入るボタンができたら、完成したボタンの上で右クリックして「対象をファイルに保存」や「名前を付けて画像を保存」を選択してダウンロードしましょう。

以上でおしまいです。

おわりに

いかがでしたでしょうか。いとも簡単に1分程で綺麗なボタン画像ができます。Photoshop などのソフトも要りませんし、画像編集スキルも不要です。簡単なボタン程度ならわざわざ作らなくても良いのでボタンメーカーは重宝しています。

WEBボタン素材自動生成サイト – ButtonMakerアフラット

上部広告

  • Pocket

おすすめトピックス

関連記事

画像のフォントを調べる事ができるサイト「What the Font」

パソコンで使えるフォント(書体)はとんでもない量があります。それはもう星の数ほどあるのではないでしょうか。有料フォントからフリーフォントまで、日々新しいフォントが作られています。 ところで、このフォントは何という名前のフ […]

Google Drive
Googleドライブをインストールしたらスマホとのファイル共有も捗るよ

Google Drive って Windows にもインストールする事ができるって知ってました? Google Drive は 15GB まで無料のクラウドストレージサービスです。Google が提供しているクラウドサー […]

スヌーピーでお馴染みピーナッツ風キャラを作れる「Get Peanutized」で作った画像をスマホでダウンロードする方法

海外でピーナッツ風キャラクター(アバター)を作れるサイトが公開されました。ピーナッツ風と聞いてもピンと来ないかもしれません。ピーナッツと言えばスヌーピーです。スヌーピーなら多くの方がご存知ではないかと思います。 そのサイ […]

TumblrのサイトをSearch Consoleに登録する方法(旧ウェブマスターツール)

ウェブサイトを運営されている方なら Google Search Console(旧ウェブマスターツール)はご存知かと思います。ざっくり言うと、ウェブサイトへの過去3ヶ月間の検索キーワード、検索結果への表示回数、Googl […]

Youtubeチャンネル登録者数を増やしたいなら動画にチャンネル登録ボタンを付けてみよう

Youtube のチャンネル登録者を増やす、それはあなたのファンを増やす事と同義です。あなたの Youtube チャンネル登録者数を増やすにはより良い動画コンテンツをアップする事が第一です。またこの人を動画を観たいと思っ […]

CSV
重くて開けないCSVをExcelで開くには分割するべし

CSV ファイルと言えば IT系の業務に携わっている人なら一度は使った事があるファイル形式だと思います。 目次1 CSVファイルとは2 重いCSVをExcelで開くには2.1 重いCSVを分割する方法3 おわりに CSV […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
スマートフォン
僕はそっとWordPressのAMPをやめた

AMP とは、Google が中心となって進める Accele

安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

Photoshopで写真の一部の色を変える色の置き換え機能の使い方

この写真のこの部分だけ色を変えたい!この商品画像の色を変えたい

→もっと見る