ボタンを画像で作るか、CSSでデザインするか。

質問

みなさんがどのように考えているのか知りたいのです。
webデザインをするとして、フォームなどがあると思います。
メールフォーム、買い物カゴ、そのほか管理画面等々…
そこで必要となってくるのがボタンですが、

■画像でボタンを作成する
■<input type="submit"…などで作成し、CSSでデザインする

2通りあると思います。
それをどっちにするかというセレクトは、どのようにつけていますか。

また選ぶには「理由」があると思うのですが、
その理由について考えがありましたら参考にしたいのです。

というのも、ボタンは画像で作って！　普通のボタンにする意味がない、といわれました。
なんだか納得できない感があったので。
なぜ通常のボタンにするには意味がないの？
画像で作ったほうがいい場合はなに？

回答No.3

Splatter · ベストアンサー

No.1です。

質問者様の動機は分かりました。その上で回答を出すのならば、
『CSSボタンと画像ボタンを、場所に応じて使って下さい』
という事になります。

Webアプリのデザインを考える上でもう一つ重要なのは、
全体から見た視覚効果です。
試しに、質問者様が今まさに読んでいるこの画面を見て下さい。
これだけでも十分にヒントが隠されているかと思います。

『運営スタッフに連絡する』ボタンはCSSで出来ていますね。
それでいて、かつ淡い配色となっています。これの意味合いは
『普段は目に付かなくて良いけれど、必要性があった時に
探して押してね。』という意味になります。

『新しく質問する』ボタンは画像で出来ていますね。
利用者のブラウザ・フォントに関係なくこの表示となります。
教えて！gooでは重要なボタンなので、この表示方法なのです。
しかも、画像は青いボタン部ではなく、その外周の緑色の縁も
含んでいます。これにより視覚的なボタンとクリックエリアを
分ける効果を生んでいます。このボタンは重要という事です。

この様に、全てのモノには『視覚的に訴える優先順位』があります。
これによってCSSで表現できないレベルは画像で補います。

上のほうにある『教えて！検索』ボタンは割と普通ですね。
テキストエリアと検索ボタンという組み合わせは、他サイトでも
一般的な組み合わせです。料理でいうご飯とミソ汁ですね。
これは敢えて独自のデザインを適用しないという事で、
ユーザに親しみ感を与えているのです。

そして、この『教えて！検索』ボタンこそがデザインの起点で、
これを基準に他の表示オブジェクトの視覚効果レベルを
付与しているものと私は思います。他にも小さいアイコンは
画像ですから、これより優先すべき物は強調するべきだし、
質問の本文を読んでいるときにも、ひっそり視覚に訴える程度に
『困り度』の画像も強さが設定されている訳です。

教えて！gooはその考えでいくと、全体的に視覚に訴えるレベルは
低めに設定されています。なぜか？それは収入源となる広告画像に
最も高い視覚的優先順位を持たせたいからに他なりません。

業務用などのWebアプリではボタンを押して業務を進めることが
最重要ですから、ボタンが目立って普通です。なので全てを
画像ボタンとしてデザイン付けを行うのも一つの選択肢です。

しかしショッピングサイトなどでは重要なのはボタンではなく
コンテンツです。なのでボタンはCSSで強弱付けを行って、
重要な『カートに入れる』ボタンは画像にしても良いでしょうし、
商品検索エリアはデフォルトのボタンであっても良いでしょう。

上記の理由から、どちらか一方に決めるのではなく、
『CSSボタンと画像ボタンを、場所に応じて使って下さい』
という回答を導き出したいと思います。

回答No.2

steel_gray

素人ですが。画像ボタンのデメリットを考えてみました。

・あとから変更する時、同種のボタンの追加が必要になった時
凝ったデザインだと他人がいじりにくい事も。
・珍しいフォントなんかが使えちゃうのも諸刃の剣。カッコウよくできるけど、やはり後で困ることも。
・今時に、と言われるかもしれないけど、画像は読み込みが必要だってことも一応気になる。
・単純にテキストよりは手間がかかる。掛けなくても済む手間なら省いた方が楽ｗ

画像ボタンのメリットは・・・
デザイン性以外に思いつかない。

回答No.1

Splatter

難しい疑問ですね。
私は業務アプリケーションでWebアプリを作ったりするのですが、
デザインを考える上でボタン関連はよく問題になっています。

デザイン面から言えば、画像で作ったボタンのほうがデザイン的に
優れたボタンが作れますね。サイトデザインと調和させて、
角ばった長方形でないボタン等も容易に作成が可能です。
FLASHでアニメーションするボタンを作っても面白いですね。

ですが、時と場合によってはinputタグで作成する、いわゆる
コマンドボタンのほうが受け入れられる事もあります。
エンドユーザーが若い人ばかりであれば良いですが、実際には
年配の方もいらっしゃいますし、よくいただく意見としては
『ボタンはボタンらしくあって欲しい』というものがあります。

どんな画面デザインであっても、ＯＳで使用しているものと
近いデザインのボタンは『それがボタンである』という認識が
即座に判断できますし、『ちゃんと押した感じがする』そうです。

押した時のアニメーション(?)や、フォーカスが当たった時に
うっすら表示される点線などから、Windowsのクラシックボタンを
要求されるパターンもありました。

業務アプリであればそれだけで済みますが、通常のWEBだと
例えばレンタルサーバやアフィリエイトを利用していると
コンテンツ以外に広告なども表示されるでしょうから、その場合は
それらも含めた視認性も考慮していく事になるでしょう。

画像でも、Web2.0風のボタン画像などは多くの人が
『これはボタンである』と認識してくれるでしょうし、
むしろこちらのほうが良いという場合もあるでしょう。

ウェブデザインはセンスや技量が出るので力を入れたい所ですが、
『利用する人のための』ウェブデザインであるということを
念頭に入れて、ニーズや利便性を考慮して選ぶべきでしょう。
なので、ボタンにはこれという定義はないのだと思います。

お礼

分かりやすい回答をありがとうございます。
デザインには正解がないのですが、デザインするからにはそれぞれ理由があるはず。
実際この教えて！gooもそうですし、アマゾンでも、なんの加工もしていない普通のボタンです。
なぜそれらは画像でデザインしたボタンを使用しないのか

実際私が今ジャッジしようとしているのは、webアプリの管理画面なのですが、それにもかかわらず、すべてにおいて判断が難しいです。
相手に意味がない、と言われて、なんとなく理由はわかるのだけども、どちらにしてちゃんとした理由を述べたいと思いました。
が、その線引きが難しく。
『ボタンはボタンらしくあって欲しい』『これはボタンであると認識』が最も大事だと思います。
そしてそれゆえに答えを出したいのですが、やはり難しいですね。