業務システムにつよいUIデザインライブラリー
要件定義段階からプロトタイプを活用するアプローチ
私がつとめるアストロラボでは、DX推進支援事業におけるITソリューション開発で、プロジェクトの初期段階である要件定義からデザイナーが参加し、プロトタイプを活用して実際の業務をイメージしながらシステムの仕様を詳細に検討するアプローチをとっています。
従来のSI開発アプローチにおいては、UIデザイナーは、開発フェーズがある程度進んだあとで、ようやくアサインされることが多いと思います。しかしながら、その時点ではすでに合意し実装も進んで固まっている要件や仕様を見直したり変更することはできません。施せるのはもはやUIデザインというよりはUIスタイリングともいうべき、表層だけの調整になってしまいます。
要件定義の段階から、静止した画面イメージやドキュメントのみではなく、操作可能なプロトタイプを活用することで、実際の業務をイメージしながらシステムの仕様を詳細に検討し、骨格・構造からベストなものをめざしてデザインすることができます。
プロトタイプは、ユーザーのアクションに対するシステムからの細かな反応や遷移などの動作も盛り込み、実際のものに近い情報を入れこんだ精度の高いものにします。クライアントも含めたプロジェクトメンバーおよびシステムの実際のユーザー部門の担当者にも参加してもらい、実際に触って操作をしながら検証します。そのフィードバックをまたプロトタイプに反映していくというブラッッシュアップのサイクルを何度か回してゆき、ユーザーとシステムの接点となるフロント部分を確定させます。
建築家はスケールモデルを見せずに建物の設計を提案したりしません。映画製作者は脚本を書いてストーリーボードを描いてからスタッフを集めて撮影に取り組みます。それと同じようにITソリューション・サービスの開発でも、プロトタイプを用いることで、従来のアプローチでよく生じていた下記のような問題を回避することができます。
要件の中に存在する矛盾（シンプルな使いやすさと多くの機能の提供など）が見えにくい。開発フェーズ（製造プロセス）で場当たり的な対処を試みるが、一貫性が損なわれて理解が難しいものとなったり、そもそもの戦略の実効性が揺らぐ場合もある。
立場ごとに実は理解が異なっているのに認識のズレが表に出ない。製造プロセスで明らかになっても解決するのはすでに手遅れであるため、どうにかローンチした後も実際には現場部門で使用されないソリューションとなってしまう。
要点が記されただけの資料では具体的な完成形がイメージできず各担当者のモチベーションが上がらない。要件を満たすだけのおざなりな仕事しかしない状態に陥る可能性もある。
要件定義にプロトタイプを活用した開発アプローチなら、後の製造プロセスでの漏れの判明や手戻りが起こりにくくなります。さらに、動作や遷移もふくめて視覚的／体感的にある程度具体化されたプロトタイプの制作のためには、その裏側をシステムとしてどう持つか、取り扱うデータをどこから入手するのか、他システムと連携するならそのIFの仕様など、従来のアプローチでは開発フェーズに進んでから着手していた基本設計作業も、実質的にこの段階で着手することにもなりますので、全体的な工数の短縮が見込めます。
迅速な業務システムのプロトタイピングのために生まれた
さて、このようなプロトタイピングを高精度に迅速に行うには、その都度イチから起こしていたのではとてもスピード感が間に合いません。
通常、プロトタイピングにおいては粗めのプロトタイプからスタートするべきとされていますが、業務アプリケーションにおいてはビジュアルの新規性やユニークで先進的な操作性が重要となることは少なく、定型かつ大量で反復的な作業も多いこと、ユーザーの専門性や習熟度についての前提、エラーに対する許容度などについて業務システムならではの事情もあるため、はじめから精度の高いプロトタイプをさわって一連の操作を体験し、機能・非機能要件や実際の業務とのフィットを検証することが有効です。
そこで、アストロラボでは9年（2021年12月時点）にわたる事業経験のなかで、業務システムに求められる様々なUIのパターンをストックしたデザインライブラリーを独自に整備してきました。
いまでこそAdobe XDやFigmaなど、プロトタイピングのための便利なツールがいくつも普及していますが、アストロラボがこのアプローチで業務システムのUIデザインをするようになった2013年当時は、とくに目的に適ったちょうどよいものがありませんでした。そこでオープンに配布されていた既存のコンポーネントなどを参考にしながら作り上げたものがベースとなっています。
そして、複合的な条件で大量のオブジェクトを絞り込んだり、分析や管理のための複雑な視点や操作があったりなど、業務システムには一般的なUIコンポーネントではまかないきれない複雑なUIが多種多様にあります。
大規模な基幹システムから、単目的のちょっとした業務ツールまで、数多くのプロジェクトにおいて実際に必要になったUIのパーツやデザインパターンを蓄積し、改良を重ねてきた結果、データの入力や検索、さまざまな条件での選択など、業務アプリケーションでよく使われるUIパターンを豊富に取り揃え、システムからユーザーへのフィードバックまでUIのふるまいをひとつづきに盛り込んだ、業務システムUIデザインのベストプラクティスを活用できる充実したライブラリーとなっています。
このUIデザインライブラリーにより、すばやいプロトタイプの構築とブラッシュアップ、一貫したデザインの標準化を実現しています。
また、デザインガイドラインをはじめ、開発者がフロントエンド実装に役立てられるコードスニペットのほか、システム企画者が意図を共有・説明するための論拠とできる、目的別に妥当なUIを判断するための考えかたや判断ポイントをまとめたナレッジドキュメントを用意。UIデザイナーではない職種のプロジェクトメンバーとも目線や認識を統一するのに活用できるものとなっています。
UIライブラリーはHTML、CSS、JavaScript（jQuery）でコーディングされたコンポーネント集である「COMPONENT」のほかに、「GUIDELINE」「PATTERN」の3つで構成されています。
GUIDELINE
使いやすいUIを作るためのデザイン原則や共通ルール
なんとなく見た目の印象だけでUIを決めていくのは実はかえって難しいものです。その場ごとの調整や例外が増えるとサイト・システム全体の情報デザインとしては破綻してしまいます。全体を通してふるまいや視覚上の手がかりにしっかりと共通性を維持することで、ユーザーが迷うことがなく、使用にともなう学習効率も高くなります。
高頻度・長時間使う業務システムとして、認知的・身体的負担を不用意にかけないという観点も重要です。“わざわざ”あえて何かさせるような感覚ではなく、“もともと”そうするのを自然と感じ利用されるように、使う人のストーリーと知覚・行為・身体性から導き出した設計により、スムーズな使用体験が実現できます。
UIを決定していくためのガイドラインを根拠となる考え方とともに示しています。
PATTERN
適切なUIを採用するための判断基準として、よくあるUIのパターンを目的／用途別に例示
実際に機能するUIをつくるにあたって、GUIDELINEで示すような基本原則だけでは不十分です。デザインの一般原則という上位概念と、テキスト、グラフィック要素、グリッドといった下位に位置付けられるUIデザインの文法およびCOMPONENTに記載された個別のデザインパーツとの間にあるギャップをちょうど埋めるような中位の位置付けとして、UIパーツの実用的な組み合わせを示した具体的なパターンが必要です。
一般的なWebインターフェースで馴染みのあるもののほか、業務システムならではの様々なUIパターンを豊富に紹介しています。用途や条件に合わせてどのパターンが適切なのか、採用のための判断ポイントも具体的に示しています。
たとえば何かを選択するUIひとつをとっても、それが二者択一の選択なのか、少なめの数の候補からの選択なのか、多い数の候補からの選択なのか、候補となる項目は階層化されているのか、候補を絞り込むためのキーとなる情報をユーザーは容易に想起できるのか、同時に選択すべき項目はひとつなのかあるいは複数なのか、さまざまな観点でその都度最適なUIは異なります。いろいろな判断ポイントを例示して目的にあったUIパターンを論理的に採用し、その根拠を説明できるようにしています。
例としてほんの一部ですが抜粋したものをクイズ形式にして記事にしてみましたので、ご興味があったらぜひご覧ください。
COMPONENT
コーディング時に役立つソースコード、マークアップ方法の参照用ドキュメント
個別のUIパーツのインデックスです。PATTERNで示すような各種のパターンを構成する要素でもあり、GUIDELINEで示すデザイン原則に基づいて設計されています。
マークアップエンジニア／フロントエンドエンジニアのコーディング実務のための参照用途に活用できるよう、マークアップ方法、スタイルや用意されたオプションのバリエーションの指定方法など、一揃いで利用できるように、具体的なソースの記述方法も例とともにまとめています。
ひょっとしたらこのあたりのドキュメントは読み物というよりも、Storybookのようなものを利用して、各ステートと一緒に定義したものを用意するとより有効なものとなるかもしれません。今後の課題です。
利用例
抜粋版サンプル
下記は実際に使っているうちからごく一部のUIデザインパターンやコンポーネントを抜粋したサンプルです。
このUIデザインライブラリーは、デバイスの制約の変化やUIデザインのトレンドなどを加味しながら、現在も定期的にUIパターンの追加や見直しなど、継続して発展させつづけています。
現在はHTML／CSS／JavaScriptで用意してあるものですが、Adobe XDやFigmaなどのプロトタイピングツールで再現したり効率的に使い回す方法も、きっとやりようはあると思うので今後挑戦したいと思っています。
この記事が気に入ったらサポートをしてみませんか？