WCAN 2016 Winterに参加して、デザインシステムに必要なデザイン原則の重要性を理解しました

長谷川恭久さん

長谷川恭久さん「作って終わりから卒業しよう - デザインシステム入門編」

クライアントワークで運用しているサイトが、毎月部分的にデザインをしてコンテンツを入れ替えているサイトなので、1年前に作ったページと先月公開したページでは、気をつけているもののやっぱりどこかパーツが共通化できていなかったり、色が微妙にずれていたりという部分が出てきていました。また、一番の問題は、新しいページをデザインする時にそのルールがデザインをしている私の頭の中にしか無いため、例えば社内の別のデザイナーに仕事を振るということも、なかなかうまくできずにいました。

そんな中、12月3日(土)のWCAN 2016 Winterでの、長谷川恭久さんの「作って終わりから卒業しよう - デザインシステム入門編」は、個人的には今一番聞きたい内容でした。

スタイルガイド

コードの運用という意味では、スタイルガイドと言うものがあります。セミナーの中では MailChimp や Pattern Lab など紹介されていました。これらはどちらかというとフロントエンドよりのガイドラインです。

デザインシステムとスタイルガイドなどのガイドラインとでは、何が違うかについてヤスヒサさんは、原則があるかどうかと言われていました。

デザインシステムの原則とは

デザインシステムとして、Google の Material design や、salesforce の Lightning Design System を紹介されていたのですが、

例えば Material design では、原則は以下のように書かれています。

  1. Material is the metaphor (実世界にも通じる空間と動きをメタファとして扱う)
  2. Bold, graphic, intentional (力強く、視覚的であると同時に意図的)
  3. Motion provides meaning (動きを通して操作や表示の意味を伝える)

このような原則に従って、デザインガイドラインを作成していますということだと思うのですが、動きのデザインガイドラインとか写真の使い方のガイドラインとか、原則を理解してから見るとなるほどと納得が行く感じがしました。

ヤスヒサさんのブログの「デザイン原則がどの現場でも必要な理由 : could」、セッション2の坂本貴史さんの著書『IA/UXプラクティス』の「4-4 デザイン原則の重要性」もあわせて読むとより理解が深まりました。

英国政府デジタルサービスのデザイン原則

セミナーの中で話が出てきたわけではないのですが、個人的に好きなというか、政府がデザイン原則ってスゴイなと思ったのが、英国政府デジタルサービスのデザイン原則です。

  1. Start with user needs (まずニーズからはじめる)
  2. Do less (なんでもかんでも手を広げず、するべきことだけをする)
  3. Design with data (データをもってデザインする)
  4. Do the hard work to make it simple (シンプルにすることに心血を注ぐ)
  5. Iterate. Then iterate again. (繰り返し、繰り返す)
  6. This is for everyone (受け入れられやすいものに作る)
  7. Understand context (コンテキストを理解する)
  8. Build digital services, not websites (デジタルサービスを作るのであって、Webサイトを作るのではない)
  9. Be consistent, not uniform (一貫しているべし、単に統一するのではなく)
  10. Make things open: it makes things better (オープンにすれば、物事はもっと良くなる)

Google 翻訳も進化したことですし、触りしか知らないので、Google 翻訳をフル活用して色々深掘りしてもいいかもしれません。6. This is for everyone なんかは、以下のように変換してくれました。

アクセシブルなデザインは良いデザインです。私たちが構築するすべてのものは、可能な限り包括的で読みやすく読みやすいものでなければなりません。エレガンスを犠牲にしなければならないのなら、そうしてください。我々は、視聴者ではなく、ニーズに合わせて構築しています。私たちは、ウェブを使うのに慣れているだけでなく、全国向けにデザインしています。私たちのサービスを最も必要とする人々は、しばしば、彼らを最も難しいと感じる人々です。それらの人々を最初から考えてみましょう。(翻訳:Google 翻訳)

こういうのを読むと、セッション1の伊原力也さんの「あなたの価値を高めるWebアクセシビリティ」の話もより必要性を感じますし、そもそも「Webに載るだけで圧倒的にアクセシブル」という言葉はもっと自覚しないとな思いました。

7. Understand context なんかは、以下のようで、

私たちはスクリーン用に設計するのではなく、人々のために設計しています。彼らがサービスを利用している状況について懸命に考える必要があります。それらは図書館にありますか?彼らは電話にいますか?彼らは本当にFacebookに精通していますか?前にウェブを使ったことはありませんか?(翻訳:Google 翻訳)

セッション2の坂本貴史さんの「『IA/UXプラクティス』を解きほぐし、実践する」でワークをしたカスタマージャーニーマップはまさにこのコンテキストを理解するためのツールだなと思います。坂本さんの著書『IA/UXプラクティス』では、カスタマージャーニーマップの例として Adaptivepath による博物館での一連の体験をマップ化したものが紹介されていました。また、坂本さんのブログでも英国政府デジタルサービスのデザイン原則について書かれています。英国政府デジタルサービスのデザイン原則の日本語訳はWeb担当者Forumを参考にしました。

当たり前ですがこうして見ると、WebアクセシビリティもUXもデザインシステムもつながっているなーと、いい刺激をもらいました。


カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。