デザインシステムにあるヒトとコトの課題

今なぜデザインシステムなのか

4月16日 Webridge Kagawa 主催で「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法（#wmsp20）」というワークショップを開催しました。昨年はコンテンツ戦略やペルソナなど企画・設計寄りのワークショップを実施していましたが、パターンラボは少し実装に寄り添ったカリキュラムにしました。ポッドキャストでも話したことがありますが、「考える」と「作る」の間にはちょっとした溝があると思います。ペルソナやカスタマージャーニーマップで利用者像や彼らのもつ課題を視覚化すれば、現実的な実装ができるというわけではありません。実装へ近づけるためには、考える人と作る人が一緒に課題共有するための場が必要と考えています。

例えば Web デザインでは数年前から、パソコンではなくスマートフォンやタブレットをはじめとしたモバイル機器での使いやすさを優先するモバイルファーストという考え方があります。多くの制作者がこの考え方に同意できると思いますが、具体的にどのように進めて作れば良いのかハッキリ分からないという問題が残ります。制作工程を変えるとしても、それをクライアントも含めて説得・理解してもらわなければならないわけですから、「モバイルファーストです」と宣言するだけでは足りないわけです。こうした設計思想や、運営方針といった考え方を、作り方に転換するのが難しい場合があります。

今回のワークショップは数年前から続けているコンテンツ設計の手前、もしくは別アプローチとして捉えています。近年、コンテンツマーケティングという言葉が広がったおかげで、運営すること、それができる体制をつくることの重要性が理解されるようになりました。しかしデザインで同じように「運営できることを」が意識されているのかというと、まだまだ改善余地があります。

一貫性のある UI をデザインすることは、使いやすさを向上するための基本中の基本のアプローチですが、画面をひとつひとつデザインしていると、いつの間にか『行き当たりばったりのデザイン』になることがあります。ワークショップで、あるサイトの UI をひたすら切り出して分類するというアクティビティをしましたが、ボタンだけでも 10 数種類発見されました。

いつ、どのタイミングで、どう見せれば良いのかということが、デザイナーしか分からない状態では、常に変化を必要とする Web サイト運営のスピードが落ちてしまいます。緊急時にデザインが崩れるのも、運用できるデザインではなく、その場その場で、良い感じのデザインを作り続けているからでしょう。こうした状態では、コンテンツをきちんと設計したとしたとしても、実装に時間がかかったり、一貫性がないことになります。

視覚化・共有の重要性

「一貫性がないデザインは見れば分かる」と思うかもしれませんが、見方を養っていなければ気付かないですし、画面ひとつひとつ見ているだけでは、深刻性が伝わらないことがあります。わざわざ画面からボタンやヘッダーといった要素を切り出して整理するのも、「こんなにたくさん違うものがサイトにあるんだ」と視覚的に理解できるからです。同じサイトなのに、違う UI パターンが混在するわけですから、利用者に「これは使いにくい」と言われても当然かもしれません。

ただ、スタイルガイドを作れば解決するというほど単純なことではありません。例えば、以下のような課題がパターンを考慮したデザインプロセスにあります。

• そもそもスタイルガイドが必要ということへの理解不足
• ページだけでなく小さな要素にもあるデザインの課題
• 知識や経験によって変わる要素の呼び名
• 立場によって変わる要素の優先順位

こうした課題を視覚的に見たり、手を動かすといった体験を通して理解できるようなワークショップにしました。今回は自由席ではなく、参加するグループを私のほうで指定しましたが、グループメンバーの役職や背景をバラバラにすることでお互いの『UI パターン観』を知るキッカケになると考えて行いました。例えば、フロントエンドの方がデザインを考える段階で参加することで見えてくる課題があります。ディレクターや、Web 担当者もそこにいれば、フロントエンド視点の『実装のしやすさ』だけを考えれば良いというわけではないことも分かります。

部品からひとつひとつ考えて、ページといった大きな枠組みを設計するというアプローチは、Atomic Design System などで提唱されています。こうして小さく考えて積み上げることで、パターンを意識したデザインがしやすいだけでなく、レスポンシブ Web デザインのようなマルチデバイス対応もしやすくなります。小さく始めることの優位性を理解してもらうために、今回のワークショップを自分の仕事場で行うのは有効なひとつのアプローチになるはずです。

まとめ

パターンを用いることで Web サイトやアプリが作りやすくなる、運用しやすくなるだけでなく、利用者の学習コスト削減にもなります。しかし、いきなりすべての状況に対応した UI パターンを揃えるのは困難です。UI パターンの必要性を理解してもらうためにも、まず現状を視覚化する必要があります。すぐに始めることができない場合は、色と文字のルールをきちんと決めるだけでも良いスタートになります。

今回のワークショップで印象的だったのが、ボタンひとつにしてもグループによってラベルのつけ方が様々だった点。あるグループでは「アクションボタン」と呼んでいるものは、別グループでは「プライマリボタン」と名付けていました。こうしたちょっとした言葉使いがコミュニケーションにも影響を及ぼすことがあります。それぞれが UI をどう見て、どう説明するのかを知ることでパターンへの取り組み方が変わるはずです。