Shin Sodeyama - Portfolio

Rakuten App icon

Tone&Voiceの規定とリニューアル

2018

三木谷社長、佐藤可士和氏の直轄組織デザインラボで、楽天グループの重要なブランドアセットの一つであるアプリアイコンのトーン&マナーの規定と実装を行いました。
80を超えるサービスの特長を生かしながらも、楽天グループとしてのエンドースメント効果を最大化するためのシステムのデザインを行いました。

プロダクトーナー
楽天
担当
UX/UIデザインシステムデザイン

背景

Rakuten Design Lab.の最初のミッションは楽天グループサービスのアプリアイコンの統合でした。

私が所属していたヘッドクオーターのミッションは、楽天エコシステムの構築促進、クロスユース率の向上、顧客体験の向上であり、それらを達成するためのデザインアプローチを全て担っていました。

また私個人の思いとしても、入社当時から感じていた楽天ブランドのダサさを解決したいと思い、2016年のブランドリニューアルに続いて、アプリアイコンの統合プロジェクトを始めたのでした。

リニューアル前のアプリアイコン

アプローチ

プロジェクト期初に問いを設定しました。

どうしたら楽天ブランドのエンドースメント効果を最大化しながら、サービスそれぞれの個性を活かすことができるか?

ブランドのシステムデザインを行うときに注意しないといけないことは「求心力」と「遠心力」のバランスです。

求心力とは、楽天ブランドであることを明示するというベクトルです。
日本での楽天認知率は95%を超えるので、楽天グループのブランドであるということがわかれば、それだけで大きなエンドースメント効果がえられ、ユーザーに安心感をもたらします。

NPS調査の中でも、サービスの利用において「慣れ親しんだブランド」であることの寄与度が7~8%と、小さくない数字だったので、楽天ブランドであることはサービスブランドにとっては大きな武器になります。

遠心力とは、サービス個々の特性をできるだけ活かすというベクトルです。

入社当時、楽天は一部のブランドを除き、全てのブランドがクリムゾンレッドを採用していました。

しかし、80を超えるサービスブランドが、それぞれのマーケットで差別性を図る上でクリムゾンレッドでいいのか?個性を表現し、活かすということはできないのか?という観点から、私自身が色の拡張について佐藤可士和氏、三木谷社長に提案を行い、新たに6色が公式ブランドカラーとして追加されたのでした。

アプリアイコンにおける遠心力とはこのカラーの多様性を認めるということと、モチーフデザインがサービスそのものの特長を強く表現することです。

他社エコシステムブランドのベンチマーク

視野を広げるために、他のエコシステム系ブランドのベンチーマークを行いました。

Adobeのアイコン群が「Cool – 革新」の最たるものでした。
ブランド内でのサービスごとのポジショニングの話はあるもの、ブランドごとのポジショニングが明らかになりました。

対Amazonという観点での楽天の強みは、暖かいこと、人間味があることというのが調査により判明していたため、この情報も加味してWARMにポジショニングをするのがよさそうだという再認識をしました。

ブランドごとのポジショニングマップ
Googleのアプリアイコンのプロット
アマゾンのアプリアイコンのプロット
NAVERのアプリアイコンのプロット

グリッド開発とデザインスプリント

ざっくりな方向性がわかったので、個別の80サービスのアプリアイコンのデザイントライアルに移りました。他ブランドのグリッドシステムを参考にしながら、グリッドシステムβを作成し、それをもとにデザインスプリントを進めました。

グリッドの開発

複数人のデザイナーでデザインを行なっていため、誰がデザインしても一定の見た目に統一できるように、グリッドシステムなど最低限のルールを設定しました。

デザインスプリント

グリッドシステムをもとに、手を動かしながらデザインを進めました。

楽天グループ全体としてどう見えるか?
個別のサービス特性はきちんと伝わるのか?

こうした点に留意しながらデザインを進めました。

初期バージョン

ポジショニングの再確認とスタイル定義

デザインドラフトをベースにして、HQのデザイナーたちといっしょにワークショップを開き、楽天のそれぞれのサービスのポジショニングやスタイルの定義を進めていきました。

COOL – WARMの一軸上にデザインスプリントで作ったアイコンを並べていきました。色のチョイスが印象に大きな影響を与えることがわかりましたが、モチーフ(イラストレーション|抽象モチーフ)、ストローク(細い|太い)などが印象にどんな影響を与えるのか?といった考察を皆で出し合いながら、楽天のアプリアイコンが目指すべきスタイルの規定をステップバイステップで進めていきました。

デザインスプリントとセッションを重ねながら、佐藤可士和氏のディレクションを受けながら、楽天ならではのスタイルを作り上げました。

ガイドライン化

スタイルが定義できたらガイドライン化を行いました。
国内外どの事業部に対しても、アプリアイコンのデザイン指針とルールが明示できるように定義を行いました。

グリッドに関する規定
シンボルの位置に関する規定
プロダクトブランドレイヤーのアイコン規定

特例規定

社長承認と実行

楽天グループ全体のトンマナの方向性ができたので、佐藤可士和氏と一緒に社長提案に持ち込み、決済を獲得しました。

実行に当たっては、三木谷社長の決済済みという前提で、事業部の意向などを踏まえながら丁寧にデザインをしていきました。

楽天では社長の言うことが絶対で、事業部は基本的に従うしかないというスキームになっていますが、アプリアイコンなどブランドアセットの変更は、事業部にコストを強います。そして事業部もいうても”人”です。

頭ごなしに命令を行うよりも、事業部にとって最適なデザインは何か?納得できるデザインにするためにはどうしたらいいか?の問いをもって、膝を突き合わせて取り組んだ結果、3ヶ月以内に国内外全ての100を超えるアプリアイコンのリニューアルを完遂することができました。

楽天に遺せた大きな仕事だったと思います。

他にも見る


Warning: Use of undefined constant DESC - assumed 'DESC' (this will throw an Error in a future version of PHP) in /home/users/1/sodeyama/web/shin-sodeyama/wp-content/themes/shin/single.php on line 53

BACK TO HOME