年々進化しているボタンをデザインするポイントを解説、デザイナーの追求に終わりの文字はない

Webデザインにおいて、ボタンの存在は欠かせません。検索する時、サイトにログインする時、ソーシャルでシェアする時、ショッピングカートに入れる時、たくさんのボタンが使用されています。

これらボタンのデザインはWeb業界と共に進化し続け、気がついたら数年前のデザインだったということもあるでしょう。
年々進化しているボタンがどのように変わってきたか、Dribbbleをベースにしてデザインするポイントを紹介します。

進化しているボタンのデザイン

Button Design Over the Years

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

2009年のボタンのデザイン

2009年はインターネットが40回目の誕生日をむかえ、Dribbbleに最初のショットが登場しました。
ボタンのデザインはグレースケールが主流で、繊細なグラデーション、角丸、シャドウがデザインに使われました。これらの美学はネイティブのシステムボタンを指しています。

2009年のボタンのデザイン

Wojciech Dobry, Dan Cederholm, Josh Bryant, Dribbble, Sarah Parmenter, Matthew Smith

2010年のボタンのデザイン

2010年はInstagramが登場しました。
ボタンの形に大きな変化はありませんが、より多くのカラー、ディテール(内側のシャドウなど)、装飾的なタイポグラフィが特徴です。

2010年のボタンのデザイン

Wojciech Dobry, Morgan Allan Knutson, Troy Bergland, Claudiu Cioba, Liam McKay, Jared Christensen

2011年のボタンのデザイン

2011年はCSS3が初公開され、インターネット利用者数は10億人を超えました。
スキューモーフィズムは引き続いており、多くのデザイナーはクリエイティブな方法でこのスタイルを発展させました。この時点ではシャドウやライトを使うためのルールを見いだすことはできませんが、これらの要素が存在することを確認できます。

2011年のボタンのデザイン

Wojciech Dobry, Julien Renvoye, Claudiu Cioba, Meagan Fisher, Josh Hemsley, Jonathan Moreira

2012年のボタンのデザイン

2012年はスキューモーフィズムの下落、そしてフラットデザインの始まりです。
スキューモーフィズムは一部のデザイナーの間ではマスターレベルに達しましたが、他の人たちは新しいデザインを模索している中、フラットデザインが浸透しました。

2012年のボタンのデザイン

Wojciech Dobry, Eduardo Santos, Mike | Creative Mints, Maykel Loomans, Ian Collins, Dawid Liberadzki

2013年のボタンのデザイン

2013年はiOS7がリリースされ、Appleもスキューモーフィズムから卒業しました。
この年が間違いなく、今日のフラットデザインのトレンドが始まった年です。Dribbbleでもショットのほとんどが立体的なデザインから、フラットなデザインに変わりました。

2013年のボタンのデザイン

Wojciech Dobry, Cosmin Capitanu, Eddie Lobanovskiy, Jonathan Moreira, Riki Tanone

2014年のボタンのデザイン

2014年はGoogleから、マテリアル デザインがリリースされました。しかしながら、多くのデザイナーはこのスタイルに共感しませんでした。
この年の面白い傾向は、誰もがゴーストボタンやフラットボタンを突然使い始めたことです。Dribbbleでもそれを確認できます。鮮やかなカラーの境界線、それが2014年です。

2014年のボタンのデザイン

Wojciech Dobry, Eric Hoffman, Ramil Derogongun, Mason Yarnell, Colin Garven, Bill S Kenney

2015年のボタンのデザイン

マテリアル デザインがUIデザイナーに注目されはじめたのは、ガイドラインがリリースされてからです。繊細なシャドウを備えたフラットなデザインは、現在のトレンドに大きな影響を与えています。多くのデザイナーがそのデザインを取り入れました。

2015年のボタンのデザイン

Wojciech Dobry, Victor Erixon, Leo Leung, George Vasyagin, Hoang Nguyen, Joshua Krohn

2016年のボタンのデザイン

デザイナーはすぐ飽きるので、マテリアルとフラットデザインとの新しい要素を模索します。ボタンの表面のグラデーションは、3次元を強調するのではなく、ボタンの素材そのものを強調しています。そして、色つきのシャドウを与えて輝かせています。

2016年のボタンのデザイン

Wojciech Dobry, Anastasiia Andriichuk, Gleb Kuznetsov✈, Ghani Pradita, Kristofor, Ben Mingo

2017年のボタンのデザイン

2017年は今のところ、ミニマリズムとフラットが注目されています。そして、多くのデザイナーはまた新しいものを探しています。現在のデザインは技術的には制限されない段階です。そのため、トレンドとファッションのフレームだけを考えて、デザインに取り組むことができます。

2017年のボタンのデザイン

Ben Cline, Anton Aheichanka, Vera Voishvilo, George Vasyagin, Ghani Pradita

top of page

©2017 coliss