脱上級者の定番、グラデーションボタンの作り方を解説します。スタイリッシュにするコツと簡単に作るためのポイントです。

フラットデザインの流行で、グラデーションを使ったデザインは古く見える傾向があるとも言えますが、ボタン画像は「押してくなる感」が大切ですので、まだまだ活躍の場があります。

よく使う画像だからこそ、ブタンメーカープロを使って、50秒という速さで作ってみました。

スタイリッシュに作るコツ

背景色の決め方

グラデーションの始まりの色と終わりの色を指定することで色が決まります。

色を選ぶ際には、差をあまりつけすぎないように、加減することが大切です。「違いが分からないかな？」と思うくらいでちょうどよいです。やりすぎると素人っぽくなります。

基本的には、色味は同じにして、明るさや濃さのみを少し変えるような色選びをするとよいです。

枠線をつける

グラデ―ションは色の連続で作られていますので、枠や境目が何もないとしまりが悪い感じになってしまいます。

なので、グラデーションに使った色よりワントーン濃い色（または暗い色）を枠線としてつけてあげると境界線がはっきりとしてボタンらしくなります。

簡単に早く作るには

ボタンメーカープロを使って早く作業するためのポイントは、ショートカットキーの使い方です。

枠の色を決めたら、色コードの6桁の英数字をキーボードの「ctrl＋C」でコピーして、後の3方向の枠線を設定するときには、色指定の項目をクリックして「ctrl＋A」で全体を選択してから「ctrl＋V」で貼り付けをするとスピードアップできます。