読者です 読者をやめる 読者になる 読者になる

おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

「お申し込み」「詳しくはこちら」など、Webサイトに使えるボタンを簡単に作成できるWebサービス5選

便利ツール/サービス

f:id:lord_cashew:20140725141235j:plain

IllustratorやPhotoshopを使いこなせないノンデザイナー的には、Webサイトに使う素材(例えばメニューなどに使う画像とか色々なボタン画像とか)をどうするかは意外と真面目に困っていたりするのですが、そんなときにブラウザ上で自分好みのボタン画像を作れてしまう「ボタン作成ツール」はとても重宝します。

そんなこんなで自分的にはブックマーク必須なボタン作成ツールをいくつか紹介します。

 

1. ButtonMakerアフラット

f:id:lord_cashew:20140725135516j:plain

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

おそらく日本語のボタン作成ツールで一番有名だと思うのですが、ノンデザイナーなら一度は使ったことがあると思われる、とても使い勝手の良いボタン作成ツールです。自分も数年前からずっと使っています。

 

2. As Button Generator

f:id:lord_cashew:20140725135914j:plain 

As Button Generator

このツールの良いところは何と言っても設定を変更するとリアルタイムにボタンがプレビューされるところです。例えばスライダーでボタンの幅を変更するとプレビュー画面のボタンもリアルタイムに変更されます。なので細かい修正作業もサラリと手間なく行うことができます。

 

3. フォトコンバイン

f:id:lord_cashew:20140725140432j:plain

無料のロゴ・ボタン画像作成ツール - フォトコンバイン

正直言ってこのツールでボタンを作ることはあまりないのですが、このサイトには「画像の切り抜き」「画像のリサイズ」「画像の文字入れ」などの画像編集ツールが一通り揃っているので、Photoshopなどを使わずにサラリと画像編集するときに使ったりしています。

 

4. Da Button Factory 

f:id:lord_cashew:20140725140726j:plain

Da Button Factory - Create pretty buttons online, quickly!

日本語未対応なのでこのツールもあまり使わないのですが、試しに作ってみると意外と良い感じのボタンが作成できるのと、リアルタイムにプレビューを見ながらボタンを作ることができるので、たまには使ってみても良いかなと思っています。

 

5. Css Gradient Button

f:id:lord_cashew:20140725134835j:plain

Css Gradient Button - create css button

CSS3の綺麗なグラデーションボタンが簡単に作成できるツールです。いろいろと設定して作成ボタンをクリックするとページ下部にCSS3のコードが生成されるので、そのコードをコピペして自分のサイトに使うことができます。CSS3はなんか良いですねー。

 

個人的な感想

サイト制作をしていると「IllustratorとPhotoshopを使いこなせるようになりたいなー」という気持ちは常に持っていつつも結局は「まぁいっか」で適当に済ませてしまっている今日この頃、自分にできないことができるデザイナーさんやプログラマーさんを心底尊敬します。

 

現場で役立つ イラスト・パーツ・フレーム満載! デザイン素材×1000

現場で役立つ イラスト・パーツ・フレーム満載! デザイン素材×1000

 
Webフリー素材厳選コレクション2200 (X‐media Graphic Library)

Webフリー素材厳選コレクション2200 (X‐media Graphic Library)