教育系スタートアップatama plusでUX/UIデザイナーをしている沼田です。 デザインシステムに取り組みたいけれどどこから手を付けたらいいかわからない、そんな方に向け私の実体験をもとにお伝えしていきます。
認知パターンは、ブランドを表現する
第1回で認知パターンとは何か、以下のようにお伝えしました。
認知パターンは、インターフェイスの色や形に関わるルールやパターンのことを言います。カラーやタイポグラフィ、レイアウト、余白、アイコンスタイル、アニメーションなどのスタイルや、またその組み合わせです。それらは、ブランドをデジタルプロダクトのインターフェイスに落とし込み表現しています。
たくさんのプロダクトに存在するログインフォームも、テキストエリアとボタンという同じ要素で構成されていても色や配置によってまったく違う印象を受けます。効果的な認知パターンは、プロダクトを差別化する大きな力となります。
そして、書籍『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』によれば、「認知パターンは表面ではなくブランドのコアに存在してこそ本領を発揮するもの」。ほかと「ただ」違うのではなく、ブランドイメージと合った印象を受けるものにしていきたいですよね。
チームでブランドを理解する
ブランドを深く理解し、プロダクトの見た目に落とし込む。実際にブランドを立ちあげた人がすべてのトーン＆マナーを設計するだけであれば簡単かもしれませんが、さらに複数人で共通認識を作るとなると一気に難易度はあがります。
ここからはatama plusを例にお話しします。デザインシステムの導入を検討していた当時、6人のデザイナーがいました。認知パターンの定義は、そのなかの複数人で取り組むことに。
デザインシステムは複数人でのプロダクトづくりを効率化するもの。複数人ですり合わせながらブランドを育てることにこだわりたいと考えました。お互いにレビューしながら速いスピードでプロダクトを作っていく――。その環境がこれから人数も拡大するデザイナーチームには適していますし、何より共通理解のために時間をとって考えきるやりかたの方がatama plusのカルチャーに合っていると思いました。
では、認識合わせからプロダクトに落とし込むまで、私たちが実際どのように認知パターンに取り組んでいったのかを見ていきましょう。
STEP1：「らしさ」を言語化
atama plusには社内のプロダクトデザイナーとは別にブランド戦略顧問がおり、その人がロゴや色、キャラクターなどをデザインしています。今回私たちがやりたかったのはブランドイメージのリニューアルではなく、あくまでブランドが持つ既存イメージを維持したままプロダクトに落とし込むこと。そこで、まずは改めて時間をとり、すでにあるatama plusのデザインを紐解くことから始めました。ブランド戦略顧問の口からデザインに込められた想いなどを語ってもらい、そのなかで登場した重要なキーワードをまとめていきました。
このキーワードはあくまで企業として与えたい印象です。プロダクトとして、どのような印象でありたいのかはプロダクトデザイナー間で認識合わせをしたり、デザイン原則で目指す世界がキーワードによって阻害されないかも確認していきました。会話の結果、企業とプロダクトの打ち出したい印象は合致しており、「らしさ」の言語化としてはこれらのキーワードをカギに進めていくことにしました。
