ワイヤーフレーム作成

ワイヤーフレームとは？

ワイヤーフレームは、インターフェースの構造を示すスケッチです。コンテンツや操作項目をどこに配置するかを示し、洗練されたデザインに取りかかる前に、チームで情報の階層やタスクの完了しやすさを評価できます。

レイアウトの疑問を解消する

画面にコンテンツが多すぎる場合、操作項目が見つけにくい場合、または関係者間で情報の順序について合意する必要がある場合に、ワイヤーフレームが役立ちます。

目的を持って構造化する

1. タスクを中心に設計する。 画面上でユーザーに達成してほしいことを明確にします。
2. 意味のあるラベルを使う。 現実的なナビゲーションやアクションの文言によって、汎用的なボックスでは見えない問題が明らかになります。
3. コンテンツの優先順位を示す。 最も役立つ情報は、すぐに見つけられるようにします。
4. データがない状態も考慮する。 コンテンツが表示された状態だけでなく、空の状態、読み込み中、エラーの状態も検討します。
5. ビューポートを明記する。 デスクトップでの配置だけでは、同じコンテンツがスマートフォンにどう収まるかは判断できません。

キャンバスに画面を下書きする

MyMapでは、説明したインターフェースの領域を配置し、その位置を調整できます。この例は、サイドバーのナビゲーション、KPIカード、グラフ領域、テーブルを含む分析ダッシュボードのスケッチです。これらの要素はレイアウトを表しています。