【プロダクト開発❷】デザイン共通言語:デザインシステム
AquaAgeの包です。
年始にシードラウンドの資金調達を実施し、本格的に製品開発に取り組んでいます。その中、プロダクトのユーザー満足度を向上させるAquaAgeが思うUIUX設計について、こちらのnoteにまとめました↓
今回は我々のプロダクト開発において、デザイン業務の指導原則となるデザインシステムについて、私が学んだ内容を共有します。
デザインシステムとは
デザインシステム:Webやプロダクトが急速に変化して複雑化する中、静的ページの観点から考えるのは不可能になってきました。システマチックな方法でデザインにアプローチする方法のこと。デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連づけられたパターンとその実践方法です。良いデザインシステムは、プロダクトの目的達成に貢献し、チームカルチャーにフィットするように支援するものです。
一言で言うと、プロダクトのデザイン・ユーザーインターフェイス&インタラクションの一貫性、デザイン品質の向上と設計・開発コストの削減を目的とする、デザイン業務のエンジニアリングというのが、私の理解です。
デザインシステムの目的
デザインシステムの目的の一つは「クリエイティブ面の方向性を拡張する」ことだと「Researching Design Systems」の作者Dan Mallが述べています。複数の人々がクリエイティブの方向上一貫性を保てるには、パターンを明確に、共有する必要があります。デザイン言語を明確にするで、プロダクトのデザインが実行可能かつ再現可能になります。システムをより強力的にコントールできます。
効果的なデザインシステムを構築するには
デザインシステムの効果を測るための指標は、プロダクトのコンポーネンツがどれほど上手く連携して、プロダクトの目的達成に貢献しているかです。デザインシステムが効果的であると判断できるのは、
デザインプロセスにおけるコスト効率性
プロダクトの目的におけるユーザーエクスペリエンスのユーザー満足度
目的と価値を明確にする
プロダクト・サービスの対象ユーザーとその目的、ニーズ、動機を理解することが必要です。例えば、対象ユーザーが多忙な社会人で、彼ら向けのプロダクトの場合、手短に、効率よく、シンプルなどの表現になります。チームはこの目的を理解し、デザインの信条にする必要があります。プロダクトやサービスの価値、ビジョン、正確、特性などです。例えば、料理のアプリでしたら、家庭料理なのか、高級料理なのか、アプリの特性・ユーザーによって、デザインシステムも違うでしょう。
デザイン原則
明確にプロダクトの目的を表現するには、基礎となる原則と価値を確立する必要があります。プロダクト作成に関わるステークホルダー全員が賛同し、明文化し、そして実現するものです。
効果的なデザイン原則の特徴
真実であり、本質である
実用的かつ実行可能である
観点(POV)がある(個性がある)
関連づけやすく、覚えやすい
原則を定義するプロセス
目的から始める
共有のテーマを見つかる
正しい対象者に注力する
検証して原則を進化させる
行動と機能パターン
目的の達成に向けて、主にどのような行動をユーザーに促したいのかを考えましょう。
美しさと認知パターン
簡素で実用的なものか?華やかで洗練されたものか?などを、プロダクトのインタフェースを通じて表現したい個性を反映されると、外観のデザイン・ブランドとして認知されるものです。
デザインの共通言語
チームでプロダクトの一貫したパターンを作成し、使用できるようにするために、共通言語を確立する必要があります。
命名規則のパターン
命名することで「存在を与えている」。イータフェースにおいても、オブジェクトに適切な命名がない場合、チームに認識され、覚えていただけるような名前がない場合、存在していないと同然。
表面上の命名規則がない時の課題は、ライブラリ内のパターン数が増えると、探しに時間がかかるようになり、開発の効率が悪化し、プロダクトの統一性・再現性も欠けることによる、ユーザー体験も悪くなることです。そしてこの問題が時間と共に悪循環になっていく問題です。
スタイルプロパティ
色
タイポグラフィ・フォントファミリー
間隔
カラー値(デバイスとOSの違いで表示される色を制御するため)
測定単位、数字の単位
インタラクション
アニメーション
アイコンの外観
形状と境界線
イラスト
写真
音声とトーン
サウンドとオーディオ
デザイン言語を開発・設計チームに浸透させるには
デザインパターンが目に入るようにする
オブジェクトをそれぞれの名称で呼ぶ
プロジェクトの導入研修に取り入れる
定期的にデザインシステムのキャッチアップを行う
多様な共同作業を推進する(パターンマップ、パターンの可視化、命名規則)
用語集の維持
参考資料
アラ・コルマトヴァ, Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド
AquaAgeについて
AquaAgeは「自由・平等・未来志向な感性を尊重する」「持続可能なデータ循環システムを構築する」「革新的な情報技術を通じて社会に還元する」「顧客と社員の幸せを大事にする」を企業理念に掲げて、ビューティーテック事業及び文字、物体画像認識、解析を応用したAIソリューション事業を展開しています。 非接触型AI肌チェックアプリ「HADABON」、美容系事業者向け非接触型AIチェックアプリ「HADABONーPro」も提供する予定です。
この記事が気に入ったらサポートをしてみませんか?