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

Playful UI

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

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

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

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

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

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

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

Playful UI

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

Playful UI

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

Playful UI

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

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

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

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

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

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

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

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

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

近年のUIデザイン傾向

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

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

Pinterest

Playful UI

▲2016年当時(出典:iDB、左)と、現在(右)のPinterest

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

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

Twitter

Playful UI

▲2017年当時(左)と、現在(右)のTwitter

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

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

Facebook

Playful UI

▲過去(左)と現在(右)のFacebook

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

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

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

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

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

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

Playful UI

▲2000年当時のGoogle(左、出典:Veetly)と、現在のGoogle(右)

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

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

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

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

要素1. カラフルな波

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

Playful UI

▲出典:Events app(左)Festival page(右)

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

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

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

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

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

要素3. タイポグラフィ

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

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

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

Playful UI

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

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

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

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

おわりに

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

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

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

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

(執筆:Ludmila Shevchenko 翻訳:Nakajima Asuka 編集:Kitamura Yuu、Sato Mizuki)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship