UI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）参加レポート

2016/11/26 (土) に行われたイベント「UI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）」に参加してきました。
会場は梅田阪急ビルオフィスタワー35階のサイボウズ大阪オフィスのセミナールームで、講師の長谷川恭久さんによる講義とワークショップが行われました。
当日のハッシュタグは「#uilab」で、いつものようにまとめておきましたので、当日の雰囲気を感じたい方はまずこちらをご確認ください。
UI Lab vol.2 デザインシステムの考え方と実践（ワークショップ）tweetまとめ

講義：デザインシステムの考え方

まず最初は講義から始まりで、デザインシステムについての概要を学びます。
と、その前に、まずは自己紹介ということで、参加している人がひとりづつ簡単に自己紹介をするコーナーがありました。
ここで単に自己紹介をするだけでなく、その際に自分が使っているスマホの左下には何が置かれているのかを説明するということが行われました。
この左下に何が置かれているのかというのは、これから講義を受けておく上で重要な「自分の常識が他の人の常識ではない」ということを感じることができる身近な例だったのが理由だったんじゃないのかなと推測しつつ聞いてました。
そして、それを踏まえて冒頭でおっしゃられていた「なぜ使いやすいのかを明文化する」という話があったんですが、僕が思うに今日のテーマはここにあるなと思って聞いていました。

デザインシステムについて

デザインシステムとはそもそも何なのかというところから本編は始まりました。
デザインシステムを作る理由は「デザインのルールを明文化するため」に行われている行為であることを改めて考える必要があるわけですね。
何のために作るのかをはっきりしないと、「なぜこんなことをしなければいけないのか」ということにもつながりますし。
話の途中にもあった「デザイナーの頭の中にしかない状態は危険」というのは非常にわかりやすいなーと思って聞いていました。
明文化することは動きの速い運用についていくための施策の一つであり、デザインの品質の保証という意味合いもあります。
また、明文化することでデザインのバグフィックスが可能になるという話も納得できました。
明文化することで、「考えなくて良いいところを考えなくて済むようになる」ので、対応スピードを速くすることもできるというのにも納得です。
また、聞いていて面白いなーと思ったのが、カラーパレットをSassの変数で管理しているところ。
CSSflameworkでも行われていることなので、特に目新しいことでもないはずですが、なぜかそこには注目していなかったので、そういう意味でよい話が聞けたなと思います。
この部分も含め、開発時にオープンソースにするか、自分のところで作るかを考えたほうがいいですし、コスト面も含めて検討することは大切だなと思います。
今回はいろいろといい言葉があったわけですが、「パターンと経験が使いやすさのベースになっているということを理解しておく。」ということも素敵なお話でした。最近はあまりデザインベースで物事を考えないようにしていた部分がありますが、それもあまり偏りがある感じになって危険だぞと今回改めて考えさせられました。
そこから先は、実例を交えてのお話で、Material design、iOS、IBM、Salesforce、Draft U.S.などの実例をもとに説明していただきました。
やっぱり実例があるとわかりやすいですね。
ある程度規模の大きなところでの取り組みではあるので、そこまで大きな規模感が必要ではない場合は必須ということではなくなるものではありますが、考え方とかをきちんと知っておくことは重要だと思います。
講義編終了後に、質疑応答のコーナーがありましたが、その中で話されていた「デザイン原則の作成はデザイナーだけでしたらダメ」で、いろいろな人を巻き込んでやることが大切という話がすごく興味深い内容でした。
何かのルールを決めるときに、ある一点からの視点のみで作成するのは良くないので、実際に作る場合は、そういうことにも気をつける必要があるぞと再認識しました。

ワークショップ

後半は手を動かすワークショップになります。
ワークショップの流れとしては「原則を作る」「パターン化して分類する」「デザイン原則を作る」「発表する」という流れです。
ワークショップを行う目的とポイントは以下の通りです。

• デザインシステムの作り方を考える。
• パターンの見方や評価を知る。
• チームメンバーと見解を共有する。
• 完成度よりも流れをつかむことを重視する。
• 組織における「良いデザイン」を明文化する。
• 簡略で使いやすい言葉を選ぶ。
• 守ることだけではなく、避けることを書く。
• 優先順位を決める。

この考え方をベースに、今回はUSJのボタンをテーマにして行われました。
まず、アイデア出しを行って全体の方向性をチームで決めます。
USJから連想する言葉を付箋でどんどん書き出していき、それを分類していきます。
サイトのゴールを考えることも忘れないようにしなければいけません。
様々なアイデアが出てきましたが、方向性として「わくわく」「バリアフリー」という2つの方向になりました。
分類時に、いろいろな基準でルールを考えることができますが、我々のチームはボタンを、「インフォボタン」・「アクションボタン」・「ナビボタン」の3種類に定義してやってみました。
通常の案件で失敗はできませんが、今回のワークショップでは失敗をしても大丈夫なので、普段よりも突っ込んで考えてみました。

こんな感じで、ワークショップを進めます。
アイデア出しをして決めたテーマに沿って、大きな模造紙の上に切り出したボタンを並べていきます。
当日やったことを思い出しつつ、記事書くために帰ってから一人で作り直してみました。
あのとき何を考えて、どう分類していたのかを思い出しながら、一人ワークショップで復習です。
やっぱり、時間は少しかかりますが、やったことをもう一回やることも大切ですね。
話が逸れるのでまたそれは別の機会にするとして、こんな感じになりました。
見ると分かりますが、色や形状、ラベルなどがこうやって切り出してまとめると結構バラバラだということがわかります。

この分類を経て我々チームが決めたデザイン原則は以下のようになりました。

チームで決めたデザイン原則

色

原則は青、利用シーンで何色か使い分ける。色数は限定する。

タイポグラフィ

NotoSans。バナーでの例外OK。

形状

重要度に応じて大きさ・形状が異なる場合もあり。
角丸(2px)を採用。
ボタン専用フォントの採用を考えてもいいかも。

利用用途

詳しい情報を知りたい時に使うボタン

使うべきではないタイミング

前振りなく単品での使用。あくまで概要等のコンテンツとセットで使用する。
といった感じです。
最後にそれぞれのチームで発表を行い、ワークショップは終了しました。
ワークショップ終了後は会場でビアバッシュを行い、他のチームの人達とお酒を飲みつつ意見交換を行いました。　

まとめ

最近は、上で書いたようにデザイン系に意識を振っていなかった部分があったので、そういう意味で非常に大きな反省点が発覚できたのがよかったなと思っています。
これから先にデザインシステムを採用するかどうかは、お客さんの規模や要望内容などによっても異なるので、一概に今回学んだことが即役に立つものかと言われれば微妙な部分はありますが、やはり色々な人と「ああでもないこうでもない」と話し合うのはすごくいいですね。
とてもいい機会を作っていただいて、講師の長谷川さんはもとより、主催者の皆様方、参加していた皆さんには感謝の気持ちでいっぱいです。
みなさんありがとうございました。

追記：余談。長谷川さんオススメのiPadとApple Pencilがかなり未来を感じた。

書こうかどうか迷ったけど、ご本人からもつっこみがあったので書くことにしておきます(笑)
当日、ビアバッシュ中と懇親会中に、登壇されていた長谷川さんがなぜかiPad Proの営業をされていました。
なぜ営業を？と思って聞いてみると、単にこれが素晴らしい技術革新で、未来を感じているから頼まれもしてはいないがおすすめして回っているということでした。
そこまで長谷川さんを動かす理由ってなんだろうと思い、懇親会中に聞いてみたところ、「なるほど、これは確かに未来を感じるな」と聞いていて思いました。
本物のペンのような追従した動作や、筆圧に連動する濃淡の表現は、本物のペンを使っているような錯覚を覚えるレベルの動作でしたし、Apple Pencilのサイトにも書いてあるように、書くときにディスプレイに手が触れたままでも大丈夫なので、不自然な体制で書くということをしなくてもいいわけです。
(変に腕を空中に維持したままの不自然な体勢のこと。これだと疲れる。)
また、刺したら速攻でApple Pencilに充電される急速充電もすごくて、普段使いでストレスを感じることもなさそうな感じでした。
そして思ったのは、これまで「人とデバイス」の間にあった距離感が、iPad ProとApple Pencilで限りなくゼロに近づいているなという点です。
人が自然に行う動作が、違和感のない形でデバイスに反映されている感覚は素晴らしいなと思いました。
営業されているのも納得です。
お値段は少々お高いので、財布と相談は必須ですが、確かにこれは未来を感じる体験だなと思いました。