システム開発はその他実物のある既存の商品と異なり、発注時点では実存しないものになります。
そのため、システムが納品されて初めてそのシステムの完成が分かり、「実際に見てみると求めていたシステムと違う…」ということになる可能性があります。
このようなリスクを避けるために「納品前に画面を確認させてほしい！」と思われる方が多いかと思います。
システムのイメージに関しては開発に入る前の要件定義から設計段階で、開発者と認識のズレをすり合わせることが重要です。そのため、外部設計の段階で画面設計が作成されることが一般的です。
開発会社によっては「ワイヤーフレーム」「モックアップ」「プロトタイプ」といったもので、より具体的な画面図を作成することもあります。
システム開発の発注を検討されている方に向けて、「画面設計」と「ワイヤーフレーム」「モックアップ」「プロトタイプ」について解説いたします。
納品前の画面確認について
システムは完成する前は実体のないものになります。そのため、イメージのズレが発生しないように外部設計の段階で発注者と開発者の間でイメージの確認を行います。
外部設計とは要件定義で取り決めた要件をシステムに落とし込み仕様を定める工程になります。外部設計に関しては下記記事で解説しています。
システム開発の最初の工程「要件定義」の後に設計段階があります。要件定義では発注者と開発者の打ち合わせがとても重要となります。 「要件定義で十分開発会社に要望は伝えたから、もう発注者の役目はないだろう」と思われるかもしれません。しかし、[…]
その際に画面設計の仕様書が作成されます。また、開発会社によってはより詳細なイメージを作成することもあります。
メディアファイブでも、設計段階で「モックアップ」を作成し、お客様にご確認いただくことが可能です。モックアップのほかには「ワイヤーフレーム」と「プロトタイプ」があります。
- 「ワイヤーフレーム」は画面の設計図である。
- 「モックアップ」は画面の模型である。
- 「プロトタイプ」はシステムの試作品である。
詳しく解説していきます。
「画面設計」とは
「画面設計」とは設計書の中でもユーザーが閲覧、操作する画面部分の設計のことを指します。
画面の設計は外部設計の段階から行われることが多いです。
主に下記の項目が含まれる仕様書が作成されます。
画面レイアウト
開発する画面のボタンや表示項目の位置を設計します。
画面一覧
開発する必要のある画面を一覧にします。
画面遷移図
画面を操作した際にどういった画面へ移動するのか画面同士の関係を示したものです。
「モックアップ」とその他画面イメージ
画面のイメージを発注者と開発者で共有する際に「モックアップ」が作成されることがあります。似ているものとして「ワイヤーフレーム」「プロトタイプ」が作成される場合があります。
「ワイヤーフレーム」「モックアップ」「プロトタイプ」の順で完成に近い状態となります。
「ワイヤーフレーム」とは
画面上のどこに何の機能が表示されるのかを表現したものを「ワイヤーフレーム」と言います。
デザインは表現されていない状態ですが、ボタンや文字の配置等を表現したものになります。
画面レイアウト（画面設計）を作成する際によく使われる表現です。
「モックアップ」とは
「モックアップ」とは機能が実装されていない見た目だけの画面のことを指し、「模型」のようにイメージされます。
ワイヤーフレームと異なり、デザイン表現も含まれて制作されます。
完成状態をイメージするために作成されるものになります。発注者、開発者で画面のイメージをすり合わせることができます。
「ホットモック」と「コールドモック」とは
上述の通り機能が動作せず、デザインのみのサンプルを「コールドモック」と呼ぶのに対して、実際に機能の動作まで確認できるモックを「ホットモック」と呼びます。
webアプリケーションの開発よりは実機を伴った機器のモックに対してよく使われ、主にユーザーがスマートフォン等を販売店で閲覧する際に、操作感などを試せるように電源が入り動作するよう作られた模型が「ホットモック」と呼ばれています。
「プロトタイプ」とは
「プロトタイプ」とはモックアップが見た目のみなのに対して実際の機能が実装されているものです。
システムの「試作品」になります。モックアップが「静的」（変化しない状態）なのに対し「動的」（機能に対して変化する状態）なイメージを追加しているのがプロトタイプになります。
初期の段階でシステムの認識の齟齬が無いか確認することで修正を少なくするために行います。
納品前の画面の確認は可能
「画面設計」と「ワイヤーフレーム」「モックアップ」「プロトタイプ」に関して解説いたしました。
- 発注者も確認を求められる外部設計の段階で「画面設計」が行われる。
- 「ワイヤーフレーム」は画面のレイアウトを設計したもの。
- 「モックアップ」は画面のデザインや見た目を設計したもの。
- 「プロトタイプ」はシステム完成イメージに齟齬が無いかを確認する。
発注者も納品前に画面イメージを確認することができます。
メディアファイブではWebシステムの開発の際、基本設計でHTMLのモックアップを作成をいたしますので、画面を確認することが可能です。
納品前でも画面の操作感、システムの動きを実感できますので、まずはお問い合わせください。
また、メディアファイブのお打ち合わせはアットホームな雰囲気を心掛けており、お客様からも「話しやすい」とご評価をいただいております。モックアップ確認の際に限らず、システム開発でのご不明点やご確認事項がございましたら、細かいことでも構いません。お気軽にご相談ください。
システム開発の発注をご検討されている方はぜひ、ご相談ください。
