• ベストアンサー

Webデザインにおいて「押しやすいボタン・バナー」とは

Webデザインにおいて「押しやすいタン・バナー」とはどのようにお考えですか? ここではカーソルをもっていったらロールオーバーするのでボタンだとわかった、ではなく、見てすぐに「タン・バナーだ、これは押せるものだ」と認識できるもの、です。 ●周りと違う色をしている ●立体的である と言うのがあると思いますが、あとはどうでしょうか? 三角を頭につけるとボタンっぽいですけど、リストのマークとしても使えます。 この前作っていて、立体的であるにもかかわらず、押しにくいものに仕上がってしまいました。 ボタンの文言をかえれば分かりやすいのでしょうか… 例えばバナーですが http://www.ikesai.com/ のように、左下に広告のバナーがありますけど、押せるかどうかはカーソルもっていかないとわかりませんよね。 ただの絵にみえるんですが… こういうのをもっと押させたい場合にはどのような工夫があるとよりよいでしょうか?」

質問者が選んだベストアンサー

  • ベストアンサー
  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

ボタンっぽい場所に配置するとか? あとはサイトを見てる人にもよりますよね、正直。 たとえばchikottoさんは「イケサイの広告バナーが押せるかどうかわからない、ただの絵にみえる」そうですが うちは「広告バナーはクリックできるものだ」と認識してます。 そしてイケサイの左下の広告バナーはちゃんと広告バナーに見えてます。 だから案外chikottoさんが作った押しにくい立体的なボタンも 押しやすいのかもしれませんよ。 強調されすぎてるのも押しにくいですよね。

chikotto
質問者

お礼

確かにケースバイケースですよね。ボタンやバナー全部が強調しすぎてはうっとうしいですし、 これは押してもらえたらラッキー的な優先順位の低さもあるでしょうしね。 周りとのかねあいもありますし… うまくいえませんが、押しにくいボタンを押しやすくするポイントをつかめればと思いました。 インターネットになれていない人でも、「ここはなにかあるぞ」と思わせられるようにできれば、割と万人がそう思ってくれるのではないかと。 ありがとうございます。

その他の回答 (2)

  • SortaNerd
  • ベストアンサー率43% (1185/2748)
回答No.3

リンクの画像は、周りに青枠が付いていると分かりやすいです。 ボタンは、<input type="button">で表示されるものが分かりやすいです。 ようするに、変にいじらないのが一番分かりやすいです。

  • amanda97
  • ベストアンサー率21% (414/1953)
回答No.2

>こういうのをもっと押させたい場合にはどのような工夫があるとよりよいでしょうか? 今なら無料とか、書いてあるとよく押されます あと、記事の内容に即したバナー

関連するQ&A

  • 設定ボタンについて

    こんにちは。 Windows10の左下にあるWindowsの旗マークを選択すると 左側のリストに表示される歯車マークの設定ボタンを ローカルポリシーなどで隠ぺいまたは、起動禁止にすることは できないのでしょうか。 もし、できるようでしたらお手数ですが教えてください。 よろしくお願いいたします。

  • Excel デザインモードが起動しない

    コントロールツールボックスより、コマンドボタンを作成しました。 再編集しようと思い、デザインモードを選択したのですが、デザインモードが起動できません。 デザインマーク(三角定規のアイコン)をクリックすると、なぜかデザインモードに移行せず、そのまま決定(デザインモードの終了)になってしまいます。 いままではこのようなことはなかったのですが… Excelに詳しい方のご教授をお願いします。

  • MicrosoftWordでのハイパーリンクの設定の仕方

    MicrosoftWordでホームページを編集をしたさいに、ハイパーリンクを使ってバナー広告を設定したのですが、そのバナーの上にカーソルを持っていっても矢印から指のマークに変わりません。でも、矢印ままクリックして他のページに飛ぶことは出来るんです・・・。矢印から指のマークに変えるにはどうしたらいいのでしょうか?

  • 98SE ボタンやチェック、プルダウンのマークが変

    いつもどおり使っていたのですが、ある日起動するとウインドウの閉じる最小化、最大化ボタンやチェック、プルダウンの逆三角マークの絵がおかしくなっているのです。 6、0、Sの逆やチェック欄は線をぐちゃぐちゃにしたようなおかしな表示になってしまっているのです。 これはいったい何なのでしょうか?ウィルスか何かにやられたのでしょうか? 直し方を教えてください。 気持ち悪いです~お願いします~

  • i-modeでのWEB制作について(アドレスの入力)

    メールアドレスの入力欄にカーソルを合わせて 携帯電話の操作ボタンの「電話帳マーク」を押すと、 電話帳リストの画面になって、 希望のアドレスを選択するだけで簡単に入力欄に 入力できるようにしたいのですがどうすればいいのでしょうか。 これはHTMLのタグの記述で制御するものなのでしょうか。 教えていただけると助かります。

  • MSNのホームページが、スマホ仕様?になりましたが

    ついひと月位前に、MSNのホームページが、スマホ仕様?なのか、リニューアルされましたが、私は使いづらいと感じています。 下記の疑問について教えてください。 (1)検索の枠に、三角のようなマークがありますが、これはなんでしょうか? 三角を押すと、ニュースの表示などはない、検索のための画面に移ります。 三角を押さなくても、三角の隣にカーソルを置き、キーワードを入力すれば検索できます。 しかし、三角ボタンがあるせいか、三角の隣にカーソルを置こうとしても、スムーズに置けないことがあります。 (2)スマホでMSNのホームページを見ていると、どんどんタブが増えていくようで、しょっちゅう「開いているタブの数が上限に達しました」旨のメッセージが出てしまい、消す作業が面倒です。 私の使い方がよくないのでしょうか。 アドバイスお願いします。

  • 無料のレイアウトをダウンロードしたが・・

    My Spaceのページを作成するのに、アメリカのレイアウトデザインの会社が無料で提供してるレイアウトをダウンロードして使用していますが、ページの片隅にその会社のバナー広告が付いていたので自分で削除しました。 というのも、My Spaceの”Top”ボタンをクリックしたら、その辺に重なってしまっているバナーが開いてしまうのでやむを得ず削除しました。 バナーを消して無料でデザインを使用していても問題ないですよね? 心配性なもので。 アドバイスをよろしくお願いします。

  • 左下のスタートボタンの表示が消えてしまいます。

    いつもお世話になります。 1ヶ月前windowsを買ったばかりですが、使用中に不具合が起きることが時々あり困っています。 ホームページ閲覧最中に、壁紙の前のデスクトップに表示されていたアプリケーションの表示(internet explorer,ごみ箱、マイコンピューター、マイドキュメント、)や 画面の左下に表示してある「スタート」というボタンが突然消えてしまうことがあるのです。 画面は壁紙の絵だけが出ている状態です。 PCの終了時にはいつも、左下の「スタートボタン」をクリックして、そのあと「ログオフ」ボタンをクリックして終了させていたので、 このスタートボタンの表示が消えてしまうと、、いつも主電源を押して終了させるしか術が無くなってしまうのです なぜ、ホームページを見ている最中に、突然デスクトップの表示が壁紙のみになってしまい、スタートボタンその他デスクトップにでていたアイコンが消えてしまうのでしょうか? また、もうひとつパソコンの正しい終了方法について迷っているので教えてほしいです。 今まで、パソコンを終了する時は、左下のウインドウズマーク印がついた「スタートボタン」をクリック→オレンジ色の鍵マークのついたログオフボタンを押して終了していたのですが、これは正しいのでしょうか?「スタート」→「終了オプション」→「電源を切る」の方がいいのでしょうか? 他にも「スタート」→「終了オプション」→「スタンバイ」 「スタート」→「ログオフ」→「ログオフ」などでも終了できるみたいですが、どれが正しいのかわかりません。 初歩的な質問で申し訳ありません。 どなたかご存知の方がいらっしゃいましたらぜひ教えていただきたいです。よろしくお願いいたします。 自分が使用しているパソコンは FUJITSU FMV-DESKPOWER CE50R7 (FMVCE50R7) http://www.murauchi.com/MCJ-front-web/CoD/0000000769014/

  • WEBデザイナーはフォトショイラレをどう使いわける

    WEBデザイナーはフォトショイラレどちらをどう使い分けて中心的に極めるべきか質問した時に下記のような回答をもらったのですが、下記のような疑問が残りました。 また、使い分けはおっしゃっているような形が理想と思いますか? アイコンもバナー以外はPhotoshopで作るほうがよいのは素人の自分でもわかるのですが、アイコンもバナーもPhotoshopで作るほうがよいのでしょうか? また、バナーとは当サイトの楽天などにあるバナー広告のことでしょうか? 下記疑問に思ったところ。 > アイコンもバナーもPhotoshopで作ってください。 そのバナー内に入れるイラストや絵柄などはIllustratorで作ると良いです。 ですので、Illustratorも使えるに越したことはありません。 WEB関係者のフォトショとイラレの使い分けの境界線が難しいのですが、バナーやアイコン、デザインカンプなどフォトショで作れる主な部分は可能な限りフォトショでビットマップデータ作って、どうしても作れない部分だけイラレのベクトルデータでつくりイメージでしょうか? バナーなら枠や背景はフォトショでつくって、その中にいるキャラクターや、花などはイラレで作り、最終的にフォトショにまとめてビットマップデータで保存するということでしょうか? イラレで作らないと拡大縮小が出来ないので、アイコンはイラレで作った方が良いのかと思ったのですが、フォトショでビットマップデータが良いのですか? 当サイトならハートのアイコンや上記のOKWAVEのアイコン、お礼のボタンなどもすべてフォトショが良いのですね。 楽天のバナー広告などなら中の楽天イーグルスのキャラなどだけイラレで作るイメージでしょうか? またイラレはぼけると聞いたのですが、それはWEBページに組み込むとaiをpngにした画像が多少ぼけるということでしょうか? psdをpngでWEB上で表示すれば一切解像度は下がらないということでしょうか? 素人の質問で大変恐縮です。 下記いただいた回答。 で、本題に関して結論を言いますと、Photoshopでデザインする事を覚えてください。 IllustratorでWebデザインを行うのは論外です。 特に、コーディングを外注するならaiファイルは非常に嫌われます。 アイコンもバナーもPhotoshopで作ってください。 そのバナー内に入れるイラストや絵柄などはIllustratorで作ると良いです。 ですので、Illustratorも使えるに越したことはありません。 プロの現場でも、IllustratorでWebデザインを行う方は居ますが、 そういう方は印刷出身で他のツールを使えない方です。 「これからWEB用にどちらを勉強しようかな」という方がIllustratorを選択する理由はありません。 少し前までは「PhotoshopかIllustratorか」ではなく 「PhotoshopかFireworksか」で議論が分かれていました。 Photoshopの方がアナログでやれる事は多く、自由度は高いですが、 Fireworksの方がWEBに特化している分仕事の効率化に向いています。 どちらも一長一短ですが、FireworksはCreative Cloudに含まれず、開発終了のうわさが流れているので、今からだとPhotoshopが良いかと思います。 一応、IllustratorのWebに向かない理由を列挙します。 ・画像のピクセルがぼやける ・書き出しが不便 ・同じサイズで作成した複数のアイコンや画像が同じサイズで書き出せない 他にも色々ありますが、最初の理由ひとつだけで残念なサイトにしかなりません。 以下は印刷出身の方がよく作るイラレデータで、Webとしては話にならないものです。 (しかし、こういうデータが本当に多い) ・CMYK ・サイズが適当 ・文字サイズを変えすぎ ・乗算などの効果を使用している Illustrator使用者は紙出身者が多いので、デザインを1枚のものとして考えるので、 パーツ分けした際にそのまま使えない事が少なくありません。 Webでは「画像、背景、テキスト」で考えますのでそもそも使い方が違うのです。

    • ベストアンサー
    • CSS
  • フォトショップ用プラグインソフト

    広告関係の仕事をしているグラフィックデザイナーです。 WEBのデザインを制作する時、最近、よく3Dっぽいボタンのデザインを求められることが多くなりました。 たまたま、クライアントがそういうデザインを求めているだけなのですが。 例えば、 アップル(www.apple.com/jp/)のHPの上のツルっとした感じの メニュー部分のような処理とか、 ステレオのボタンのような立体的でアルミチックな処理とか、 そういったいろいろなボタンが作れるフォトショップのプラグインソフトを ご存じの方はいらっしゃらないでしょうか。 よろしくお願いいたします。