アプリ | ワイヤーフレーム制作ナレッジ

ワイヤーフレームの目的

機能要件を満たしているかどうかの確認

ユーザーストーリーやUI Flowsに描かれたアプリの機能要件が実現できているか

基本的な操作性の確認

ユーザーの利用目的や利用状況、利用環境に沿ったUIになっているか（ユーザビリティ観点からの検証）

大まかなレイアウト

UIの要素（テキスト, データ, コンポーネント, etc.）を、画面のどのあたりに配置するか

px単位の修正や余白の調整などの最終的な調整は、モックアップの段階でやればいい

モックアップでは、見た目の忠実度を高めることに集中するなどして、フェーズごとに焦点を定めたほうが、作業効率を高められる

ユーザーストーリー上重要となるUIパターン / インタラクションの検証

特定の状態で表示 / 非表示になる要素があるなど、ユーザーストーリーに大きく影響するパターンを確認

ステート変化に応じたコンポーネントの見た目の変化など、ユーザーストーリーへの影響が小さなものは、モックアップの段階でやればいい

ナビゲーションの検証

グローバルナビゲーションや戻るボタン、リンクテキストなど、画面遷移に関わる要素に漏れがないかを確認

ユーザー視点で操作してみたときに、立ち止まったり、操作が止まってしまうポイントがあれば、ナビゲーションに問題があるとみていい

ライティング / UIテキストの検証

パッと見てそのテキストの意味を理解できるか、テキストがユーザーの行動をサポートできているかを確認

モックアップの段階でやってもいいが、最終的な見た目の確認に焦点を当てたければ、ワイヤーフレームの段階でやっておくのが望ましい

多くの場合、ワイヤーフレームの段階でもできるが、単に後回しにしているだけ、どうせあとでやることになる

ただし、検証目的を詰め込みすぎると、フィードバック観点にばらつきが出るし、制作工数も大きくなる

どのフェーズで、何を検証して、何を検証しないか、そのバランスの見極めが大事

デザイナーに向けた設計資料

モックアップ制作への足がかりとなるもの

ざっくり、どのあたりに / どの要素が配置されるのか、がわかれば十分

見た目の作り込みは、ビジュアルに強みを持つUIデザイナーがいれば、その人に任せる

ワイヤーフレーム制作における重要なポイント

ワイヤーフレームの目的はなにか？何を検証したいのか？

目的によって、アウトプットの忠実度が変わる

忠実度が高いほど、いろいろな箇所をつくりこむ必要が出てくるため、その分、制作工数も大きくなる

検証目的を詰め込みすぎると、フィードバックの観点にばらつきが出やすい

本来そのタイミングでほしいフィードバックが得づらくなる

ワイヤーフレームで検証すべきことを明らかにした上で、その目的を満たし、かつ最少工数でつくれるワイヤーフレームづくりを目指す

つくったワイヤーフレームは、検証目的に沿ったアウトプットになっているか？

目的に沿っていないのであれば、どこを修正する必要があるか？

どの部分をつくりこみ、どの部分を捨てるか、を検討する

いかに時間をかけずに作れるか

時間 / 工数をかけないようにするためには、検証目的にそぐなわないことをしないことが大事

たくさんつくって、たくさんこわす前提

FrameやShapeのリネームは、そのときやっても変わる最終的に変更になる可能性が高いので、やらない

AutoLayoutやComponent / Variantsをつかうことで、作業が効率化できるのであればやるが、その見込みがなければ無理しない

効率化を重視しつつも、ワイヤーフレームはあくまで中間成果物であることを念頭に、あらゆる面で完成度を追求しない

ワイヤーフレームが一旦できた段階で、ユーザーの立場で操作をシミュレーションしてみると、問題が浮かび上がってくる

ユーザーストーリーをもとに、一連の操作をやってみると、UI要素やテキストが足りていなかったり、不適切だと感じることがある

タスク（点）ではなく、ストーリー（線）としてユーザーの行動を捉えられることで、UI設計 / 検証に活用できる

今回のユーザーストーリーに絞ってワイヤーフレームをつくることで、その検証に焦点を置くことができる

関係のない無駄な要素をワイヤーフレームに置かなくて済むため、本来検証したいポイントを検証しやすい

ワイヤーフレームの忠実度（つまり目的をどこに置くのか）にも寄るため、目的によってはいまのUIをベースにワイヤーフレームをつくったほうがいい場合もある

検証したいポイントから議論が外れないように、違和感を感じる部分は直しておく / あえて精緻化しない

例えば、整列線

要素がずれていると、人は気持ち悪いと感じてしまう

だけど、本来ワイヤーフレームで指摘してほしいポイントではない

手書き / ペーパープロトタイプの場合は意識しなくてよいが、デザインツールでつくるワイヤーフレーム / プロトタイプなどは、フィードバックをもらう前に綺麗にしておくのがよい

例えば、テキストやデータ

中途半端にテキストやデータが本物っぽいところと、そうでないところがあると、そうでないところに目が行く

検証目的によって、精緻化しておいたほうがいいものと、そうでないものがある

検証目的を確認し、検証すべきポイントなのであれば、一部ではなくすべての要素に適用する

つまり、ワイヤーフレーム全体で忠実度を一定にしておく必要がある