Webサイトのボタンの役割
普段インターネットを利用していると、当然のようにそこにあるためなかなか意識しにくいですが、Webサイトのボタンには複数の役割があり、それに基づいてデザイン設計が為されています。
Webサイトデザインを学ぶ上で、ボタンについての理解は欠かせません。まずはボタンの持つ役割について見ていきましょう。
ユーザーのアクションを促す
Webサイトボタンの持つ役割だけを取ってみると、現実のボタンとそう変わりはありません。
現実上のボタンといえば、例えば券売機や自動販売機、電化製品の電源スイッチなど、ユーザーが何かをするためのアクションを起こすためのものです。
Webサイトのボタンも基本的には同じです。ページの切り替えや購入、資料請求などのボタン、あるいはSNSの『いいね』ボタンなど、ユーザーがアクションをするために存在します。
UIを向上する
UI（ユーザーインターフェイス）は『製品と使用者が接触する部分』です。PCにおけるキーボードやスマホのタップ、ゲームのコントローラーもUIです。ボタンは、一つひとつがUIの性能を向上させる役割を担っていると言えるでしょう。
特にWebサイトやスマホなどのアプリケーションでは、見た目のデザインをUIと呼ぶ場合があります。わかりやすいボタンがあることで、ユーザーはスムーズにWebサイトの機能を利用したり巡回できるようになります。
ボタンのデザインを考える上では、UIを意識することがとても大切です。
ボタンの重要な要素
ボタンには色々な種類があります。ユーザーとしては何気なく使っているボタンですが、デザインする側に回るなら、ボタンの持つ重要な要素は押さえておかなければなりません。
ボダンだと認識できる
ボタンだと一目でわかるのは、ボタンにとって重要な要素です。
背景に溶け込んでいたり、Webサイトの一部だとユーザーに思われてしまうようなデザインはNGです。Webサイトの中にある多くの画像やパーツの中にあって、それがボタンだとはっきりユーザーがわかるようなデザインの必要があります。
そのためにはボタン自体のデザインや配置する場所、Webサイトデザインの配色などをきちんと計算しなければなりません。
また、ボタンの上にカーソルが合った時に色が変わる、アニメーションが変化するといった工夫をして「この場所はクリックできる」ということをユーザーに伝えることも大切です。
押すと何が起こるかわかる
例えば、ジュースの自動販売機があったとして、ボタンを押して何のジュースが出てくるかわからないような状況は、ボタンとして機能しているとは言えません。ボタンは、押した後に何が起こるのかが簡単にわかるのが重要な要素です。
ボタンの中に文字が入っていたり、SNSの『いいね』ボタンのように、ボタンの形状そのものがボタンの機能を表していることもあります。
押した時に何が起こるかわからないボタンではユーザーはためらってしまい、商品ページやWebサイトにおけるコンバージョン率が下がってしまうことが予想されるでしょう。
押してみたくなる
会員登録の申込み画面につながるボタンや商品の購入ボタンなど、マーケティングにおいてそのボタンを押してみたくなるというのは、重要な要素と言えるでしょう。ボタンを押すことで何が起こるのかをわかった上で、押してみたくなるようなボタンのデザインが求められます。
影をつけて立体的なボタンにしてみたり、アニメーションを使ってみるといった工夫は有効です。また、周囲の色やパーツとの関係性も重要になってきます。
ボタンの構成
続いては、ボタンを構成する要素について一つひとつ考えていきましょう。ボタンをデザインするのであれば、次の要素とその組み合わせについて考慮していく必要があります。
文字
多くのボタンには文字が入っています。Webサイトを見ても開く『進む』『戻る』『閉じる』など、押すことでどんなアクションが起こるのかがわかるように、ボタンに文字が組み込まれているものは多くあるでしょう。
また、単純な機能の説明だけではなく、商品の状態の説明など、補足的な文字が入ることもあります。自動販売機の『あったかい』『つめたい』の文字はその典型です。画像の下に配置されるようなボタンは、このパターンも有効です。
アイコン
メールや電話、ブラウザにある左右に向いた矢印など、機能を象徴するアイコンがボタンに組み込まれているケースはたくさんあります。文字にすると長くなってしまうようなものを、アイコンを使うことでボタンの中にうまく納めているデザインも少なくありません。
FacebookやTwitter、LINEのように、サービスロゴをそのままアイコンとしているケースがあります。アイコンで重要なのは共通認識です。デザイナー本人がアイコンに込めた役割が、一般に認知していなければ誤解を生み、ユーザーのストレスになってしまうので注意が必要です。
アイコンと文字を組み合わせて、ボタンの持つ役割をよりわかりやすくするといった工夫に使われることもあります。
背景
ボタンの背景に何があるかも重要です。背景が真っ白であるにもかかわらず、ボタンも白なら背景と同化してしまいます。
一方で、背景をうまく使っているボタンの例もあります。『ゴーストボタン』は内枠が透明なおしゃれなボタンです。旅行サイトやホテルのWebサイトなどでよく使われます。背景の画像の邪魔になりませんし、背景が綺麗だとボタンも映えます。
背景とボタンをうまく組み合わせるには、背景の色や画像、デザインについてあらかじめ把握しておかなければなりません。ボタンを考える時は、背景との組み合わせで考えましょう。作成したボタンがどんな背景の中で使われるのか、クライアントやWebページから確認しておく必要があります。
ユーザーを迷わせないボタンデザインのコツ
ボタンをデザインする上では、ボタンの機能を一目見てわかるデザインが求められます。
そのためにも、デザイン上でどんなことを意識すべきか、ボタンデザインのコツについて見ていきましょう。
ユーザビリティを意識する
ボタンを押す上ではユーザーの使いやすさを意識する必要があります。
例えばボタンの中に長文が書かれていたのでは文字が小さくなり、読みにくくなってしまいます。適切な文字数や大きさがボタンには求められます。デザインにこだわるあまり独特なフォントを使って読みにくくなってしまうようでは本末転倒です。
機能性についても検討しましょう。ボタンを押した時にボタンが凹む、ボタンを押した後に色が変わるようなモーションをつけることで、ボタンの機能がきちんと働いていることがユーザー視点でわかるようになります。
このように、ユーザビリティを意識することがボタンをデザインする上では求められます。
視認性を高める
ボタンがどこにあるかわからないようなデザインはNGです。Webサイトを全体的に見た時に、どれがボタンか一目でわかるような視認性を意識しましょう。
コントラストも重要になります。コントラストを低くしすぎるとボタンの視認性は下がります。すでに存在するWebサイトで使うボタンのデザインを考えるのであれば、ボタンを置くWebサイトを確認しましょう。
Webサイトを一から作る場合でも、Webサイトとのバランスを考えるためにクライアントと相談する必要があります。
文字、アイコン、余白を最適化
視認性を高めるためには、文字とアイコンに対して、ボタンの内枠の余白を十分に持たせることが重要です。
ボタンに対してアイコンや文字が大きすぎると、ぱっと見た時にわかりにくくなってしまいます。余白を最適化することも、視認性の確保において意識しましょう。
ボタンデザイン時の注意点
ボタンデザインをする上での注意点について解説します。ボタンデザインをおこなうのであれば、次の点に意識した作成を心がけましょう。
Webサイトの世界観とマッチしているか
Webサイトの持つ世界観に合わせる必要があります。
例えば、女性向けの化粧品サイトを作るとして、透明度が高く水彩を使った優しさと淡いイメージをデザインするようなサイトの中に、ボタンだけスタイリッシュであったり色の濃度が濃いべた塗りだと明らかに浮いてしまいます。
Webサイトの持つ世界観や雰囲気についてあらかじめクライアントに確認を取り、それに合ったボタンを作成することが重要です。
目立つが浮いているとNG
ボタンはたしかにそこにあるように目立たなければなりません。しかし、Webサイトから浮いてしまうのはNGです。
Webサイトで利用されているフォントとボタンのフォントが違う場合や、ボタンの塗り方、形状についてはWebサイトに溶け込めるようにしなければなりません。
ボタンはWebサイトにおけるパーツの一部です。浮かせないように目立たせるバランス感覚がデザイナーには求められます。
PC、スマホなどデバイスに最適化する
PCとスマホでは、画面の大きさがまったく異なります。PC用のデザインで合わせれば、スマホで表示したときに明らかに見にくくなってしまいますし、その逆もあり得るでしょう。
最近のWebサイトでは、表示する画面の大きさに合わせてデザインが最適化される『レスポンシブデザイン』を取り入れるのが主流です。ボタンに関しても、レスポンシブデザインで作成することが求められます。
色々なユーザーが色々な媒体で閲覧することを意識しなければなりません。
トレンドを把握する
デザインには時代に合ったトレンドがあります。最近では、Googleが2018年に『マテリアルデザイン』というデザインのガイドラインを発表したことが話題になっています。このマテリアルデザインを意識してWebサイトやパーツを作るのが現在のトレンドです。
トレンドに適していないボタンのデザインは、サイト全体を古くさく見せてしまうリスクがあります。
デザイン業界のトレンドは頻繁に切り替わることもあるので、トレンドについては常に把握しておくようにしましょう。
ボタンデザインに活用できる知識
ボタンのデザインで、知っておくと役立つ知識をご紹介します。専門学校などで教えられることも多いですが、基本的な知識についてあらかじめ確認しておきましょう。
UIUX
『UI』『UX』はそれぞれ別の言葉です。
UIは先述しましたが『ユーザーインターフェイス』のことです。デザインやパーツを計算して配置・作成し、ユーザビリティの高いサイトを作り上げていくためには必要な要素です。
UXは、『ユーザーエクスペリエンス』という意味があり、ユーザーがサイトを訪れることで得られる体験を指します。「サイトが見やすい」「情報がわかりやすい」といったユーザーの感想が、Webサイトを訪れた時のUXになります。
UIとUXは密接に関係しています。UIが高ければユーザーが気持ちよくWebサイトを閲覧できるので、UXも向上します。UX向上はUIだけを意識するのではなく、サイトを訪れるユーザーの立場に立ってでデザインすることが重要です。
色彩心理学
色には、人に与える印象やメッセージ性があります。それを把握しておきましょう。代表的なものとして次のようなものがあります。
- 青：信頼、自信、静的、冷たい、Professional
- 赤：興奮、動的、情熱、熱い
- 紫：贅沢、智恵、独創的、大人
- 橙：元気、力強さ、親愛
- 黄色：幸せ、明るさ、楽しさ
- 緑：自然、成長、平穏
- 白：純粋さ、シンプルさ、清潔
- 黒：力強さ、洗練
ボタンの色を決める時、色彩効果は意識する必要があります。例えば赤は『情熱』『興奮』といった意味があるので、静かなイメージを重視する宿泊サイトのボタンなどで使われることはあまりありません。
FacebookやTwitterなどのSNSのロゴで青が使われるのは『自信』『信頼』『Professional』というイメージにピッタリで、青色のカラーをロゴに取り入れている企業は多くあります。
ボタンをデザインする色が与える印象を意識すると、イメージを印象付ける手助けになるでしょう。
デザイン力を身につける方法
ボタンをデザインし、それを仕事にできるレベルにまで昇華するためには、知識やデザインセンス、デザインツールの操作技術を身につける必要があります。これらのスキルをどのように学ぶべば良いのでしょうか。
スクールに通う
美大や専門学校で学ぶのは、もっとも効率的な方法と言えるでしょう。デザインに必要な美術的知識やツールの使い方、そのままデザイナーとしての就職につなげることもできます。
ボタンデザインはグラフィックデザイン、あるいはWebデザインに該当するので、それを教えているスクールに申し込みましょう。
ただし、本格的な専門学校に通うのは少々高額ですし拘束時間も大きくなります。時間や金銭的な問題で難しい場合は、通信講座を利用するのも有効です。学べる環境に身を置くことはモチベーションのキープにも大いに役立ちます。
独学
独学で勉強するという方法もあります。デザインを学べる動画やWebサイトが多くあります。また、書籍から学ぶのも有効でしょう。動画やWebサイトと違い、書籍はプロが監修しているケースが多く、教本として非常に参考になります。
ただし、独学にはデザインを学ぶ上で大きな欠点があります。それは客観性が得られないということです。自分のデザインが現在どの程度の技術なのか、また現在のトレンドに適しているかといった情報は入ってきません。
コンペに申し込んだり自分でサイトを作って意見を募るといった工夫を施すことも大切になってきます。
継続的なスキルアップが重要
デザインにはトレンドがあり、ツールに関しても日々新しいものが生まれ、デザインする側の環境もより良くすることができます。
専門学校の卒業後、デザイナーに必要な資格を取得した後でも、継続的にデザイナーとしてのスキルを磨いていかないと、トレンドに取り残されてしまったり、他のデザイナーにスキルで追い抜かれてしまうでしょう。
デザイナーの情報サイトを閲覧したり、企業サイトを定期的に訪れてデザインの更新を確認するなどして、知識やスキルに関しては常に貪欲であることが求められます。
まとめ
普段何気なく使っているボタンですが、デザイナー側の立場から考察すると、形や色、文字や配置など色々な部分に工夫や技術を見てとることができます。
ボタンデザインを仕事にするのであれば、ボタンの構成要素や必要なポイントを的確に知っておく必要があります。
UIUXを意識し、ユーザにとってストレスなく利用してもらうことがボタンデザインにおいては重要です。そのためにはユーザーの立場に立ってデザインを考え、Webサイトの雰囲気と合わせたトータル的なデザインバランスを考えていきましょう。