18F手法カード翻訳：ワイヤーフレーミング（Wireframing）

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

概要：プロダクトやサービスのインターフェースを、シンプルな図で表したものです。

目的：ソリューションを具体化し始めるときに、装飾よりも中身と関係性を優先するためです。ワイヤーフレーミングは、デザイナーが実現性や構造について早い段階から開発者に質問し始める絶好の機会にもなります。

所要時間：1〜3時間

進め方

1. プロダクトの構造、配置、階層を示す、下書きの設計図をつくります。フォントの選択や色など、調査する側とレビューする側の両方の気を散らすような要素には手を出さないようにします。軽いデザインのほうが、考え方のうえで組み替えやすくなります。ワイヤーフレームづくりに役立つツールとしては、OmniGraffleやBalsamiqがあります。これらは、ワイヤーフレームがあえてラフなスケッチのように見えるようにしてくれます。
2. この機会に、必要になるUX/UIパターンを書き出し始めます。
3. 具体的なユーザーシナリオやペルソナを念頭に置いて、ワイヤーフレームを見直します。描いているワイヤーフレームで、ユーザーはタスクを達成できるでしょうか。
4. ワイヤーフレームを使って、実現性と構造についてチームからフィードバックをもらいます。

政府で使うときの注意

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