ウェブサイトやアプリではおなじみのUIパーツであるボタンですが、デザインを見てみると様々な種類があります。今回のワークショップではボタンのUIデザインにフォーカスし、ボタンデザインの考え方やベストプラクティスについてまとめていきたいと思います。  

時代とともに変わるボタンデザイン

bit感溢れるレトロデザインボタン WIndows95の登場でGUI（Graphical User Interface）が世に知れ渡るようになりました。ディスプレイの解像度が低いためbitが目立つデザインです。ボタンの凹凸や存在感を太いボーターや階調が少ないベベルで表現しています。     光沢感とリアルさを追求したグロッシーデザインボタン グラフィックにおける表現の幅や技術力が進化し、より本物っぽさを追求したデザインに。ボタンの丸みを光や影で表現し、質感などにグラデーションも用いられるようになります。     平面で角がついた単色フラットデザインボタン リアルなデザインから一転、UIを取り巻く環境やモバイルデバイスの普及につれて、シンプルで視認性の高いフラットなデザインに変化していきます。インフォグラフィックスとの相性も高く、情報を伝える点に重点が置かれます。     背景透過でサイトになじむゴーストデザインボタン 背景写真などのビジュアルイメージとの親和性を高くするために、フラットデザインからの派生として背景透過や枠線で表現されたデザインが登場します。ボタンを目立たせるより、全体になじませる目的があります。     フラットデザインに質感や動きを表現したマテリアルデザインボタン プログラミングの進化により、これまでの静的なものから動きやアニメーションがUIでも用いられるようになりました。Googleが提唱した、フラットデザインに加えて影などの自然な質感を加えるなどのマテリアルデザインが採用されるようになります。   ここ20年くらいでボタンのUIデザインも大きく変化していることがわかります。時代と共にデジタル環境などが進化し、それに対応していくようになります。  

良いボタンデザインとは？

このように時代と共に変化してきたボタンUIデザインですが、やはり共通して言えるのはデザインの中にきちんとした目的があるという点だと思います。まずボタンデザインで最優先となるのは、やはり視認性や存在感を表現することになります。ボタンはその特性の通り、ユーザーに押すという動作（＝クリックやタップ）してもらわないといけません。ボタンというのを認識してもらう必要があります。   次に全体のデザインとの調和も重要になります。ボタンばかりが目立ち、異なるデザインで表現されていてはいけません。あくまでデザインの一部になるので、ある程度の統一感を保つことは大切です。  

すぐに使えるボタンデザインのtips集

実際にボタンデザインをする中で効果的なデザイン手法をまとめていきたいと思います。もちろんこれら全てを用いる必要はなく、目的やデザインとのバランスで調整することが重要です。     【1.自然なグラデーション】 ボタンの質感を与えるために、変化が少ない自然なグラデーションで塗ることは効果的です。グラデーションの適用方法によってはハイライトやローライトも表現できます。やりすぎないように注意し、トーンだけでなく色味も変化をつけても面白いかもしれません。     【2.主張しない程度の角丸】 角丸を付けることで、よりボタンっぽい雰囲気が表現できます。こちらもあまり角丸の半径を大きくするのは避けます。ボタンサイズにもよりますが、基本は5px前後にとどめます。しかし、角を全て落とす（両端が半円のようになる）のはOKです。     【3.ボタンに同化したボーダー】 ボーダーを入れることで、ボタンとの間に境界線が生まれボタンの存在感が増します。ただし極端にコントラストを付けるのではなく、ボタン本体と同化するようにします。そうすることでボタン周囲の詳細な凹凸を表現でき、より本物っぽく見せることができます。     【4.内側周囲に1pxのハイライトとローライト】 インナーシャドウで上部にハイライト、下部にローライトをそれぞれ1pxくらいの幅で入れていきます。こうすることで細部のディティールがぐんと良くなります。あまり強く入れないように透明度でコントロールします。     【5.シャドウで立体感を表現】 大きめのインナーシャドウで周囲に陰影を付けます。そうすることで中央部は相対的に明るくなり、ボタンの厚みや立体感などを深みがある印象になります。     【6.光源を意識し光をあてる表現】 上部に光のイメージを模した、透過オブジェクトを重ねていきます。カラーは白でも良いですし、ベースの色と合わせたトーンであれば、より馴染むようになります。ぼかさずエッジを残した方が光沢感とメリハリのあるデザインになります。     【7.テキストサイズと彫りの深さ】 ボタンの中に入れるテキストの大きさは、大きすぎてもダメですし、小さすぎてもいけません。ボタンとのバランスを考えながら十分に視認性が確保できるサイズに設定します。またテキストにインナーシャドウを加えることで彫ったような印象を与えることができま、よりボタンとの調和を取ることができます。     【8.ボタンサイズと余白】 ボタンはただ大きければ良いものでもありません。実際にボタンが配置できるスペースは限られているケースが多いです。大きさを確保するには高さより幅をもたせた方が扱いやすいです。また中に入れるテキストに対しても十分な余白を与え文字の視認性も確保することが大切です。     【9.アイコンを使うケース】 ボタンの中にアイコンを使う場合には、テキストとアイコンを思い切って分ける方が綺麗にまとまります。区分けする線も細かなディティールにこだわりましょう。アイコンのサイズや効果はテキストと合わせます。     普段何気なく目にするボタンですが、UIデザインとしてはとても奥深いものがあります。よく見かけるパーツであればあるほど細部へのこだわりが効いてくるのかもしれません。