UI Lab vol.2 「デザインシステムの考え方と実践」参加レポート

11月26日、UI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）に行ってきました。

登壇者は長谷川恭久さん。
ブログやポッドキャスト配信などでもデザインの話をよくされていて毎回とても勉強になるので、参加することに。

はじめに

まずは、参加者さん全員の自己紹介タイム。
自分の紹介と合わせて、今の自分のスマホ画面で、一番左下に何のアプリが入っているか発表していきました。

電話のアプリが入っているという人が多かったものの、普段よく使うアプリや、フォルダを置いているという人がちらほら。
それをふまえ「自分がよく使うアプリを元にデザインする人が多いですが、環境や使いやすさの基準は人それぞれ。なぜ使いやすいかを明文化しよう」というお話からセミナーがスタートしました。
私自身、よく見るサイトを参考に感覚で作ってることが多かったので、耳が痛かったです。

デザインを明文化する

デザインのルールを明文化する行為として、デザインシステムやスタイルガイド、CSSフレームワークなどがあります。
お話を聞いていて「なるほど」と思ったのが、アートディレクションもガイドライン化するということ。
見た目や使いやすさ、コード以外にも、写真の選び方であったり、企業の価値観まで落とし込こんでいる例として、いろんなガイドラインの紹介がありました。

Googleのマテリアルデザイン以外は全部英語ですが、機会があれば読んでいきたいです…!

ガイドラインを作るメリット

動きの早い運用で役立つ
誰が作っても最低限の品質を保証できる

ガイドラインを作ることは大変ではありますが、一度しっかりさせておくことで、他の人と共有し、効率よく作っていくことができます。
ガイドラインを作ると、デザイナーのお仕事が減るのでは？という話もあったのですが、ルール化して減った分、別のところに頭を使おういう話が。
解析やコンテンツ、マーケティングなどもふまえ、「作る」だけでなく、一番大事な「考える」ところにエネルギーを使えることが、一番のメリットだなと感じました

ガイドラインをつくるときのポイント

どこまで掲載するか

アートディレクション周りまで含めていくと、自分で自分の首をしめるというか、なかなか更新できない印象がありました。
いろいろと便利なツールはありますが、まずはできるところから、少しずつ前に進むのが大事だなと感じました。

サンプルを掲載

マテリアルデザインにもあるように、OKなパターンだけでなく、NG例も載せることで、デザイナー以外の人がみてもわかりやすいなと感じました。

デザイナーだけで作らない

デザイナーだけ作ってしまうと、中々浸透しづらいので、なるべくいろんな人を巻き込んで作っていこうというお話が。
海外にある会社の例として、以前までは専門の部署で作っていたそうですが、最近では他の部署からの意見も取り入れるようになったとのこと。
会社の規模に関わらず、日本だとデザイナー、エンジニア、ディレクターと職域に関わらずいろんな人の声を聞いて作ってくのが理想かもと思いました。

ワークショップ

ワークショップは6人1グループになって、ある企業のサイトのボタンパーツを切り出し、ボタンのデザインガイドを作るというもの。
今までボタンを作ることに、そこまで難しさを感じたことはなかったのですが、実際ワークショップで、ボタンについて明文化していくとなると思っていた以上にむずかしかったです。
ある程度、数を出すだけであればできるのですが、2つくらいに絞りこみ、さらに誰でも分かるような言葉に置き換えていくのがとにかく難しかったです。
話の方向があっちに行ったり、こっちに行ったり…。
わりと深い話などもでき、楽しかったのですが、いつもより頭を使ったのですごい疲れました。
ワークショップ中は討論であまり意識できなかったのですが、UIデザインのチェックリストの資料もありました。

視認性
状態を目に見える形で伝えているか
実世界との関係
実世界にもある動きや見た目、言葉遣いか
コントロールの自由度
利用者が使いたいように使えるか
一貫性
同じ役割のものは統一されているか。
柔軟性
初心者から上級者まで目的が達成できるようにしているか
なんども同じ操作をしなくてもよいように設計されているか
最小最低限
関係ないものやレアケースで必要なものは省略する
標準準拠
OSもしくはプラットフォームで決められている標準のデザインパターンに沿っているか

最後に

最近、デザインは、いろんな人が関わって作っていくプロセスも大事だと感じているので、今回のワークショップだけに終わらず、仕事においても、じっくり話し合いながら作っていく機会を作って行きたいなと感じたセミナーでした。

他の参加者さんのブログ

UI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）参加レポート｜ふにろぐ
 UI Lab vol.2 (ワークショップ)に参加してきました – LOGzeudon

tweetまとめ

UI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）tweetまとめ