WEBデザイン

webボタンデザインの極意。「押してみたい」が大切!

webボタンデザイン

Webページにおいて、重要な役割を果たしているのが「ボタン」です。ユーザーはボタンを押すことでページ内の情報をより深く知ろうとしたり、サービスへの申し込みを行ったりします。

ボタンが押されたということは、ユーザーがWebページに興味を示したという証でもあるのです。

ユーザーの行動を促すための魅力的なボタンデザインについてみていきましょう。

Webページでのボタンの役割

未経験・初心者

Webページ上であなたがボタンを押すのはどんな時かを考えてみてください。

ネットショッピングサイトで商品をカートに入れる時、会員登録をする時、メッセージを送信する時、などWebページ上で何らかのアクションを起こしたい時のはずです。

Webページ上でのボタンは「ユーザーに何か行動をさせる」役割があります。

そもそもWebサイトを作る目的は、サイトの情報をもとにしてユーザーになんらかの行動してもらいたいからです。

例えば会社のホームページを作る目的を考えてみてください。

サービス内容を見込み顧客に知ってもらい、問い合わせを増やしたいからではないでしょうか。

つまり問い合わせメッセージの送信を行う「ボタン」は、サイトの目的に直結するとても重要な要素になるのです。

WEBデザインに必要な色と配色の知識とは?サイト運営するなら知っておきたい!

ボタンデザインの構成

プロジェクト案件に応募、仕事を獲得しょう

Webページ上でのボタンは基本的に3つのパーツに分かれています。

まずは、ボタンの内容を表す「文字」です。

文字は「詳細はこちら」、「申し込みをする」、「次へ」などボタンを押したときにユーザーがどのようなアクションを取ることができるのかを簡潔に表しています。

文字の太さや大きさ、書体などもボタンデザインにとって重要!

子ども向けのサイトなら漢字を極力使わないなど、見込みユーザーにあわせた文字を配置します。

次の要素は「アイコン」です。

アイコンはボタンデザインに必ずしも必要な物ではありませんが、文字にアイコンが添えてあることでユーザーの注目速度を上げることができます。

また文字が読めない人(外国人など)にも、ボタンの内容をイメージで伝えることができるという効果もあります。

最後の要素は「ボタンの背景」です。

ボタンに背景を付けることで、どこを押せばアクションが起こるのかを分かりやすくユーザーに知らせることができます。

以前はボタンの背景にグラデーションなどを付けて、メタリックで立体的に見せる表現方法が主流でした。

しかし最近流行りのフラットデザインでは均一な背景のぺたっとしたボタンがよく見られます。

ボタンを作る手法

プログラミングスキルとWEBライター

ボタンを作る手法は大きく分けて2つあります。

画像編集ソフトでボタンを作る

1つはPhotoshopやIllustratorなどのソフトを使って、画像としてボタンを作る方法です。

ボタンの背景に複雑な模様を付けたり、きれいなグラデーションをかけたりと自由でオリジナリティあふれるボタンを作ることができます。

フリー素材でも様々なボタン画像が配布されています。

ただし、画像を使ったボタンデザインにはいろいろなデメリットもあります。まず、一度作ってしまうと仕様の変更が難しい点です。

サイトのイメージカラーを変えた時にボタンデザインも合わせて変更したい、ボタンの文字の内容を少し変えたいという場合には、もう一度画像編集ソフトを立ち上げてボタンを作り直さなければいけません。

また、サイトできれいに表示されるよう画像サイズに配慮する必要もあります。

最近ではパソコンだけでなくスマホでサイトを閲覧する人も多いので、様々なディスプレイでボタン画像が表示されることを想定しなければなりません。

さらに、画像をたくさん使うことでWebページの表示速度が落ちてしまうというデメリットもあります。

【フォトショップクリエイター能力認定試験問題集】Photoshopの実力を証明する資格。

CSSでボタンを作る

ボタンを作るもう1つの方法は、CSSを利用することです。

例えばCSSを使ってaタグの背景に色を付けることで、ボタンのように見せることができるのです。

画像を用いたボタンほどデザインの自由さはありませんが、工夫することでCSSコードだけでもかなり豊かなデザイン表現が行えます。

CSSで表現されたボタンは、デザインの変更にとても強いです。CSSコードを書き変えるだけで、ボタンの大きさや背景色を自由に変更できます。

ボタンの中の文字を変える時もHTMLコードを変更するだけですみます。

またCSSデザインボタンはどのデバイスでも同じように表示でき、たくさん設置してもサイトが重くならないというメリットがあります。

特に便利なのがレスポンシブ対応のデザインを作るときです。

ボタンの大きさは、スマホ版のサイトでは大きく見やすく表示しなくてはなりません。

スマホの操作は指で行うため、ボタンも押しやすいデザインにする必要があるからです。

CSSで作られたボタンは、メディアクエリを使って、PC版の表示とスマホ版の表示を自在に切り替えることができます。

1つのボタンを配置し、表示方法のみを変化させればよいのですから、効率がよく、スマホ時代の現代ではCSSでのボタン作成は非常によく用いられています。

CSSを効率よく記述できるsass(scss)とは?

ボタンを彩る演出

ホームページのボタン・アイコン・ロゴ画像

ボタンをより魅力的に見せるための演出にはいろいろな方法があります。

  • カーソルが当たると背景色が変わる
  • ボタンを押したとき、ボタンの位置を下にずらして、ボタンが物理的に押されたように演出する
  • ボタンを押すと、形が変わる
  • カーソルが当たると、背景がスライドする
  • カーソルが当たると、ボタンを囲んでいるボーダー線が動く
  • カーソルが当たると、ボタンの大きさが変わる

このようなボタンエフェクトはCSSで表現することができます。

エフェクトが綺麗なボタンはユーザーもついつい押したくなってしまいます。いろいろなボタンエフェクトを調べて、自分のデザインに取り入れていきましょう。

ゴーストボタンって何?

ランサーズ、クラウドワークスに登録する

ボタンの構成要素は、「文字」「アイコン」「背景」の3つでした。

しかし最近はこのボタンの背景をわざとつけない(背景を透明、あるいは半透明にする)で、線だけでボタンを表現する「ゴーストボタン」という手法も流行っています。

ゴーストボタンの特徴は、「すっきりして見え、デザインの邪魔をしないこと」です。

ゴーストボタンでは、背景の画像や色がはっきりと見えるため、ボタンデザインがサイトのイメージから浮いてしまうということがありません。

トップページの背景画像が美しく、サイトのデザインにこだわっているおしゃれなサイトには、「ゴーストボタン」が良く似合います。

ただし、ゴーストボタンにはデメリットもあります。

背景の無いボタンはボタンであると認識しづらく、ユーザーのクリック率が下がってしまう傾向にあるのです。

Webサイトにおいて、ユーザーにリアクションを起こしてもらうことは非常に大切なことです。

例えばネットショッピングサイトで商品の購入ボタンが見過ごされるようでは、何のためにサイトを作っているのか分かりません。

ゴーストボタンをデザインに使うときは、デザイナーの自己満足になっていないか、このデザインを使うことが本当にユーザーの為になるのかを考えることが大切です。