なぜ多くの人気サービスが「遊び心のあるUIデザイン」を採用するのか？

デザインには、人の心を動かす力があります。写真やイラストの色を変えるだけでも、印象が大きく変化しますよね。AppleやFacebookのような超有名企業も、こうしたデザインの力を活用しています。

遊び心のあるデザインは、誠実性や信頼性を担保するだけではなく、ユーザーと深く繋がるきっかけにもなるでしょう。

今回は人々を魅了する、遊び心のあるUIデザインをご紹介します。クイズや実例をとおして、遊び心の重要性を楽しく学びましょう。

【挑戦してみよう！】デザイン心理テスト

まずはデザインに関する、簡単な心理テストに挑戦してみましょう。

以下の2つのアルバムのうち、「◆」と「●」の好きなほうを選んでください。

まずはカニエ・ウエストとデュア・リパから。

次は、エド・シーランとビリー・アイリッシュです。

フランク・オーシャンとケイティ・ペリーではどうでしょうか。

それでは最後に、以下2つのデザインコンセプトのうち、パッと見て気に入ったほうを選んでください。

▲出典：Concept by Nathan Riley（左） Concept by Ludmila Shevchenko（右）

「◆」と「●」、どちらを多く選びましたか？ そして2つのデザインコンセプトのうち、どちらが好きですか？

結果を予測してみましょう。

• 「◆」を多く選んだ人：左のデザインコンセプトが好き
• 「●」を多く選んだ人：右のデザインコンセプトが好き

結果は合っていましたか？ これは単なる心理テストですが、このような傾向になるのには理由があります。

音楽にリズム、ジャンル、ムードがあるように、デザインにもパッと見たときに感じるムードやフィーリングがありますよね。ラップ、ポップス、フォークソング、R&Bでは印象が異なるように、暗い配色と明るい配色では印象が異なります。

私たちはそれぞれ自分の好みによって、デザインも選んでいるのです。

しかし仮に好みの問題なら、なぜビリー・アイリッシュの『オーシャン・アイズ』や、エド・シーランの『シェイプ・オブ・ユー』のように、多くの人に好かれる音楽が存在するのでしょうか。また『ボヘミアン・ラプソディ』のようなヒット作品を作るために大切な要素は、どのようなものでしょうか。

以下で近年のヒットデザインを概観していきましょう。

近年のUIデザイン傾向

まずは大手SNSであるPinterest、Twitter、Facebookを事例に、近年のUIデザイン傾向について考えてみましょう。

近年の傾向を掴むことで、ヒットする要素が見えてくるかもしれません。

Pinterest

▲2016年当時（出典：iDB、左）と、現在（右）のPinterest

現在のPinterestのUIは、写真の角やボタンなど、すべてに丸みがついているのが特徴です。使い心地がよく、機能性にも優れています。カラーパレットが絞られているため、コンテンツに集中できるのもポイントです。

過去にPinterestは、もう少しフォーマルな印象のUIを採用し、信頼感を築き上げてきました。その信頼感は現在も引継ぎつつ、より親しみやすいデザインに変わってきています。

Twitter

▲2017年当時（左）と、現在（右）のTwitter

Twitterも、2017年時と比べてボタンや投稿などのデザインが丸みがかっています。

また太字を活用してアクセシビリティを高めているのも特徴。以前より表情豊かになっている印象です。

Facebook

▲過去（左）と現在（右）のFacebook

Facebookは、2020年5月より新しいデザインを全世界に配信しました。大きな変更点としてダークモードの実装がありますが、今回はライトモードをご紹介します。

ライトモードでは白い部分が以前より多くなり、全体が明るく、グレーとのコントラストがはっきりしました。10代から高齢ユーザーまで使える、現代的で使いやすいデザインといえます。

近年のUIデザインの共通点は「なめらかで親しみのあるUI」

Pinterest／Twitter／Facebookのデザインに共通しているのは、「なめらかで親しみのあるUI」です。

• 丸みをおびた形
• 大胆なタイポグラフィ
• ブランドカラーを決め、それを中心に設計されたカラーパレット

こうした特徴は、じつはAppleが2017年にiOS 11で導入したのがはじまりです。それ以降、こうしたデザイン傾向を多くのブランドが採用しています。

▲2000年当時のGoogle（左、出典：Veetly）と、現在のGoogle（右）

過去の多くのブランドは、信頼性を築けるような「シャープなデザイン」が採用されていました。

しかし近年は、ユーザーに語りかけるような、親しみ深い「遊び心のあるデザイン」が信頼を得やすい傾向にあります。

UIデザインに遊び心をもたらす4要素

UIデザインに遊び心をもたらす要素として、代表的な例を4つご紹介します。

要素1. カラフルな波

色がもたらす感情についてはさまざまな説がありますが、「寒色と暖色の両方を使った、明度の高い色」の組み合わせは、デザインに面白い解決策をもたらしてくれるかもしれません。

▲出典：Events app（左）Festival page（右）

上のEventの例では、アプリUIに丸みのある波のような形や明るいグラデーションを多く使っています。

この波のような形は、装飾としてだけではなく額縁のように使ったり、一部を隠すことでコンテンツに注目を集めたりと、さまざまな用途で使えます。カラフルな波によって、音楽さえも表現できるのです。

要素2. パターンとイラスト

▲Sunshine studio page（左）Travel app concept（右）

パターンやイラストは、そこにあるだけで目をひく存在です。必ずしも大きなスペースをとる必要はありません。

たとえばFacebookは、コロナウイルスの情報や記念日、祝日など、カバーイラスト付きの情報を頻繁に表示しています。こうした画像は、見る人を前向きで明るい気持ちにさせてくれます。

要素3. タイポグラフィ

▲出典：Design festival Typographics

イラストとタイポグラフィを組み合わせるためには、スキルと時間が必要です。しかし、手間をかけて作られた新しいフォントには、キャラクター性を持ちます。

上記の例では、タイポグラフィと色がWebサイトを目立たせており、楽しい雰囲気を演出していますね。カスタマイズしたタイポグラフィは、デザインを人間味のある親しみ深いものにしてくれます。

要素4. 安心感を与えるデザイン

▲Eero Aarnioによる『Ball Chair』、写真はEero Aarnio Archivesより

丸みのあるデザインと鮮やかな色は、70年代のヒット家具であるエーロ・アールニオのボールチェアを連想させます。

このボールチェアは「心を落ち着けたいときに必要不可欠なプライバシーを提供します」と宣伝されていました。

これはまさに、最近私たちが求めているものではないでしょうか。いまでは多くのアプリやWebサイトがUIによって、安心感と必要不可欠なプライバシーを提供しようとしているのです。

おわりに

UIデザインにおいて重要なのは、ユーザーと繋がるきっかけとなり、それをより強く確かなものにすることです。

ユーザーにサービスの誠実さと安全性を伝え、ゆったりとした時間を提供することを目標にすれば、自然と遊び心のあるデザインになるはず。

こうしたデザインはユーザーを楽しませるだけでなく、ユーザーと強く繋がれるという意味で、企業にとっても価値があります。

この先、このような遊び心のあるUIデザインをもっと多く目にすることになるでしょう。

（執筆：Ludmila Shevchenko　翻訳：Nakajima Asuka　編集：Kitamura Yuu、Sato Mizuki）