*

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

おすすめトピックス

関連記事

Amazonアソシエイトでサイトごとにデータを集計する方法

Amazon アソシエイトでは自分が運営する複数のサイトを登録する事ができます。(ただし、サイト毎に Amazon による審査が必要です。) 審査に受かれば新しいサイトに Amazon アソシエイトのアフィリエイトリンク […]

ブログを超高速サーバーwpXへ移転後の高速化の効果と実証

このブログ(WordPress)を WordPress 専用超高速サーバーと名高い「wpX」へ移転して約1ヶ月が経過しました。移転時に困った事などは以下の記事でまとめています。 WordPress専用超高速サーバー「wp […]

ランキング1位獲得
要注意!楽天商品ページへのランクイン実績表示についてルールを制定

楽天で買い物をしていると商品ページに「この商品は楽天ランキングで1位獲得!」というようなアピールをよく見かけると思います。売れてるアピールをする為に、楽天ランキングのランクイン実績を画像なりにまとめて商品ページにドンッと […]

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

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

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

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

楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ

Freepikによるデザイン スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか? 大抵のウェブサイトやネットショッピングサイトでもスマートフォン […]

著者について

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

フォローはこちら

       

       
divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるよ

PhotoshopなどAdobeソフトのシリアル番号を忘れたり紛失した場合

Photoshop など Adobe ソフトのシリアル番号はイ

メルカリのうるさすぎる不要なプッシュ通知を止める

CM でも放送されている誰でもかんたんフリマアプリとして代表的

シーリングファン
天井に取り付けられるプロペラ「シーリングファン」の意味とは?

天井が高いカフェやオフィスなどでたまに天井に取り付けられている

ASUSタブレットPC「T101HA」でPhotoshopは問題なく使える?

今まで外出先や旅行先で作業する為のモバイル端末として、Andr

→もっと見る