HTML&CSS｜視覚的・直感的に使いやすいボタンデザイン｜モジュール・パーツ ＃02
デザインも価格も”ちょうど良い”Webサイトのボタンデザインをご紹介します。
Webサイトのボタンは、ユーザーがアクションを起こすためのインタラクティブな要素であり、視覚的に目を引き、直感的に使いやすいデザインが求められます。また、視覚的な階層をつける（重要なアクションを促すボタンは他のボタンよりも目立つデザインにする）ことでユーザーがどのボタンを優先的にクリックすべきかを直感的に理解できるようにする必要もあります。
デザインも価格も”ちょうど良い”Webサイト「Justii」では、上記を考慮し、2タイプ 15パターンのボタンデザインをご用意しました。
デザインも価格も”ちょうど良い”Webサイトの詳細はこちら。
ボタンデザインの一覧はこちらよりご覧いただけます。
※サンプルでは「白塗り+黒枠」「黒塗り」に統一しておりますが、貴社のイメージカラーに変更が可能です。
ここではいくつかの例をご紹介します。
Case1
Type1 アンダーライン + 矢印と囲み枠の色変化
ホバー時に文字にアンダーラインが表示され、矢印と囲み枠の色が変化します。
Type2 色の変化 + スケールアップ
ホバー時に文字、アンダーライン、矢印の囲み枠の色が変化し、囲み枠がスケールアップします。
Type3 アンダーラインの伸縮 + 矢印移動
ホバー時にアンダーラインが伸び、矢印が移動します。
Case2
Type1 色の変化 + マスクアニメーション
ホバー時に色が変化し、文字がくるんとします。
Webサイト内では、ボタンのデザインを統一することで、ユーザーがクリック可能な要素として認識しやすくなります。また、重要なアクションには、ボタンの形状を変え、視覚的な階層をつけることで、ユーザーがどのボタンを優先的にクリックすべきかを直感的に理解できるようにする必要もあります。これらのことから、Case1、Case2からそれぞれ1タイプずつお選びいただけると良いかと思います。
ボタンデザインの一覧はこちらよりご覧いただけます。
お問い合わせ
建築設計事務所、工務店の皆さまに、当方（スパイスラック）が、独自に制作したテンプレートをお客さまのご要望に合わせてカスタマイズし、従来よりも安価にWebサイトをご提供させていただきます。
費用が高くて制作会社に依頼するのが難しい
自作ツールで作る時間がない
といった方、お気軽にお問い合わせください！
※建設設計系以外の方もぜひご相談ください。
お気軽にお問い合わせください
info@connec-tive.com
運営元
（株）コネクティブ
制作協力
スパイスラック