【プロダクト開発❷】デザイン共通言語：デザインシステム

AquaAgeの包です。
年始にシードラウンドの資金調達を実施し、本格的に製品開発に取り組んでいます。その中、プロダクトのユーザー満足度を向上させるAquaAgeが思うUIUX設計について、こちらのnoteにまとめました↓

今回は我々のプロダクト開発において、デザイン業務の指導原則となるデザインシステムについて、私が学んだ内容を共有します。

デザインシステムとは

デザインシステム：Webやプロダクトが急速に変化して複雑化する中、静的ページの観点から考えるのは不可能になってきました。システマチックな方法でデザインにアプローチする方法のこと。デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連づけられたパターンとその実践方法です。良いデザインシステムは、プロダクトの目的達成に貢献し、チームカルチャーにフィットするように支援するものです。

一言で言うと、プロダクトのデザイン・ユーザーインターフェイス＆インタラクションの一貫性、デザイン品質の向上と設計・開発コストの削減を目的とする、デザイン業務のエンジニアリングというのが、私の理解です。

それぞれのパターンは、私たちの環境で繰り返し現れる問題を表し、さらにはその問題に対する解決策の核心をも表しています。

クリストファーアレグザンダー、パタン・ランゲージ―環境設計の手引より

デザインシステムの目的

デザインシステムの目的の一つは「クリエイティブ面の方向性を拡張する」ことだと「Researching Design Systems」の作者Dan Mallが述べています。複数の人々がクリエイティブの方向上一貫性を保てるには、パターンを明確に、共有する必要があります。デザイン言語を明確にするで、プロダクトのデザインが実行可能かつ再現可能になります。システムをより強力的にコントールできます。

効果的なデザインシステムを構築するには

デザインシステムの効果を測るための指標は、プロダクトのコンポーネンツがどれほど上手く連携して、プロダクトの目的達成に貢献しているかです。デザインシステムが効果的であると判断できるのは、

• デザインプロセスにおけるコスト効率性

• プロダクトの目的におけるユーザーエクスペリエンスのユーザー満足度

目的と価値を明確にする

プロダクト・サービスの対象ユーザーとその目的、ニーズ、動機を理解することが必要です。例えば、対象ユーザーが多忙な社会人で、彼ら向けのプロダクトの場合、手短に、効率よく、シンプルなどの表現になります。チームはこの目的を理解し、デザインの信条にする必要があります。プロダクトやサービスの価値、ビジョン、正確、特性などです。例えば、料理のアプリでしたら、家庭料理なのか、高級料理なのか、アプリの特性・ユーザーによって、デザインシステムも違うでしょう。

デザイン原則

明確にプロダクトの目的を表現するには、基礎となる原則と価値を確立する必要があります。プロダクト作成に関わるステークホルダー全員が賛同し、明文化し、そして実現するものです。

効果的なデザイン原則の特徴

1. 真実であり、本質である

2. 実用的かつ実行可能である

3. 観点（POV）がある（個性がある）

4. 関連づけやすく、覚えやすい

原則を定義するプロセス

1. 目的から始める

2. 共有のテーマを見つかる

3. 正しい対象者に注力する

4. 検証して原則を進化させる

行動と機能パターン

目的の達成に向けて、主にどのような行動をユーザーに促したいのかを考えましょう。

美しさと認知パターン

簡素で実用的なものか？華やかで洗練されたものか？などを、プロダクトのインタフェースを通じて表現したい個性を反映されると、外観のデザイン・ブランドとして認知されるものです。

デザインの共通言語

チームでプロダクトの一貫したパターンを作成し、使用できるようにするために、共通言語を確立する必要があります。

命名規則のパターン

命名することで「存在を与えている」。イータフェースにおいても、オブジェクトに適切な命名がない場合、チームに認識され、覚えていただけるような名前がない場合、存在していないと同然。

表面上の命名規則がない時の課題は、ライブラリ内のパターン数が増えると、探しに時間がかかるようになり、開発の効率が悪化し、プロダクトの統一性・再現性も欠けることによる、ユーザー体験も悪くなることです。そしてこの問題が時間と共に悪循環になっていく問題です。

スタイルプロパティ

• 色

• タイポグラフィ・フォントファミリー

• 間隔

• カラー値（デバイスとOSの違いで表示される色を制御するため）

• 測定単位、数字の単位

• インタラクション

• アニメーション

• アイコンの外観

• 形状と境界線

• イラスト

• 写真

• 音声とトーン

• サウンドとオーディオ

デザイン言語を開発・設計チームに浸透させるには

1. デザインパターンが目に入るようにする

2. オブジェクトをそれぞれの名称で呼ぶ

3. プロジェクトの導入研修に取り入れる

4. 定期的にデザインシステムのキャッチアップを行う

5. 多様な共同作業を推進する（パターンマップ、パターンの可視化、命名規則）

6. 用語集の維持

参考資料

アラ・コルマトヴァ, Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

AquaAgeについて

AquaAgeは「自由・平等・未来志向な感性を尊重する」「持続可能なデータ循環システムを構築する」「革新的な情報技術を通じて社会に還元する」「顧客と社員の幸せを大事にする」を企業理念に掲げて、ビューティーテック事業及び文字、物体画像認識、解析を応用したAIソリューション事業を展開しています。 非接触型AI肌チェックアプリ「HADABON」、美容系事業者向け非接触型AIチェックアプリ「HADABONｰPro」も提供する予定です。