こんにちは、下坂栄里子です。
この記事では、テンプレートのボタンをそのまま使うと起きがちな「色の違和感」を解消する方法と、マウスを乗せたとき・押したときの状態（ホバー・押下）の設定方法を解説します。
デフォルトの色と影を調整する
テンプレートから選んだボタンをそのまま使うと、デフォルトの青色のままだったり、影の色がページ全体の配色と合わなかったりすることがあります。まずは背景色を、ページのテーマカラーであるオレンジに変更します。
色を変えただけでは、下に落ちる影（シャドウ）がまだ青っぽいままのことがあります。設定パネルの下の方にある「シャドウ」の項目からカラーを調整し、明るめの色に変更すると、影の違和感がなくなります。
ホバー・押下時の色を設定する
ボタンにマウスを乗せたときに色が変わらなかったり、逆に変な色になってしまったりすることがあります。これは「ホバー」（マウスを乗せた状態）と「押下」（クリックした状態）の色が、デフォルトのまま設定されていないことが原因です。
「ボタンの状態」から「ホバー」タブを選び、背景色をデフォルトの色より少し濃い色に設定します。同様に「押下」タブでは、さらに濃い色に設定すると、クリックした瞬間の反応が分かりやすくなります。保存したら、実際にマウスを乗せたり押したりして、意図した通りの変化になっているか自分の目で確認しましょう。
ボタン配置を含むページ全体の構成についてはこちらの記事でも解説しています。
同じ色のボタンは「複製」で使い回す
ページの別の場所にも同じ色のボタンを置きたい場合、1つずつ設定し直すのは大変です。調整済みのボタンを「複製」し、「移動」アイコンでドラッグして目的の位置まで運べば、同じ設定のボタンをそのまま使い回せます。元あった場所のボタンは削除して問題ありません。
まとめ
テンプレートのボタンは、背景色だけでなく「シャドウ」の色も一緒に確認・調整する
「ホバー」「押下」それぞれの状態で背景色を設定すると、クリックの反応が分かりやすくなる
設定後は実際にマウスを乗せたり押したりして、自分の目でチェックする
同じ色のボタンを複数箇所に置きたいときは「複製」→「移動」で使い回すと効率的
ファネルデザイナー® 下坂栄里子でした。
SNSをやめても、あなたの知識は売れ続けます。
眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。
▶︎ 無料動画を視聴する