■一般的には「デザインガイドライン」と同義語

「デザインシステム」という言葉をご存じだろうか。日本においては「デザインガイドライン」という言葉の方が一般的かもしれない。

「デザインシステム」 「ザインガイドライン」 はUI,UXの統一、共通化はもちろんのこと、ブランディングの維持、情報構造の整理にも必要なガイドライン、設計書と言える。

しかし「デザインシステム」 をしっかりと設計する企業は多くない。さすがにグローバル企業クラスでは設計されているが、一部上場企業でも無いところが散見される。

米国はマニュアル、ガイドライン、フレームワークの社会であるため、だれでも理解できるドキュメントを用意するが、日本は器用さで何とかしようとするために軽んじられているのが原因だろう。

しかし結果として「デザインシステム」「デザインガイドライン」 が無いためにトラブルや手間が発生しコストが予定よりかかってしまう現象が多発する。

●「デザインシステム」 は必須項目とした方が良い

理由は簡単だ。

  • 指示などをしなくても、一定のクオリティで成果物が完成する
  • コスト、スケジュールの削減につながる
  • 統一的な運用が可能となり構造的な乱れが起きない
  • 次回リニューアル時の省力化につながる

こうした理由から「デザインシステム」は準備が必要だ。

Web上で「デザインシステム」 「デザインガイドライン」 の作り方、設計方法が公開されているが、今回は「デザインシステムを正しく理解しよう。作り方・参考事例のまとめ」を紹介しよう。

■「デザインシステムを正しく理解しよう。作り方・参考事例のまとめ」 でわかること。

この「デザインシステムを正しく理解しよう。作り方・参考事例のまとめ」は、事例も含めてわかりやすくまとまっているのでお勧めしたい。

●目次

  • デザインシステムとは
  • デザインシステムを導入するメリット
    • 一貫したデザイン制作が可能に
    • チームでのデザイン制作がスムーズに
    • デザイナー以外のメンバーと共通認識を持つことができる
  • デザインシステムの作り方
    • デザイン概念・原則の定義
    • スタイルガイド
    • コンポーネントライブラリ
  • デザインシステムを作る時に気をつけること
    • 目的をはっきりさせる
    • チーム内でデザインシステムの必要性を共通認識として持つ
    • 運用を意識してデザインシステムを作る
  • 参考になるデザインシステム事例
    • Shopify Polaris
    • Salesforce Lightning
    • IBM Carbon
  • デザインシステムの作り方の参考になるページ
    • Design Systems Handbook by InVision
    • 大規模なデザイン管理への取り組み。アドビのデザインシステム「Spectrum」
    • Uber Rebrand 2018
  • デザインシステムの管理ツール
    • InVision Design System Manager
    • Specify

■「デザインシステムを正しく理解しよう。作り方・参考事例のまとめ」の詳細はこちら