*

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

おすすめトピックス

関連記事

レスポンシブメールマガジンを遂に楽天がリリース、メルマガもスマホ対応を

2016年2月15日より楽天がレスポンシブメール機能をリリースしました。 レスポンシブメールとは一つのメールでパソコン、スマートフォンの両方に最適なメールマガジンを送る事ができる機能です。ただ両方に送るだけではなく、パソ […]

カートボタン
2015年末版、楽天の商品ページのカートボタンを画像にしてクリックしやすくしよう

楽天と言えば有名なショッピングモールの一つです。楽天で買い物をした事がある方もいらっしゃるでしょう。 ネットショップで買い物をする場合、商品ページを見て内容に納得してほしいと思ったら「カートに入れる」ボタンを押すのが普通 […]

ダンボール
楽天の商品ページの納期情報の文字色やサイズを変更する方法

「楽天商品ページにある納期情報の文字色変えれる?」 突如放たれるその言葉。全く無茶を言ってくれますねと思いつつも、試行錯誤を始めます。試しに google で検索しても特に情報はありません。しかし、google の検索予 […]

ラクサバで現時点の転送量を確認する方法

当ブログではレンタルサーバーのラクサバを利用しています。月額99円という破格の安さ、最高プランでも月額986円という高機能で速度も申し分なく、この安さは気に入っています。 目次1 転送量とは2 ラクサバの転送量制限につい […]

Yahoo×CSS
Yahoo!ショッピングの商品ページで外部CSSを使用する方法

Yahoo!ショッピングで出店されているショップ運営者さんもたくさんいらっしゃると思います。 Yahoo!ショッピングといえば、商品ページで使えるタグが制限されていたり、文字数も制限され、外部スタイルシートも使えずデザイ […]

誰でも簡単に猫のイラストから写真のような猫ができる猫ツールが凄かった

猫は小学生の頃から好きでよく猫のイラストもノートに落書きしたり黒板に書いたりしましたが、このイラストから写真のような猫に変換してくれる猫(神)ツールには感動を覚えました。そのツールがこれです。 Image-to-Imag […]

著者について

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

フォローはこちら

       

       
ジョモ
JOMOというガソリンスタンドは今どうなったのか?

ガソリンスタンドと言えば、有名所で ENEOS、出光、コスモ石

岐阜県大垣市で栃木のご当地佐野ラーメンが食べられる「政吉食堂」

佐野ラーメンというものをご存知でしょうか?佐野ラーメンとは栃木

ヤマト運輸の送料値上げでも送料を安く抑える為に出来る事5つ【2017年10月から】

クロネコヤマトのヤマト運輸が2017年10月より送料の値上げを

キャプテンラ・フランス
珍しい味のかき氷シロップ「キャプテンラ・フランス」の感想

気温も30度が近くなってくるといよいよかき氷のシーズンですね。

セブンイレブンからアイスキャラメルラテが発売されていたので感想など

セブンイレブンでお馴染みのセブンカフェからアイスキャラメルラテ

→もっと見る