デザインシステム、要はバランスなんたら説
デザインシステムの構築がひと段階し、次はそのシステムを実際のサービスに適用していく過程が待っています。さてどうやって適用していこうという課題に直面したことは皆さんも多いのではないでしょうか。
安心してください。
私たちもです。
デザインシステムを適用していく過程では、様々な課題や問題に直面することが予想されますが、それらに対処しながら実行する事が大切です。
今から、私たちがデザインシステムをサービスに適用する際のプロセス、遭遇した問題や課題、学びについてを共有したいと思います。
デザインシステム適用のフェーズとプロセス
適用を始めた初期フェーズでは、技術的な実装のしやすさ、差し替えた時の旧デザインや新デザインとの兼ね合い、ユーザーへの影響度を考慮し適用をする事で適用実績を作っていきました。
今年は、ステークホルダーが関与している、広範囲である、技術的にも難易度が高いヘッダーにデザインシステムの適用を挑戦しました。
https://blog.crowdworks.jp/archives/5700/
よりわかりやすいフォントサイズ
クライアント/ワーカーのメニュー切り替え
スマートフォンでの操作性
お知らせ表示の改善
利用しやすさを考慮した配色や設計
パソコン、スマートフォン、タブレットでのデバイス対応
これらをデザインシステムに合わせて設計しています。
ヘッダーは弊サービスの中でも重要なナビゲーション機能でありますが、着手時はデザインが大きく３種類。その中でのパターンが派生して合計6種もありました。かつ実装側も技術的負債や、管理されていないトラッキング用パラメータ、など…..やることはたくさん。
まずはデザインと技術的観点双方からの洗い出しと調査をする事から始まりました。（ここら辺の話は長くなるのでここでは割愛させてもらいます。）
ある程度の適用プランが固まったらステークホルダーとのキックオフMTGと要望のヒアリングを行いました。
私たちとしては何パターンもあるヘッダーに対して出来るだけ一貫性を保ちたい、パターンを減らして管理しやすい状態にしたい。と思う一方で、マーケティングチームやプロダクトオーナーなどにはある程度のパターン数が必要な理由があったりします。
要望のヒアリングを行い、異なる視点からのフィードバックを取り入れることで、何パターンもあるヘッダーの使い道を明確にし、それを基に具体的な適用プランを立てました。
遭遇した問題と課題
適用プランを立てたものの、デザインシステムの適用には、予期せぬ問題や課題が付き物です。以下に、弊社が遭遇した一部の問題や課題を挙げます。
アクセシビリティをどこまで担保するか（折衝術を身につけるべし）
コンポーネントを適用する際に、アクセシビリティの担保が重要でしたが、ビジネス要望を考慮した際にアクセシビリティの担保が行えないケースもありました。
これらに対処するために、アクセシビリティを担保するケースと担保しないケースとで分けコンポーネントの対応をしました。開発中の仕様変更（日々の報連相を大事にすべし）
進行中のデザインや開発時に、担当者が仕様を変えた方が良いと判断した場合、それに伴うコンポーネントの調整が必要でした。
これらに対処するために、日々のデイリーで細かく進捗を共有し合う事で、仕様の変更時にでも迅速な対応を心がけました。メンバー同士の協力と迅速な対応が求められました。デザインシステム適用後に発生する暫定対策（フットワークを軽くしておくべし）
致命的なエラーではないものの、デザインシステムを適用した事によりコンポーネント適用以外の箇所にも影響を与えることがありました。
これらに対処するために、恒久的な対応が非現実的な場合、暫定対応をする為のスコープ範囲の策定やコミュニケーションを行いました。事象へのキャッチアップや柔軟性が必要でした。
理想と現実の間でのバランスを見つけ、その時の最善の解決策を模索する
これらの問題・課題たちに対処するためには、時間と労力が必要であり、チーム全体の協力が不可欠だったなと思います。
例えば、
理想面であれば批判的思考が得意なメンバーが本質的な問いを投げかけ。
現実面であればロジカル思考が得意なメンバーが合理的な最適解や対応案を整理。
議論し決まったタスクを、チーム運営が得意なメンバーが目標へのプロセスを整備・調整していく。
といったように、メンバーの特徴や役割がうまく回っていたので、チーム内は議論をしやすい状態だったのではないかなと思います。
学んだこと
デザインシステムを実際のサービスに適用する過程で得た学びは多岐にわたりましたが、その中でも特に重要性の高いと感じたもの3つを挙げます。
１.革新的な幻想の捨て方
デザインシステムを革新的なものと捉えることはできますが、それを完璧に適用することは容易ではありません。
完璧を求めることよりも、成果や品質、スコープのバランスを保つことが重要です。成果・品質・スコープについて迷走した際には、私たちの場合は、チームビルディング時に立てた「トレードオフスライダー」に立ち返る事で議論を収束する事ができました。
また、「気になるリスト」を作成し、デザインシステムについて気になる事があれば記入できる、常にたくさん改善点が入っている状態を良しとしました。
２.小さく、細かく導入していくこと
「まずは小さく、細かく導入していく」というアプローチを常に意識していました。このアプローチにより、適用のプロセスを段階的に進めることができ、それぞれの段階で得られる反応や結果を元に、次のステップを計画することができました。
これにより、大きな問題に直面した時でも、小さなステップで解決へと進むことができました。
３.中途半端さを受け入れること
デザインシステムの適用は、一度に全てを完璧にするというものではなく、その過程で生じる不完全さや不確実性を受け入れ、それを改善していくというプロセスであると理解することが重要でした。
中途半端さを受け入れることで、完璧を追求するあまり行動を停止することなく、常に前進し続けることができました。
さいごに
デザインシステムをサービスに適用する活動はまだまだ続きますが、不確実の中を漂う事に耐えうる力は、今後も継続していくのだと思います。
これらの学びを活かし、より良いサービスを提供していくことを目指しています。
組織文化やメンバーのスキルセットが異なる前提で、一概にこれとは言えませんが、皆さんのデザインシステム適用の旅路に少しでも役立つことを願っています。
要はバラン('ω')ｽｯ……..
サポートありがとうございます！いただいたサポートはnoteでのナレッジ活動としての参考書籍代や疲れた時のコーヒ代として使わせていただきます。