Design system - ロジックとデザインを繋ぐもの

KINTO Technologies Advent Calendar 2021 - Qiita の13日目の記事です。 はじめに 近年、デザインシステムはプロダクト開発のホットワードとなり、多くの有名企業がオープンソースとしてデザインシステムを公開しています。例えば、GoogleのMaterial design system、Atrasian社のLightning、Adobe社のSpectrum、IBM社のCarbonは有名なデザインシステムで、アメリカでは200以上の政府サイトに導入されているUSWDSもあります。企業のみならず、政府単位でデザインシステムが導入され、驚くべき広がりを見せています。 KTCでもデザインシステムを開発するチームがあります。 KTCはグローバル範囲内で数多くのKINTOプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリ、コンポーネントライブラリなどが含まれるため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では特にデザインとフロントエンドの関連性がある部分に焦点を当てて、2021年12月にKINTOのデザインシステム最新バージョンに導入されたグリッドシステムについて紹介します。 最高のレイアウトとは、コンテンツから注意を逸らすことの無いレイアウト デザインの基礎中の基礎と言われるテクニックのひとつとして、レイアウトを行う際に格子状のガイドラインを引き、ブロックごとに文字や図版を配置していく、「グリッドシステム」という手法があります。 個人的にはグリッドを使った作業が便利だと感じています。グリッドはさまざまなレイアウト間の一貫性を維持し、デザイン上の意思決定を迅速化するのに役立つからです。グリッドを使用すると、さまざまなスクリーンサイズでの配置やレイアウトをより正確にコントロールすることができます。KINTOでは、Material Designで推奨する流体幅のグリッドレイアウトを使用しています。この場合のコンテンツ幅はカラム幅のauto scalingとカラム数の増減により決められ、XD・Figmaでプロトタイプを作る際にアートボードサイズも制限がなくなります。 PS： 1. gutterとside marginは固定数値です（8の倍数）。 2. column幅は可変で、8の倍数じゃなくても構わないです。 一方、感覚派デザイナーの中には、グリッドのせいでクリエイティビティが制限されると考える人もいます。それは確かにそうかもしれませんが、情報を整理するためにはグリッドシステムが非常に効果的なので、多くのデザイナーが日頃からこれを採用していることは認めなければなりません。 最高のレイアウトとは、コンテンツから注意を逸らすことの無いレイアウトです。グリッドシステムは数学的に正しい構成なので、そのようなレイアウトの代表例なのです。 読みやすいデザインを数値で設計 レイアウトは、ユーザーに情報を伝えやすくするための手法の1つで、要素を美しく揃えることでウェブサイトの情報をより的確に伝えたりサイトのブランド力を高めることができます。 特にウェブサイトにおいては感覚で実装せず数値で実装することで、ソースが短縮されパフォーマンスにも優れた実装が可能になります。 1.ユーザーにわかりやすく情報を伝えることができる グリッドシステムを利用すると情報が整理されるためレイアウトが美しくなります。レイアウトを整えることでシンメトリー（対称性）が生まれ、デザインに統一感を生み出すことができます。サイトが美しければユーザーはそのサイトを好きになります。結果、サイトを通じて企業のブランド力が高まります。 また、情報が整理されることでユーザーはいち早く欲しい情報を得ることができます。つまり、ユーザーに伝えたい内容を伝えることができます。 2.計算と理論でデザインできる グリッドシステムは黄金比、プラチナ比などを用いて作成します。Webサイトはデバイスや環境によって見え方が異なります。 操作性が重要とされるWebデザインではグリッドシステムのデザインがポイントになります。 参考：【黄金比、白銀比】代表的なアスペクト比（縦横比率）を一覧にしてみた - クモのようにコツコツと 3. ソースがきれいになりパフォーマンスにも良く、更新性も高い 同じページのデザインでもCSSの記述量は開発者によって異なる場合があります。ソースが短ければ可読性も増し、パフォーマンスにも優れています。 サイトによってはガイドラインが存在しないものもありますが、シンプルでわかりやすいコードであれば運営側でも更新しやすくなります。 ロジックとデザインを繋ぐもの レイアウトはいわば「絵」です。具体的な形をともなってはじめて評価できます。 一方でソースコードは「ロジック」です。形の定まらない抽象的な問題を取り扱います。CSSではロジックとして絵を表現します。抽象的な宣言を介して個別の形を作ります。CSSだけに限らず、UIデザインではあらゆる意味で個別の形を作るためのロジックが要求されます。 デザインと実装の溝は、この2つの性質を掛け合わせる難しさにあります。 そして溝を埋めるための建設的な議論をするためには、それぞれの性質についてそれぞれの担当者が共通したイメージを持てなければいけません。レスポンシブグリッドデザイナーではコーディングを介さずともグリッドシステムのロジックに触れられるインターフェースを目指しました。これによってデザイナーがロジックを理解できれば、開発者との共通したマインドセットを持つためのきっかけになるはずです。 私が過去でCSSを書くとき、これら2つの性質について視点を行き来させている感覚があります。あるときは絵を描いていて、あるときはロジックを組み立てています。その最中で、ふとその「どちら側」にいるかをまったく意識しなくなる瞬間があります。感覚の上ではそれらの境界がなくなって一体化しているように思えます。 しかし分業している以上、作る側の感覚が分断してしまうのは防ぎようがありません。それでも、ひとつの制作物を統一した世界観のまま完成させることは可能なのか。なにがその実現を妨げるボトルネックになっているのか。制作の意味を前進させるために、この問題については意識し続けざるを得ないと思います。 おわりに デザインシステムはその名の通り「システム」であるため、プロジェクトではなくプロダクトです。その構築にはエンジニアリングは不可分です。長期的にデザインシステムを運用するためには、開発者と利用者、双方にとって使いやすいプロダクトであり続ける必要があります。 Global KINTO Design systemはまだ発展途上のプロダクトであり、Globalで利用しているサービスもまだ限られています。今後も継続的に改善を続け、多くの利用者にとって有益となり、さまざまなサービスで利用されるプロダクトに成長させていきたいと思います。 当社では、トヨタ車のサブスク「KINTO」等の企画/開発を行っており、エンジニアを募集中です。 KINTO Technologies コーポレートサイト 参考資料 Design Systems by Alla Kholmatova Distilling How We Think about Design Systems by Sarah Federman An Intro to Design Systems by Sarah Federman Storybook CSS triangle generator The CSS Mindset | Max Böck - Frontend Web Developer Algorithmic Design: Every Layout Responsive Web Design – A List Apart The In-Between Responsive layout grid - Material Design レスポンシブデザインに見るデザインカンプと実装との溝