![見出し画像](https://assets.st-note.com/production/uploads/images/93503980/rectangle_large_type_2_f73261c8e17204e9c8b84a89caa07277.png?width=800)
UIデザイン(デジタルプロダクト)からブランドを作る考え
この記事は Goodpatch Design Advent Calendar 2022 17日目の記事です。
はじめに
日々デザイナーとして、デジタルプロダクトに関わる中で、やはり「ブランディング」というのは作る側にとってもユーザーにとっても重要な考え方だと感じます。
「ブランディング」というのは、「このプロダクトでどんな世界を実現したいか(ビジョンミッションや経営戦略)」であり、ユーザー体験からライティング、ビジュアルの部分まで、作り手にとってはプロダクトを作る際の一つの指標になります。
ただ、私が感じる世の中の認知では、UIUXデザイナーやエンジニアなど実際に手を動かしデジタルプロダクトを育てていく人たちとブランディングというのは、違った職種で違った領域だと思われているような気がします。
私はデジタルプロダクトの作り手側だからこそ「デジタルプロダクトに関わるデザイナーはブランドの作り手になれる」と信じています。
今回の記事では、「デジタルプロダクトの作り手がブランドを作ることで生まれるいいこと」について書いていきます!
デジタルプロダクトにおけるブランディングとは何か?
![](https://assets.st-note.com/img/1671264918905-0j05kqcRV2.png?width=800)
ブランディングとは、企業やサービスの「目指したい世界・経営戦略」をもとに、宣伝媒体やサービスなどユーザーのタッチポイントにそれらを実現・期待させるようなコミュニケーションをとる流れのイメージです。
ブランドを語る上でいろいろな図が世の中にありますが、デジタルプロダクト(アプリなど)は、ユーザータッチポイントの一つに括られることがよくあります。
![](https://assets.st-note.com/img/1671263555515-Cr66sc6ZEO.png?width=800)
しかし、デジタルプロダクトを中心にしているサービスや企業にとって、ユーザータッチポイントをもっと細かく整理するとこのような図になります。
![](https://assets.st-note.com/img/1671264122869-PTRHwkSw8t.png?width=800)
コアの次に大切なタッチポイントはサービスのメインになるプロダクトになります。このタッチポイントは、ユーザーとの触れ合いの頻度という観点でも、S宣伝媒体など他のタッチポイントより重要度が高い位置付けになります。
Core(経営戦略やミッション)とデジタルプロダクトの距離が近しい関係性になるので、デジタルプロダクトの作り手は「ビジョンミッション経営戦略」を理解しプロダクトに反映し、時には一緒にコアを作ることが一番できる役職かなと思います。
では実際にどのようにブランドをデジタルプロダクトに落とすのかを事例ベースで見ていきます。
デジタルプロダクトのブランディング例
Duolingo
![](https://assets.st-note.com/img/1671256334220-q7bDc1NEKE.png?width=800)
Duolingoは外国語教育を無料で受けることができるアプリです。可愛い鳥のキャラクターやイラストが語学学習を盛り上げてくれ、諦めがちな学習をゲーミフィケーション要素を用い継続させてくれるアプリです。継続の仕組みやユーザーコミュニケーションなどUIデザイン面でもとても勉強になるアプリなので個人的におすすめです。
▼Duolingoのブランディング例
![](https://assets.st-note.com/img/1671256587035-rvLNK7EONa.png?width=800)
Duolingoの使命(ミッション)
世界で最高の教育を開発し、誰でも利用できるように。
背景
外国語を習得すると収入が2倍になる可能性があり、自分や家族の生活を変えることができる。しかし、お金のある人だけがいい教育を受けることができ、お金のない人が読み書きを学ぶことができないことにCEOが不公平さを覚え、それが使命になっている。
どうプロダクトに落ちているか?(一部抜粋)
- 低摩擦:学びの体験をなめらかにする。オンボーディングフローなど可能な限り直感的に。
- やる気を起こさせるゲームの仕組み:やる気を維持することが学ぶことにおいて最も難しいので、関心を維持することに焦点を当てて開発する。
- 美しいデザインと魅力的なストーリーテリング:各ボタンの正確な形状と色から、各レッスンの終了後に祝福するアニメーションまで、ユーザーの喜びを最大化するように設計する
- 教育学に基づいた多様な学習体験:学習科学と第二言語取得の専門家で構成されているチームによって学習内容が設計されている
このように、ミッションを達成するために実際にプロダクトにどのように落ちるのか?の部分が密に設計されています。
ミッションや経営戦略だけでは具体物が描きにくいので、いかにプロダクトを作るデザイナーがその内容を噛み砕きプロダクトに起こすかが力の出しどころになります。
UI・UXデザイナーがブランドを作るメリット
メリット:ブランドをプロダクトに落とした時の具体度が高いのでプロダクトに反映されやすい
デジタルプロダクトを実際に作るデザイナーは、「体験」「UIのビジュアル表現」「ユーザビリティ」などの観点からブランドを構築することができます。実際ビジョン・ミッションなどがあったとしてもそれを実際に「プロダクトにどう落とすか?」の具体までは見えづらい場合が多々あります。
そのような時にUIデザイナーやUXデザイナーなどデジタルプロダクトのサービス解像度が高いメンバーがブランディングに関わることで、このビジョンを達成するための体験を誰よりも解像度高くプロダクトに落とすことができます。
▼具体的なできることはこんな感じ。
デザインシステムにブランドを反映する
ユーザー体験にブランドを反映する
UIのビジュアルにブランドを反映する
ユーザービリティにブランドを反映する
ソフトウェア設計にブランドを反映するなど。
実際に作る時の観点が合わさって、一気通貫したブランドを感じられるデジタルプロダクトが完成します。
🌟UIのビジュアルにブランドを反映した例:Netflixの没入体験
![](https://assets.st-note.com/img/1671256730250-5J1YfChIne.png?width=800)
Netflixがブランドとして徹底している点は映画館に来たような没入感があると思います。
例えばサムネイル。サムネイルはamazon primeなどの競合と違い縦に長い比率で黒い画面に浮かび上がるように配置されています。まるで映画館のエントランスを感じさせるようなレイアウトです。
サムネイルは、AIが自動で切り取り、ユーザーによって表示を分けていることで有名です。また、サムネイルのレイアウトもシンプル画面全体に統一感があり、ユーザーが作品へ関心をいただきやすいよう工夫されています。
(レイアウト=サムネイルが人物1人の構成が多かったり無駄な情報が少ない)
「サムネイルで映画をどう魅力的にUI上に表示するか」や「映画館のような没入感をどう感じさせるか」はプロダクトデザイナーが最終的にアウトプットするところになるので、ここもプロダクトデザイナーとブランドは切っても切り離せない関係だということがわかります。
(他の例ですと、みんなの銀行さんのフォントのこだわりとかすごく好きです。システムフォントをあえて使わないという選択肢でUIの表現の可能性が広がり、ビジュアル面でのブランド感が強くなっていて好きです)
![](https://assets.st-note.com/img/1671265290564-dQ6iDpx8fG.png?width=800)
🌟ブランドを反映したユーザー体験例:IRIAM・Pococha
![](https://assets.st-note.com/img/1671257062512-qFkpEoR8RC.png?width=800)
ライブ配信アプリに携わらせていただく機会が個人的に多いのですが、ライブ配信アプリはコミュニケーション設計が優れているものが多く、
リスナー(視聴者)とライバーのコミュニケーションやインタラクションをいかにテンポ良く盛り上げるかを徹底しているアプリが多い印象です。特に、ライブ配信アプリのIRIAMは、ライバーにギフトを送ったときのテンポ感が気持ちよく、押した瞬間にLINEスタンプのようにギフトを気軽におくれ、それをオンタイムでライバーさんがすぐに反応してくれるというやり取りが気持ち良いです。
![](https://assets.st-note.com/img/1671257158975-Ve14S61h0w.png)
また、DeNAのPocochaも、ギフトがコミュニケーション起点のものが多く、例えば「なんちゃって」のスタンプを送るとライバーさんも「なんちゃって〜」とスタンプの真似をしてくれるリアクションが返ってきます。このコミュニケーションやリアクションを生みやすいギフトの表現やインタラクションにもブランドらしさを入れ込むことができる気がしています。
🌟ブランドを反映したUXライティング例:CRISP SALADA WORKS
![](https://assets.st-note.com/img/1671257213170-bKwvY7nzVb.png?width=800)
最近話題に上がるUXライティングもデジタルプロダクトにブランド反映させる一つの手段です。
UXライティングの肝は、ブランドを感じさせる言葉遣いとユーザーに寄り添いながら操作の邪魔にならないライティングができるかです。
例えば、CRISP SALADA WORKSは「CRISP SALADA WORKS」というキャラクターと対話している気持ちになるライティングが多く参考になります。
ここから自ずとこのサービスは、私にとってフレンドリーな存在なんだとユーザー認知が醸成されます。
![](https://assets.st-note.com/img/1671257323995-qu4FJwwRMW.png?width=800)
特に会員登録時の誕生日登録の部分に「入力しておくといいことが…!」のメッセージに感動しました。
いろんなアプリで誕生日は登録しているけど、これが企業にとってメリットがあるのか私にメリットがあるのかわからず登録に躊躇してしまいますが、ユーザー側にメリットがあると示してくれている。それにプラスして、何かしらいいことがあるという可愛らしい表現でこのブランドの開放感や緩さを感じられます。
(私はUXライティングにこだわってるアプリが好きです。slackやzenlyとか)
まとめ:デジタルプロダクトデザイナーがブランドを考えるとより具体的な成果物に落ちやすい
デジタルプロダクトに関わるデザイナーが経営戦略やビジョンミッションなどを理解・発案することでブランドがより具体化されたプロダクトを作ることができます。
はじめに、に書いたようにブランドとUIなど分断して考えるのではなく、一体化して具現化できるようなデザインの在り方がいいなと個人的に思います。
このnoteは私個人の発信ですが、ぜひ私が所属しているグッドパッチでデジタルプロダクトのブランディングなどご相談ありましたらご連絡ください!
長かったけど最後まで読んでくださりありがとうございました!🌟
▼グッドパッチの事例
https://goodpatch.com/work
読んでいただいてありがとうございます!デザインの本の購入資金に当てたいなと思うので支援していただけるととっても嬉しいです!資金で買った本をnoteにまとめたいと思います。