" />

スポンサーリンク

UI 開発

業務システム開発の画面モック作成の進め方とポイント

投稿日:

なぜ、画面モックを作るのか?

画面モックを作る方法

画面モックを作るときに時間がかかるのは、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として作る場合、顧客に本番相当の画面遷移を見せることができる。

デメリット

  • ちょっとした環境構築が必要となる。
  • 顧客にファイルを送って確認してもらう場合は、コンパイルする必要がある。

まとめ

スポンサーリンク

-UI, 開発

Copyright© ノリックジオグラフィック for Webエンジニア , 2022 All Rights Reserved Powered by AFFINGER5.