明暗を分ける！ アプリやブランドのリデザイン事例集とケーススタディ

ブランドやアプリのロゴやデザイントーンをリニューアルし、成功をおさめている企業が続出しています。しかし、失敗すれば取り返しのつかないことにもなりかねません。

今回は、アプリやリデザインの事例と、実際にリニューアルをして成功をおさめた『Lyft』を題材にしたケーススタディをご紹介します。

リデザインしたブランドやアプリの例まとめ

Airbnb

2008年にAirBed & Breakfast社として創業した現・Airbnbは、2013に大幅なリニューアルを実施しました。その年に入社したデザイナーのダグラス・アキトンは、同社が掲げている「世界中を自分の居場所にする」というスローガンに注目。

数ヶ月かけて世界かくちんユーザー500人にフォーカス・グループを行い、スローガンの重要性を社内に解きました。

それを体現すべく、コーポレートカラーやロゴも一新。Airbnbが、テクノロジーで人々をひとつにする存在であることから、一筆書きでかける柔らかみのあるロゴに決定しました。ロゴは心の形と、現在地を表すピンの形、Aを象っています。

リデザインが功を奏し、本格的なグローバル展開を急加速させました。

Dropbox

2017年10月3日に、Dropboxは大胆なリデザインを仕掛けました。

これまでのブルーとホワイトを使ったシンプルなマテリアルデザインから、よりクリエイティブな動きのあるデザインを採用。カラフルで抽象的な形状を用いて、使う人のクリエイティビティを掻き立てます。

https://youtu.be/sUzSk5JE0d0

2006年にスタートしてから変わらない、ダンボールをモチーフにしたロゴは、同じサイズのひし形を5つ並べたよりクリーンなイメージにしました。

259のフォントに対応できるようになるなど、より多様なアイディアをオープンに受け入れるような姿勢が伺えます。

このリデザインが、ユーザーにどう受け入れられるか、注目です。

長崎県平戸市

おしゃれな自治体のホームページとして、「長崎県平戸市」のリデザインが注目を浴びています。トップページから、目的のページがすぐに選べるようになっているので、これまでの煩雑なトップページの印象を一掃するほか、全ページをスマートフォン対応にしました。

Spotify

音楽のストリーミング配信サービスであるSpotifyは、数回に渡ってリデザインを繰り返しています。グリーンを基調としつつ、よりシンプルなロゴへと収斂されて行きました。

アプリの背景画面をグレーからブラックに変更することで、アートワークを際立たせることに成功。全体的にミニマルで、可視性が高くなりました。

日本には2016年に上陸し、海外進出は遅目のスタートにも見えましたが、Apple Musicを追い越す勢いで有料会員を獲得しています。同社は、月間アクティブユーザーが1億4,000万人以上、有料会員は5000万人を超えていると発表しています。

『Lyft』に学ぶ、大胆なリデザインを成功させる秘訣

『Uber』に並び、アメリカ国内で展開されているライドシェアサービスして知られている『Lyft』。日本国内で展開していないためまだ馴染みがありませんが、アメリカではここ数年で普及がすすんでいます。近頃、アプリのデザインを大きく変更し、より使いやすいものになりました。

なぜリデザインする必要があったのか？

そもそも、なぜ『Lyft』は大幅なリデザインに踏み切ったのでしょうか。『Lyft』のUX及びプロダクトデザインのディレクターを務めるフランク・ユーは、アプリをリデザインした理由について、Web上で次のように公表しています。

• リクエストされたドライバー紹介の情報が乏しい
• 費用や所要時間に関しての表示が明確でない
• 車の走行方向が示されていない
• 色使いが悪い
• オプションパネルの位置が使いにくい

出典：Nectar Design

リどのようなリデザインを決行した？

ここからは、『Lyft』がどのようにしてリデザインされたかをご紹介します。。

1. 透明性と安全性を向上させた

システム上でドライバーと乗客がマッチすると、乗客はドライバーの名前、車のカラー、モデル等の情報を見れるようになります。さらに、ドライバーのライセンスプレートのナンバーも知れるため、乗客は簡単に正しい車だということを確かめます。

2. 基本的な配色を変更

『Lyft』はホットピンクをプライマリーカラーとして、また、パープルをセカンドカラーとして使用しています。ンク色をアクションを表すカラーとし、ロゴやリクエストリフトのボタン、目的地のピン、そしてフリーライドに使用しています。

3. 見積もり機能

新しいインターフェースでは見積もり算出も可能です。上の図にある、「費用見積もり」をクリックすることで、その区間の移動にどれだけ費用がかかるかを知ることができます。

4. タブメニューを集約

重要なメニューアクションはすべて下の方に集約しました。ユーザーはライドの種類を選ぶことができ、他のアクションもすべて同じ場所からできるので、とてもシームレスな体験になります。

5. 『Lyft』の車の表示

マップ上の小さな『Lyft』の車のデザインも変更され、ピンクとパープルの色でわかりやすく表示されるようになりました。また、車が進んでいる方向もわかるようになりました。呼んだ車が反対車線にいて、到着までに時間がかかっていたとしても、リクエストした車が自分の方へまで向かっていることがわかります。

『Lyft』デザインチームが、ユーザーを知るためにしたこと

『Lyft』には、乗客とドライバーの2種類のユーザーが存在しています。ユーザーたちに行ったリサーチは、どのようにアプリのデザインへ反映されたのでしょう？

チームに共有しやすい量的データを集めた

Valient Market Research / Valient

『Lyft』はその数値分析に力を入れています。数値結果やグラフや、チームや関係するステークホルダーに頻繁にシェアされます。数的データは分析を通じて、傾向を理解しやすい情報にまとめることが大切です。そうすることで、データはより状況を理解しやすいものとなり、デザイナーたちがが何に焦点をあてれば良いか判断できます。

ABテスト

vwo.com

リデザインの過程で、『Lyft』はたくさんのABテストを実施しました。結果として、デザイナーが作ろうと予定していたデザインが、実際にユーザーが求めているものとは違ったということもあったそうです。『Lyft』の場合、100時間ものユーザーテストをし、デザインにおける仮説検証を行なったそうです。このテストは、チームが開発したシステムを確実に磨いていく、大切なプロセスであったに違いありません。

プロダクトのリデザインをすることを恐れてはいけない

ユーザビリティにおいて問題が見つかっているのであれば、今すぐにリデザインをはじめましょう。製品を使っているときのユーザーが何を考え、何に困っているのかを想像してください。

（翻訳：Akiko Ogita）