toggle
2018-07-08

【初心者向け】クリックしてもらうボタンを作りました

クリックボタン

整理収納サポートなどの申込みをいただく際に使う「問い合わせボタン」を作ってみました。作る際に参考にしたサイトや、ボタン作成に使用したサイトなどを挙げておきます。
(上のボタンはサンプルなので、クリックしてもどこにも繋がりません!)

 

WEB DESIGN FAN

こちらのサイトの【Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法】という記事をかなり参考にしました。
要するにクリックして貰いやすいボタンを作る方法、という訳ですが特に心に留めたポイントを引用させていただきます。

「明らかにボタンと分かるデザインにする」ことです。
(中略)
フラットデザインが増えてきているため、グラデーションによる加工がサイトのテイストに合わないこともあります。

【Webデザイナーが知っておきたいコンバージョン率の高いボタンを作る方法】
http://www.webdesign-fan.com/cvr-button

この他にもHPを作る際に参考になるトピックが豊富です。

 

ホームページの処方箋

こちらも同じく、HP運営のトピックが豊富なサイト。このサイトの【保存版・会社ホームページに使いやすいボタン素材サイト(無料)】に、
様々なボタン作成に関する無料サイトを紹介しています。こちらで特に心掛けた部分を以下に引用しておきます。

ボタン選びをする際は、ボタン自体のカッコ良さよりも、ボタンを載せる場所のデザインとの相性を大切にして選んでくださいね。
【保存版・会社ホームページに使いやすいボタン素材サイト(無料)】
http://www.hp-ps.com/webdesign/button/

ただ格好いいボタン、目立つボタンを作るのではなく【ホームページのデザインに合ったボタン】を作ることが大事。初心者にとって、目からウロコでした。

 

FLAME illust

「自作なんて難しい…」と思う方にお勧め。最初から文字が入っているボタンを無料配布してくれているサイト。
ホームページのデザインに合うと思われれば、最初から無料配布されているボタンを使うのも良いと思います。

 

Illust AC

無料のイラスト素材が本当に豊富なサイト。会員登録(無料)は必要になりますが、アイコン素材が必要になる方は登録して損は無いと思います。
「ボタン」、「クリックボタン」、「ウェブボタン」などで検索すれば素敵なデザインのものが沢山見つかりますよ。
文字入れは自分で行わないといけないものも多いので、イラストレーターなどの画像作成ソフトなどで文字入れ程度なら出来るよ、という方にお勧め。
土台部分が素敵だと文字入れも楽しくなりますね!

ボタンメーカー

実際に私がボタンを作る際にお世話になったサイトが、こちらのボタンメーカーさん。
ボタンのサイズ、色、テキストの内容など、お好みの数値を入れればボタンを自動生成してくれます。
自分だと難しいグラデーションやクリアテイストのボタンなども作ることができます。
細かいところまでこだわりたい方に。

 

まとめ

小さなボタンかも知れませんが、ボタンまで自作するとHPのオリジナリティは確実に上がるので是非挑戦して欲しいと思います。

関連記事