JP7647331B2 - 操作画面設計方法、操作画面設計装置および操作画面設計プログラム - Google Patents

Description

本発明は、操作画面設計方法、操作画面設計装置および操作画面設計プログラムに関する。

特許文献１には、ＵＩ（ユーザインタフェース：User Interface）の操作画面の設計を支援する操作画面設計支援装置が記載されている。この操作画面設計支援装置では、ＵＩ使用作成者は、部品一覧から設定した部品（オブジェクト）を画面レイアウトにドラッグ＆ドロップして配置することにより操作画面を生成する。

特開２０１２－８３８６５号公報

このように操作画面にオブジェクト（部品）を配置する場合、配置されるオブジェクト数が増えると操作画面に配置されるオブジェクト同士が干渉し易くなる。このため、オブジェクト間の干渉を避けるように配置する操作が煩雑になる。また、オブジェクト内にテキストが挿入される場合には、テキストの長さによってオブジェクトとの余白が過小又は過大となり、これらを調整する操作が煩雑になる。
本発明は、このような事情に鑑みてなされたものであり、ＵＩの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化することを目的とする。

本発明の一態様の操作画面設計方法では、操作画面に表示すべき第１オブジェクトを、操作画面上に配置する操作を受け付ける処理と、第１オブジェクトよりも先に操作画面上に配置されている第２オブジェクトと第１オブジェクトとの間、又は操作画面の端と第１オブジェクトとの間の間隔が第１の制約条件を満たすように、第１オブジェクトの配置位置を修正する処理と、第１オブジェクト内に表示されるテキストの入力を受け付ける処理と、テキストに応じて第１オブジェクトの大きさを調整する処理と、をコンピュータに実行させる。

本発明によれば、ＵＩの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化できる。

実施形態の操作画面設計装置の一例の概略構成図である。 操作画面上のオブジェクトの配置を編集する編集画面の一例を示す図である。 操作画面設計装置の制御部による処理の一例のフローチャートである。 オブジェクト配置処理の一例のフローチャートである。 （ａ）及び（ｂ）は、オブジェクトの配置位置の調整の一例の説明図である。 オブジェクトの配置位置の調整の他の一例の説明図である。 オブジェクトサイズ設定処理の一例のフローチャートである。 オブジェクトに挿入されるテキスト及びアイコンの一例を示す図である。 （ａ）はオブジェクトとテキスト又はアイコンの関連付けるリンク情報の一例を示すテーブルであり、（ｂ）はアイコン情報の一例を示すテーブルであり、（ｃ）はテキスト情報の一例を示すテーブルである。 （ａ）及び（ｂ）は、オブジェクトの大きさの調整の一例の説明図である。 （ａ）～（ｃ）は、オブジェクトの大きさの調整の他の一例の説明図である。

以下、本発明の実施形態について、図面を参照しつつ説明する。図面の記載において、同一又は類似の部分には同一又は類似の符号を付し、重複する説明を省略する。各図面は模式的なものであり、現実のものとは異なる場合が含まれる。以下に示す実施形態は、本発明の技術的思想を具体化するための装置や方法を例示するものであって、本発明の技術的思想は、下記の実施形態に例示した装置や方法に特定するものでない。本発明の技術的思想は、特許請求の範囲に記載された技術的範囲内において、種々の変更を加えることができる。

（構成）
図１は、実施形態の操作画面設計装置の一例の概略構成図である。操作画面設計装置１は、ディスプレイ装置上に表示されるＧＵＩ（Graphical User Interface）の操作画面の設計を支援する装置である。例えば操作画面設計装置１は、車載装置の操作画面（すなわち車両に搭載されて乗員に操作される車載装置の操作画面）の設計を支援する装置であってよい。例えば操作画面設計装置１は、車両に搭載されずに執務室に配置され、執務室にて車載装置の操作画面の設計を支援するために用いられるコンピュータ（例えばパーソナルコンピュータ）であってもよい。また、操作画面設計装置１は、車両に搭載された車載装置に接続されて、車載装置のディスプレイでＧＵＩを確認しながら設計を支援するために使用されるコンピュータであってもよい。
操作画面設計装置１は、例えばＩＶＩ（In-Vehicle Infotainment）装置の操作画面の設計を支援する装置であってよい。

操作画面設計装置１は、例えばコンピュータにより実現され、入力部１０、表示部１１、出力部１２、制御部２０及び記憶部３０を備える。
入力部１０は、キーボード、マウス、タッチパッド、タッチパネル等のユーザインタフェースであり、ＵＩの設計者に操作されてデータ入力等に用いられる。入力部１０は、制御部２０に接続され、設計者の操作を操作信号に変換して制御部２０に出力する。

表示部１１は、液晶ディスプレイ、有機ＥＬ（Electro Luminescence）ディスプレイ、ＣＲＴ（Cathode Ray Tube）ディスプレイ等のディスプレイ装置であり、制御部２０と接続され、操作画面上のオブジェクトの配置を編集する編集画面を表示するために使用される。
図２は、操作画面上のオブジェクトの配置を編集する編集画面の一例を示す図である。例えば、編集画面４０には、設計対象の操作画面４１の画面レイアウトを表示するキャンバス領域と、操作画面上に配置することができるＵＩ部品であるオブジェクト４３ａ、４３ｂ、４３ｃ、４３ｄ、…の一覧を表示するパレット領域４２が表示される。

例えば、オブジェクト４３ａは、操作画面上に表示される四角形の図形である四角形オブジェクトであり、オブジェクト４３ｂは、操作画面上に表示される円形の図形である円形オブジェクトである。
また、オブジェクト４３ｃは、テキストオブジェクトであり、オブジェクト４３ｄは、操作画面の利用者がＧＵＩのボタンとして操作できるボタンオブジェクトである。ボタンオブジェクト４３ｄには、ボタン上に表示されるテキストを付与できる。

ＵＩの設計者は、パレット領域４２内のオブジェクト４３ａ～４３ｄの中から、操作画面上に配置すべきオブジェクトを選択する。例えば、マウス、タッチパッド、タッチパネル等によりクリックすることによりオブジェクトを選択する。
そして、選択したオブジェクトを操作画面４１内の所望の位置へ配置することにより、操作画面上にオブジェクトを配置する。例えば、矢印４４に示すようにドラッグして操作画面４１へ移動させ、操作画面４１内の所望の位置にドロップすることにより、ドロップされた位置にオブジェクトを配置する。参照符号４５ａ及び４５ｂは、操作画面上に配置済みのボタンオブジェクトとテキストオブジェクトである。

図１を参照する。制御部２０は、実施形態の操作画面設計方法を実行する制御回路であり、例えば、ＣＰＵ（Central Processing Unit）やＭＰＵ（Micro-Processing Unit）等のプロセッサと、コンピュータプログラム及び所要データを格納するための半導体記憶装置、磁気記憶装置及び光学記憶装置等の記憶媒体を備える。
制御部２０は、記憶媒体に記憶されたコンピュータプログラムをプロセッサが実行することにより、操作受付部２１、オブジェクト配置部２２、オブジェクト調整部２３、テキスト挿入部２４、テキスト調整部２５、表示制御部２６及び通知部２７として機能する。

設計者が入力部１０を用いて入力操作を行うと、操作受付部２１は、入力部１０から入力操作を受け付ける。例えば操作受付部２１は、上記のようにパレット領域４２にあるオブジェクトを操作画面４１に配置する操作を受け付ける。
また例えば、操作画面４１に配置されたオブジェクトの大きさ（すなわち幅及び高さ）を変更する操作を受け付けてもよい。この際に設計者は、例えばオブジェクトの枠をドラッグ＆ドロップすることによりオブジェクトの大きさを変更してよい。

また例えば、操作受付部２１は、オブジェクトに挿入するテキストを入力する操作を受け付けてもよい。テキストを入力する際に設計者は、例えば入力部１０であるキーボード、マウス、タッチパッド、タッチパネルから、テキストに含まれる文字情報を入力してよい。
また例えば、操作受付部２１は、オブジェクトにアイコンを挿入する操作を受け付けてもよい。

オブジェクト配置部２２は、オブジェクトを操作画面４１内に配置する操作を操作受付部２１が受け付けると、指定された配置位置にオブジェクトを配置する処理を行う。例えばオブジェクト配置部２２は、ドラッグ＆ドロップ操作によってドロップされた位置にオブジェクトを配置する。
また、オブジェクト配置部２２は、オブジェクトの大きさを変更する操作を操作受付部２１が受け付けると、操作に応じてオブジェクトの大きさを変更する。

オブジェクト調整部２３は、オブジェクトの位置及び大きさを調整する。例えば、操作画面４１には、所定のピクセル間隔（例えば８ピクセル間隔）のグリッドを設定してよい。オブジェクト配置部２２がオブジェクトを配置すると、オブジェクト調整部２３は、オブジェクトがグリッドに合って配置されるように（すなわちグリッドにスナップされるように）オブジェクトの位置を調整してよい。

なお、「オブジェクトがグリッドに合っている」とは、例えばオブジェクトの４隅の位置がグリッド位置に一致していることをいう。例えば、四角形オブジェクト４３ａやボタンオブジェクト４３ｄの場合、四角形やボタンの４隅の位置がグリッド位置に一致していることであってよい。また円形オブジェクト４３ｂやテキストオブジェクト４３ｃの場合、円形やテキストに外接する四角形の４隅の位置がグリッド位置に一致していることであってよい。

また、オブジェクト調整部２３は、操作画面に配置されたオブジェクトが、操作画面の設計上の所定の制約条件を満足するように、オブジェクトの位置を調整する。
操作画面の設計上の制約条件は、例えば以下の条件（１）～（６）であってよい。
（１）操作画面の端とオブジェクトとの間の間隔の最小値
（２）隣接するオブジェクト間の間隔の最小値
（３）オブジェクトの大きさの最小値
（４）テキストのフォントサイズの最小値
（５）テキストの文字間隔の最小値
（６）オブジェクトの境界（すなわちオブジェクトの縁）と、オブジェクト内に挿入されたテキストやアイコンと間の余白の最小値及び最大値
これらの値は、例えばピクセル数として指定してもよく、操作画面上の実際の表示サイズとして指定してもよい。

これらの制約条件のうち条件（４）～（６）はテキストに関する条件であり、操作画面が使用される地域（仕向地）で使用される言語によって好適な条件が異なる。例えば、これらの制約条件（４）～（６）は、使用される言語に応じて以下の観点に基づいて設定してよい。
（Ａ）複数行のテキストを右揃え、左揃えのいずれで表示するか
（Ｂ）文字の上下中心位置が異なる文字があるか（例えば「ｇ」）
（Ｃ）文字幅は一定か（例えば「Ｉ」、「Ｍ」のように変化するか）
（Ｄ）複数行の考え方（ハイフン、分節）
これらの観点に基づいて制約条件を設定する場合、例えば、仕向地の優先順位を設定し、優先順位の高い仕向地から順に制約条件を満たすことができるように、上記観点（Ａ）～（Ｄ）に基づいて制約条件（４）～（６）を設定してよい。

これらの制約条件は操作画面の予め設定されて、設定データ３１として記憶部３０に記憶される。
また、設定データ３１として、操作画面の設定情報を設定してもよい。操作画面の設定情報として、例えば操作画面の幅方向及び高さ方向のピクセル数や画面密度［ｄｐｉ］を設定してよい。また、設定データ３１としてオブジェクト４３ａ～４３ｄのデフォルトの大きさや、テキストのデフォルトのフォントサイズ、アイコンのデフォルトの大きさを設定してよい。

また、設計対象の操作画面が車載装置の操作画面である場合、操作画面に配置されるオブジェクトについて、車両が右ハンドル車であるか左ハンドル車であるかに応じて、当該オブジェクトの配置位置を左右で反転させる必要があるか否かを、設定データ３１として設定してもよい。
また、テキストの言語に応じて、複数行のテキストを右揃えで表示するのか左揃えで表示するのかを設定データ３１として設定してもよい。

オブジェクト調整部２３は、オブジェクト配置部２２によってオブジェクトの大きさが変更されると、所定ピクセル数（例えば８ピクセル）の整数倍となるようにオブジェクトの大きさを調整してもよい。また、上記の制約条件を満足するようにオブジェクトの大きさを調整してもよい。
さらに、オブジェクトにテキストが挿入された場合には、挿入されたテキストとオブジェクトとが上記の制約条件を満足するように、オブジェクトの大きさを調整してもよい。
操作画面４１に配置されたオブジェクトの配置位置や、大きさ、表示色の情報は、オブジェクトデータ３２として記憶部３０に記憶される。

オブジェクトに挿入するテキストを入力する操作を操作受付部２１が受け付けると、テキスト挿入部２４は、オブジェクトにテキストを挿入する。図２の例では、操作画面上に配置されたボタンオブジェクト４５ａやテキストオブジェクト４５ｂに、テキストを挿入する。
また、テキスト挿入部２４は、オブジェクトに挿入するアイコンを入力する操作を操作受付部２１が受け付けた場合にオブジェクトにアイコンを挿入する。
挿入されるテキストやアイコンの情報は、テキストアイコンデータ３３として、記憶部３０に記憶される。

同一のオブジェクトに挿入するテキストとして、複数のテキストを設定され、これらの複数のテキストの中から何れかを選択してオブジェクトに挿入してもよい。例えば、設計対象の操作画面を表示する製品の仕向地に応じて異なる言語の同義語のテキストを設定してよい。また例えば、オブジェクトの操作状態に応じてこのオブジェクト内に表示するテキストが変化する場合、操作状態に応じて表示する異なるテキストを設定してもよい。以下の説明では、仕向地に応じて異なる言語の同義語のテキストを設定する場合の例について説明する。
また、テキストアイコンデータ３３に、同一のオブジェクトに挿入される複数の異なるアイコンを設定してもよい。例えば、オブジェクトの操作状態に応じてこのオブジェクト内に表示するアイコンが変化する場合、操作状態に応じて表示する異なるアイコンを設定してもよい。

テキスト調整部２５は、オブジェクトにテキストが挿入された場合に、挿入されたテキストとオブジェクトとが上記の制約条件を満足するようにテキストのフォントサイズを調整してもよい。
表示制御部２６は、操作画面４１に配置されたオブジェクトや、オブジェクトに挿入されたテキスト、アイコンを表示部１１に表示する処理を行う。
これら操作受付部２１、オブジェクト配置部２２、オブジェクト調整部２３、テキスト挿入部２４、テキスト調整部２５、表示制御部２６及び通知部２７の処理の詳細は、さらに後述する。

通知部２７は、操作画面設計装置１から設計者に提示される警報やメッセージを出力する。例えば、通知部２７は、視覚的な警報やメッセージを表示部１１に表示してもよく、聴覚的な警報やメッセージを出力部１２から出力してもよい。
出力部１２は、制御部２０からの各種情報を出力するインタフェース装置である。出力部１２は、例えばＤＶＤ（Digital Versatile Disc）ドライブ、ＵＳＢ（Universal Serial Bus）インタフェース、ネットワークインターフェース等を備えてよい。出力部１２は、記憶部３０に記憶されたオブジェクトデータ３２及びテキストアイコンデータ３３を、操作画面の設定データとして外部に出力してよい。出力部１２は、制御部２０からの聴覚的な警報やメッセージを出力するためのスピーカやブザーを備えてもよい。

（制御部２０による処理）
次に、制御部２０の操作受付部２１、オブジェクト配置部２２、オブジェクト調整部２３、テキスト挿入部２４、テキスト調整部２５、表示制御部２６及び通知部２７による処理の詳細を説明する。
図３は、制御部２０による処理の一例のフローチャートである。
ステップＳ１では、設計対象の操作画面の初期設定を行う。この初期設定において上記の操作画面の設定情報、設計上の制約条件、オブジェクトのデフォルトの大きさ、テキストのデフォルトのフォントサイズ、アイコンのデフォルトの大きさを設定して、設定データ３１として記憶部３０に記憶する。また、設計対象の操作画面が車載装置の操作画面である場合、車両が右ハンドル車であるか左ハンドル車であるかに応じて、配置位置を左右反転させるオブジェクトであるか否かを設定してもよい。

ステップＳ２においてオブジェクト配置部２２とオブジェクト調整部２３は、オブジェクト配置処理を行う。オブジェクト配置処理の一例のフローチャートを図４に示す。
ステップＳ１０において、設計者がパレット領域４２にあるオブジェクト４３ａ～４３ｄのうち所望のオブジェクトを選択してドラッグすると、オブジェクト配置部２２は、オブジェクトの配置位置の候補である配置位置候補を推奨する。
例えばオブジェクト配置部２２は、選択されたオブジェクトが上記の制約条件（１）及び（２）を満たし、かつオブジェクトがグリッドに合って配置される１以上の配置位置候補を決定する。なお、パレット領域４２から選択された直後のオブジェクトの大きさは、予め設定されたデフォルト値に設定されている。表示制御部２６は、決定された配置位置候補を表示部１１に表示する。

ステップＳ１１においてオブジェクト配置部２２は、設計者がオブジェクトを操作画面４１内にドロップした位置が、配置位置候補であるか否かを判定する。ドロップした位置が配置位置候補である場合（ステップＳ１１：Ｙ）に、処理はステップＳ１２へ進む。この場合にはステップＳ１２において、操作画面４１内でドロップした位置にオブジェクトが配置されてオブジェクト配置処理が終了する。
一方で、ドロップした位置が配置位置候補でない場合（ステップＳ１１：Ｎ）に処理はステップＳ１３に進む。

ステップＳ１３においてオブジェクト調整部２３は、ドロップされたオブジェクトがグリッドに合っているか否かを判定する。オブジェクトがグリッドに合っている場合（ステップＳ１３：Ｙ）に処理はステップＳ１５へ進む。オブジェクトがグリッドに合っていない場合（ステップＳ１３：Ｎ）に処理はステップＳ１４に進む。
ステップＳ１４においてオブジェクト調整部２３は、オブジェクトが最寄りのグリッドに合うようにオブジェクトの配置位置を調整する。その後に処理はステップＳ１５へ進む。なお、グリッドが設定されていない場合はステップＳ１３及びＳ１４を省略してもよい。

ステップＳ１５においてオブジェクト調整部２３は、オブジェクトが上記の制約条件（１）及び（２）を満たしているか否かを判定する。オブジェクトが上記の制約条件（１）及び（２）を満たしている場合（ステップＳ１５：Ｙ）には、処理はステップＳ１２へ進む。この場合には、ドロップした位置にオブジェクトが配置される（ステップＳ１３で「Ｙ」の場合）。または、ステップＳ１４で調整された位置にオブジェクトが配置される（ステップＳ１３で「Ｎ」の場合）。その後にオブジェクト配置処理が終了する。

オブジェクトが上記の制約条件（１）及び（２）を満たしていない場合（ステップＳ１５：Ｎ）に処理はステップＳ１６に進む。ステップＳ１６においてオブジェクト調整部２３は、オブジェクトが制約条件（１）及び（２）を満たし、かつオブジェクトがグリッドに合って配置されるような最寄りの位置に、オブジェクトの位置を調整する。
その後に処理はステップＳ１２へ進む。ステップＳ１２ではステップＳ１６で調整された位置にオブジェクトが配置される。その後にオブジェクト配置処理が終了する。
なお、制約条件（１）及び（２）を満たすようにオブジェクトの位置を調整した場合に、通知部２７は、調整したオブジェクトの位置を、手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたオブジェクトの位置は、必ずしも設計者の意図に沿っているとは限らないためである。

以下、図５（ａ）及び図５（ｂ）を参照して、ステップＳ１５及びＳ１６におけるオブジェクト調整部２３の処理を説明する。
図５（ａ）は、テキストオブジェクト４５ｂが操作画面４１に既に配置されている状態で、更にボタンオブジェクト４５ａがドロップされた状態を示している。ボタンオブジェクト４５ａがドロップされると、オブジェクト調整部２３は、ボタンオブジェクト４５ａと操作画面４１との間隔Ｓｐ１が、制約条件（１）の最小値以上であるか否かを判定する。また、ボタンオブジェクト４５ａとテキストオブジェクト４５ｂとの間隔Ｓｐ２が、制約条件（２）の最小値以上であるか否かを判定する。

間隔Ｓｐ１、Ｓｐ２が、制約条件（１）、（２）の最小値以上である場合には、オブジェクトが制約条件（１）及び（２）を満たすと判定する。この場合、オブジェクト調整部２３は、ボタンオブジェクト４５ａの位置を調整しない。
間隔Ｓｐ１、Ｓｐ２が、制約条件（１）、（２）の最小値未満である場合には、オブジェクト調整部２３は、図５（ｂ）に示すようにオブジェクトの位置を調整する。
例えばオブジェクト調整部２３は、ボタンオブジェクト４５ａと操作画面４１との間隔Ｓｐ３と、ボタンオブジェクト４５ａとテキストオブジェクト４５ｂとの間隔Ｓｐ４が、制約条件（１）、（２）の最小値以上となり、かつオブジェクトがグリッドに合うようにボタンオブジェクト４５ａの位置を調整する。

なお、ステップＳ１６においてオブジェクトの位置を調整する代わりに、通知部２７は、オブジェクトが制約条件（１）及び（２）を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件（１）及び（２）を満たしていないオブジェクトを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトの色、線の太さなどの表示態様を変更することによりオブジェクトを強調表示してよい。
また例えば、通知部２７によりオブジェクトが制約条件（１）及び（２）を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件（１）及び（２）を満たしていないオブジェクトをオブジェクト調整部２３が削除してもよい。

図６を参照する。設計対象が車載装置の操作画面４１である場合、車両が右ハンドル車であるか左ハンドル車であるかに応じて、オブジェクトの配置位置を左右反転させることがある。
例えば右ハンドル車である場合には、ハンドルの左側に配置される操作画面４１においてボタンオブジェクトを操作し易いように、参照符号４６ｂの位置にボタンオブジェクトを配置し、左ハンドル車である場合には、ハンドルの右側に配置される操作画面４１においてボタンオブジェクトを操作し易いように、参照符号４５ａの位置にボタンオブジェクトを配置する。

このようなオブジェクトを操作画面４１に配置する場合には、当該オブジェクトは右ハンドル車であるか左ハンドル車であるかに応じて配置位置を左右反転させること、及び左右反転する際の対称中心点４６ａを設定データ３１として設定する。なお対称中心点４６ａは、必ずしも操作画面４１の左右中心の位置になくてもよい。
このような右ハンドル車であるか左ハンドル車であるかに応じて、オブジェクトの位置を反転させると、右ハンドル車又は左ハンドル車の一方である場合には制約条件（１）及び（２）を満たしても、他方である場合には満たさない場合がある。

図６の例では、右ハンドル車であっても左ハンドル車であっても位置が反転しないオブジェクト４６ｃが配置されている。そのため、参照符号４５ａの位置にオブジェクトが配置された場合には制約条件（１）及び（２）を満たすが、参照符号４６ｂの位置に配置された場合には、オブジェクト４６ｃとの間隔Ｓｐ５が制約条件（２）を満たさないことがある。
このため、右ハンドル車であるか左ハンドル車であるかに応じて配置位置を左右反転させるオブジェクトを配置する場合、オブジェクト調整部２３は、ステップＳ１５及びＳ１６において、対称中心点４６ａに対して左右反転させた両方の位置において制約条件（１）及び（２）を満たすか否かを判定し、左右反転させても制約条件（１）及び（２）を満たすようにオブジェクトの配置位置を調整してよい。または、制約条件（１）及び（２）を満たさない場合に、通知部２７が警報又はメッセージを出力してよい。

図３を参照する。ステップＳ３においてオブジェクト配置部２２とオブジェクト調整部２３は、オブジェクトサイズ設定処理を行う。オブジェクトサイズ設定処理の一例のフローチャートを図７に示す。
上記の通り、オブジェクトを操作画面４１に配置した直後では、オブジェクトの大きさは、設定データ３１に設定されたデフォルト値に設定される。設計者は、配置したオブジェクトの枠をドラッグすることによりオブジェクトの大きさを変更できる。

ステップＳ２０においてオブジェクトの大きさの変更を開始すると、オブジェクト配置部２２は、オブジェクトの大きさの候補であるサイズ候補を推奨する。例えば、オブジェクト配置部２２は、この大きさを変更した後のオブジェクトが、上記の制約条件（１）及び（２）を満たし、所定ピクセル数（例えば８ピクセル）の整数倍となるようにサイズ候補を決定する。表示制御部２６は、決定されたサイズ候補を示す枠線を表示部１１に表示する。

ステップＳ２１においてオブジェクト配置部２２は、設計者がオブジェクトの枠をドロップした位置が、推奨された位置であるか否か（すなわち設計者が指定した大きさがサイズ候補と等しいか否か）を判定する。ドロップした位置が推奨された位置である場合（ステップＳ２１：Ｙ）に処理はステップＳ２２へ進む。この場合にはステップＳ２２において、設計者が指定した大きさにオブジェクトの大きさを設定して、オブジェクトサイズ設定処理が終了する。
ドロップした位置が推奨された位置でない場合（ステップＳ２１：Ｎ）に処理はステップＳ２３に進む。

ステップＳ２３においてオブジェクト調整部２３は、指定されたオブジェクトの大きさが所定ピクセル数（例えば８ピクセル）の整数倍であるか否か（すなわち、ドロップした枠の位置がグリッドに合っているか否か）を判定する。また、オブジェクト調整部２３は、指定されたオブジェクトの大きさが上記の制約条件（３）の最小値以上であるか否かを判定する。
オブジェクトの大きさが所定ピクセル数の整数倍であり、且つ制約条件（３）の最小値以上である場合（ステップＳ２３：Ｙ）に処理はステップＳ２５へ進む。オブジェクトの大きさが所定ピクセル数の整数倍でないか、制約条件（３）の最小値未満の場合（ステップＳ２３：Ｎ）に処理はステップＳ２４に進む。

ステップＳ２４においてオブジェクト調整部２３は、オブジェクトの大きさを、所定ピクセル数の整数倍となり、且つ制約条件（３）の最小値以上の値となるように調整する。その後に処理はステップＳ２５に進む。
ステップＳ２５においてオブジェクト調整部２３は、オブジェクトが上記の制約条件（１）及び（２）を満たしているか否かを判定する。オブジェクトが上記の制約条件（１）及び（２）を満たしている場合（ステップＳ２５：Ｙ）には、処理はステップＳ２２へ進む。この場合、設計者が指定した大きさにオブジェクトの大きさを設定する（ステップＳ２３で「Ｙ」の場合）。または、ステップＳ２４で調整された大きさに設定される（ステップＳ２３で「Ｎ」の場合）。その後にオブジェクトサイズ設定処理が終了する。

オブジェクトが上記の制約条件（１）及び（２）を満たしていない場合（ステップＳ２５：Ｎ）に処理はステップＳ２６に進む。ステップＳ２６においてオブジェクト調整部２３は、オブジェクトが制約条件（１）及び（２）を満たし、かつ所定ピクセル数の整数倍となるようにオブジェクトの大きさを調整する。
その後に処理はステップＳ２２へ進む。ステップＳ２２では、ステップＳ２６で調整された大きさにオブジェクトを調整する。その後にオブジェクトサイズ設定処理が終了する。

なお、制約条件（１）及び（２）を満たすようにオブジェクトの大きさを調整した場合に、通知部２７は、調整したオブジェクトの大きさを手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたオブジェクトの大きさは、必ずしも設計者の意図に沿っているとは限らないためである。
また、ステップＳ２６においてオブジェクトの大きさを調整する代わりに、通知部２７は、オブジェクトが制約条件（１）及び（２）を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件（１）及び（２）を満たしていないオブジェクトを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトの色、線の太さなどの表示態様を変更することによりオブジェクトを強調表示してよい。
また例えば、通知部２７によりオブジェクトが制約条件（１）及び（２）を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件（１）及び（２）を満たしていないオブジェクトをオブジェクト調整部２３が削除してもよい。

図３を参照する。ステップＳ４において操作受付部２１がテキストやアイコンをオブジェクトに挿入する操作を受け付けると、テキスト挿入部２４は、オブジェクトにテキストやアイコンを挿入する。
図８は、操作画面４１上のオブジェクトに挿入されるテキスト及びアイコンの一例を示す図である。図８の例では、操作画面４１には、ボタンオブジェクト４５ａ、４５ｇ、テキストオブジェクト４５ｂ、４５ｃ、円形オブジェクト４５ｄ～４５ｆが配置されている。

そして、ボタンオブジェクト４５ａ、４５ｇにはテキスト「Ｂａｃｋ」、「Ｐｌａｙ Ｌｉｓｔ」が挿入される。
また、テキストオブジェクト４５ｂのテキストとして「Ａｕｄｉｏ」が入力され、テキストオブジェクト４５ｃのテキストには変数（Ｔｒａｃｋ Ｎａｍｅ）の値が入力される。
円形オブジェクト４５ｄ～４５ｆには、早戻し操作、再生操作、早送り操作を示すアイコン４７ｄ～４７ｆがそれぞれ配置されている。

操作受付部２１が、テキストやアイコンをオブジェクトに挿入する操作を受け付けると、テキスト挿入部２４は、オブジェクトに挿入されたテキストやアイコンと、テキストやアイコンが挿入されたオブジェクトとを、示すテキストアイコンデータ３３を生成する。
例えばテキストアイコンデータ３３は、図９（ａ）に示すリンク情報と、図９（ｂ）に示すアイコン情報と、図９（ｃ）に示すテキスト情報とを備えてよい。テキストアイコンデータ３３は、リンク情報、アイコン情報及びテキスト情報に加えて、挿入されたアイコンの位置及び大きさ、挿入されたテキストの位置及びフォントサイズの情報を有している。テキストアイコンデータ３３を生成した直後は、テキストのフォントサイズ、アイコンの大きさは、設定データ３１に設定されたデフォルト値に設定される。

リンク情報は、オブジェクトに挿入されたテキストやアイコンと、テキストやアイコンが挿入されたオブジェクトとを関連付ける情報である。例えばリンク情報は、オブジェクトのオブジェクトＩＤと、テキストのテキストＩＤ又はアイコンのアイコンＩＤを関連付けるテーブルであってよい。
図９（ａ）の例では、オブジェクト４５ａ～４５ｇのオブジェクトＩＤはそれぞれ「ＩＤ＿Ｂ０００１」～「ＩＤ＿Ｂ０００７」であり、テキスト「Ｐｌａｙ Ｌｉｓｔ」、「Ａｕｄｉｏ」及び「Ｂａｃｋ」のテキストＩＤはそれぞれ「ＩＤ＿Ｔ０００１」、「ＩＤ＿Ｔ００２９」及び「ＩＤ＿Ｔ００３４」であり、アイコン４７ｄ～４７ｆのアイコンＩＤはそれぞれ「ＩＤ＿Ｉ００２６」、「ＩＤ＿Ｉ００２７」及び「ＩＤ＿Ｉ００２９」である。
そして、「ＩＤ＿Ｂ０００１」に「ＩＤ＿Ｔ００３４」が、「ＩＤ＿Ｂ０００２」に「ＩＤ＿Ｔ００２９」が、「ＩＤ＿Ｂ０００４」に「ＩＤ＿Ｉ００２６」が、「ＩＤ＿Ｂ０００５」に「ＩＤ＿Ｉ００２７」が、「ＩＤ＿Ｂ０００６」に「ＩＤ＿Ｉ００２９」が、「ＩＤ＿Ｂ０００７」に「ＩＤ＿Ｔ０００１」がそれぞれ対応付けられている。

上記のとおり、同一のオブジェクトに挿入されるテキストとして複数の異なるテキストを設定してもよい。このため、テキスト情報は、同一のオブジェクトに挿入される複数の異なるテキストを含んでいてもよい。
図９（ｃ）の例では、異なる言語（例えば英語と日本語）の同義語のテキストが設定されている。日本語テキスト「プレイリスト」、「音楽」、「戻る」は、英語テキスト「Ｐｌａｙ Ｌｉｓｔ」、「Ａｕｄｉｏ」及び「Ｂａｃｋ」の同義語であり、「プレイリスト」と「Ｐｌａｙ Ｌｉｓｔ」に同一ＩＤ「ＩＤ＿Ｔ０００１」が割り当てられている。同様に「音楽」と「Ａｕｄｉｏ」には同一ＩＤ「ＩＤ＿Ｔ００２９」が割り当てられ、「戻る」と「Ｂａｃｋ」には同一ＩＤ「ＩＤ＿Ｔ００３４」が割り当てられている。

同一のオブジェクトに挿入されるアイコンとして、複数の異なるアイコンを設定してもよい。このため、アイコン情報は、同一のオブジェクトに挿入される複数の異なるアイコンを含んでいてもよい。図９（ｂ）のアイコン情報の例では、円形オブジェクト４５ｄ～４５ｆが操作されていないデフォルト時を示す白抜きのアイコンと、押下時を示す黒塗りのアイコンが設定されている。

図３を参照する。ステップＳ５においてオブジェクト調整部２３は、テキストが挿入されたオブジェクトの大きさを、挿入されたテキストに応じて調整する。
具体的には、オブジェクト調整部２３は、オブジェクトとテキストが、上記の制約条件（６）を満たし、所定ピクセル数（例えば８ピクセル）の整数倍となるようにオブジェクトの大きさを決定する。
図１０（ａ）及び図１０（ｂ）を参照してテキストに応じたオブジェクトの大きさの調整を説明する。

例えば、オブジェクト調整部２３は、テキスト「Ｂａｃｋ」が挿入されたボタンオブジェクト４５ａの境界と、テキスト「Ｂａｃｋ」との間の余白Ｍａ１が、制約条件（６）の最小値以上かつ最大値以下であるか否かを判定する。余白Ｍａ１が、制約条件（６）の最小値以上かつ最大値以下である場合には、ボタンオブジェクト４５ａとテキスト「Ｂａｃｋ」が制約条件（６）を満たすと判定する。この場合にはオブジェクト調整部２３は、オブジェクト４５ａの大きさを調整しない。

一方で、余白Ｍａ１が、制約条件（６）の最小値未満である場合には、図１０（ｂ）に示すように、ボタンオブジェクト４５ａの境界とテキスト「Ｂａｃｋ」との間の余白Ｍａ２が制約条件（６）の最小値以上となり、オブジェクトの大きさが所定ピクセル数（例えば８ピクセル）の整数倍となるようにオブジェクトを拡大する。
但し、オブジェクトを拡大することにより、制約条件（１）、（２）が満たされなくなる場合には、オブジェクト調整部２３は、制約条件（１）、（２）を満たすようにオブジェクトの配置位置を修正する。制約条件（１）、（２）を満たすようにオブジェクトの配置位置を修正できない場合には、オブジェクト調整部２３はオブジェクトの大きさを調整しなくてよい。

同様に、余白Ｍａ１が、制約条件（６）の最大値より大きい場合には、ボタンオブジェクト４５ａの境界とテキスト「Ｂａｃｋ」との間の余白が制約条件（６）の最大値以下となり、オブジェクトの大きさが所定ピクセル数（例えば８ピクセル）の整数倍となるようにオブジェクトを縮小する。
但し、オブジェクトを縮小することにより、制約条件（３）が満たされなくなる場合には、オブジェクトの大きさを調整しない。

同一のオブジェクトに挿入するテキストとして、複数の異なる言語の同義語のテキストが設定され、これらの複数のテキストの中から仕向地に応じて何れかを選択してオブジェクトに挿入する場合には、オブジェクト調整部２３は、これら複数のテキストのいずれを挿入しても、上記の制約条件（６）を満たすようにオブジェクトの大きさを調整する。
すなわち、オブジェクト調整部２３は、オブジェクトに挿入されるテキストの言語を変更した場合に、変更後のテキストとオブジェクトが上記の制約条件（６）を満たすようにオブジェクトの大きさを調整してよい。

このような、テキストの言語変更に伴うオブジェクトの大きさの調整の一例を以下に説明する。
まず、オブジェクト調整部２３は、図１１（ａ）に示すように英語テキスト「Ｐｌａｙ Ｌｉｓｔ」を挿入した場合に、ボタンオブジェクト４５ｇの境界と英語テキスト「Ｐｌａｙ Ｌｉｓｔ」との間の余白Ｍａ３が、制約条件（６）を満たすか否かを判定する。

同様に、図１１（ｂ）に示すようにボタンオブジェクト４５ｇに挿入するテキストを日本語の「プレイリスト」をした場合に、ボタンオブジェクト４５ｇの境界と日本語テキスト「プレイリスト」との間の余白が、制約条件（６）を満たすか否かを判定する。
ここでは、英語テキスト「Ｐｌａｙ Ｌｉｓｔ」の場合の余白Ｍａ３は制約条件（６）を満たしているが、日本語テキスト「プレイリスト」の場合の余白は制約条件（６）を満たさない場合を想定する。
この場合、オブジェクト調整部２３は、図１１（ｃ）に示すようにボタンオブジェクト４５ｇの境界と日本語テキスト「プレイリスト」との間の余白Ｍａ４が制約条件（６）を満たし、かつボタンオブジェクト４５ｇの大きさが所定ピクセル数（例えば８ピクセル）の整数倍となるように拡大する。

なお、ステップＳ５においてオブジェクトの大きさを調整した場合に、通知部２７は、調整したオブジェクトの大きさを手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたオブジェクトの大きさは、必ずしも設計者の意図に沿っているとは限らないためである。
また、ステップＳ５においてオブジェクトの大きさを調整する代わりに、通知部２７は、オブジェクトとテキストが制約条件（６）を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件（６）を満たしていないオブジェクトやテキストを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトやテキストの色、線の太さなどの表示態様を変更することにより強調表示してよい。
また例えば、通知部２７によりオブジェクトとテキストが制約条件（６）を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件（６）を満たしていないオブジェクトをオブジェクト調整部２３が削除してもよい。

図３を参照する。オブジェクトの大きさを調整することによって、オブジェクトとテキストやアイコンとの制約条件（６）を満たすことができない場合には、ステップＳ６においてテキスト調整部２５は、オブジェクトに挿入されたテキストを調整する。
例えば、テキスト調整部２５は、制約条件（４）及び（６）を満足するようにテキストのフォントサイズを縮小又は拡大してよい。
また例えば、テキスト調整部２５は、テキストを同義語に変更することにより制約条件（６）を満足するようにテキストの字数を減少又は増加させてもよい。
これらの調整に優先順位を設けてもよい。例えば、テキスト調整部２５は、まずフォントサイズの変更を試み、フォントサイズの変更では制約条件（６）を満たすことができない場合にテキストを同義語に変更してよい。

同一のオブジェクトに挿入するテキストとして、複数の異なる言語の同義語のテキストが設定され、これらの複数のテキストの中から仕向地に応じて何れかを選択してオブジェクトに挿入する場合には、テキスト調整部２５は、これら複数のテキストのいずれを挿入しても、上記の制約条件（６）を満たすようにテキストを調整する。
すなわち、テキスト調整部２５は、オブジェクトに挿入されるテキストの言語を変更した場合に、変更後のテキストとオブジェクトが上記の制約条件（６）を満たすようにテキストを調整してよい。

なお、ステップＳ６においてテキストを調整した場合に、通知部２７は、調整したテキストを手動で再調整することを設計者に促す警報又はメッセージを出力してもよい。自動で調整されたテキストは、必ずしも設計者の意図に沿っているとは限らないためである。
また、ステップＳ６においてテキストを調整する代わりに、通知部２７は、オブジェクトとテキストが制約条件（６）を満たしていないことを通知する警報やメッセージを出力してもよい。例えば、制約条件（６）を満たしていないオブジェクトやテキストを強調表示することにより配置位置の調整を設計者に促してもよい。例えば、オブジェクトやテキストの色、線の太さなどの表示態様を変更することにより強調表示してよい。

また例えば、通知部２７によりオブジェクトとテキストが制約条件（６）を満たしていないことを通知する警報やメッセージを出力するとともに、制約条件（６）を満たしていないテキストをテキスト調整部２５が削除してもよい。
ステップＳ６におけるテキスト調整部２５によるテキストの調整が終わると、その後に処理は終了する。

（実施形態の効果）
（１）コンピュータは、操作画面に表示すべき第１オブジェクトを、操作画面上に配置する操作を受け付ける処理と、第１オブジェクトよりも先に操作画面上に配置されている第２オブジェクトと第１オブジェクトとの間、又は操作画面の端と第１オブジェクトとの間の間隔が第１の制約条件を満たすように、第１オブジェクトの配置位置を修正する処理と、第１オブジェクト内に表示されるテキストの入力を受け付ける処理と、テキストに応じて第１オブジェクトの大きさを調整する処理と、を実行する。
これにより、ＵＩの操作画面設計において、テキストが挿入されるオブジェクトを操作画面に配置する際の操作を省力化できる。

（２）コンピュータは、第１オブジェクトの大きさを調整する処理の後に第１の制約条件を満たすように、第１オブジェクトの配置位置を修正する処理を実行してもよい。このとき、第１の制約条件を満たさない場合のみ、第１オブジェクトの配置位置を修正する処理を実行してもよい。これにより、テキスト挿入に伴うオブジェクトの修正作業を省力化できる。
（３）コンピュータは、第１の制約条件を満たさない場合、第１オブジェクトを強調表示する処理を実行してもよい。これにより、設計者は制約条件を満たさないオブジェクトに気づきやすくなる。

（４）コンピュータは、テキストのフォントサイズ、及び第１オブジェクトの境界とテキストとの間の余白が、第２の制約条件を満たすように第１オブジェクトの大きさを調整してもよい。これにより、テキスト挿入に伴うオブジェクトの修正作業を省力化できる。
（５）コンピュータは、第２の制約条件を満たすようにテキストのフォントサイズを調整する処理を実行してもよい。このとき、第２の制約条件を満たさない場合のみ、テキストのフォントサイズを調整してもよい。これにより、テキストの修正作業を省力化できる。

（６）コンピュータは、第２の制約条件を満たさない場合、テキスト又は第１オブジェクトを強調表示する処理を実行してもよい。これにより、設計者は制約条件を満たさないテキストに気づきやすくなる。
（７）コンピュータは、テキストの言語を変更した場合に、変更後のテキストのフォントサイズ及び第１オブジェクトの境界と変更後のテキストとの間の余白が、第２の制約条件を満たすように、第１オブジェクトの大きさ、又はテキストのフォントサイズを調整してもよい。又はテキストを同義語に変更して字数を減少又は増加させてもよい。
これにより、操作画面を複数の言語に対応させる修正作業を省力化できる。

（８）コンピュータは、第１オブジェクトの大きさを調整した場合に、第１オブジェクトの大きさを手動で再調整することをユーザに促す通知を表示する処理を実行してもよい。これにより、設計者は、コンピュータにより自動で調整された結果に満足しない場合に再調整し易くなる。
（９）コンピュータは、第１オブジェクトの位置を、操作画面上に設定された基準点に対して左右に反転させた場合に、第１の制約条件を満たすか否かを判定する処理を、実行してもよい。これにより、設計対象が車載装置の操作画面である場合に、右ハンドル車であるか左ハンドル車であるかに応じた修正作業を省力化できる。

１…操作画面設計装置、１０…入力部、１１…表示部、１２…出力部、２０…制御部、２１…操作受付部、２２…オブジェクト配置部、２３…オブジェクト調整部、２４…テキスト挿入部、２５…テキスト調整部、２６…表示制御部、２７…通知部、３０…記憶部、３１…設定データ、３２…オブジェクトデータ、３３…テキストアイコンデータ

Claims (13)

1. 操作画面に表示すべき第１オブジェクトを、前記操作画面上に配置する操作を受け付ける処理と、
   前記第１オブジェクトよりも先に前記操作画面上に配置されている第２オブジェクトと前記第１オブジェクトとの間、又は前記操作画面の端と前記第１オブジェクトとの間の間隔が第１の制約条件を満たすように、前記第１オブジェクトの配置位置を修正する処理と、
   前記第１オブジェクト内に表示されるテキストの入力を受け付ける処理と、
   前記テキストに応じて前記第１オブジェクトの大きさを調整する処理と、
   をコンピュータに実行させ、
   前記コンピュータは、前記テキストのフォントサイズ、及び前記第１オブジェクトの境界と前記テキストとの間の余白が、第２の制約条件を満たすように前記第１オブジェクトの大きさを調整することを特徴とする操作画面設計方法。
2. 前記第１オブジェクトの大きさを調整する処理の後に前記第１の制約条件を満たすように、前記第１オブジェクトの配置位置を修正する処理を、前記コンピュータに実行させることを特徴とする請求項１に記載の操作画面設計方法。
3. 前記第１の制約条件を満たさない場合のみ、前記第１オブジェクトの配置位置を修正する処理を前記コンピュータに実行させることを特徴とする請求項１又は２に記載の操作画面設計方法。
4. 前記第１の制約条件を満たさない場合、前記第１オブジェクトを強調表示する処理を前記コンピュータに実行させることを特徴とする請求項１～３のいずれか一項に記載の操作画面設計方法。
5. 前記第２の制約条件を満たすように前記テキストのフォントサイズを調整する処理を前記コンピュータに実行させることを特徴とする請求項１～４のいずれか一項に記載の操作画面設計方法。
6. 前記第２の制約条件を満たさない場合のみ、前記テキストのフォントサイズを調整する処理を前記コンピュータに実行させることを特徴とする請求項１～５のいずれか一項に記載の操作画面設計方法。
7. 前記第２の制約条件を満たさない場合、前記テキスト又は前記第１オブジェクトを強調表示する処理を前記コンピュータに実行させることを特徴とする請求項５又は６に記載の操作画面設計方法。
8. 前記テキストの言語を変更した場合に、変更後の前記テキストのフォントサイズ及び前記第１オブジェクトの境界と前記変更後のテキストとの間の余白が、前記第２の制約条件を満たすように、前記第１オブジェクトの大きさ、又は前記テキストのフォントサイズを調整することを特徴とする請求項５～７のいずれか一項に記載の操作画面設計方法。
9. 前記テキストの言語を変更した場合に、変更後の前記テキストのフォントサイズ及び前記第１オブジェクトの境界と前記変更後のテキストとの間の余白が、前記第２の制約条件を満たすように、前記テキストを同義語に変更して字数を減少又は増加させることを特徴とする請求項５～７のいずれか一項に記載の操作画面設計方法。
10. 前記第１オブジェクトの大きさを調整した場合に、前記第１オブジェクトの大きさを手動で再調整することをユーザに促す通知を表示する処理を前記コンピュータに実行させることを特徴とする請求項１～９のいずれか一項に記載の操作画面設計方法。
11. 前記第１オブジェクトの位置を、前記操作画面上に設定された基準点に対して左右に反転させた場合に、前記第１の制約条件を満たすか否かを判定する処理を、前記コンピュータに実行させることを特徴とする請求項１～１０のいずれか一項に記載の操作画面設計方法。
12. 操作画面に表示すべき第１オブジェクトを、前記操作画面上に配置する操作を受け付ける処理と、
    前記第１オブジェクトよりも先に前記操作画面上に配置されている第２オブジェクトと前記第１オブジェクトとの間、又は前記操作画面の端と前記第１オブジェクトとの間の間隔が第１の制約条件を満たすように、前記第１オブジェクトの配置位置を修正する処理と、
    前記第１オブジェクト内に表示されるテキストの入力を受け付ける処理と、
    前記テキストに応じて前記第１オブジェクトの大きさを調整する処理と、
    を実行するコンピュータを備え、
    前記コンピュータは、前記テキストのフォントサイズ、及び前記第１オブジェクトの境界と前記テキストとの間の余白が、第２の制約条件を満たすように前記第１オブジェクトの大きさを調整することを特徴とする操作画面設計装置。
13. 操作画面に表示すべき第１オブジェクトを、前記操作画面上に配置する操作を受け付ける処理と、
    前記第１オブジェクトよりも先に前記操作画面上に配置されている第２オブジェクトと前記第１オブジェクトとの間、又は前記操作画面の端と前記第１オブジェクトとの間の間隔が第１の制約条件を満たすように、前記第１オブジェクトの配置位置を修正する処理と、
    前記第１オブジェクト内に表示されるテキストの入力を受け付ける処理と、
    前記テキストに応じて前記第１オブジェクトの大きさを調整する処理と、
    をコンピュータに実行させ、
    前記コンピュータに、前記テキストのフォントサイズ、及び前記第１オブジェクトの境界と前記テキストとの間の余白が、第２の制約条件を満たすように前記第１オブジェクトの大きさを調整させることを特徴とする操作画面設計プログラム。

Images