プロダクト・顧客価値
ワイヤーフレーム
Wireframe
読み：わいやーふれーむ
画面の情報構成や要素の配置を、装飾を抑えて示す設計資料です。
01初心者向け
まず意味をつかむ
色や細かな見た目より、何をどこに置くか、利用者がどう理解するかを考えます。早い段階で構成の認識をそろえるために使います。
02実務者向け
仕事でどう使うか
重要な情報、操作、優先順位を確認し、画面の構成を具体化します。必要なら複数画面をつなぎ、利用者の目的に沿う流れになっているかを検討します。
03専門家向け
判断を一段深める
ワイヤーフレームだけでは、動作、実データ、エラー時の扱いなどが伝わらない場合があります。図の解像度と未決定の部分を明示し、受け手が完成したUIと誤認しないようにします。実際の文言や内容の長さによる影響も早めに確認することが重要です。
IN PRACTICE
具体例で考える
研修検索画面で、検索条件、結果一覧、講座の比較情報を簡単な枠で示します。色を選ぶ前に、利用者が条件を見つけられる配置かを話し合います。
理解を助けるための架空の例です。必要な情報と操作
配置と優先順位
利用の流れで確認
構成検討の図です。完成した画面や動作仕様を示すものではありません。
ここは誤解しやすい
枠だけを整えて、実際に必要な情報や利用者の目的を後回しにしないようにします。
この知識を、組織の力へ。