説明

画面設計支援装置、画面設計支援方法、及びプログラム

【課題】画面の設計を行う際に、設計済の画面との間でGUIの統一性をもたせる。
【解決手段】設計済の画面を識別するための画面識別子と、該画面に含まれるデータ項目と、該データ項目に対して選択された部品を識別するための部品識別子とを含む設計情報を設計情報記憶部に記憶し、設計対象の画面に含まれるデータ項目を、該設計対象の画面を設計する設計者端末から受け付け、受け付けられたデータ項目に対応する部品の部品識別子を設計情報記憶部から選択し、該選択された部品を示す部品候補情報を設計者端末に出力する。

【発明の詳細な説明】
【技術分野】
【0001】
本発明は、画面設計支援装置、画面設計支援方法、及びプログラムに関する。
【背景技術】
【0002】
パーソナルコンピュータや携帯端末等の情報処理装置における操作では、画面を用いることが多い。システム開発のプロジェクトにおいて、このような画面のユーザインタフェース、すなわちGUI(Graphical User Interface)を設計する際には、複数の画面間においてGUIに統一性を持たせることが求められる。そのため、画面において使用すべきUI部品のガイドラインを制定し、このガイドラインに沿って画面設計を行うようにすることが一般的に行われている。例えば、特許文献1には、ある機能を有するUI部品として複数の候補が考えられる場合に、アンケート結果に基づいて1つのUI部品をガイドラインに登録する手法が開示されている。
【先行技術文献】
【特許文献】
【0003】
【特許文献1】特開2009−104313号公報
【発明の概要】
【発明が解決しようとする課題】
【0004】
ところで、上述のようにガイドラインを設けたとしても、各設計者によるUI部品の選定結果によっては、複数の画面間におけるGUIの統一性が損なわれる場合もある。これは、各設計者によって画面の設計を行われる際に、ガイドラインの参照は行われるものの、過去に設計された画面との統一性は考慮されないことがあるためである。
【0005】
本発明はこのような事情に鑑みてなされたものであり、画面の設計を行う際に、設計済の画面との間でGUIの統一性をもたせることを目的とする。
【課題を解決するための手段】
【0006】
本発明の一側面に係る画面設計支援装置は、設計済の画面を識別するための画面識別子と、該画面に含まれるデータ項目と、該データ項目に対して選択された部品を識別するための部品識別子とを含む設計情報を記憶する設計情報記憶部と、設計対象の画面に含まれるデータ項目を、該設計対象の画面を設計する設計者端末から受け付ける設計情報受付部と、受け付けられたデータ項目に対応する部品の部品識別子を設計情報記憶部から選択し、該選択された部品を示す部品候補情報を設計者端末に出力する部品候補出力部と、を備える。
【0007】
なお、本発明において、「部」とは、単に物理的手段を意味するものではなく、その「部」が有する機能をソフトウェアによって実現する場合も含む。また、1つの「部」や装置が有する機能が2つ以上の物理的手段や装置により実現されても、2つ以上の「部」や装置の機能が1つの物理的手段や装置により実現されても良い。
【発明の効果】
【0008】
本発明によれば、画面の設計を行う際に、設計済の画面との間でGUIの統一性をもたせることが可能となる。
【図面の簡単な説明】
【0009】
【図1】本発明の一実施形態である画面設計システムの構成を示す図である。
【図2】UI部品カタログDBの構造の一例を示す図である。
【図3】UI選定ガイドラインテンプレートDBの構造の一例を示す図である。
【図4】UI選定ガイドラインDBの構造の一例を示す図である。
【図5】画面・UIメモリDBの構造の一例を示す図である。
【図6】画面設計時に表示される画面の一例を示す図である。
【図7】UI部品の承認時に表示される画面の一例を示す図である。
【図8】UIメモリサーバにおける処理の一例を示すフローチャートである。
【発明を実施するための形態】
【0010】
以下、図面を参照して本発明の一実施形態について説明する。図1は、本発明の一実施形態である画面設計システムの構成を示す図である。画面設計システムは、クライアント10,12,14及びUIメモリサーバ20を含んで構成されている。クライアント10,12,14は、例えば、パーソナルコンピュータ等の情報処理装置を用いて構成され、UIメモリサーバ20は、PCサーバ等の情報処理装置を用いて構成される。
【0011】
クライアント10は、システム設計におけるプロジェクトの管理者が使用する管理者端末であり、プロジェクト登録部30及び通信部32を含んで構成される。なお、図1にはクライアント10は1つしか図示されていないが、クライアント10は複数存在してもよい。
【0012】
プロジェクト登録部30は、プロジェクトの属性及びアプリケーションの基調色をUIメモリサーバ20に登録するための機能を提供する。ここで、プロジェクトの属性とは、例えば、プロジェクトで開発されるアプリケーションのユーザ像や使用されるデバイスなどである。具体的には、アプリケーションのユーザが初心者であるのか上級者であるのかという情報や、入力デバイスがキーボードであるのかマウスであるのかという情報などである。アプリケーションの基調色とは、背景色や部品などの配色が赤系統になるのか青系統になるのかという情報である。また、プロジェクト登録部30は、画面設計に用いることが可能なUI部品の中に、ある機能を有する複数のUI部品の候補が存在する場合に、複数の候補の優先順位をUIメモリサーバ20に登録するための機能を提供する。プロジェクト登録部30は、例えば、Webブラウザを介してUIメモリサーバ20にアクセスしたり、クライアント10に予めインストールされているプログラムを実行したりすることにより、上述の機能を実現することができる。
【0013】
通信部32は、ネットワークを介して他の情報処理装置と通信を行うためのものである。本実施形態では、通信部32は、プロジェクト登録部30とUIメモリサーバ20との間でデータの送受信を行うことができる。
【0014】
クライアント12は、画面設計者が使用する設計者端末であり、画面設計部34及び通信部36を含んで構成される。なお、図1にはクライアント12は1つしか図示されていないが、クライアント12は複数存在してもよい。
【0015】
画面設計部34は、画面設計者に対して画面を設計するための機能を提供する。具体的には、画面設計部34は、設計対象の画面において用いることが可能なUI部品の候補に関する情報など、UIメモリサーバ20からの各種情報を画面設計者に対して提供するとともに、画面設計者からの入力に応じて画面の設計情報を生成する。画面設計部34は、例えば、Webブラウザを介してUIメモリサーバ20にアクセスしたり、クライアント12に予めインストールされているプログラムを実行したりすることにより、上述の機能を実現することができる。
【0016】
通信部36は、ネットワークを介して他の情報処理装置と通信を行うためのものである。本実施形態では、通信部36は、画面設計部34とUIメモリサーバ20との間でデータの送受信を行うことができる。
【0017】
クライアント14は、画面設計の承認者が使用する承認者端末であり、承認部38及び通信部40を含んで構成される。なお、図1にはクライアント14は1つしか図示されていないが、クライアント14は複数存在してもよい。
【0018】
承認部38は、設計された画面のGUIを承認するための機能を提供する。具体的には、承認部38は、複数の画面において、同一のデータ項目に対して異なるUI部品が選定されている場合に、その差異を検証し、選定されたUI部品の承認や修正指示を行うための機能を提供する。承認部38は、例えば、Webブラウザを介してUIメモリサーバ20にアクセスしたり、クライアント14に予めインストールされているプログラムを実行したりすることにより、上述の機能を実現することができる。
【0019】
通信部40は、ネットワークを介して他の情報処理装置と通信を行うためのものである。本実施形態では、通信部40は、承認部38とUIメモリサーバ20との間でデータの送受信を行うことができる。
【0020】
UIメモリサーバ20は、UI部品カタログデータベース(DB)50、UI選定ガイドラインテンプレートデータベース(DB)52、UI選定ガイドラインデータベース(54)、画面・UIメモリデータベース(DB)56、通信部60a,60b,60c、UI選定ガイドライン設定部62、画面登録部64、部品候補出力部66、及びUI選定承認部68を含んで構成される。UIメモリサーバ20における各部は、メモリや記憶装置等の記憶領域を用いたり、記憶領域に記憶されているプログラムをプロセッサが実行したりすることにより実現することができる。
【0021】
UI部品カタログDB50は、画面設計に用いられる全てのUI部品に関する情報が格納されたデータベースである。図2には、UI部品カタログDB50の構造の一例が示されている。図2に示すように、UI部品カタログDB50では、UI部品の識別子、部品データ、基調色ごとの配色データ、及び属性情報が対応付けられている。ここで、各UI部品は、例えば、テキストボックスやボタンなどの基本的なUI部品に、用途や機能、動きなどのバリエーションを与えたものである。UI部品の識別子には、UI部品に割り当てられたコードや名称などが含まれる。部品データには、UI部品の描画に用いられる図形データや、UI部品を実行する際に必要となるソースファイルなどが含まれる。基調色ごとの配色データには、UI部品の描画に用いられる配色に関する属性が含まれる。配色に関する属性は、例えば、部品データに対応する色データのRGB表現を利用してもよいし、CSS(Cascading Style Sheet)を用いて定義した色データの識別子を利用してもよい。属性情報には、想定されるユーザ像や、各入力デバイスでの利用可否に関する情報などが含まれる。
【0022】
図1に戻り、UI選定ガイドラインテンプレートDB52は、UI部品を選定する際のガイドラインのテンプレートを規定するものであり、画面操作における機能ごとに、利用可能なUI部品を対応づけたデータベースである。本実施形態では、UI選定ガイドラインテンプレートDB52により規定されるガイドラインのことを、ガイドラインテンプレートとも称する。なお、UI選定ガイドラインテンプレートDB52では、1つの機能に対して複数のUI部品を登録することが可能である。そして、UI選定ガイドラインテンプレートDB52では、1つの機能に対して複数のUI部品が存在する場合に、各UI部品の優先順位を登録することも可能である。なお、UI選定ガイドラインテンプレートDB52には、UI部品カタログDB50に登録されているUI部品の一部のみが登録されていることとしてもよい。また、UI選定ガイドラインテンプレートDB52は、例えば、GUIの管理者によって予め構築されていることとする。
【0023】
図3には、UI選定ガイドラインテンプレートDB52の構造の一例が示されている。図3に示すように、UI選定ガイドラインテンプレートDB52では、基本機能、詳細機能、優先順位、UI部品の識別子、及び説明情報が対応付けられている。基本機能は、入出力や選択など、UI部品の基本的な機能を示すものである。詳細機能は、パスワード・機密入力や数値入力など、より詳細な機能を示すものである。なお、本実施形態では、基本機能及び詳細機能をまとめて機能と称する場合もある。優先順位は、同一の詳細機能に対して複数のUI部品が存在する場合に、これら複数のUI部品の中から1つのUI部品を選定する際の優先度を示すものである。例えば、図3の例では、パスワード・機密入力という詳細機能に対して、部品X及び部品Yを含む複数のUI部品が割り当てられており、部品Xの優先順位が最も高くなっている。つまり、UI選定ガイドラインテンプレートDB52では、パスワード・機密入力のためのUI部品として、部品Xが最も推奨されることが示されている。説明情報には、UI部品を選定する際の参考となる各種情報が含まれている。図3に示すように、例えば、説明情報には、UI部品の説明文や、優位性、注意点、実装難易度などが含まれている。
【0024】
図1に戻り、UI選定ガイドラインDB54は、UI選定ガイドラインテンプレートDB52に基づいてプロジェクトごとにカスタマイズされたガイドラインを規定するものである。本実施形態では、UI選定ガイドラインDB54により規定されるガイドラインのことを単にガイドラインとも称する。
【0025】
図4には、UI選定ガイドラインDB54の構造の一例が示されている。図4に示すように、UI選定ガイドラインDB54には、UI選定ガイドラインテンプレートDB52が有する項目に加えて、プロジェクトの識別子及びアプリケーションの基調色が含まれている。プロジェクトの識別子には、プロジェクトに割り当てられたコードや名称などが含まれる。アプリケーションの基調色には、プロジェクトごとにUI部品カタログDB50の基調色情報から選択した基調色名が含まれる。プロジェクトごとにカスタマイズされたガイドラインでは、UI部品に割り当てられた優先順位をガイドラインテンプレートで規定されている優先順位とは別のものとすることができる。また、ガイドラインには、ガイドラインテンプレートに含まれるUI部品のうち、プロジェクト属性に応じたUI部品のみを登録することも可能である。ガイドラインのカスタマイズの詳細については後述する。
【0026】
図1に戻り、画面・UIメモリDB56は、画面設計者によって過去に設計された画面、および、現在設計中の画面の設計情報が格納されるデータベースである。図5には、画面・UIメモリDB56の構造の一例が示されている。図5に示すように、画面・UIメモリDB56では、プロジェクトの識別子、アプリケーションの基調色、画面の識別子、データ項目、基本機能、詳細機能、UI部品の識別子、配置情報、及び承認の状態を示す承認情報が対応付けられている。ここで、配置情報は、各画面において選定されたUI部品の配置を示すものであり、サイズや位置、余白、アライン等の情報を含む。また、承認情報とは、各画面において選定されたUI部品が承認者によって承認されたかどうかを示すものである。例えば、図5では、承認情報として、承認者による承認が完了しているUI部品には「済」、承認が完了していないUI部品には「未」が設定されている。また、承認者によってUI部品の修正が指示されたものについては、承認情報として「修正指示」が設定されている。
【0027】
図1に戻り、通信部60a,60b,60cは、クライアント10,12,14との間でデータの送受信を行うためのものである。
【0028】
UI選定ガイドライン設定部62は、クライアント10を用いてプロジェクト管理者から入力されるプロジェクト属性に基づいて、プロジェクトごとにカスタマイズされたガイドラインを設定するためのものである。UI選定ガイドライン設定部62によって設定されたガイドラインは、UI選定ガイドラインDB54に記憶される。例えば、UI選定ガイドライン設定部62は、プロジェクト属性として、ユーザ像を示す情報が入力されると、UI部品カタログDB50を参照し、特定されたユーザ像に対応するUI部品を抽出する。そして、UI選定ガイドライン設定部62は、UI選定ガイドラインテンプレートDB52に登録されているガイドラインテンプレートと、UI部品カタログDB50から抽出されたUI部品とに基づいて、プロジェクト用にカスタマイズされたガイドラインを生成し、UI選定ガイドラインDB54に格納する。
【0029】
例えば、UI選定ガイドライン設定部62は、ガイドラインテンプレートに登録されているもののうち、UI部品カタログDB50から抽出されたUI部品のみをガイドラインとして抽出することが可能である。また、例えば、UI選定ガイドライン設定部62は、ガイドラインテンプレートに設定されている優先順位を、UI部品カタログDB50から抽出されたUI部品の優先順位が高くなるように変更したガイドラインを生成することも可能である。また、UI選定ガイドライン設定部62は、クライアント10から、各UI部品の優先順位を設定するための情報を受け付けてガイドラインに反映させることも可能である。
【0030】
なお、クライアント10のプロジェクト登録部30においてプロジェクト属性を入力したり、ガイドラインにおけるUI部品の優先順位を入力したりするための画面は、例えば、クライアント10においてWebブラウザを用いて表示されるものとすることができる。この場合、UI選定ガイドライン設定部62が、プロジェクト登録部30からの要求に応じて、画面表示に必要なデータをクライアント10に送信することができる。
【0031】
画面登録部64(設計情報受付部)は、各画面の設計開始時に、画面に含まれるデータ項目及び機能に関する情報をクライアント12から受信し、画面・UIメモリDB56に登録する。図6には、クライアント12の画面設計部34において表示される画面の一例が示されている。図6に示すように、画面100には、画面名称入力エリア110、データ項目入力エリア112、画面初期登録ボタン114、ガイドライン参照ボタン116、画面マッチング候補表示エリア118、画面設計エリア120、UI部品候補表示エリア122、及び選定結果登録ボタン124が含まれている。画面100は、クライアント12においてWebブラウザを用いて表示されてもよいし、画面設計用の専用のアプリケーションを用いて表示されてもよい。
【0032】
図6に示すように、画面100において、画面名称入力エリア110には、設計対象の画面の名称が入力されている。また、データ項目入力エリア112には、設計対象の画面に含まれるデータ項目と、各データ項目に対する機能とが入力されている。例えば、データ項目は、データ項目入力エリアにおいて画面設計者が文字入力することにより設定することができる。また、機能は、データ項目入力エリアにおいて画面設計者が選択することにより設定することができる。なお、画面設計部34では、UI選定ガイドラインDB54を参照することにより、機能を選択可能に表示することが可能である。画面100において、画面名、データ項目、及び機能が入力され、画面初期登録ボタン114が押下されると、これらの情報が画面登録部64に送信される。そして、画面登録部64は、受信した情報を画面・UIメモリDB56に登録する。なお、プロジェクトを示す情報は、画面100で入力されることとしてもよいし、あらかじめクライアント12や画面設計者に対応付けられていることとしてもよい。また、画面登録部64は、画面の初期登録の際には、承認情報の初期値として「未」を設定することができる。
【0033】
図1に戻り、部品候補出力部66は、設計対象の画面においてUI部品を選定する際の参考情報として、クライアント12に対して部品候補情報を出力するものであり、画面マッチング部70、UIマッチング部72、及びUI選定部74を含んで構成される。
【0034】
画面マッチング部70は、画面・UIメモリDB56に初期登録された情報に基づいて、設計対象の画面に類似する過去に設計済の画面を検索する。そして、類似する画面が検索されると、検索された画面におけるUI部品の選定結果を示す情報を部品候補情報としてクライアント12に送信する。例えば、画面マッチング部70は、設計対象の画面との類似度が所定の基準値以上である設計済の画面を、設計対象の画面に類似する画面として抽出することができる。さらに、画面マッチング70は、類似度の高い順に、設計済の画面に関する情報をクライアント12に提供することができる。ここで、画面の類似度の算出は、例えば、画面内に含まれるデータ項目の一致度に基づいて行うことができる。なお、データ項目の一致度を判定する際には、比較する際のキーに機能を含めることができる。また、画面マッチング部70は、設計対象の画面が属するプロジェクトのみにおける設計済の画面を検索対象とすることができる。
【0035】
図6に示した画面100の画面マッチング候補表示エリア118には、画面マッチング部70により抽出された画面の一覧が表示されている。画面の一覧は、例えば、画面イメージをあらわすサムネイル画像や、画面名称により表すことができる。また、画面の一覧は、設計対象の画面との類似度が高い順に表示することができる。画面100の画面設計エリア120は、設計対象の画面の設計を行うための領域である。例えば、画面マッチング候補エリア118で、ある画面が選択されると、画面設計部34は、選択された画面の設計情報をUIメモリサーバ20の画面マッチング部70に要求する。画面マッチング部70は、要求された画面の設計情報を画面・UIメモリDB56から抽出してクライアント12に送信する。このとき、画面マッチング部70は、当該画面の部品データ、配色データをUI部品カタログDB50から取得し、設計情報とともにクライアント12に送信する。クライアント12の画面設計部34では、UIメモリサーバ20から受信した設計情報や部品データ(描画情報)、配色データに基づいて、画面マッチング候補表示エリア118で選択された画面をレンダリングし、画面設計エリア120に表示することができる。画面設計者は、画面設計エリア120に表示された設計済の画面をもとに、UI部品のサイズや位置を調整したり、UI部品の追加や変更、削除などを行うことにより、画面の設計を行うことができる。なお、UI部品の追加や変更は、後述するようにUI部品候補表示エリア122に表示されるUI部品から選択することにより行うことができる。
【0036】
なお、画面設計エリア120には、類似度が最も高い設計済の画面が自動的に表示されるようにすることも可能である。また、設計対象の画面で必要なデータ項目以外のデータ項目が設計済の画面に含まれていることもある。この場合、画面設計エリア120では、このような不要なデータ項目は、表示されないようにしてもよいし、グレイアウト等によって不要であることがわかるように表示されることとしてもよい。
【0037】
また、画面マッチング候補表示エリア118から画面が選択された場合、データ項目入力エリア112には、選択された画面において選定されたUI部品と、選択された画面における承認状態が表示される。
【0038】
図1に戻り、UIマッチング部72は、UI選定部74からの要求に応じて、設計対象の画面に含まれるデータ項目について、データ項目及び機能をキーとして画面・UIメモリDB56から、過去に同一のデータ項目及び機能に対して選定されたUI部品を検索する。
【0039】
UI選定部74は、設計対象の画面に含まれるデータ項目について、過去に同一のデータ項目及び機能に対して選定されたUI部品の検索要求をクライアント12の画面設計部34から受け付けると、UIマッチング部72を介してこのようなUI部品の検索を行う。そして、UI選定部74は、UIマッチング部72の検索結果に基づいて、検索されたUI部品の説明情報や部品データ、配色データをUI選定ガイドラインDB54やUI部品カタログDB50から取得し、クライアント12に送信する。なお、あるデータ項目に対して複数のUI部品が検索された場合、UI選定部74は、これら複数のUI部品に関する情報をクライアント12に送信する。この場合、UI選定部74は、UI選定ガイドラインDB54に登録されている優先順位に従ってUI部品がUI部品候補表示エリア122に表示されるようにUI部品の情報をクライアント12に出力することができる。
【0040】
ここで、クライアント12の画面設計部34は、例えば、データ項目入力エリア112において選択されたデータ項目についての検索要求をUIメモリサーバ20に送信することができる。画面設計部34は、例えば、画面設計エリア120において選択されたデータ項目についての検索要求をUIメモリサーバ20に送信することも可能である。
【0041】
また、UI選定部74は、設計済の画面でのUI部品の選定履歴にかかわらず、UI選定ガイドラインDB54を参照することにより、ガイドラインに規定されたUI部品に関する情報をクライアント12に提供することも可能である。例えば、UI選定部74は、UIマッチング部72によってUI部品が検索されなかった場合に、データ項目に対する機能を有するUI部品をUI選定ガイドラインDB54から検索し、検索されたUI部品に関する情報をクライアント12に提供することができる。また、例えば、画面100において、あるデータ項目が選択されたうえでガイドライン参照116ボタンが押下される等、クライアント12からの要求に応じて、当該データ項目に対する機能を有するUI部品をUI選定ガイドラインDB54から検索することも可能である。このような場合においても、UI選定部74は、UI部品候補表示エリア122に1つまたは複数のUI部品が、UI部品の説明情報とともに、優先順位に従って表示されるようにUI部品の情報をクライアント12に出力することが可能である。
【0042】
また、UI選定部74は、設計された画面におけるUI部品の選定結果を示す設計情報をクライアント12から受信し、画面・UIメモリDB56を更新することができる。すなわち、UI選定部74は、画面・UIメモリDB56に格納されている設計情報を更新する設計情報更新部としての機能も備えている。例えば、図6に示す画面100において、選定結果登録ボタン124が押下されることにより、画面設計エリア120で設計された画面に関する設計情報が、画面設計部34からUIメモリサーバ20に送信されるようにすることができる。UI選定部74では、クライアント12から選定結果を受信すると、画面・UIメモリDB56に初期登録されている設計情報に、UI部品や配置情報を追加する。また、UI選定部74は、新たに設計された画面において選定されたUI部品が、類似画面において過去に選定されたUI部品をそのまま用いたものであり、類似画面において既に承認済である場合には、新たに設計された画面における当該UI部品の承認状態を「済」に更新することとしてもよい。
【0043】
図1に戻り、UI選定承認部68は、画面・UIメモリDB56を参照し、同一のデータ項目に対して異なるUI部品が選定されている複数の画面を特定する。そして、UI選定承認部68は、特定された画面において同一のデータ項目に対して異なるUI部品が選定されていることを示す相違情報を生成し、クライアント14の承認部38に送信する。この相違情報には、特定された画面の設計情報及び部品データ、配色データが含まれている。クライアント14の承認部38では、UIメモリサーバ20から送信される相違情報に基づいて、選定されたUI部品の承認が行われる。
【0044】
図7には、クライアント14の承認部38においてUI部品の承認が行われる際の画面の一例が示されている。図7に示す画面200は、承認部38が、UIメモリサーバ20から送信される相違情報に基づいて表示するものである。画面200には、UI差異一覧表示エリア210及びUI差異確認エリア212が含まれている。UI差異一覧表示エリア210には、選定されたUI部品に差異があるデータ項目のリストが表示される。図7の例では、「性別」という同一のデータ項目に対して、画面Aでは部品Tが選定され、画面Bでは部品Vが選定されていることが示されている。そして、部品Tの承認状態が「済」、部品Vの承認状態が「未」であることが示されている。UI差異確認エリア212には、UI差異一覧表示エリア210において選択されたデータ項目について、そのデータ項目を含む画面が表示される。図7の例では、UI差異一覧表示エリア210において「性別」のデータ項目が選択されており、このデータ項目を含む画面A及び画面BがUI差異確認エリア212に表示されている。UI差異確認エリア212を見ると、「性別」という同一のデータ項目に対して、画面Aではラジオボタン(部品T)が選定され、画面Bではリストボックス(部品V)が選定されていることがわかる。ここで、画面Aにおけるラジオボタン(部品T)は承認済であり、画面Bにおけるリストボックス(部品V)は未承認であるとする。このとき、承認者は、承認ボタン214または修正指示ボタン216を押下することにより、画面Bにおけるリストボックス(部品V)の承認結果を入力することが可能である。承認部38は、承認者からの承認結果を受け付けると、承認結果を示す承認情報を生成し、承認結果が入力された画面及びデータ項目を特定するための情報とともに、UIメモリサーバ20のUI選定承認部68に送信する。UIメモリサーバ20のUI選定承認部68では、この承認情報を用いて、画面・UIメモリDB56に記憶されている設計情報を更新する。
【0045】
なお、図7の画面200では、UI差異確認エリア212に2つの画面のみが表示されているが、同一のデータ項目の選定結果に相違が生じている画面が3つ以上存在する場合においては、これら3つ以上の画面間の差異を確認するための任意の表示手法を採用することが可能である。例えば、UI差異確認エリア212に、同一のデータ項目の選定結果に相違が生じている全ての画面が表示されることとしてもよい。この場合、例えば、UI差異確認エリア212をスクロール表示可能に構成することが可能である。また、例えば、UI差異確認エリア212の左側に、対象のデータ項目が承認済の画面を表示し、UI差異確認エリア212の右側に、対象のデータ項目が未承認の画面を順次切り替え可能に表示することとしてもよい。また、承認済のデータ項目に対して修正指示の入力が可能であることとしてもよい。いずれの場合においても、承認者は、選定されたデータ項目を単にガイドラインと比較するのではなく、各画面の特性や前後の画面との関連などにより、各画面において選定されたUI部品を承認するかどうかを決定することが可能である。
【0046】
図8は、UIメモリサーバ20における処理の一例を示すフローチャートである。まず、画面登録部64は、画面ごとのデータ項目・機能を含む設計情報をクライアント12から受け付けて、画面UI・メモリDB56に登録する(S801)。設計情報が登録されると、画面マッチング部70は、データ項目が類似する過去に設計された画面を画面UI・メモリDBから検索し、検索された画面の類似度を算出する(S802)。そして、画面マッチング部70は、類似度が基準値以上の画面があるかどうか確認し(S803)、基準値以上の画面があれば(S803:Y)、類似画面の設計情報及び部品データ、配色データを画面・UIメモリDB56及びUI部品カタログDB50から取得し、部品候補情報としてクライアント12に送信する(S804)。
【0047】
類似度が基準値以上の画面がない場合(S803:N)、UI選定部74は、UIマッチング部72を介して、登録されたデータ項目に対して過去に選定されたUI部品を画面UI・メモリDB56から検索する(S805)。そして、このデータ項目に対して過去に選定されたUI部品がある場合(S806:Y)、UI選定部74は、過去に選定されたUI部品の設計情報及び部品データ、配色データを画面・UIメモリDB56及びUI部品カタログDB50から取得し、部品候補情報としてクライアント12に送信する(S807)。
【0048】
登録されたデータ項目に対して過去に選定されたUI部品がない場合(S806:N)、もしくはクライアント12から、ガイドラインの検索要求があった場合(S808:Y)、UI選定部74は、登録されたデータ項目の機能に対応するUI部品をUI選定ガイドラインDB54から検索する(S809)。そして、UI選定部74は、検索されたUI部品の情報及び部品データ、配色データをUI選定ガイドラインDB54及びUI部品カタログDB50から取得し、部品候補情報としてクライアント12に送信する(S810)。
【0049】
そして、UI選定部74は、部品候補情報に基づいて設計された画面のUI選定結果を示す設計情報をクライアント12から受け付けて、画面・UIメモリDB56に記憶されている設計情報を更新する(S811)。
【0050】
なお、図8のフローチャートには示していないが、例えば、クライアント14からの要求に応じた任意のタイミングで、選定されたUI部品の承認処理が実行されることとなる。
【0051】
以上、本実施形態について説明した。本実施形態によれば、設計対象の画面に含まれるデータ項目と同一のデータ項目を含む過去の画面において、当該データ項目に対して使用されたUI部品に関する情報を部品候補情報として提供することが可能である。したがって、画面の設計者は当該データ項目に対して過去に用いられたUI部品を選定することが可能になるため、画面の設計を行う際に、設計済の画面との間でGUIの統一性をもたせることができる。
【0052】
また、本実施形態では、設計対象の画面に含まれるデータ項目と同一のデータ項目を含む過去の画面において、当該データ項目に対して使用されたUI部品が複数存在する場合に、これら複数のUI部品に関する情報を部品候補情報として提供することが可能である。したがって、設計済の画面との間でGUIに統一性を持たせることが可能であるとともに、UI部品の選択肢が増えることによって画面設計時の自由度を向上させることが可能となる。
【0053】
また、本実施形態では、クライアントに提供される部品候補情報には、サイズや位置、余白、アラインなど、UI部品の配置を示す配置情報が含まれる。したがって、選定されるUI部品を統一させるとともに、さらに、その配置についても統一させることが可能となり、GUIの統一性をより高めることが可能となる。
【0054】
また、本実施形態では、過去に設計済の画面の中から、設計対象の画面に類似している画面を選択したうえで、選択された画面において用いられているUI部品に関する情報を部品候補情報として出力することができる。類似している画面間では、同一のUI部品を用いることが可能である場合が多いと考えられるため、このように画面間の類似度を考慮することにより、GUIの統一性を高めることが可能となる。
【0055】
さらに、本実施形態では、例えば図6に示したように、選択された画面のイメージを画面設計エリア120において確認することが可能である。これにより、選択された画面におけるUI部品の配置等を考慮したうえで画面の設計を行うことが可能となり、GUIの統一性を高めることが可能となる。
【0056】
また、本実施形態では、設計対象の画面に類似している画面を複数選択し、これら複数の画面で用いられているUI部品に関する情報を部品候補情報として出力することが可能である。これにより、GUIの統一性を高めることが可能であるとともに、UI部品の選択肢が増えることにより画面設計時の自由度を向上させることが可能となる。
【0057】
また、本実施形態では、新たに設計された画面の設計情報が画面・UIメモリDB56に蓄積されていくため、UI部品の選定結果を常に最新の状態にアップデートすることが可能となり、GUIの統一性を維持することが可能となる。
【0058】
また、本実施形態では、画面の設計情報をプロジェクトごとに管理し、プロジェクト内における過去に設計済の画面で用いられたUI部品に関する情報を部品候補情報として提供することが可能である。したがって、各プロジェクトにおいて、プロジェクトの特性を考慮したうえでGUIの統一性を持たせることが可能となる。
【0059】
また、本実施形態では、同一のデータ項目に対して異なるUI部品が選定されている複数の画面が存在する場合に、承認者がその相違の内容を確認し、選定されたUI部品の承認を行うことが可能である。これにより、設計者にUI部品選定の自由度が与えられる一方で、承認者によるUI部品の承認によってGUIの統一性を確保することが可能となる。
【0060】
そして、本実施形態では、承認者の承認結果を画面の設計情報と対応づけて画面・UIメモリDB56に格納することが可能である。そのため、画面の設計者は、例えば設計時の画面100において、UI部品の選定に対する承認結果を確認することが可能である。なお、画面100における確認だけではなく、例えば、設計者に対して承認結果が電子メールで通知されるなど、承認結果の確認には任意の手法を用いることが可能である。
【0061】
なお、本実施形態は、本発明の理解を容易にするためのものであり、本発明を限定して解釈するためのものではない。本発明は、その趣旨を逸脱することなく、変更/改良され得るととともに、本発明にはその等価物も含まれる。
【符号の説明】
【0062】
10,12,14 クライアント
20 UIメモリサーバ
30 プロジェクト登録部
32 通信部
34 画面設計部
36 通信部
38 承認部
40 通信部
50 UI部品カタログDB
52 UI選定ガイドラインテンプレートDB
54 UI選定ガイドラインDB
56 画面・UIメモリDB
60a,60b,60c 通信部
62 UI選定ガイドライン設定部
64 画面登録部
66 部品候補出力部
68 UI選定承認部
70 画面マッチング部
72 UIマッチング部
74 UI選定部

【特許請求の範囲】
【請求項1】
設計済の画面を識別するための画面識別子と、該画面に含まれるデータ項目と、該データ項目に対して選択された部品を識別するための部品識別子とを含む設計情報を記憶する設計情報記憶部と、
設計対象の画面に含まれるデータ項目を、該設計対象の画面を設計する設計者端末から受け付ける設計情報受付部と、
前記受け付けられたデータ項目に対応する部品の部品識別子を前記設計情報記憶部から選択し、該選択された部品を示す部品候補情報を前記設計者端末に出力する部品候補出力部と、
を備える画面設計支援装置。
【請求項2】
請求項1に記載の画面設計支援装置であって、
前記部品候補出力部は、前記受け付けられたデータ項目に対応する複数の部品の部品識別子を前記設計情報記憶部から選択し、該選択された複数の部品を示す部品候補情報を前記設計者端末に出力する、
画面設計支援装置。
【請求項3】
請求項1または2に記載の画面設計支援装置であって、
前記設計情報には、前記設計済の画面における前記選択された部品の配置を示す配置情報が含まれ、
前記部品候補情報には、前記選択された部品に対応する前記配置情報が含まれる、
画面設計支援装置。
【請求項4】
請求項1〜3の何れか一項に記載の画面設計支援装置であって、
前記部品候補出力部は、
前記設計対象の画面に含まれるデータ項目と、前記設計済の画面に含まれるデータ項目との一致度に基づいて、該設計対象の画面との類似度が所定の基準値以上である設計済の画面を選択し、
該選択された設計済の画面に含まれるデータ項目に対応する部品を示す部品候補情報を前記設計者端末に出力する、
画面設計支援装置。
【請求項5】
請求項4に記載の画面設計支援装置であって、
前記部品候補出力部は、
前記選択された設計済の画面を前記設計者端末において表示可能に前記部品候補情報を出力する、
画面設計支援装置。
【請求項6】
請求項4または5に記載の画面設計支援装置であって、
前記部品候補出力部は、
前記類似度が所定の基準値以上である複数の設計済の画面を選択し、該選択された複数の設計済の画面に含まれるデータ項目に対応する部品を示す部品候補情報を前記設計者端末に出力する、
画面設計支援装置。
【請求項7】
請求項1〜6の何れか一項に記載の画面設計支援装置であって、
前記部品候補情報に基づいて設計された画面の前記設計情報を前記設計者端末から受信して前記設計情報記憶部に記憶する設計情報更新部をさらに備える、
画面設計支援装置。
【請求項8】
請求項7に記載の画面設計支援装置であって、
前記設計情報更新部は、前記設計された画面が属するプロジェクトを示すプロジェクト情報を前記設計者端末からさらに受け付け、前記設計情報を前記プロジェクト情報と対応づけて前記設計情報記憶部に記憶し、
前記設計情報受付部は、前記設計対象の画面が属するプロジェクトを示すプロジェクト情報をさらに受け付け、
前記部品候補出力部は、前記設定対象の画面が属するプロジェクトにおける設計済の画面に対応する前記部品候補情報を前記設計者端末に出力する、
画面設計支援装置。
【請求項9】
請求項1〜8の何れか一項に記載の画面設計支援装置であって、
画面に用いることが可能な部品と、該部品が有する機能とを対応づけて記憶するガイドライン記憶部をさらに備え、
前記設計情報受付部は、前記設計対象の画面に含まれるデータ項目に対する機能を前記設計者端末からさらに受け付け、
前記部品候補情報出力部は、前記受け付けられた機能を有する複数の部品を前記ガイドライン記憶部から選択し、該選択された複数の部品を示す部品候補情報を前記設計者端末にさらに出力可能である、
画面設計支援装置。
【請求項10】
請求項1〜9の何れか一項に記載の画面設計支援装置であって、
前記設計情報記憶部を参照し、同一のデータ項目に対して異なる部品が選択されている複数の画面を特定し、該特定された複数の画面において該同一のデータ項目に対して異なる部品が選択されていることを示す相違情報を、画面設計の承認を行う承認者端末に出力する承認部をさらに備える、
画面設計支援装置。
【請求項11】
前記承認部は、前記特定された複数の画面の少なくとも1つの画面における、前記同一のデータ項目に対して選択された部品の承認結果を示す承認情報を受信し、該承認情報を該少なくとも1つの画面の前記設計情報と対応づけて前記設計情報記憶部に記憶する、
画面設計支援装置。
【請求項12】
コンピュータが、
設計済の画面を識別するための画面識別子と、該画面に含まれるデータ項目と、該データ項目に対して選択された部品を識別するための部品識別子とを含む設計情報を設計情報記憶部に記憶し、
設計対象の画面に含まれるデータ項目を、該設計対象の画面を設計する設計者端末から受け付け、
前記受け付けられたデータ項目に対応する部品の部品識別子を前記設計情報記憶部から選択し、該選択された部品を示す部品候補情報を前記設計者端末に出力する、
画面設計支援方法。
【請求項13】
設計済の画面を識別するための画面識別子と、該画面に含まれるデータ項目と、該データ項目に対して選択された部品を識別するための部品識別子とを含む設計情報が記憶された設計情報記憶部を有するコンピュータに、
設計対象の画面に含まれるデータ項目を、該設計対象の画面を設計する設計者端末から受け付ける機能と、
前記受け付けられたデータ項目に対応する部品の部品識別子を前記設計情報記憶部から選択し、該選択された部品を示す部品候補情報を前記設計者端末に出力する機能と、
を実現させるためのプログラム。

【図1】
image rotate

【図2】
image rotate

【図3】
image rotate

【図4】
image rotate

【図5】
image rotate

【図6】
image rotate

【図7】
image rotate

【図8】
image rotate


【公開番号】特開2013−20406(P2013−20406A)
【公開日】平成25年1月31日(2013.1.31)
【国際特許分類】
【出願番号】特願2011−152662(P2011−152662)
【出願日】平成23年7月11日(2011.7.11)
【出願人】(000155469)株式会社野村総合研究所 (1,067)
【Fターム(参考)】