かなり詳しくてよく分かる良書！ デザインシステムの作り方、導入・運用も学べる解説書 -つくって、みなおす、デザインシステム

※本ページは、アフィリエイト広告を利用しています。

Webサイトやスマホアプリの制作・開発にデザインシステムを取り入れるといいと聞くけど、どこらへんが有用なの？ 導入する実際の手順を教えてほしい、という人にお勧めの解説書を紹介します。

デザインシステムを作る前の準備から、実際の作り方、Figmaを使った導入方法、完成した後の運用方法まで、ていねいに詳しく解説されています。

著者の株式会社ニジボックスはリクルートグループのデザイン会社、リクルートをはじめ、富士通やパナソニックなどのサイトやアプリの制作・リニューアルなどを手がけています。

本書では実際のワークフローに基づいたデザインシステムの準備・制作・導入・運用まで、しっかり学べます。

Kindle版も同時発売されています！

• つくって、みなおす、デザインシステム Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は6章構成で、第１章は「デザインシステムとは」デザインシステムとは簡単に説明すると、Webサイトやスマホアプリなどでデザインの一貫性を確保し、効率的なワークフローを実現するための仕組みです。本書では「デザインコンセプト」「スタイルガイド」「コンポーネントライブラリ」「アセットとリソース」「ワークフロー」で構成されています。

デザインシステムが初めてという人は、実際に公開されているデザインシステムを見るのが早いと思います。デジタル庁のデザインシステム、Google、Appleなど、無料で閲覧できます。本書にはほかにもたくさんの国内・海外のデザインシステムが紹介されています。

第2章は「デザインシステムが必要なとき」まさに「どこらへんが有用なの？」の答えがここにあります。大きなポイントは2つ、1つ目はデザインの一貫性、2つ目はワークフローの向上です。デザイナーやデベロッパーによっては同じ機能でも異なるデザインパーツが実装されたり、プロダクトが異なるごとに見た目や操作性にばらつきが出て、ユーザーの混乱の原因になります。また、ワークフローとしてはコンポーネントをライブラリで管理することで、毎回新しく作る必要がなくなり、再利用によりデザイン業務の効率化につながります。

第3章は「デザインシステムを作る前に」いきなりデザインシステムを作ることはできません。現状の課題を把握し、目的をもって導入に入ります。

現状の課題って言われても、、、本書では具体的な事例が豊富に掲載されています。たとえば、「同じパーツなのにデザインや機能に差異がある」「デバイス間でブランドイメージが統一されていない」「似たようなパーツを何度も一から構築している」「メンバーごとに成果物の品質にブレがある」「デザイナーとデベロッパーの連携に手間取っている」など。

準備が完了したら、いよいよ第4章「デザインシステムの設計」です。始めるといっても最初はどこから手をつければよいか迷うかもしれません。そんな時はまず、実作業ですぐに役立つ「スタイルガイド」から着手するのもありです。スタイルガイドとは、デザインに使用するカラー、タイポグラフィ、アイコン、サイズ、グリッドなどの基本要素を定義してまとめたものです。「デザイントークン」と呼ばれることもあります。

スタイルガイドを作成したら、次に「コンポーネントライブラリ」を作成します。コンポーネントライブラリとは、見出しやリンクやボタンやカードなど、Webサイトやスマホアプリを構成するコンポーネントを集めたコレクションです。

スタイルガイドやコンポーネントライブラリは、なにもない状態から新しく設計することもありますが、既存のものを部分的に見なしていくこともあります。現状の課題を改善するようデザインし直したり、操作性を向上させたりといったことがあります。

具体的な事例も豊富に解説されています。たとえば、フォームの改善。左ページは既存でラベルが英語だったり、入力欄が罫線のみのデザインだったりとかなりスタイリッシュな印象です。右ページの改善ではラベルを日本語にし、デザインも親しみやすいものに変えています。

第5章は「デザインシステムの導入」デザインシステムを導入するにあたって、Figmaを使ったやり方を詳しく解説しています。Figmaを使用すると、スタイルガイドやコンポーネントライブラリの構築をはじめ、デザイン作業、デベロッパーとの連携なども手軽にでき、ほかのツールを使用せずにFigmaだけで完結します。

最後の第6章は「デザインシステムの運用」サイトをローンチしたらデザインシステムは終わりではありません。デザインシステムは一度設計すれば長い期間運用できますが、プロダクトの成長や世の中の変化に合わせてアップデートが必要です。

ここらへんの解説もかなり実践的です。どのようなアップデートをすればよいか、というのは未来のことなので分かりませんが、アップデートするときの意思決定のプロセスはどうすればよいか、アップデートをどのように周知すればよいかなど具体的なやり方が詳しく解説されています。

つくって、みなおす、デザインシステムの目次

つくって、みなおす、デザインシステムの目次

デザインシステムについての解説書はありますが、作る前の段階から、そしてメインのデザインシステムの設計・導入、デザインシステムの見直しや更新についてまで詳しく解説した解説書は初だと思います。デザインシステムについて最初から最後までしっかり学べる解説書です。

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス