サイボウズさんの大阪オフィスにて開催された、UI Labさん主催のイベント「デザインシステムの考え方と実践」に参加しました。講師は長谷川恭久さん。ブログやPodcastをよく拝見していて楽しみでした。デザインシステムとは？デザイン原則から仕様まで、デザインをあらゆる面から明文化していくものを指すそうです。Webサイトの運用・管理や、チームでのデザイン批評に役立ち、後から参加したメンバーもプロジェクトに関わりやすくなるとのこと。ない場合、「ボタンつくってくださいと言われたけど、どんなボタン作ればいいのかわからない」となりがちです。「デザインのルール」がリーダーの頭の中にしかないと、側からは簡単に見える作業ですら大きな負担になりえます。主観だけでつくられたボタンは、サイトのブランドイメージやユーザー体験をネガティブにする懸念も。デザインシステムのメリット動きの早いWebサイト運用に対応できる誰がつくったとしても最低限の品質を保証できるデザインの「バグフィックス」ができるWebサイト運用では、コンテンツ・コード・マーケティングだけでなくデザインの管理も重要です。限られた時間・条件下でも最低限のクオリティのUIをユーザーに届けるにも、より高いクオリティのUI/UXを追求するにも、役立つ（欠かせない）指針となります。使いやすさの基準は人によってバラバラ参加者全員の自己紹介で、「自分がスマホのホーム左下箇所に置いているアイコン」をそれぞれ発表しました。長谷川さんいわくそこにあるアプリ（フォルダ）が、その人の「使いやすさの基準」になっていることが多いそうです。私はLINEを置いていましたが、電話や乗換案内、設定など人それぞれでした。そのように価値観が異なる中、各々が自分の常識内でデザインをつくるのは、（小規模なら良かったとしても）ステークホルダーが多くなるほどに困難になっていきます。デザイン原則明文化の必要性を考えるきっかけとして、ユニークなアイスブレイクでした。デザインシステムの事例事例と、それぞれの特徴などを紹介して頂きました。Material design guidelinesiOS Human Interface GuidelinesIBM Design LanguageLightning Design SystemDraft U.S. Web Design Standards Documentationガイドラインはみんなでつくるべしワークショップでは、ユニバーサル・スタジオ・ジャパン（USJ）のサイトを題材に、デザインシステムをつくるプロセスをざっくり体験しました。1.サイトに相応しいデザイン原則を考える例えば、Facebookのガイドラインでは「一貫性」「早い」「透明性」などの原則が定められています。そんな原則をまず決めます。（Windowsのガイドラインも参考になります）方法はシンプルで、まずUSJについて思いついたキーワードをひたすら付箋に書き出し。それを整理・グルーピングして、「サイトに相応しいデザイン原則」を検討します。これが後々重要になります。振り返ると、この「みんなでやる」という工程自体も大切でした。ここで意識共有がしっかりできてないと後もうまくいかないのです。2.ボタンを切り出して分類し、課題を洗い出すサイト内で使われている「ボタン」をひたすら切り出して、役割や目的などでグルーピング。各グループに名前も設定しつつ、現状の問題点を分析しました。正解があるわけではないので、話し合いながら、チームの中で納得行くような分類を探りました。3.原則を基にしてボタンのガイドラインをつくる分類したボタンのグループから一つを選び、最初に決めた「デザイン原則」に則ったガイドラインの作成に挑戦しました。%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%A7%E8%80%83%E3%81%88%E3%81%AA%E3%81%91%E3%82%8C%E3%81%B0%E3%81%AA%E3%82%89%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E5%A4%9A%E9%81%8E%E3%81%8E%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fhashtag%2Fuilab%3Fsrc%3Dhash%26amp%3Bref_src%3Dtwsrc%255Etfw%22%3E%23uilab%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FCQ5r3Huq3v%22%3Epic.twitter.com%2FCQ5r3Huq3v%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20Yasuhisa%20%F0%9F%93%90%20(%40yhassy)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fyhassy%2Fstatus%2F802424589510791168%3Fref_src%3Dtwsrc%255Etfw%22%3ENovember%2026%2C%202016%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%83%9C%E3%82%BF%E3%83%B3%F0%9F%94%B2%20%E3%81%A1%E3%82%83%E3%82%93%E3%81%A8%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%92%E3%82%82%E3%81%A3%E3%81%A6%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FF86rYe2nU7%22%3Epic.twitter.com%2FF86rYe2nU7%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20Yasuhisa%20%F0%9F%93%90%20(%40yhassy)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fyhassy%2Fstatus%2F803489435606077440%3Fref_src%3Dtwsrc%255Etfw%22%3ENovember%2029%2C%202016%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3Eボタンという一見簡単そうな要素にも、検討すべき事柄がたくさん。突き詰めて考えると哲学的な壁（ボタンとは何か？とか）にぶつかるなど奥が深い。ここで学んだのは、「ある要素のガイドラインをつくる」＝「チームでの共通言語をつくる」ということです。みんな（少なくともチームのメンバー）が共感できるように「サイト全体のデザイン原則」と「要素の分類」を設定できていなければ、この「ある要素のガイドラインをつくる」のは困難。これこそデザインのガイドラインをつくることの難しさであり、トップダウンだとうまくいかない理由だと感じました。そして最後に各グループで、どんな分類やガイドラインを作成したのか発表しました。これは他の参加者の方々の発表。いろいろなアプローチやグルーピングの方法があるのだなと勉強になりました。みなさん、同じ時間内で取り組んだとは思えないクオリティの高い発表ばかりですごかったです…。まとめ長谷川さんは「デザインシステムはじめの１歩」として以下を挙げてくださいました。ツールにこだわるといつまでもスタートしない日々使うツール内で文章化する僅かな努力で成果を感じられるところから始める何かをつくって関係者に見せるトップダウンは失敗するし、あまりガチガチにやりすぎるのも首を締めてしまいます。まずその価値をチームに共有した上で、少しづつできるところから協力して取り組むべきものですね。デザインはデザイナーが一人で抱え込んでつくるものではありません。デザインシステムを決める際は関係者と一緒に取り組み、チームでデザインを批評（評価）しより良くするための基盤づくりだ…という意識を忘れないようにしたいです。あと長谷川さんの事例で、ConfluenceやGitHubでデザインガイドラインを共有して関係者誰でもメンテナンスできるようにしているという話が。やはり、コーディングデータで管理できればそのほうが圧倒的に楽ですよね。デザインパーツをPSDにまとめて案件のフォーマットとして使う業務が多いのですが、とにかく更新がめんどくさいのです…。チームでデザインに取り組む重要さ、そしてその具体的なアプローチを体験できてとても勉強になりました。あと、プチ懇親会（ビアバッシュ）のお肉も美味しかったです。そこで長谷川さんにiPadPro少し触らせていただいたんですけど、アプリ「Paper」とApple Pencilの組み合わせが抜群でした！iPadのお尻にPenを指してペアリングすることや、指でなぞると絵が滲むことを初めて知りました。デッサンもできそう。近日iPadをGETする予定なんですけど俄然楽しみになりました。みなさま、いろいろとありがとうございました！他の方のブログUI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）参加レポート｜ふにろぐUI Lab vol.2 「デザインシステムの考え方と実践」参加レポート – hatsuka