[iOSDC Japan 2019 リポート]「サービスにおける Design System の構築」というセッションを聞いてきました

iOSDC の 1 日目にThe old man（@nakajijapan）さんによる「サービスにおける Design System の構築 」というセッションを聞きました。

モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステムに注目して様々なアプローチしてきました。

本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的な話から ではどのようにしてプロダクトにデザインシステムを導入し、どこまで何をしていったのか エンジニアリングを持って何を解決していったのかを解説します。

サービスにおけるデザインシステムの構築 by nakajijapan | トーク | iOSDC Japan 2019 #iosdc - fortee.jpより引用

印象に残ったところ & 感想

このセッションは、デザインシステムの定義から各サービスを事例にあげつつ、運営しておられる Pococha というサービスにデザインシステムを導入していった過程を紹介しながら、馴染みのないデザインシステムにというものについて概観できる内容でした。

アプリケーション開発では iOS 以外のプラットフォームでも同時にリリースすることがよくあります。

同じ体験をさせるために異なる実装をしたり、あえて片方のプラットフォームに寄せたりさまざまなアプローチがありますが、サービス開発の悩みどころでもあります。

どのような体験をユーザーにさせるべきなのか、理解度の強化やプラットフォーム間の違いを飲み込んで開発を効率的に行えるようにきちんとドキュメント化しておくことが、自分たちのサービスでも必要だなと感じました。

また、それをエンジニアリングで活用できるように Xcodegen を使ってスタイルガイドを framework に落とし込んだり、確認用のスキーマを作るところまで踏み込んだ話をしているのが参考になりました。

メモ

デザインシステム

• デザイン原則
• 組織全体の共通言語
• メリット
  • 一貫したデザインによるユーザー体験の提供
  • 効率的な開発

具体例

• ルール
• 部品
• 組織

の 3 つの指標を基準に各サービスを比較

思想

• デザイン原則
  • シンプル
  • 説明できる
  • 優先順位が分かる
  • 関連付けしやすい
• プロダクトを作るときに大切にしてほしいこと
  • Apple
  • Essential Design Principles
  • Google
  • Material Design
  • サービス特有の何か
  • ブランディング
  • 解決すべき課題
  • チームの価値観
  • HIG や Material Design などのプラットフォームにおけるデザイン原則だけでなくこちらも重要

スタイルガイド

• どのように管理するか
• 命名
• 意味

パターンライブラリ

• デザインパターンのセット
• 目的に応じてどこまで構築するのか
• 視認性

言語化とのその必要性

• 理解度の強化やプラットフォーム間の違いを飲み込む
• サービス特有の概念
• 理解度を深めるため、そして応用して適宜プラットフォームに適した実装ができるように、現状、解決策、なぜなのか、具体例などを記述したドキュメントを作成する

まとめ 開発フェーズ、チームの規模にかかわらずデザインシステムを言語化・視覚化することが大切。

最後に

発表をしていただいたThe old man（@nakajijapan）さん、本当にありがとうございました。