18F手法カード翻訳:デザインパターンライブラリ(Design pattern library)
この記事は、米国連邦政府の一般調達局(GSA)のデジタルサービスチーム「18F」が公開している手法カード集「18F Methods」のうち「Design pattern library」を、新規事業ポータルが独自に日本語へ訳したものです。18F Methodsは米国政府の著作物で、CC0 1.0(パブリックドメイン)として公開されています(ライセンス)。原文はこちら。米国連邦政府の業務を前提にした記述も含まれています。訳文では、原文の趣旨を変えないことを優先しました。
概要:デザインシステム全体でよく使われるUI要素を集めたもので、基本となるパターンと、その使い方についての役立つ情報からなります。
目的:UI要素を一貫して使ったソリューションを設計しやすくするためです。承認済みで再利用できるパターンを一式そろえて保守しておけば、新しい機能をつくったり、今のソリューションを更新したりするのが楽になります。
所要時間:パターン1つにつき1〜2時間。その後も継続的な保守が必要です。
進め方
- 共通のコンポーネントを、できるだけ早い段階から洗い出し始めます。理想は、チームで新しいデザイン要素をつくっている最中です。こうした共通の部品が、ガイドラインをつくる対象のパターンになります。各UIパターンを構成するコンポーネントを明記し、考えられる制約や制限事項を書き留めます。
- そのパターンを人がどう使い、パターンがユーザーにどう反応すべきかを、文章や図で示します(たとえば、ボタンが読み込み時、ホバー時、クリック時にそれぞれどう表示されるか)。それがエンドユーザーにとってよい理由を示すデータがあれば、それも添えます。
- フロントエンドの開発者がそのパターンを実装するのに使えるコードやスニペットを載せます。
- 同じパターンが、さまざまなソリューションでどう機能しうるかの例を示します。
- デザインパターンライブラリを、プロダクトチームが利用・拡張できる、オープンでアクセスしやすい場所で公開します(よくある形は、wikiやブランドのスタイルガイドです)。
政府で使うときの注意
書類削減法(PRA:Paperwork Reduction Act)上の問題はありません。一般の人から情報を集めることはないためです。
ほかの翻訳記事
18F手法カード翻訳:認知的ウォークスルー(Cognitive walkthrough)
米国政府のデジタルサービスチーム18Fが公開する手法カード「Cognitive walkthrough」の全訳です。代表的なタスクを実際にたどりながら問いを立て、初めての人やたまにしか使わない人にとって設計が学びやすいかを早い段階で確かめる評価手法を紹介します。
18F手法カード翻訳:比較分析(Comparative analysis)
米国政府のデジタルサービスチーム18Fが公開する手法カード「Comparative analysis」の全訳です。直接の競合や関連サービスが提供している体験を詳しく調べ、優れた点・足りない点・取り入れるべき/避けるべきデザインパターンを見つける進め方を紹介します。
18F手法カード翻訳:コンテンツ監査(Content audit)
米国政府のデジタルサービスチーム18Fが公開する手法カード「Content audit」の全訳です。既存サイトのページやファイル、動画などを一覧にして分析し、見直すべきコンテンツや担当者、更新頻度、ユーザーにとっての役割を明らかにする進め方を紹介します。
18F手法カード翻訳:文脈的調査(Contextual inquiry)
米国政府のデジタルサービスチーム18Fが公開する手法カード「Contextual inquiry」の全訳です。許可を得たうえで参加者が働く様子を邪魔せずに観察し、そのあと質問することで、インタビューだけでは見えにくいニーズや行動の理由をつかむ手法を紹介します。
