SIもスマホアプリ開発も「見た目」が大切、画面プロトタイプツールが続々

日経コンピュータ

2014.11.19

　エンタープライズ系のSI（システムインテグレーション）であれ、一般消費者向けのスマホアプリ開発であれ、見た目すなわちUI（ユーザーインタフェース）の重要性が高まっているのは同じだ。ニーズの高まりを受け、画面プロトタイプを作成するツールが相次ぎ登場している。

　NECが2014年9月25日に販売を開始したのは、エンタープライズ系のSI用途を狙った「SystemDirector Enterprise V8.3」。一方、UI/UXのコンサルティングを手掛けるグッドパッチは10月1日、スマートフォン（スマホ）向けのアプリやWebサイトのプロトタイプ開発用ツール「Prott」の提供を始めた。両者は特徴も機能も全く異なるが、どちらも見栄えの良いUIを効率よく開発できることに主眼を置くツールである。

SystemDirector Enterprise
画面と同時に設計書を自動生成

　SystemDirector Enterprise V8.3は業務システム向け統合開発環境の最新版。今回の一番大きな強化点が、画面プロトタイプの作成機能だ。「画面はユーザーからの要望によって、手戻りが発生しやすい。動く画面を早期にユーザーに見せて修正を繰り返し、上流で画面を確定させることで全体の工数を低減できる」とNEC SI・サービス技術本部の小林茂憲シニアエキスパートは説明する。

　SystemDirector Enterprise V8.3を使った、実際の画面プロトタイプの作成手順は以下のようなものだ。

テンプレートの改変で開発

　まず画面の遷移をフローチャートで規定する（写真1）。

写真1●画面遷移の設定

[画像のクリックで拡大表示]

　SystemDirector Enterpriseは、フローチャートの作成を効率化するテンプレートを用意している。「参照系遷移（2画面遷移）」「登録系遷移（3画面遷移）」といったものだ。「参照系遷移（2画面遷移）」であれば「一覧画面→詳細表示画面」といった流れを、「登録系遷移（3画面遷移）」であれば「一覧画面→登録画面→確認画面」といった流れを採る。作成したい画面がテンプレートの中にあれば、それを選択する。

　次に、画面レイアウトを設計する。画面遷移でテンプレートを選択した場合、画面レイアウトについても「画面テンプレート」が自動で選択される。一覧画面であれば「一覧画面テンプレート」が、詳細画面であれば「詳細画面テンプレート」が選ばれる。このテンプレートに対して、画面の部品を追加・削除して画面を設計していく。

　画面の部品として「テキストエリア」「チェックボックス」「ラジオボタン」などがあり、設計画面上でドラッグ＆ドロップで配置できる（写真2）。