開発プロセス
開発プロセスについて
B2. ワイヤーフレーム (Wireframe)

チェックする

  • 提供する機能が伝わるか
  • レイアウトとコンテンツの関係を確認
  • 画面遷移に整合性があるか
  • 情報設計、階層構造は正しいか

いいところ

  • 紙よりもそれっぽいが、あくまでも簡素
  • まだ、簡単に捨てられて、修正できることが大切
  • デザイナーもプログラマーもまだ工数なし
  • この段階でできるだけ修正するべき

自分で作るか or 作ってもらう

  • 自分でできれば柔軟に企画できる
  • 情報設計でツールの学習コストは小さい
  • 比較的単純作業ではあるのでだれかがデジタル化する

この段階で顧客に共有するべきか

  • 共有することは可能
  • 当然デザインはされていないので大枠のチェックのみ
  • どんな体験(UX)なのかも大枠で確認できる

ツール

言葉の定義

  • スケッチ(Sketch) : 1枚の紙にフリーハンドで描いただけのただの絵
    • ドローイング(Drawing) : お絵かき
  • ワイヤーフレーム(Wireframe) : 要素のレイアウトを示す基本的な構成図、骨格やシンプルな構造
  • デザインカンプ (Design Comprehensive Layout) : デザインの完成見本
    • モックアップ(Mockup) : 模型、見本品
    • カラーリング(Coloring) : 着色すること
  • マークアップ(Markup) : 機械でも文書構造が認識できるように、文書の各要素に目印を与えて行く事
    • プロトタイプ(Prototype) : インタラクションできる

ワイヤーフレーム、モックアップ、プロトタイプの違いとは? | デザイン | POSTD

参考

書籍