*

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

おすすめトピックス

関連記事

Googleマップに勝手に自宅や職場住所が勝手に登録されているのは何故?削除する方法は?

Google マップを普段からよく使う人は多いと思いますが、いつも使っているうちに自宅の住所や職場の住所が勝手に登録されている事にお気づきの方もいらっしゃると思います。登録した覚えもないのに!と恐怖すら感じているかもしれ […]

facebookで○○さんはどこどこにいますという通知を無効にする方法

facebook と言えば世界的に有名な SNS の一つで日本でも利用者は多数います。私も facebook に登録してはいますが、ブログの facebook ページを作るためにとりあえず登録しているだけで個人のタイムラ […]

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

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

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

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

動画からアニメーションgifへ自動で変換してくれるフリーソフト「動画GIF変換」

gif と言えば透過に対応した画像形式の一つですが、gif はアニメーションにも対応しています。ただの画像でありながらパラパラ漫画の要領で動く画像が作れるわけです。アニメーション gif はインターネット上で動画が普及し […]

月間30万PV以上に対応する生ログが見られる無料・有料アクセス解析

ウェブサイトを運営している人なら多くの方が導入しているであろうアクセス解析ですが、ページビューが増えてくると動作しないようなページビューで制限をかけているアクセス解析もあります。例えば1ヶ月のページビューが30万を越える […]

著者について

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

フォローはこちら

       

       
Aipo8.1.1オープンソース版で2018年の祝日設定を行う(さくらのVPS)

オープンソース版の無料グループウェア「Aipo」のサポートが2

タイヤのホイールナットが緩んで紛失、1個で買う方法はあるか

車の発進時や曲がる時にわずかなゴリッという音がする事に気づいて

高速道路
高速道路の上りと下りってどっち方面?全国高速道路総まとめ

高速道路には進行方向によって「上り」と「下り」という表現があり

名古屋久屋大通(丸の内)の「Cafe One」で居心地良い空間でおうちごはんランチ

名古屋観光で名古屋テレビ塔と久屋大通公園を見に行った際にランチ

豊田合成リンク
名古屋栄の豊田合成リンクで氷じゃないスケートリンクで滑ってきた感想

名古屋市の栄に氷じゃないスケートリンクがあるという話を連れに聞

→もっと見る