原文：“Building a large-scale design system: How we created a design system for the U.S. government” by Maya Benari , October 3, 2017
現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。
その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブ の調査からウェブサイトなど行政サービス接点がよくないと、その行政サービスに対する国民の信頼も低下することがわかっています。
私は多数のルールからなる複雑なシステムを統一し、全米のユーザーにサービスを提供するデザイナーと開発者のチームの一員でした。このプロジェクト通じて得られた知見 − 業界標準のベストプラクティスを活用し再利用可能なコンポーネントからなるデザインシステムをいかに作り上げたか − 共有したいと思います。また、このデザインシステムによって連邦政府機関のプロジェクトに携わる政府機関チームがシンプルで効率的で一貫性のある体験を迅速かつ低コストで作り上げられるようになったか紹介します。
課題：政府系ウェブサイトにおける一貫性のないユーザー体験
政府系ウェブサイトにおける一貫性のないユーザー体験
アメリカ国民が行政サービスを受けるために政府系のウェブサイトに訪れるとまず目にするのは分かりづらいメニュー、たくさんの視覚要素、一貫性のない操作性です。 これらのウェブサイトは人々が行政サービスについての情報を得てサービスを受ける手助けをするために作られています。例えば若い退役軍人が大学に戻るための情報やサービス。しかし、これらのウェブサイトはさまざまな機関や組織によってバラバラに分かれているため、使いやすいものではありません。
例えば、若い退役軍人が大学に通うために政府が提供する学資ローンに申し込むとします。この若い退役軍人を仮に「ジョアンヌ」としましょう。ジョアンヌは大学に通うための学資ローンを複数の代理店のウェブサイトから探そうとしました。そしてジョアンは混乱しました。学資ローンを受けるためのウェブサイトの使いにくさに途方にくれました。サービスを受ける資格があるのにその機会を逃してしまう。不満を感じ、孤立していると感じました。本来彼女を助けるはずのシステムが彼女の前に立ちはだかっている。これらのシステム間の一貫性を持たせることで（ジョアンヌのような）人々が必要とするサービスをもっと効果的に受けられるようにし、政府への信頼を高めるのに役立ちます。
複数のウェブサイトを訪れるVA(Veteran Affairs)ユーザー
原因：政府系ウェブサイトで一貫性のあるユーザー体験を実現するためのハードル
デジタルツールを作る連邦政府職員は誰にとっても役立つツールを作りたいと考えています。 迅速にプロトタイプやサイトを開発したい。そのためすぐに立ち上げて実行できる最小限の文書のリソースを選択します。
一方、スポットのプロジェクトで政府機関のデザイナーやフロントエンドの開発者も正しいことをしようとしています。しかし時間や支援は限られています。彼らは設計と開発の時間を短縮するためのツールと、ベストプラクティスを上層部に提唱する方法を必要としています。
私たちの目の前に突きつけられた質問は：
私たちは一貫性があり、効果的で使いやすい政府のウェブサイトを提供するための共通のツールセットを作れるか？
そして私たの答えは「YES」でした。
チーム
2015年の夏に、18F とU. S. Digital Servicesによるチームがこの共同ツールセットに取り掛かることになりました。私たちは自分自身に問いかけました：どのように何千もの公共のウェブサイトを共通のデザイン言語にまとめるか？
政府のデザイナーと開発者がワシントンD.C.に集まり、パターンライブラリーに取り組むためのワークショップに参加
この問いかけに答えるために、政府のデジタルサービスに取り組んでいる20人のデザイナーと開発者がワシントンD.C.に集まりました。
参加したのは教育省 、米国帰化・移民サービス のビジュアルデザイナー、消費者金融保護局 と農務省 の開発者、USA.gov のプログラムマネージャー、さらに遠隔地からリモートで数人のビジュアルデザイナーたちが参加しました。私たちが関わってきたウェブサイトは全く違っていました。私たちは「そもそも何か共通点ってあるの？」と思わずにいられませんでした。
私たちがまず自分たち自身に問いかけたのは「パターンライブラリに必要なコンポーネントとパターンはなんだろう？パターンのライブラリーやスタイルのシステムを作り上げる要素はなんだろう？」でした。そして、ウェブサイトを構成するすべてのパーツとシステムに欲しいことを書き出しました。書き出したアイデアを壁に貼り付け、それらをグループ化して共通項を見いだすことにしました。次に、その中からパターンを探しました。何が共通するのかもメモしました。その中で最も単純で繰り返し出てくるのは色、タイポグラフィ、グリッド、とボタンでした。
政府機関に所属するデザイナーたちがデザインコンポーネントを付箋に書き出し、グループ化する
ミーティングの期間中に他のコンポーネントを挙げるチームもありました。たとえば、データ視覚化やカレンダーウィジェットなどのユニークなコンポーネントなど。しかし、コンポーネントを基本的なビルディングブロックに限定することで、デザイナーや開発者ができる範囲内でなるべく早く何が有効で何が有効ではないのか見極めることにしました。
一貫性を生み出すためのデザインライブラリーは泥遊びよりもレゴブロックで遊ぶのに似ています。 何人かに泥を使って家を建てるように言うと、出来上がった家は多少違うように見えるでしょう。少し不恰好でベチャとした感じで。同じ人々に5種類のレゴ・レンガであれば100万の全く違った家を作ることができます。そしてそれぞれの家は一貫性があります、しかも画一的ではなく。
システムを作り上げる
私たちは操作性、ユーザー体験、ウェブサイトの反応にどのように一貫性を持たせることができるのか探ることをはじめました。「ジョアンヌ」は彼女が政府のサイトにいることを理解したい。彼女はそのウェブサイトが親しみやすく直感的で、何をすれば彼女がやりたいことができるのかすぐわかることを望んでいます。共通デザインによる一貫性のあるみためや操作性は人々に親しみやすく、信頼感、安心感のある気持ちを抱かせます。そして共通化されたなパレットやデザインのために「ジョアンヌ」は政府のウェブサイトをより簡単に使いこなすことができます。
若い退役軍人は大学に行くための学資ローンに申し込むために複数の政府系ウェブサイトを行き来しないといけない
インターフェースの在庫調査
私たちはanalytics.usa.gov を使って最も訪問者の多い.govドメインの中から一般的な色とコンポーネントスタイルを調査しました。その結果は「32種類の青色が必要？」と考えさせるものでした。私たちは政府系ウェブサイトで使われている異なるボタンスタイルの数に驚きました。本当に64種類のボタンが必要ですか？政府系ウェブサイトで使われているコンポーネント浮かび上がらせ、分類することにより一貫性のなさを確認すると同時に共通するコンポーネントも見えてきました。
政府系ウェブサイトで使われていたインターフェースの在庫
使われていたインタフェースの在庫調査とワークショップの結果は政府のデザイナーの助けを借りながら優先順位付けされました。 まずコンポーネントの一覧からはじめました。ユーザー調査員は調査に取りかかり、ワイヤフレームの作成、ウェブサイトのデザインとコンポーネントのユーザーテストを行いました。
UXチームのメンバーは調査し、ワイヤフレームを作成し、このサインインフォームのようなコンポーネントをテストしました。ビジュアルデザイナーは、後にワイヤーフレームに基づいてハイフィディリティのデザインを作り、そして最終的にはコードに落とし込まれて開発されました。
ムード・ボーディング
私たちのビジュアルデザイナーは「どのように見えるのか」と「どのように感じられるのか」を探りました。 私たちは、シンプルでモダンで使いやすく、親しみやすく、信頼できるシステムを求めていました。 彼らは3つのムードボードを作成し、様々なタイポグラフィーやカラーサンプル、インスピレーションを感じさせるデザインイメージを作り上げました。
私たちが求めていた三つのスタイルは：
クリーンでクラシック
インスピレーションと力を与えてくれる
モダン・アメリカン
三つのムードボードにより見た目とユーザーに与える感じ方を探りシステムの方向性を見出す
私たちのチームのデザイナーたちは他の政府機関に所属するビジュアルデザイナーたちに声をかけて各ムードボードについて好きなものに投票 をしてもらい、その何が好ましいのかを浮かび上がれせました。これらの3つの方向性をGitHub に入れることで、政府のデジタルサービスに関わる職員たちからのフィードバックを求め、方向を微調整することができました。結果として、現代アメリカの大胆な、モダン・アメリカンらしい彩度の高い色合いと、サンセリフのフォントとセリフの書体を組み込んだクリーンとクラシックのタイポグラフィが好まれることがわかりました。
タイポグラフィー
スタイルが定義されるとビジュアルデザイナーは適切なフォントを探しはじめました。 わかりやすく、信頼と信頼性を伝え、オープンソースのフォントを見つける必要がありました。 有料フォントはライセンスに関する追加の負担を発生させていたため、政府のデザイナーが使いやすいフリーでオープンソースのフォントを見つける必要がありました。
読みやすさを高めるために、x-heightの値が大きく、open counters、太さの範囲が広いフォントを検討しました。 政府のデザイナーに最大限の柔軟性を提供するために、我々はクリーンでモダンで読みやすいサンセリフフォントを見つけ出したいと考えていました。文字の密度が高いコンテンツや見出しの間にコントラストを与える伝統的な見た目からくる読みやすさ。
私たちのビジュアルデザイナーは実際の政府のウェブサイトで適切なフォントを探すタイポグラフィの組み合わせをテストしました。タイプフェイスの名前を見ないことでデザイナーはフォントの種類に左右されず、その「読みやすさ」に焦点を当てることができました。 さらにこれらのフォントを政府のデザイナーと共にテストしていきました。どれが最も見やすく、私たちが望む美しさをもつフォントなのか。 最終的に私たちが選んだフォントはSource Sans ProとMerriweatherでした。
タイプフェースのテストを実際の政府機関のウェブサイトでテスト
Source Sans Proは、UIデザインの読みやすさを求めて作られたオープンソースのサンセリフ体です。 Source Sans Proはすべてのサイズと太さで簡単に読み取ることができ、明確なヘッダーと読みやすい本文を作ることができます。 20世紀のアメリカのゴシック様式の書体のデザインからインスパイアされた、細身のオープンなレターはクリーンで親しみやすいシンプルさを提供します。
Merriweatherはコンピューターの画面で読まれることを前提に設計されたオープンソースのセリフ体です。このフォントは文字が多いデザインに理想的です。x-heightの値が大きいにもかかわらず、比較的小さくて横幅を広げずに見やすく表示することができます。スリムで厚いウェイトを組み合わせることで、スタイルの幅を広げながら、クラシックかつモダンなシンプルさの理想的な組み合わせを実現します。Merriweatherは、大小両方のフォントサイズで暖かさと信頼性を伝えることができます。
MerriweatherとSource Sans Proの二つのオープンソースフォントがthe U.S. Web Design Standardsに選ばれた
技術的な観点からは、私たちが提供するフォントがユーザーに素早く表示される保証をする必要がありました。私たちのビジュアルデザイナーは複数の太さを使いたがりましたが、開発者はそれにより複数のフォントを読み込む必要があり、ユーザーの利便性が損なわれる可能性があることを伝える必要がありました。妥協点を見出すために異なるフォントペアを作成しました。フォントの太さの多いリッチなバージョンと読み込み時間を短縮するトリミングされたバージョンです。 これにより政府のデザイナーたちはデザインと性能のニーズを秤にかけてそれぞれのオプションを評価することができるようになります。
Merriweather headingsとSource Sans ProのBody要素のフォントペアリング
色
政府のウェブサイトのインターフェイス在庫調査で見つかった繰り返し使用される頻度の高い色からカラーパレットを導き出しました。クールなブルーとグレーからなるシンプルでミニマルなパレットによる自然な背景と明るい赤と青の影のコントラスト。クリーンで魅力的なパレットにより、ユーザーは自分のやりたいことができるという安心感を得ることができます。色は一次色、二次色、背景、および三次色に分解することができます。
一次色は青、灰色、白色です。青は、ボタン、リンク、見出しに使われ、静かさ、信頼感、そして誠実さをインターフェースを通じてもたらします。きれいな白いコンテンツ領域では、タイポグラフィをページに浮かび上がらせます。
一次色のパレット
二次色はアクセントカラーとして使われる明るい青と赤で、明るさとモダンな感性を付加するために特別な要素として控えめに使います。これらは、CTAのようなページ上の重要な機能や、イラストのような視覚的なデザイン要素を強調するために使用できます。
二次色のパレット
背景色は大きなコンテンツ領域の背景ブロックに使用されるグレーの陰影です。
背景色のパレット
三次色は警告やイラストといったコンテンツ特有のニーズのために控えめに使用されます。
三次色のパレット
パレット内の色の範囲はさまざまな異なるビジュアルスタイルをサポートするために柔軟に適用できます。たとえば一次や二次などの色名を抽象化することで、パレットを独自のブランドのニーズに適合させる必要がある政府機関をサポートすることができます。色値の変更はボタン、アクセント、見出しなどシステム全体に広がります。
政府機関のサイトは障害者の誰もがアクセスすることができる必要があり、セクション508 に準拠して、標準でテキストと背景色の間に十分なコントラストがなければいけません。WCAG 2.0のガイドライン に従って、標準でテキストと背景のコントラストが4.5対1以上である必要があります。
アクセシビリティーの高い色の組み合わせ
ほのかで彩度の高い青と赤に洗練された深みのある青とグレーを使用することで、暖かさと信頼性を伝え、さまざまな視覚スタイルをサポートしながらアクセシビリティの標準と色のコントラスト要件を満たすことができます。
空白
デザインシステムを構成する最後のビルディングブロックはそれぞれの要素がスペースをどのように流れて、構造として提供されるかです。見出し要素と段落テキストの上下に適切なマージンを置くことで、システム全体にバランスのとれた空白を提供します。 emまたは相対単位を使用することにより、空白はフォントサイズに比例し、システム全体で正しい比率が自動的に分配されます。政府機関がフォントサイズを変更する必要がある場合は空白が自動的に調整されます。
見出しと本文の間の余白はフォントサイズに合わせて変更される
グリッド
私たちはコンテンツのレイアウトを構造化するため、Neat を活用して12列のグリッドシステムを提供しています。Neatはthinkbot による柔軟で軽量なSassグリッドです。 私たちはコンテンツを格納するグリッドコンテナからなる使いやすいグリッドシステムを提供しています。グリッドコンテナはページ内や1/2、1/3、1/4、1/6、および1/12のセクションによってレイアウトをすることができます。開発者はusa-gridやusa-width-one-halfのようなシンプルなクラスによってページレイアウトのモックアップをすばやく作成できます。 私たちは3つのブレークポイントを提供しています。これによりグリッドはより小さなサイズでリフローすることができ、人々はいつもブレークポイントを内容に合わせて微調整することができます。 柔軟なグリッドシステムにより、訪問者はページをすばやく読み取ることができます。
12カラムグリッド
複雑なタスクと野心的なゴール
The U.S. Web Design Standards は2015年9月にビジュアルスタイルガイドとUIコンポーネントライブラリとして立ち上がり、アメリカ政府のウェブサイトに共通するデザイン言語をすべて1つの屋根の下に収めるという目標を掲げました。米国政府のすべてのウェブサイトのデザインを統一するこのプロジェクトに携わり2年がたち、100以上の政府プロジェクト がこのスタンダードを採用し、それを進化させ、再構築し、想像できないように進歩を遂げました。退役軍人省 や農務省 など行政チームが集まり、連邦政府のウェブサイトに対して新しい高い目標を設定しました。この短期間で政府のウェブサイト全体での一貫性とユーザーエクスペリエンスの向上が見られました。目標は連邦政府のデザイン言語を統一することでしたが、そのユニークな表現は多面的で無限でした。レゴブロックから家を建てるのと同じように、モジュラーデザインシステムの意味のある制約内での表現は一貫性を持たせつつも画一的ではない様々な製品を作り上げることができます。
Vote.gov、退役軍人省、農務省がユーザー体験向上のためにスタンダードを取り入れた
デザイナーや開発者が最高品質の政府のウェブサイトをアメリカ国民に提供するための使いやすいツールを提供することで、デザインシステムは異なる役割をつなぎ、共に前進することを手助けをしています。政府のデザイナーや開発者をUXリサーチ、人間中心デザイン、 ビジュアルデザイン、フロントエンド、およびアクセシビリティのベストプラクティスを一つに。
プロジェクトを通じた学び：組織の中でスタンダードを作り上げる
あなたが中小企業であるか、世界最大の政府であるかにかかわらず、自分たちのユニークな課題を解決するために自分たちのスタンダードを作ることができます。すべてのパターンライブラリは異なります。なぜならそれらを作成するグループの特定のニーズに対応する必要があるためです。
対話をする： あなたはどこに問題があるのか。そして、その問題がデザインパターンによって解決できるかどうかを知る必要があります。グループ全体で共通のニーズがあるかどうかを探しましょう。あなたが仕事をするために必要なものは何ですか？
重複を探す： 何か繰り返し繰り返しやってることはありませんか？あなたはどこで時間を無駄にしていますか？ ウェブサイトを構築するときに最も長くかかっている、または困難に感じることはなんですか？ 摩擦はどこで起こるのですか？
あなたにとっての価値： あなたのデザインシステムがどのように見えるかは、あなたにとって重要なものによって決まります。 あなたの価値は何ですか？あなたはどんな原則に従ってものを作りますか？
チームを信じて任せる： スタンダードを作り上げるには専任のグループと上司からのサポートが必要です。他のプロジェクトと同様に重要であるはずです。チームにはUXリサーチとデザイン、ビジュアルデザイン、およびフロントエンド開発といった多岐にわたる専門家からなるチームが必要です。適切な目標に向けてプロジェクトを進めるためにプロジェクトマネージャーとプロダクトオーナーの役割を果たす人が必要です。
小さくはじめて反復する： あなたの中核となるニーズを把握し、それらを構築し、テストし、人々が求めているものができたか確認する。そうして欠けているものを見つけ出していきます。限られた数のコンポーネントからはじめることで時間を節約することができます。また、ユーザーに使ってテストしてもらうことにより正しい答えを素早く見つけることができます。
孤立しない： あなたは多くの人の同意形成が必要で、人々が何を必要としているのかを理解しなければいけません。またウェブサイトをどのように構築するかどのように使われているのかを学ぶ必要があるのでユーザーを探し出さなければいけません。最初の立ち上げは孤独な作業かもしれませんが、外に出てテストし学ばなければいけません。実際のユーザーでテストことによって、改善し続けるために必要な情報を得ることができます。
再利用と独自性： 他の人がどのように問題を解決したかを見て、可能な限り再利用することは素晴らしいことです。しかし、他の人の解決方法は彼ら独自のニーズに合わせたものだと理解しなければいけません。 あなたの問題にはユニークなアプローチが必要かもしれません。他の誰かがそれをやっているという理由だけで「パターンライブラリーはこのようでなければいけない」という罠に陥ってはいけません。
システムを宣伝する： 人々をあなたのプロジェクトに熱狂させましょう。このフリーのシステムからどのような価値を得られることができるのか。一貫性のある、美しい、使いやすいデザインがいかに時間とお金を削減することができるか。
柔軟的に対応する： 人々は強制されるものが好きではありません。彼らにそれについて学び、質問をする機会を与えてください。彼らにそれを自分のものにする機会を与えましょう。
結論
大規模なデザインシステムを構築する場合、どこからはじめるのかとっかかりを探すのが難しいかもしれません。コアスタイル、コーディング規則、デザイン原則といった基本的な部分にフォーカスすることで、チームのさまざまな要素に取り組むための強力な基盤を作り出すことができます。これらのビルディングブロックは多様なニーズとユースケースをサポートするためにさまざまな方法で積み重ねることができます。システムに柔軟性を組み込むことで、ユーザーはパターンやデザインを容易に適応させて、デジタルサービスの多様な範囲とニーズをサポートすることができます。カスタマイズできるようにすることは、人々がシステムに参加し、それを自分たちのものにする手助けになります。人々がシステムに参加意識をを持っているときだけ、彼らの努力に投資がされ、報いられたと感じます。その結果システムは強固で長い間活用されるものにまります。
このような大規模なデザインシステムを構築するには、多くの時間とリソースが必要ですが、「ジョアンヌ」のような利用者をペルソナとして念頭に置いておくことが重要です。 あなたのデザインしたシステムの向こう側で画面をスクロールしてボタンをクリックし、必要なクリティカルなサービスにアクセスできるようにフォームを記入している人々。しっかりとした使用可能なデザインシステムは、「ジョアンヌ」のような人々にとって大きな価値を生みます。
翻訳：カタパルトスープレックスなかむらかずや
関連記事
.jpg)
