なぜ、画面モックを作るのか？
画面モックを作る方法
画面モックを作るときに時間がかかるのは、CSSによるレイアウト調整である。
モックができていると、PG工程は楽になる。
モックを何で作るか？
- HTML/CSS…静的なHTMLとCSSを使用して実際に画面遷移できるものとして作成する。
- エクセル…エクセルの罫線を利用して画面レイアウトをデザインする。吹き出しや図形を利用できる。各画面の設計書に書き込めば、各ボタンのイベントも分かりやすい。
- 手書きの絵→画像読み込み…設計者はノートにボールペンなどでざっくりと画面レイアウトを書く。
HTMLで画面モックを作る環境は？
HTML/CSSで画面モックを作るとして、どうやって作っていくか？方法は2つある。
1.静的なHTML/CSSで作っていく
メリット
- 環境構築が一切不要。メモ帳だけでも作り始めることができる。
- 顧客に提示するのが楽。顧客にファイルをそのまま送って動かしてもらうことができる。
デメリット
- PG工程の最初にVue.jsへの載せ替えが発生する。
2.Vue.jsプロジェクトを作って、開発環境上で作っていく
フロントの環境構築をして、npm run serveコマンド等でVue.jsのコンポーネントを作りながらモックを作成していく方法。
メリット
- PG工程をいきなり進めていくことができる。
- SPAとして作る場合、顧客に本番相当の画面遷移を見せることができる。
デメリット
- ちょっとした環境構築が必要となる。
- 顧客にファイルを送って確認してもらう場合は、コンパイルする必要がある。