WEB素材&デザイン

ここのサイトのアクセス解析をしてますと、「凹んだボタン」で検索した結果からの訪問者がいます。
今更だけど、「凹んだボタン」って何？

確かにここのサイトでも「凹んだように見えるボタンの作成（切り抜きボタン）」を解説しています。
だけど実際は「切り抜きボタン」です。

そもそも「凹んだボタン」を探すこと自体間違ってるような気がします。

ボタンと言うのは通常浮き上がってるわけですから、「浮き上がってないボタン」と言うならまだわかりますが、
「凹んだボタン」を探すってことは、もともとは真っ平らなボタンを作ってるの？
と首をかしげてしまいます。

ボタンと言うのはクリックしてもらう為などで、目立つように作るのが基本なのに、目立たないボタンを作り、押した時に目立つ、凹んだようなボタンを作っても意味がないと思うんですけど．．

確かに私も初心者の頃、「凹んだボタン」を一生懸命作ろうとしてた記憶があります。
だけど今となっては、立体的な画像を作るために労力をかけるなら、その分、その時間をコンテンツの充実に当てた方がずっといいものができると思うんですけどね。

だって、デザイン会社でもない限り、訪問者にとってはボタンが凹んでるかどうかなんて、どうでもいいことですし、
そのサイトの内容がいかに充実してるか、欲しい情報がそこにあるかどうかの方がずっと重要ですから。

格好いいボタンなんて、何回か見てるとそのうち飽きてしまいます。
手が込んでるなぁ．．と関心はしますけどね。

それでもまだ、凹んだボタンに執着するなら、まず、元画像の成り立ちを考える必要があります。
元画像なしに凹んだボタンと言うなら何でもいいわけですから、「凹んだように見えるボタンの作成（切り抜きボタン）」でもいいわけです。

元画像があって、それに対して凹んだボタンと言うなら、その元画像はどうやって立体的に見せてるのでしょうか？

その立体的に見せる部分を少なくしたり、減少させることによって、元画像から見ると凹んだように見えます。
浮き上がったように見せる効果を減少させればいいのです。

例えば、「単純な浮き出しボタンの作成」で作成した次のようなボタンでは、立体枠の大きさを小さくすればいいのです。
だけど、単純に小さくしただけでは重ねた時、バランスが悪くなりますから、実際は外枠の大きさはそのままに、内枠を少し大きく作成する必要があります。
　→　

そして出来上がったボタンは次のようなものです。
マウスを乗せるとわずかですが、凹んだように見えます。

同じく、「単純な影付きボタンの作成（ドロップシャドウ）」で作成した次のようなボタンでは、ドロップシャドウの大きさとぼかし具合を小さくすればいいのです。
だけど、こちらも単純に小さくしただけでは重ねた時、バランスが悪くなりますから、実際は外枠の大きさはそのままに、ボタン位置を少しずらせて作成します。
　→　

そして出来上がったボタンは次のようなものです。
マウスを乗せると凹んだように見えます。