試験公開中

このエントリーをはてなブックマークに追加

Design Systems デジタルプロダクトのためのデザインシステム実践ガイド

ボーンデジタル

2,400円+税

AirbnbやTEDなど欧米のデザイン主導型企業で導入されている、成功するDesignOpsの実践手法。本書は、デジタルプロダクト制作のアプローチである「デザインシステム」について、著者自身の経験と、Airbnb、Atlassian、Eurostar、Sipgate、TEDという規模の異なる5社への調査から得られた、効果的な構築&運用の方法をまとめたものです。

関連サイト

本書の関連ページが用意されています。

内容紹介

AirbnbやTEDなど欧米のデザイン主導型企業で導入されている、成功するDesignOpsの実践手法

Webが急速に変化して複雑化するなか、静的ページの観点から考えるのは不可能になってきました。私たちの多くは、よりシステマチックな方法でデザインにアプローチし始めています。

しかし、すべてのデザインシステムが同じように効果的であるわけではありません。一貫したユーザーエクスペリエンスをもたらすシステムもあれば、寄せ集めのわかりにくいデザインを作り出すシステムもあります。チームの関与を奨励するシステムもあれば、軽視されるシステムもあります。時間とともに進化して、まとまりや機能を増していくシステムもあれば、肥大化して扱いにくくなるシステムもあります。

うまく機能して長持ちするデザインシステムの主な特徴とは何でしょうか?この疑問をきっかけに、私は膨大な時間を費してデザインシステムの調査と考察を行いました。そして、それが本書の土台となっています。規模やデザインシステムへのアプローチが異なるさまざまな企業を例に挙げながら、どのような要素があれば効果的なシステムとなり、チームが優れたデジタルプロダクトを作成できるようになるかを探っていきます。本書を使って、私の日々の作業を楽にしてくれているアプローチを共有したいと思っています。みなさんの作業も楽になると幸いです。

本書の構成

基本編

デザインシステムの基礎、つまりパターンと慣習について説明します。デザインパターンは、繰り返したり、再利用できるインターフェースの部分です。機能的で実体のあるパターンもあれば(ボタンやテキストフィールなど)、より叙述的なパターンもあります(アイコン、スタイル、色、タイポグラフィなど)。パターンはつながり合っており、連携してプロダクトのインターフェースの言語を形成します。共通の慣習とは、デザインの原則に従ったり、パターンライブラリを維持することで、こうしたパターンを作成、保存、共有、使用する方法を表します。

応用編

デザインシステムは一晩で作られるのではなく、プロダクトとともに徐々に進化するものです。しかし、システムが正しい方向に発展し、ある程度コントロールできるようにするには、特定の原則と慣習に従う必要があります。応用編では、デザインシステムを確立、および維持するための実用的な手順とテクニックに焦点を当てます。具体的には、作業の計画、インターフェースインベントリーの作成、パターンライブラリの準備、デザインパターンの作成、ドキュメント化、進化、維持について説明します。

書誌情報

  • 著者: アラ・コルマトヴァ(著), 佐藤伸哉(監訳)
  • 発行日: (紙書籍版発行日: 2018-12-25)
  • 最終更新日: 2019-03-25
  • バージョン: 1.0.0
  • ページ数: 257ページ(PDF版換算)
  • 対応フォーマット: PDF, EPUB
  • 出版社: ボーンデジタル

対象読者

デザインシステム思考を組織の文化に組み入れることを目指している、小中規模のプロダクトチーム。ビジュアルおよびインタラクションデザイナー、UX実務者、フロントエンド開発者におすすめします。

著者について

アラ・コルマトヴァ

UXおよびインタラクションデザイナーとして、幅広いプロダクトおよび企業向けのWebサイト制作に9年間携わる。最近では、オープン教育プラットフォームのFutureLearnでシニアプロダクトデザイナーを務めた。特に関心を抱いているのは、デザインシステム、言語、コラボレーション。ここ2 年間は、こうしたテーマの研究と調査に多くの時間をつぎ込み、記事、ワークショップ、プロジェクトを通じて自らの見識を紹介している。また、「A List Apart」のようなデザイン関連サイトに寄稿したり、世界各地のカンファレンスで講演している。現在は、イギリスのグリーンエネルギーのスタートアップ企業 BlubのデザインとUXの責任者を務めている。

佐藤伸哉

株式会社シークレットラボ 代表取締役 / エクスペリエンスデザイナー。Web黎明期よりユーザーエクスペリエンスのスペシャリストとして、海外のデジタルエージェンシーの日本での活動支援、国内企業の事業戦略のアドバイスやデザイン戦略、プロダクト開発のデザイン支援などを行っている。HCD-Net認定人間中心設計専門家、LEGO® SERIOUS PLAY®メソッドと教材活用トレーニング修了認定ファシリテータ、Google Developers Expert (Product Design) およびGoogle認定デザインスプリントマスター。主な監訳書に『デザインスプリント』(オライリー・ジャパン)など。

目次

刊行によせて

  • イーサン・マルコッテ
  • アラ・コルマトヴァ
  • 佐藤伸哉

本書について

  • 本書の構成
  • 用語
  • デザインシステムへの見識
  • 監訳者による訳註、脚注
  • EPUB/Kindle版電子書籍について

基本編|1章:デザインシステム

  • デザインパターン
  • 共有言語
  • パターンライブラリとその限界
  • 効果的なデザインシステムを構築するには
  • 例:10分レシピサイト

基本編|2章:デザイン原則

  • 効果的なデザイン原則の特徴
  • 原則を定義する
  • 原則からパターンへ

基本編|3章:機能パターン

  • パターンは進化しても、振る舞いは不動
  • 機能パターンを定義する

基本編|4章:認知パターン

  • ブランドイメージの表現を補助する認知パターン
  • 認知パターンがシステムをつなぐ
  • 認知パターンの探究
  • イテレーションとリファイン
  • チーム演習:象徴的なパターン

基本編|5章:共有言語

  • 命名規則のパターン
  • チームにデザインランゲージを浸透させる

基本編の振り返り

  • システムの仕組みを理解する

応用編|6章:システムの範囲

  • ルール:厳格 vs. ゆるい
  • 部品:モジュール型 vs. 統合デザイン型
  • 組織:集中型 vs. 分散型
  • まとめ

応用編|7章:計画と実践

  • 上司やより上位のステークホルダーの支援を得るには
  • どこから始めるか
  • システムによる実践思考

応用編|8章:機能パターンのシステム化

  • 目的指向のインベントリー
  • 1.主要な行動を特定する
  • 2.既存の要素を目的別にグループ分けする
  • 3.パターンを定義する
  • 小さい規模でプロセスを繰り返す
  • まとめ

応用編|9章:認知パターンのシステム化

  • スタイルプロパティをより詳細に定義する
  • 美しさの品質と象徴的パターン
  • 認知パターンを特定する
  • アニメーション
  • 音声とトーン
  • まとめ

応用編|10章:パターンライブラリ

  • コンテンツ
  • パターンの編成
  • パターンの明文化
  • ワークフロー
  • ツール
  • パターンライブラリの未来

まとめ

関連資料

対談:アメリカの企業に感じるデザイナーの役割の変化

  • アメリカでデザインシステムが注目されたわけ
  • 問題を解決するためのデザインが楽しかった
  • デザインを多角的にとらえる方法は、アメリカでは必須
  • エクスペリエンスデザイン分野に新しいドメインを作りたい

著者・監訳者プロフィール

あとがき

Home 書籍一覧 Design Systems デジタルプロダクトのためのデザインシステム実践ガイド ▲ ページトップへ戻る