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

  • 著者:アラ・コルマトヴァ
  • 監訳:佐藤伸哉
  • 定価:本体2,800円 + 税
  • 発行・発売:株式会社 ボーンデジタル
  • ISBN:978-4-86246-412-5
  • 総ページ数:256 ページ
  • サイズ:B5判、4色

発売日:2018年12月21日

製品の購入はこちら

  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store

※書店でお買い求めの際には、予め在庫をご確認ください。≫取扱い店舗
※PDF書籍に関しては書店販売を行っておりません。

書籍カバー画像

誌面サンプル 本書について

誌面サンプル 本書について

誌面サンプル 1章 デザインシステム

誌面サンプル 2章 デザイン原則

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

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

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

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

日本語版レビュアー、識者の推薦コメント

川口崇大(米Splunk デザイン担当最高責任者、元Airbnb エクスペリエンスデザインマネージャー)

デザイン文化を広め、クオリティを高め、そして日本でのデザイナーさんたちの地位と職業に対する偏見をなくしていくためには、日本のUXデザイン産業自体が成長し次のレベルに行かなければならないと思っています。この本はアメリカで広く取り入れられているデザインプロセスを、わかりやすく、包括的にまとめた素晴らしい本です。「きれいなデザイン」ではなく「問題を解決するためのソリューションベンダー」としてのデザインの地位を獲得するためにも、ぜひ参照ください。

大槻淳子(米Smashing Ideas アソシエイトプリンシパルデザイナー)

近年のデジタルプロダクトデザイン、ブランディングにおいて、流動的なコンテンツを多様な媒体で統一するためのデザインシステムの構築は必須です。この本は、デザインシステムの基礎、構築、管理について、多くの事例を交えつつ、包括的にわかりやすく説明しているので、これからデザインシステムを自社ブランドや様々なプロジェクトに取り入れたいと思っている皆さんのための、最良の入門書だと思います。

長谷川恭久(デザイナー)

デザインシステムといっても、まずは組織と人のデザインから。デザイナーが1人でがんばるといった状況から抜け出さなければ、デザインシステムは作れません。本書を通して、組織でデザインシステムを育て上げるためのヒントを得ることができるはずです。

深津貴之(THE GUILD 代表)

おかげで皆に配れます。翻訳してくれてありがとう。

対象読者

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

本書の構成

基本編

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

応用編

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

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

著者:アラ・コルマトヴァ(Alla Kholmatova)

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

監訳者:佐藤伸哉

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

誌面サンプル 3章 機能パターン

誌面サンプル 4章 認知パターン

誌面サンプル 5章 共有言語

基本編

1章 デザインシステム

  • 1.1 デザインパターン
  • 1.2 共有言語
  • 1.3 パターンライブラリとその限界
  • 1.4 効果的なデザインシステムを構築するには
  • 1.5 例:10分レシピサイト
  • 対談:アメリカの企業に感じるデザイナーの役割の変化①

2章 デザイン原則

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

3章 機能パターン

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

4章 認知パターン

  • 4.1 ブランドイメージの表現を補助する認知パターン
  • 4.2 認知パターンがシステムをつなぐ
  • 4.3 認知パターンの探求
  • 4.4 イテレーションとリファイン
  • 4.5 チーム演習:象徴的パターン
  • 対談:アメリカの企業に感じるデザイナーの役割の変化②

5章 共有言語

  • 5.1 命名規則のパターン
  • 5.2 チームにデザインランゲージを浸透させる
  • 対談:アメリカの企業に感じるデザイナーの役割の変化③

応用編

6章 システムの範囲

  • 6.1 ルール:厳格 vs. ゆるい
  • 6.2 部品:モジュール型 vs. 統合デザイン型
  • 6.3 組織:集中型 vs. 分散型
  • 6.4 まとめ
  • 対談:アメリカの企業に感じるデザイナーの役割の変化④

7章 計画と実践

  • 7.1 上司やより上位のステークホルダーのサポートを得るには
  • 7.2 どこから始めるか
  • 7.3 システムによる実践思考
  • 対談:アメリカの企業に感じるデザイナーの役割の変化⑤

8章 機能パターンのシステム化

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

9章 認知パターンのシステム化

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

10章 パターンライブラリ

  • 10.1 コンテンツ
  • 10.2 パターンの編成
  • 10.3 パターンの明文化
  • 10.4 ワークフロー
  • 10.5 ツール
  • 10.6 パターンライブラリの未来
  • 対談:アメリカの企業に感じるデザイナーの役割の変化⑥

製品の購入はこちら

  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store
  • Born Digital Store

※書店でお買い求めの際には、予め在庫をご確認ください。≫取扱い店舗
※PDF書籍に関しては書店販売を行っておりません。

正誤表 / ダウンロード

正誤表

本書に誤り、または不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

p.41の脚注※7

【誤】 第2章で詳しく補足する
【正】 第3章で詳しく補足する

p.59の本文、脚注※2

【誤】 カスタマーエクスペリエンスマッピング(本文)、カスタマージャーニーマップ(※2)
【正】 カスタマージャーニー(本文、※2ともに)

p.116の見出し

【誤】 上から「原則」、「目的」、「パターン」
【正】 上から「目的」、「原則」、「パターン」

p.165の脚注※1

【誤】 第1章22ページを参照
【正】 第1章16ページを参照

p.184の本文

【誤】 特徴的瞬間
【正】 象徴的瞬間

p.200の訳注

【誤】 206ページのカラーインスタンスのインベントリーにあるように
【正】 194ページのカラーインスタンスのインベントリーにあるように

p.214の本文

【誤】 アンドリュー・クラウドウェル
【正】 アンドリュー・クールドウェル

p.248の本文

【誤】 驚異に感じる
【正】 脅威に感じる