18F手法カード翻訳:デザインパターンライブラリ(Design pattern library)

この記事は、米国連邦政府の一般調達局(GSA)のデジタルサービスチーム「18F」が公開している手法カード集「18F Methods」のうち「Design pattern library」を、新規事業ポータルが独自に日本語へ訳したものです。18F Methodsは米国政府の著作物で、CC0 1.0(パブリックドメイン)として公開されています(ライセンス)。原文はこちら。米国連邦政府の業務を前提にした記述も含まれています。訳文では、原文の趣旨を変えないことを優先しました。


概要:デザインシステム全体でよく使われるUI要素を集めたもので、基本となるパターンと、その使い方についての役立つ情報からなります。

目的:UI要素を一貫して使ったソリューションを設計しやすくするためです。承認済みで再利用できるパターンを一式そろえて保守しておけば、新しい機能をつくったり、今のソリューションを更新したりするのが楽になります。

所要時間:パターン1つにつき1〜2時間。その後も継続的な保守が必要です。

進め方

  1. 共通のコンポーネントを、できるだけ早い段階から洗い出し始めます。理想は、チームで新しいデザイン要素をつくっている最中です。こうした共通の部品が、ガイドラインをつくる対象のパターンになります。各UIパターンを構成するコンポーネントを明記し、考えられる制約や制限事項を書き留めます。
  2. そのパターンを人がどう使い、パターンがユーザーにどう反応すべきかを、文章や図で示します(たとえば、ボタンが読み込み時、ホバー時、クリック時にそれぞれどう表示されるか)。それがエンドユーザーにとってよい理由を示すデータがあれば、それも添えます。
  3. フロントエンドの開発者がそのパターンを実装するのに使えるコードやスニペットを載せます。
  4. 同じパターンが、さまざまなソリューションでどう機能しうるかの例を示します。
  5. デザインパターンライブラリを、プロダクトチームが利用・拡張できる、オープンでアクセスしやすい場所で公開します(よくある形は、wikiやブランドのスタイルガイドです)。

政府で使うときの注意

書類削減法(PRA:Paperwork Reduction Act)上の問題はありません。一般の人から情報を集めることはないためです。

ほかの翻訳記事