読者です 読者をやめる 読者になる 読者になる

LOGzeudon

名古屋で働いているWebデザイナーのブログです

UI Lab vol.2 (ワークショップ)に参加してきました

イベント・勉強会レポート

11/26にサイボウズさんの大阪オフィスにて開催された、UI Labさん主催のイベント「デザインシステムの考え方と実践」に参加してきました。
講師は長谷川恭久さん。ブログPodcastをよく拝見していて楽しみでした。

デザインシステムとは?

デザイン原則から仕様まで、デザインをあらゆる面から明文化していくものを指すそうです。
それを決めておくと、webサイトの運用・管理やチームでのデザイン批評に役立ちますし、後から参加したメンバーもプロジェクトに関わりやすくなります。

ない場合にありがちなのが、「ボタンつくってくださいと言われたけど、どんなボタン作ればいいのかわからない」みたいな状況。
「デザインのルール」がリーダーの頭の中にしかないと、そんな作業ですら担当者には大きな負担になります。担当者の主観だけで作ったボタンは、サイトのブランドイメージやユーザー体験をネガティブにする可能性さえあります。

デザインシステムのメリット例はこちら。

  • 動きの早いWebサイト運用に対応できる
  • 誰がつくったとしても最低限の品質を保証できる
  • デザインの「バグフィックス」ができる

あまり注目されていないのですが、webサイト運用では、コンテンツ・コード・マーケティングだけでなくデザインの管理も重要です。
限られた時間・条件下でも最低限のクオリティのUIをユーザーに届けるにも、より高いクオリティのUI/UXを追求するにも、役立つ(欠かせない)指針となります。

使いやすさの基準は人によってバラバラ

参加者全員の自己紹介で、「自分がスマホのホーム左下箇所に置いているアイコン」をそれぞれ発表しました。

長谷川さんいわくそこにあるアプリ(フォルダ)が、その人の「使いやすさの基準」になっていることが多いそうです。
私はLINEを置いていましたが、電話や乗換案内、設定など人それぞれでした。

そのように価値観が異なる中、各々が自分の常識内でデザインをつくるのは、(小規模なら良かったとしても)ステークホルダーが多くなるほどに困難になっていきます。
デザイン原則明文化の必要性を考えるきっかけとして、ユニークなアイスブレイクでした。

デザインシステムの事例

事例と、それぞれの特徴などを紹介して頂きました。

ガイドラインはみんなでつくるべし

ワークショップでは、ユニバーサル・スタジオ・ジャパン(USJ)のサイトを題材に、デザインシステムをつくるプロセスをざっくり体験しました。

1.サイトに相応しいデザイン原則を考える

例えば、Facebookのガイドラインでは「一貫性」「早い」「透明性」などの原則が定められています。そんな原則をまず決めます。(Windowsのガイドラインも参考になります)

方法はシンプルで、まずUSJについて思いついたキーワードをひたすら付箋に書き出し。
それを整理・グルーピングして、「サイトに相応しいデザイン原則」を検討します。これが後々重要になります。

振り返ると、この「みんなでやる」という工程自体も大切でした。ここで意識共有がしっかりできてないと後もうまくいかないのです。

2.ボタンを切り出して分類し、課題を洗い出す

サイト内で使われている「ボタン」をひたすら切り出して、役割や目的などでグルーピング。各グループに名前も設定しつつ、現状の問題点を分析しました。

正解があるわけではないので、話し合いながら、チームの中で納得行くような分類を探りました。

3.原則を基にしてボタンのガイドラインをつくる

分類したボタンのグループから一つを選び、最初に決めた「デザイン原則」に則ったガイドラインの作成に挑戦しました。

ボタンという一見簡単そうな要素にも、いろいろ検討すべき事柄が含まれています。
突き詰めて考えると哲学的な壁(ボタンとは何か?とか)にぶつかるなど奥が深く、なかなか難しかったです。

ここで学んだのは、「ある要素のガイドラインをつくる」=「チームでの共通言語をつくる」ということです。
みんな(少なくともチームのメンバー)が共感できるように「サイト全体のデザイン原則」と「要素の分類」を設定できていなければ、この「ある要素のガイドラインをつくる」のは困難です。
これこそデザインのガイドラインをつくることの難しさであり、トップダウンだとうまくいかない理由だと感じました。

そして最後に各グループで、どんな分類やガイドラインを作成したのか発表しました。

これは他の参加者の方々の発表。
いろいろなアプローチやグルーピングの方法があるのだなと勉強になりました。みなさん、同じ時間内で取り組んだとは思えないクオリティの高い発表ばかりですごかったです…。

まとめ

長谷川さんは「デザインシステムはじめの1歩」として以下を挙げてくださいました。

  • ツールにこだわるといつまでもスタートしない
  • 日々使うツール内で文章化する
  • 僅かな努力で成果を感じられるところから始める
  • 何かをつくって関係者に見せる

トップダウンは失敗するし、あまりガチガチにやりすぎるのも首を締めてしまいます。まずその価値をチームに共有した上で、少しづつできるところから協力して取り組むべきものだと感じました。

デザインはデザイナーが一人で抱え込んでつくるものではありません。デザインシステムを決める際は関係者と一緒に取り組み、チームでデザインを批評(評価)しより良くするための基盤づくりだ…という意識を忘れないようにしたいです。

あと長谷川さんの事例で、ConfluenceやGitHubでデザインガイドラインを共有して関係者誰でもメンテナンスできるようにしているという話があり、良いなと思いました。

やはり、コーディングデータで管理できればそのほうが圧倒的に楽ですよね。デザインパーツをPSDにまとめて案件のフォーマットとして使う業務が多いのですが、とにかく更新がめんどくさいのです…。
やってみたらそのことをまた記事にしようかと思います。

チームでデザインに取り組む重要さ、そしてその具体的なアプローチを体験できてとても勉強になりました。

プチ懇親会(ビアバッシュ)のお肉も美味しかったです。

あと長谷川さんにiPadPro少し触らせていただいたんですけど、アプリ「Paper」とApple Pencilの組み合わせが抜群でした!
iPadのお尻にPenを指してペアリングすることや、指でなぞると絵が滲むことを初めて知りました。デッサンもできそう。近日iPadをGETする予定なんですけど俄然楽しみになりました。

みなさま、いろいろとありがとうございました!

他の方のブログ

funnis.net

hatsuka.info

(c) rokuzeudon