WEBサイトにおけるボタンの役割とデザイン

WEBデザインにおいて「ボタン」は必要な要素の一つですが、ユーザー目線だと普段あまり意識していない要素ではないでしょうか。
しかしボタンの役割はとても重要であるため、とてもシンプルな要素ではありますがWEBデザインをする上では注意すべき部分でもあります。
この記事では、ボタンの役割と構造を確認し、WEBデザインにおけるボタンデザインを書いていきたいと思います。

ボタンの役割と必要な要素

ボタンの役割は、そのWEBページで「何かをする」という目的の為に押すもので、WEBサイトやアプリケーションにおけるボタンの役割は、ユーザーにとってほしいアクションを誘導するということが挙げられます。

行動を起こしてもらうためには、まずユーザーにその要素が「ボタンである」ということを認識してもらわなくてはなりません。そのため「ボタン」は一目で「ボタンである」とわかるWEBデザインである必要があります。

ボタンの構成

ボタンを構成する基本的な要素は「テキスト」「アイコン」「背景」の3点です。「背景」は昨今のトレンドにあるゴーストボタンなどでないものもありますがその代わりにクリック可能な範囲であることを示す枠があります。

ボタンデザインの発展

初期のWEBにおけるボタンデザインは、周りのコンテキストと区別するために、枠・グラデーション・ドロップシャドウを使用して、浮き彫りと影を作り、要素を背景やコンテンツに対して目立たせ、クリック可能な要素だと認識できるようにするというものでした。

スキューモーフィズム

現実にあるものと同じように立体的・リアルな質感を表現した「スキューモーフィズム」と呼ばれるデザインが登場し、主流となっていきます。実際のボタンのような、現実に存在するものをデザインに取り入れることで、ボタンをユーザーへ認識しやすくします。また、実際のボタンに似せることはWEBサイトやデジタルでも同様の使い方ができることをユーザーへ認識させることができます。

フラットデザイン

Windows8でのモダンUIや、iOS7よりフラットデザインと呼ばれる「スキューモーフィズム」から立体感を省きシンプルなデザインへと移行していきます。物理ボタンを模倣することなく、WEBやデジタル独特のボタンデザインがトレンドとなっていきます。

ゴーストボタン

フラットデザインと共に登場し、iOS7で採用されたことにより流行しはじめたものに「ゴーストボタン」があります。形状は長方形や正方形といったこれまでにもある基本的なものが多く、フラットデザイン同様のシンプルなボタンデザインです。フラットデザインと違い背景色がなく透過しており、文字が浮いているように見えるデザインとなっています。ゴーストボタンは多くの場合、ボタンの枠を構成する線やテキストからなり、背景が透過していることもあるため見た目を重視するWEBサイトで使用されます。

フラットデザインにおけるボタン、ゴーストボタンのデメリット

フラットデザインが採用されているWEBサイトは全体的に立体感が省かれているため、ボタンも同様に本文やタグなど他のあらゆる要素との見た目の差がほぼありません。そのため、ユーザーは画面上でどの要素がボタンであるのかを認識し難くなるというデメリットがあります。

ゴーストボタンはスッキリとしたWEBデザインには馴染みますが、線だけで構成されるため、周りの要素に埋もれてしまいがちで場合によっては目立たず、ボタンとして認識されないというデメリットがあります。

ボタンの役割が、ユーザー対して「何かをしてもらう」という目的で設置される点を考えるとフラットデザインとゴーストボタンに共通した、ボタンとして「認識され難い」というデメリットに対し注意する必要があります。

一目で「ボタンである」とわかるためのWEBデザイン

フラットデザインやゴーストボタンのデメリットを踏まえ、ボタンデザインを作る際にボタンとして「認識され易い」WEBデザインとするためには以下の点が重要になってきます。

色

フラットデザインであっても警告や忠告に対し赤で表示したり、同意を示すボタンに対し青で表示するなど、対象のボタン要素に対し、適切な色を使うことで、ユーザーがボタンの存在を認識する助けになると同時にその役割を認識する助けにもなります。

テキスト

ボタンに記すテキストは、ユーザーがボタンをクリックした際のアクションを適切に示すものでなければなりません。クリック時に「何が起こるか」が明確でないボタンではそもそも押してもらえない可能性があります。

アイコンに関しても同様で、例として、モバイル向けWEBサイトで採用されることの多い「ハンバーガーメニュー」も多くは三本線のデザインですが、あれが「メニューである」ということを経験的に知っているユーザーでなければメニューにたどり着くことが難しいため、馴染みのないユーザーに対しても認識してもらう場合に注意が必要となります。

フラットデザインに質感を持たせたマテリアルデザイン

「色」「テキスト」以外にもフラットデザインの平面的なWEBデザインから生まれるデメリットを解消法として2014年6に月Googleよりは発表されているデザインガイドラインとして「マテリアルデザイン」があります。

ここでの「マテリアル」は「物理的な法則に則る」ことを指しており、光や影、奥行き、重なりといったをフラットデザインに取り入れること、平面でも3Dのように立体的に見せるデザイン概念です。「マテリアルデザイン」は「フラットデザイン+影」という作り方のように見えますが、実際は「影」「重なり」「アニメーション」といった要素で表現し、ユーザーが「触れるもの」であると認識することを助けます。

ボタンとして認識してもらえるWEBデザインにする

WEBにおけるボタンデザインについて役割や構成、デザインの移り変わりなどを見てみましたがいかがでしょうか。制作の際にはCSSでの作成のほか、Photoshop、Illustratorなどのツールを使用して画像素材として作成する方法をとることもあるかもしれませんが、どのデザインでも共通して重要なことは「ボタンであると認識できる」ことです。その上で押すのに適切なpxにするなどの調整が必要になります。

WEBデザイン、WEBサイト制作の際には、ターゲットとしているユーザーが要素を認識してくれるかどうか考慮しながら最適なデザインを選択しましょう。

マーケティングでお悩みでしたら、
Bigmacにお任せください。