【CSS】UIを向上するための第一歩！ボタンの装飾の仕方

そもそも良いUIとは一体どんなことを意味するのでしょうか？

私は質素すぎず、ややこしすぎないものを意味すると思っています。

以下の画像をご覧ください。このタイプのボタンは、使うタイミングとして良い場面もありますが、 よくない場合もあります。

buttonタグを用いて説明していきます。

ではどのようにしたらUIが良くなるのでしょうか

まずはデフォルトで表示されているbuttonダグのスタイルをなくしていきましょう。

これを行う方法としてはCSSファイルにborder:none;を指定してください。

では以下のボタンをご覧ください

ここから影をつけてみましょう。

ボタンのUIを良くする例として影が有効です。

buttonに影をつける方法としてはbox-shadowを指定しましょう

影をつけるだけでもUIの向上は見込めます。

では次にボタンに躍動感をつけてみましょう。

躍動感をつける方法としてhoverがあります。

hoverをつけた後にbox-shadowを設定するとカーソルをボタンに合わせた時にこれはボタンなんだなと判別がつけやすいというメリットがあります。

Yama

ヘッダーに影のボタンをつけるのはお勧めしません。 過剰なスタイルの装飾は逆に見た目を悪くするからです。

以上がボタンの装飾の仕方でした。

今回は基本となる記事でしたので、ウェイトは軽めです。

よりUIを向上したものを作成するための勉強法というのが色んなWebサイトを見て参考にすることです。

また注意していただきたいのが、過剰な装飾です。

過剰な装飾をすることで、せっかく良いものを作ることができるのに完成度を下げてしまうからです。

スタイルにおいてのゴールとは「使いやすく、見やすい」です。

これを目指して自身のサイトを装飾してみてください。

関連記事

【CSS】かっこいいWebサイトを作るには必要なCSSを初心者向けに解説

2026/03/20

CSSはWebサイトを作る上で必須となる知識です。もしCSSを使わずにWebサイトを作るとしたらとんでもないことになります。非常に淡白としたWebサイトへとなってしまいます。 またこの言語は、初心...