今日はどうやったら
ユーザーの反応の良いボタンをデザインできるかについて
お伝えしますね。
ポイントとしては、
・ぷっくり
・押したくなるアクション
この２つです。
具体的にやっていきますね。
photoshopです。
まずベースのシェイプを作ります。
ぷっくりですので、丸めでいきます。
レイヤー効果でグラデーションカラーを付けます。
色は、サイトカラーのメインカラーから保護色を選んでくださいね！
今回はブルーでいきます。
この場合は上から明るい→暗いの順です。
境界線を作り、一段暗いカラーで締めます。
丸を左側に配置します。
グラデはベースと正反対で上から暗い→明るいの順です。
早くも立体感が出てきました！
上に三角を置きます。
この時外光彩にうっすら乗算グレーカラーをお忘れなく。
細かい所ですが立体感に影響します。
ボタンの文言設定。
任意でお好きなものをどうぞ。ドロップシャドウをお忘れなく。
内容はサイトの趣旨に合わせてくださいね。
あ、右側がスペース空き過ぎました。
短く修正しました。
ベースにもうっすらドロップシャドウを入れ、立体感MAX！
はい。
ここからは設定のお話です。
ポイントその２の
・押したくなるアクション
ですね。
サイトへの設定は
htmlソースで
<a class=”btn” href=”飛ばしたいリンク”> <img src=”ボタンのパス” /> </a>
CSSは
.btn:hover img {
opacity:0.5;
}
これでOK！
サンプルです。
こんな感じ。↓↓↓
コメントを残す