まず、本発明の概念について説明する。
パソコンなどの端末装置の表示画面に表示されるコンテンツは各部品から構成されるものであって、各部品はその構成要素からなるものである。
図1はかかるコンテンツの一具体例の一部を示すものであって、100は操作ボタン、101は文字、102はボタン背景、103はボタン枠線、200は背景である。
同図において、このコンテンツのこの部分は操作ボタン100とこの操作ボタン100以外のエリアの背景200とからなっている。ここで、操作ボタン100と背景200とは部品であって、コンテンツのこの部分は操作ボタン100と背景200との部品によって構成されているものである。ここで、この操作ボタン100は「部品1」であり、背景200は「部品2」である。
また、部品1の操作ボタン100は、操作ボタン100の輪郭を表わす枠線103と、このボタン枠線103の内部エリアとなるボタン背景102と、テキストを形成する文字101とで構成され、これら文字101とボタン背景102と枠線103とが部品1を構成する要素となる。
以下に説明する実施形態は、端末装置に設けられて、このようなコンテンツの部品と夫々の部品や部品の夫々の要素について、ユーザにより、このユーザが視認し易いように、色のカスタマイズ(変更)をすることができるようにするものである。
ところで、部品や部品の要素が明確に判別できるためには、かかる部品や要素とこれに接した(以下、隣接したという)他の部品または他の要素との輝度コントラスト比(濃さの違い)が充分大きいことが必要である。
ここで、W3C(World Wide Web Consortium)のWCAG(Web Content Accesibility Guidelines)勧告によると、輝度コントラスト比は、
(L1+0.05)/(L2+0.05) ……(1)
但し、L1:隣接した部品または要素のうちの明るい方の色の相対輝度L
L2:隣接した部品または要素のうちの暗い方の色の相対輝度L
で表わされる。
色の相対輝度Lは、IEC(国際電気標準会議)規格のsRGB色空間では、
L=0.2126*R+0.7152*G+0.0722*B
で表わされる。但し、かかる色の相対輝度におけるR(赤)成分,G(緑)成分,B(青)成分は、sRGB色空間でのR成分をRsRGB、同じくG成分をGsRGB、同じくB成分をBsRGBとすると、
RsRGB≦0.03928の場合、R=RsRGB/12.92
RsRGB>0.03928の場合、R=((RsRGB+0.055)/1.055)^2.4
GsRGB≦0.03928の場合、G=GsRGB/12.92
GsRGB>0.03928の場合、G=((GsRGB+0.055)/1.055)^2.4
BsRGB≦0.03928の場合、B=BsRGB/12.92
BsRGB>0.03928の場合、B=((BsRGB+0.055)/1.055)^2.4
但し、“^”は指数演算子
で表わされ、RsRGB,GsRGB,BsRGBは夫々
RsRGB=R8bit/255
GsRGB=G8bit/255
BsRGB=B8bit/255
である。
なお、R8bit,G8bit,B8bitは夫々、8ビットで表わされる値である。
以上のように、輝度コントラスト比は上記の式(1)で表わされるが、
(1)コンテンツ作成者は、テキストのレンダリング(数値データからの画像化:例えば、フォントのスムージングやアンチエイリアス)に関するユーザの設定を制御できないため、テキストの輝度コントラスト比は、アンチエイリアンス(表示される線などに現われるギザギザをなくす処理)をオフした状態で評価される。
(2)文字の周囲に縁取りがある場合、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。但し、文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りがかさ(暈:ハローや後光)のようになって、文字の細かい字画を埋めていれば、背景色として考慮されることになる。
(3)WCAGへの適用は、典型的な表現において隣接すると製作者が想定して、コンテンツで指定した色の組み合わせに対して評価されるべきである。製作者は、ユーザエージェントによる色の変更などのように、通常とは異なる表現を考慮する必要はない。但し、それが制作者のソースコードによって起こる場合は、除く。
なお、ディザリング(表示可能な色を組み合わせて、その中間の色を表現すること)が発生する場合には、元の色の値が用いられる。発生源でディザリングしている色については、用いられる色の平均値(Rの平均値,Gの平均値,Bの平均値)を用いるべきである。
以下に説明する実施形態は、以上の輝度コントラスト比を基に、コンテンツの部品やその要素の色を規制し、いずれの部品や要素の色も、ユーザに合わせてカスタマイズすることができるようにするものである。
ここで、この色の規制とは、文字とその背景(この文字が重なって表示される背景)とでは、その輝度コントラスト比が4.5:1未満となる色を選べなくするものであり、また、文字以外の要素とその背景またはその文字以外の要素に隣り合う要素(例えば、ボタンの背景色とこのボタンの枠線色,ボタンの枠線色とこのボタンが置かれている背景の色など)との輝度コントラスト比が1.7:1以上となる色は選択できる、とするものである。
なお、以下では、上記の規定される輝度コントラスト比を、上記のように、4.5:1,1.7:1として、実施形態の説明をするが、これに限るものでなく、ユーザにとって各「要素」を視認し易くする他の輝度コントラスト比を定めることができる。但し、文字とこれに接する「要素」との間で規定される輝度コントラスト比は、文字以外の「要素」間での規定のコントラスト比よりも、その比率が大きいものとする。
また、この実施形態では、接し合う要素(図1では、部品1の文字101、部品1での背景102、部品1の枠線103、部品2)は全て個別にカスタマイズを行なうものである。グラデーション(色や濃淡の連続的に変化)の場合には、最低の輝度コントラスト比(上記の4.5:1や1.7:1)は、最も厳しい色で判別する。
図2は部品の種類やその要素の一覧を示す図である。
同図において、ここでは、部品として、「ボタン」,「テキスト」,これら「ボタン」や「テキスト」が配置される背景となる「レイアウト」,文字を入力するための「テキストボックス」,2以上の項目毎に設けられていてそれらのうちのいずれかを選ぶことができるようにした「チェックボックス」,2以上の項目毎に設けられていてそれらのうちのいずれか1つだけを選ぶことができるようにした「ラジオボタン」,限られた一定のエリア内に複数種類の情報を表示するために用いる「タブパネル」を挙げており、また、これらに対する要素を挙げている。かかる要素としては、「文字/記号」と「文字/記号の縁取り」と「背景」と「枠線」と「影」などである。ここで、要素「文字/記号」,「文字/記号の縁取り」,「背景」,「枠線」の属性としては、「押下」可能な(押下操作によって機能する)状態の要素と「押下」可能な状態となり得るものの、そのときには、「押下」できない(押下操作しても機能しない)状態の「非活性」の要素とがあり、「押下」可能な状態の要素に対しては、例えば、「文字/記号」を例にすると、「文字/記号」と「非活性の文字/記号」とが存在する。また、「押下」したときに当該部品が選ばれたことを示す状態を、「選択時」とした。例えば、「文字/記号」を例にすると、押下される前で、かつ押下可能な状態を表わす「文字/記号」と、押下される前で、かつ押下不可能な状態を表わす「非活性時の文字/記号」と、押下された後の状態を表わす「選択時の文字/記号」とがある。そして、部品毎に、夫々の要素の該当する属性に○印を付している。
図2によると、部品「ボタン」,「レイアウト」,「テキストボックス」,「チェックボックス」,「ラジオボタン」,「タブパネル」は、「文字/記号」や「文字/記号の縁取り」,「背景」,「枠線」,「影」の要素から成るが、これらには、全て「非活性」の状態が存在する。部品「レイアウト」は、「文字/記号」や「文字/記号の縁取り」,「背景」,「枠線」,「影」の要素から成るが、押下するものではないから、これら要素は不活性の状態も、また、選択の状態も存在しない。部品「テキスト」は、「文字/記号」と「文字/記号の縁取り」の要素から成るものであるが、これら要素には、不活性の状態が存在する。また、「タブパネル」は、「文字/記号」,「文字/記号の縁取り」,「背景」,「枠線」,「影」の要素からなり、これら要素には、「非活性」の状態とともに、「選択」可能な状態も存在する。
以上のことを基に、以下、本発明の実施形態を図3〜図21を用いて説明する。なお、図3は本発明によるコンテンツ画面の色カスタマイズ方法の一実施形態の一連の処理手順を示すフローチャートであって、この図3を基に、この実施形態を説明する。
まず、図示しない端末装置でコンテンツデータをダウンロードすると、その表示画面に図4に示すこのコンテンツデータによるコンテンツ画面が表示される(図3のステップS100)。
なお、図4において、1は表示画面、2はコンテンツ画面、3は「色カスタマイズモード設定」ボタン、4はコンテンツデータ表示エリア、5,51〜54は操作ボタン、55はその右隣に設けられている「実行」ボタンが押下されたときに実行される機能を選択するための操作部(ここでは、プルダウンメニューとしている)、5aはボタンの文字、5bはボタンの背景、5cはボタンの枠線、6は背景、6a,6bは文字、7はタブパネル、7aはタブパネルの文字、7bはタブパネルの背景、8はテキスト、9はチェックボックス、10はテキストボックス、11はカーソルである。
同図において、表示画面1に表示されるコンテンツ画面2では、ダウンロードされたコンテンツを表示するコンテンツ表示エリア4とともに、このコンテンツ表示エリア4で表示されるコンテンツを処理するための、例えば、「重要度変更」ボタン51,「期限変更」ボタン52,「担当者変更」ボタン53,「ステータス変更」ボタン54(以下、纏めて言うときや総称するときには、操作ボタン5という)や機能選択のための操作部55,かかる操作ボタン5や操作部55が重ねて表示されるレイアウト(背景)6,タブパネル7,タブパネル7内に表示されるテキスト8,コンテンツ表示エリア4で表示される各コンテンツデータ毎に設けられたチェックボックス9テキストボックス10などが表示される。これらがコンテンツ画面2を構成する上記の「部品」ということになる。
コンテンツ表示エリア4には、ここでは、項目「重要度」,「期限」,「担当者」,「ステータス,「メモ」などからなるタスクの一覧表が表示されており、これらタスク毎に、それを処理可能とするためのチェックボックス9が設けられている。「重要度変更」ボタン51や「期限変更」ボタン52,「担当者変更」ボタン53,「ステータス変更」ボタン54,操作部55の部品は、コンテンツ表示エリア4でのいずれのタスクも、チェックボックス9でチェックされずに処理不能な状態にあるときには、全て不活性の状態にあり、押下しても機能しないが、コンテンツ表示エリア4でタスクが1つでも、そのチェックボックス9でチェックされて、処理可能な状態となると、これら全てが「押下」可能な状態となる。
例えば、図示するように、タスク3,4が選択されて処理可能な状態になったとすると、これらタスク3,4に対して、「重要度変更」ボタン51を選択することにより、その項目「重要度」の内容を変更させることができるし、「期限変更」ボタン52を選択することにより、その項目「期限」の内容を変更させることができるし、「担当者変更」ボタン53を選択することにより、その項目「担当者」の内容を変更させることができるし、「ステータス変更」ボタン54を選択することにより、その項目「ステータス」の内容を変更させることができる。また、操作部55で、図示するように、「メモ記述」の項目が選択されている状態で、「実行」ボタンが押下されると、上記タスク3,4の項目「メモ」の内容を変更させることができる。なお、この操作部55では、その▲ボタンを押下することにより、機能の一覧が表示され、そのうちの所望の機能が押下されて「実行」ボタンが押下されると、この機能が上記のタスク3,4に対して実行される。
なお、以下では、色カスタマイズの対象として、操作ボタン5を代表例として説明するが、この「メモ記述」変更操作部55やこれ以外の「部品」、即ち、タブパネル7,テキスト8,チェックボックス9,ラジオボックス10などについても同様である。
部品としての操作ボタン5は、文字5aと背景5bと枠線5cとから構成されており、これらが操作ボタン5を構成する「要素」ということになる。かかる要素としての文字は、「重要度変更」ボタン51では「重要度変更」であり、「期限変更」ボタン52では「期限変更」であり、「担当者変更」ボタン53では「担当者変更」であり、「ステータス変更」ボタン54では「ステータス変更」である。同様にして、部品としてのレイアウト6には、そのレイアウト6のタイトルを示す文字6a,6bが表示されるが、この文字6a,6bとレイアウト6の背景とがこのレイアウト6を構成する要素となる。なお、この文字6aは、レイアウト6に重なって表示される部品としての「重要度変更」ボタン51,「期限変更」ボタン52,「担当者変更」ボタン53,「ステータス変更」ボタン54などのコマンドを指定するものであるときには、例えば、「よく使うコマンド」といった標題(テキスト)で表わされている。
また、タブパネル7に表示されるテキスト8は、コンテンツデータであり、部品である。これに対し、タブパネル7に表示される「個人」との文字7aは、タブパネル7の標題を表わすものであり、タブパネル7を構成する要素ということになる。なお、タブパネル7は、要素としてのかかる文字7aと要素としての背景7bとで構成されることになり、この背景8bに部品としてのテキスト8が重ねて表示されていることになる。なお、ここでは、標題を「グループ」とするタプパネルもあるが、これもタブパネル7と同様である。
さらには、コンテンツ表示エリア4では、図示するように、タクトの一覧が表示されているものとしているが、ここでは、これらタクト毎に部品としてのチェックボックス9が設けられているものとしている。
さらにまた、このコンテンツ画面2には、その上辺部に「色カスタマイズ」ボタン3などのモード選択ボタンが表示されおり、これらのいずれかをカーソル11で指定してクリック操作する(以下、かかる操作を押下操作という)ことにより、これに該当するモードが設定される。「色カスタマイズ」ボタン3は、このコンテンツ画面2での部品やその要素の色をカスタマイズするモードを設定するためのものである。
このコンテンツ画面2が表示された状態で(図3のステップS100)、カーソル11が操作されて「色カスタマイズ」ボタン3が押下されると(図3のステップS101)、図5に示す選択画面が表示される。
なお、図5において、12は選択画面、13はテキスト、14は「OK」ボタン、15は「キャンセル」ボタンである。
同図において、ここでは、この選択画面12はコンテンツ画面2に重なってその中央部に表示され、この場合、コンテンツ画面2は透けて見える状態のものとする。但し、選択画面12のみを表示するようにしてもよい。
この選択画面12では、例えば、「色をカスタマイズしたい部分を選択して下さい」といったようなテキスト13が表示されるとともに、部品の色をカスタマイズさせるための「OK」ボタン14と色のカスタマイズモードをキャンセルするための「キャンセル」ボタン15とが表示され、この「キャンセル」ボタン15がカーソル11の操作で押下されると、色のカスタマイズモードがキャンセルされ、図3に示すコンテンツ画面2のみの表示状態に戻る。
「OK」ボタン14が押下されると、色のカスタマイズモードが設定されて、図6に示すコンテンツ画面2の表示状態となり(但し、図6において、図4に対応する部分には同一符号をつけて重複する説明を省略する)、カーソル11を操作して所望とする1つの部品、例えば、「期限変更」ボタン52を押下すると、この部品が押下されたことになる(図3のステップS102,S103)。
これとともに、この場合には、押下された部品が「期限変更」ボタン52であって、この部品の上には、他の部品が重なっていない(図3のステップS104の“No”)、図7に示すように(なお、図7において、16は押下部品エリアであり、前出図面に対応する部分には同一符号をつけて重複する説明を省略する)、コンテンツ画面2でのこの部品である「期限変更」ボタン52を完全に含み、かつこれに接する他の部品(ここでは、レイアウト6)の一部とを含み、それ以外の部品を極力排除した押下部品エリア16が明示された状態となり、コンテンツ画面2の他のエリアは透けて見える状態となる。
そして、図6に示すコンテンツ画面2の全体が、例えば、左方向に移動し、これにより、かかる押下部品エリア16が移動して、図8に示す色カスタマイズ操作画面が表示される(図3のステップS105)。
なお、図8において、17は色カスタマイズ操作画面、18はカラーセレクタ表示画面、19は「ボタン」のカラーセレクタ表示エリア、19a〜19cはカラーセレクタ、20は「レイアウト」のカラーセレクタ表示エリア、20a〜20cはカラーセレクタ、21は「選択色表示」欄、22は「選択色の候補表示」ボタン、23は「クリア」ボタン、24はプレビューエリア、25はスクロール操作部、26は「OK」ボタン、27は「キャンセル」ボタン、28は「全クリア」ボタンである。
同図において、この色カスタマイズ操作画面17では、図4に示すコンテンツ画面2でのコンテンツデータ表示エリア4が変更されたカラーセレクタ表示画面18と、タブパネル7の表示エリアが変更されたプレビューエリア24とからなるものであって、上記のように、図6に示すコンテンツ画面2全体の移動が、プレビューエリア24内に押下部品エリア16が位置付けられるまで、行なわれ、このコンテンツ画面2のこのプレビューエリア24に含まれる部分のみがこのプレビューエリア24で表示されることになる。但し、このプレビューエリア24内では、押下部品エリア16の部分のみが明示され、その他の部分は透けて見える状態となる。これにより、図6のコンテンツ画面2で押下された部品(この場合、「期限変更」ボタン52)が明確に示され、それを容易に確認することができる。
また、カラーセレクタ表示画面18では、図6でのコンテンツ画面2で押下された部品と、この部品が重なって表示される他の部品との押下部品エリア16で明示される部品毎にカラーセレクタ表示エリアが設定される。上記の例では、選択された「期限変更」ボタン52のカラーセレクタ表示エリア19と、この「期限変更」ボタン52が重ねられているレイアウト6に対するカラーセレクタ表示エリア(レイアウト6のカラーセレクタ表示エリア)20とが設定されることになる。そして、カラーセレクタ表示エリア19,20毎に、該当する部品の要素毎にその色を選択することができるようにするためのカラーセレクタが表示される。この場合の例では、カラーセレクタ表示エリア19には、部品としての「期限変更」ボタン52の「要素」であるボタンの文字5a(図4)に対してカラーセレクタ19aが、その背景5bに対してカラーセレクタ19bが、その枠線5cに対してカラーセンタ19cが夫々設定され、また、レイアウト6のカラーセレクタ表示エリア20には、「部品」としてのレイアウト6の「要素」であるレイアウト6の文字6a(図4)に対してカラーセレクタ20aが、その背景に対してカラーセレクタ20bが、その枠線に対してカラーセレクタ20cが夫々設定される。
各カラーセレクタは、カラーセレクタ20cを例にして説明すると、「選択色表示」欄21と「選択色の候補表示」ボタン22と「クリア」ボタン23とからなり、「選択色表示」欄21では、このカラーセレクタ20cに該当する「要素」(この場合、レイアウト6の枠線)の現在の色が表示されており、これにより、この「要素」の現在の表示色が確認できるようにしている。また、「選択色の候補表示」ボタン22は、後述するように、色をカスタマイズ(変更)するための手段を表示するためのものであり、「クリア」ボタン23は、後述するように、選択した色を解除するためのものであり、色の選択に対する制限を解除するためのものでもある。
また、図6に示すコンテンツ画面2で選択された(図3のステップS103)1つの部品が、例えば、レイアウト6のように、その上に他の部品(例えば、操作ボタン5)が重ねられている場合でも(図3のステップS104の“Yes”)、図8に示すように、この選択された部品のカラーセレクタ表示エリア19とこの部品に重ねられた他の部品のカラーセレクタ表示エリア20とが設定された色カスタマイズ操作画面17が表示される。但し、この押下された部品がレイアウト6である場合には、これに重なっている部品は複数個の操作ボタン5であり、この場合には、これらの操作ボタン5毎にカラーセレクタ表示エリア20が設定されて表示されることになる(図3のステップS106)。なお、押下された部品がタブパネル7である場合には、これに重なっている部品はテキスト8であるから、この場合には、選択されたタブパネル7のカラーセレクタ表示エリア19とこれに重ねられたテキスト8のカラーセレクタ表示エリア20とが設定された色カスタマイズ操作画面17が表示される(図3のステップS106)。
なお、この色カスタマイズ操作画面17には、カラーセレクタ表示画面18を上下にスクロールさせるためのスクロール操作部25と、後述する色カスタマイズの操作結果を確定するための「OK」ボタン26と、後述する色カスタマイズの操作をキャンセルする「キャンセル」ボタン27と、カラーセレクタ表示画面18で表示される全てのカラーセレクタ18a〜18c,19a〜19cの「クリア」ボタン23を全て同時に操作したのと同様の機能を有する「全クリア」ボタン28とを備えている。
図8に示す色カスタマイズ操作画面17で所望とする「要素」のカラーセレクタの「選択色の候補表示」ボタン22がカーソル11を用いて押下操作されると、図9に示すように、この「選択色の候補表示」ボタン22が押下されることによって選択されたカラーセレクタが展開した状態となり、その「要素」の色のカスタマイズが可能な状態となる。
なお、図9において、17aはこのときの色カスタマイズ操作画面、29は「単色」タブ、30は「グラデーション」タブであり、図8に対応する部分には同一符号をつけて重複する説明を省略する。
いま、図8に示す色カスタマイズ操作画面17での「期間変更」ボタン52のカラーセレクタ表示エリア19でカラーセクク19a〜19cの「選択色の候補表示」ボタン22が、また、レイアウト6のカラーセレクタ表示エリア20でカラーセレクタ20bの「選択色の候補表示」ボタン22が夫々押下されたとすると、これらカラーセレクタ19a〜19c,20bが選択されて展開した状態となる。即ち、ここでは、「期間変更」ボタン52の要素「文字」5aの文字色を設定するためのカラーセレクタ19aと、同じく要素「ボタンの背景」5bの背景色を設定するためのカラーセレクタ19bと、同じく要素「ボタンの枠線」5bの枠線色を設定するためのカラーセレクタ19cと、レイアウト6の要素「背景」の背景色を設定するためのカラーセレクタ20bとが展開することになる。
これらカラーセレクタ19/20(カラーセレクタ19a〜19c,20a〜20cの総称)は、色を決めるための「単色」タブ29とグラデーションを決めるための「グラテーション」タブ30とからなり、カーソル11の操作によってこれらのいずれかが選択された状態にある。図9に示す例では、「期間変更」ボタン52の要素「文字」5aに対する「ボタン文字色」のカラーセレクタ19aと同じく要素「ボタンの枠線」5cに対する「ボタン枠線色」のカラーセレクタ19cとレイアウト6の要素「背景」に対する「背景色」のカラーセレクタ20bとで「単色」タブ29が選択されており、「期間変更」ボタン52の要素「ボタンの背景」5bに対する「ボタン背景色」のカラーセレクタ19bで「グラテーション」タブ30が選択されている状態を示している。
これら「単色」タブ29や「グラテーション」タブ30は、該当する「要素」が表わされている色(即ち、「選択色表示」欄21)を選択した状態にある(図3のステップS107)。
図10(a)は図9における「単色」タブ29の一具体例を示す図であって、21aは設定色表示部、29aは不透明度指定部、29bは色相表示欄、29cはカラーパレット、29d1は色相指定部、29d2は濃度指定部、29e1,29e2はスライダである。
図10(a)において、「単色」タブ29は、「要素」(例えば、「期間変更」ボタン52の「要素」)に現在設定されている色の不透明度を表わす不透明度指定部29aと、設定可能な種々の濃度での色の一覧を表わす色選択用のカラーパレット29cと、このカラーパレット29cに含まれる色の種類を表わす色相表示欄29bとからなっている。
このカラーパレット29cは、横軸を色彩(色の種類)座標軸として、この色彩座標軸に沿って各種の色彩の色が配列され、縦軸を濃度座標軸として、この濃度座標軸に沿って同じ色彩の色が異なる濃度で配列されている。カラーパレット29cでの所望とする色をカーソル11の操作で選択することにより、この「単色」タブ29に該当する「要素」の色がこの選択された色に設定される。これとともに、「選択色表示」欄21(図8)の設定色表示部21aで表示される色も、この選択された色に変更される。
カラーパレット29cの上辺側には、選択する色相を代えるための色相指定部29d1が設けられており、この色相指定部29d1に色相を選択するためのスライダ29e1が設けられている。このスライダ29e1を色彩座標軸に沿う左右方向に移動させることにより、このスライダ29e1に対向する色相の色を選択できるようになる。また、カラーパレット29cの左辺側には、色の濃度を変化させるための濃度指定部29d2が設けられており、この濃度指定部29d2に濃度を選択するためのスライダ29e2が設けられている。このスライダ29e2を濃度座標軸に沿う上下方向に移動させることにより、このスライダ29e2に対向する濃度の色を選択できるようになる。スライダ29e1を左右方向に移動されると、これに応じて選択される色相が変化し、これとともに、「選択色表示」欄21の色設定表示部21aに表示される色が変化し、スライダ29e2を上下方向に移動されると、これに応じてスライダ29e1で選択されている色相の濃度が変化し、これとともに、「選択色表示」欄21の色設定表示部21aに表示されている色の濃度が変化する。
これにより、スライダ29e1を希望する色相に対向する位置に設定し、スライダ29e2を希望する濃度に対向する位置に設定すると、希望する濃度で希望する色彩の色が選択されたことになり、かかる希望する濃度で希望する色彩の色が「選択色表示」欄21の色設定表示部21aに表示されることになる。
図10(b)は図9における「グラテーション」タブ30の一具体例を示す図であって、21bは設定グラテーション表示部、30aは不透明度指定部、30bは色相表示欄、30cはカラーパレット、30d1は色相指定部、30d2は濃度指定部、30e1,30e2はスライダ30fはグラデーション設定部、30f1はグラデーションバー、30f2,30f3は端部マーク、30f4は色相/濃度指示マーク、30gはグラデーション方向設定欄である。
同図において、「グラテーション」タブ30は、「単色」タブ29と同様、不透明度指定部30aと色相表示欄30bとカラーパレット30cとが設けられているとともに、グラデーション設定部30f及びグラデーション方向設定欄30gが設けられている。ここで、カラーパレット30cは、グラデーションを設定する際の色の選択のためのものである。
グラデーション方向指定欄30gは、グラデーションの方向(色あるいは濃さの変化の方向)を任意に切り換え設定できるようにするものであって、この方向が角度0゜のときには、横方向に色やその濃さを順次変化させるものであり、角度90゜のときには、縦方向に色やその濃さを順次変化させるものであり、角度45℃のときには、斜め方向に色やその濃さを順次変化させるものである。例えば、「期間変更」ボタン52内の背景5b(図4)でグラテーションの方向を設定する場合には、図9に示すように、「ボタン背景色」のカラーセレクタ19bで「グラテーション」タブ30を選択し、この「グラテーション」タブ30(図10(b))におけるグラデーション方向設定欄30gでその方向に応じた角度を設定するように操作すればよい。ここでグラデーション方向を角度0゜に指定すると、この「期間変更」ボタン52内の背景5bの色やその濃さが横方向に変化して表示され、角度90゜に指定すると、この「期間変更」ボタン52内の背景5bの色やその濃さが縦方向に変化して表示され、角度45゜に指定すると、この「期間変更」ボタン52内の背景5bの色やその濃さが斜め方向に変化して表示される。
グラデーション設定部30fは、グラデーションを表わすグラデーションバー30f1と、グラデーションバー30f1の端を表わす端部マーク30f2,30f3と、グラデーションバー30f1の端部間の色または濃度を指示するための色相/濃度指示マーク30f4とからなっている。この色相/濃度指示マーク30f4は、グラデーションバー30f1に沿うその位置を変更させることもできるし、また、削除することができるし、さらに、削除の色相/濃度指示マーク30f4を再び追加することもできる。、
グラデーションバー30f1での端部マーク30f2,30f3や色相/濃度指示マーク30f4で指示される位置では、「単色」タブ29での色指定の方法と同様の操作方法により、色を指定することができる。即ち、一方の端部マーク30f2または30f3を指定して(カーソル11でタッチ操作して)、カラーパレット30cで所望の濃度の色相を選択操作することにより、グラデーションバー30f1のこの端部マーク30f2または30f3側の端部にこの選択された濃度の色が設定され、他方の端部マーク30f3または30f2を指定操作して、カラーパレット30cで所望の濃度の色相を選択操作することにより、グラデーションバー30f1のこの端部マーク30f3または30f2側の端部にこの選択された濃度の色が設定され、これにより、グラデーションバー30f1にこの一方の端部に設定された濃度の色から他方の端部に設定された濃度の色までのグラデーションが設定されることになる。これとともに、「色」表示欄21の設定グラデーション表示部21bに、この色グラデーションが表示されることになる。
なお、グラデーションバー30f1で設定される色クラデーションは、ここでは、カラーパレット30c上で、グラデーションバー30f1での一方の端部(例えば、端部マーク30f2側の端部)に対して指定された色と他方の端部(例えば、端部マーク30f3側の端部)に対して指定された色とを結ぶ直線に沿う色の列からなる色グラデーションが表示される。従って、これらの指定される2つの色がカラーパレット30cの濃度座標軸に平行な1つの直線上にある色のときには、グラデーションバー30f1では、同じ色の濃さが変化する色グラデーションが得られるものであり、指定される2つの色が、濃度座標軸に平行でない1つの直線上にある色であるときには、少なくとも色が変化する色グラデーションが得られることになる。
ここで、グラデーション方向指定欄30gが角度90°であって、レイアウト6などの「要素」でのグラデーションの方向が垂直方向(縦方向)である場合には、グラデーションバー30f1の端部マーク30f2側の端部に設定された濃度と色相の色はこの「要素」の下端での色を表わしており、グラデーションバー30f1の他方の端部マーク30f3側の端部に設定された濃度の色はこの「要素」の上端での色を表わしており、グラデーションバー30f1でこれら濃度で色彩の色間のグラデーションが表わされることになり、このグラデーションでこの「要素」が色/濃度のグラデーション表示されることになる。また、グラデーション方向指定欄30gが角度0°であって、レイアウト6などの「要素」でのグラデーションの方向が水平方向(横方向)である場合には、グラデーションバー30f1の端部マーク30f2側の端部に設定された濃度,色彩の色はこの「要素」の左端の色を表わしており、グラデーションバー30f1の他方の端部マーク30f3側の端部に設定された濃度,色彩の色はこの「要素」の右端の色を表わしており、これら濃度,色彩の色間のグラデーションがグラデーションバー30f1で表わされることになり、このグラデーションでこの「要素」が色/濃度のグラデーション表示されることになる。グラデーション方向指定欄30gが角度0°や角度90゜以外の角度であって、レイアウト6などの「要素」でのグラデーションの方向が斜め方向である場合には、グラデーションバー30f1の端部マーク30f2側の端部に設定された濃度,色彩の色はこの「要素」の、例えば、左下角側の色を表わしており、グラデーションバー30f1の他方の端部マーク30f3側の端部に設定された濃度,色彩の色はこの「要素」の右上角側の色を表わしており、これら濃度,色彩の色間のグラデーションがグラデーションバー30f1で表わされることになり、このグラデーションでこの「要素」が色/濃度のグラデーション表示されることになる。
色相/濃度指示マーク30f4は、グラデーションバー30f1の途中に所望の濃度で色相の色を指定することができるようにするものであって、色相/濃度指示マーク30f4を指定して、カラーパレット29cで所望の濃度で色相の色を選択操作することにより、グラデーションバー30f1のこの色相/濃度指示マーク30f4の位置にこの選択された濃度,色相の色が設定される。この場合には、グラデーションバー30f1の一方の端部マーク30f2側の端部と色相/濃度指示マーク30f4に対向する位置との間で、これらに設定された濃度,色彩の色間のグラデーションが設定され、さらに、色相/濃度指示マーク30f4に対向する位置と他方の端部マーク30f3側の端部との間で、これらに設定された濃度,色相の色間のグラデーションが設定される。例えば、端部マーク30f2,30f3で夫々異なる濃度D1,D2で色彩が同じ色Cが設定され、色相/濃度指示マーク30f4でこれらと同じ色相で濃い濃度D3(>D1,D2)の色Cが設定されたとすると、グラデーションバー30f1では、左側から濃度がD1からD3に変化し、さらに、D3からD2に変化するグラデーションが設定されることになる。そして、このグラデーションが該当する「要素」に設定されることになる。
以上の図10は、「単色」タブ29と「グラテーション」タブ30の構成を示すが、これら「単色」タブ29と「グラテーション」タブ30では、上記の輝度コントラスト比を基に、それらのカラーパレット29c,30cで選択不能な色(以下では、「色」といった場合、この「色」は色相と濃度とからなるものとする)と選択を勧めない色とが設定される。
図11はかかる「単色」タブ29のカラーパレットでの表示例を示す図であって、31aはバツ印を示す「×(バツ)」マーク、31bは斜線印を示す「/」マークであり、図10に対応する部分には同一符号を付けて重複する説明を省略する。
上記のように、要素「文字/記号」とこれに接する他の要素との間では、輝度コントラスト比が4.5:1以上でなければならず、要素「文字/記号」以外の要素間では、輝度コントラスト比が1.7:1以上でなければならないという規定があり、この実施形態では、この規定を満たさない色が「単色」タブ29や「グラテーション」タブ30のカラーパレットで表示される。
図11(a)は、「単色」タブ29を例として、要素「文字/記号」とこれに接する他の要素に対するカラーパレット29cの表示状態の一具体例を示す図であって、これら「要素」間で輝度コントラスト比が4.5:1未満の色に対して、「×」マーク31aが示され、この色を選択できないようにしている。
図9に示す色カスタマイズ操作画面17aでは、選択された「期限変更」ボタン52(図6)でのボタンの文字5a(図4)のカラーセレクタ19aにおいて、その「単色」タブ29のカラーパレット29aで「×」マーク31aが付された色が示されているが、これは、この「期限変更」ボタン52において、文字5aとこれが重なって表示される文字の背景5bとにおいて、この文字の背景5bの色に対し、輝度コントラスト比が4.5:1未満となる文字5aの色に対して「×」マーク31aが付されているものである。従って、図9に示す色カスタマイズ操作画面17aでは、カラーパレット29aで「×」マーク31aが付された色は、選択できないものである。このカラーパレット29aで「×」マーク31aが付されていない色を選択することにより、文字5aが、これが重なって表示される文字の背景5bの色に対して、このコンテンツ画面2(図4)でユーザが明確に視認できるように色付けされていることになる。
図11(b)は、「単色」タブ29を例として、要素「文字/記号」以外の2つの要素に対するカラーパレット29cの表示状態の一具体例を示す図であって、これら「要素」間で輝度コントラスト比が1.7:1未満の色に対して、「/」マーク31bが示され、この色は選択することができるが、それが選択されると、これら「要素」間で輝度コントラスト比が1.7:1未満の色となるので、推奨しないようにしている。
図9に示す色カスタマイズ操作画面17aでは、選択された「期限変更」ボタン52(図6)でのボタンの枠線5c(図4)のカラーセレクタ19cにおいて、その「単色」タブ29のカラーパレット29aで「/」マーク31bが付された色が示されているが、これは、この「期限変更」ボタン52において、枠線5cとこれに接して表示される文字の背景5bとにおいて、この文字の背景5bの色に対し、輝度コントラスト比が1.7:1未満となる枠線5cの色に対して「/」マーク31bが付されているものである。従って、図9に示す色カスタマイズ操作画面17aでは、ボタン枠線色のカラーセレクタ19cのカラーパレット29aで「/」マーク31bが付された色は、選択が推奨されないものである。このカラーパレット29aで「/」マーク31bが付されていない色を選択することにより、ボタンの枠線5cが、これに接して表示される文字の背景5bの色に対して、このコンテンツ画面2(図4)でユーザが明確に視認できるように色付けされていることになる。
ここで、図9に示す色カスタマイズ操作画面17aでは、各カラーセレクタ19/20毎に「クリア」ボタン23が設けられているが、「クリア」ボタン23が押下されると、「クリア」ボタン23が押下されたカラーセレクタ19/20において、色の選択、あるいはグラテーションの選択が解除される。即ち、どの色も、また、どのようなグラテーションも選択されていない状態となる。例えば、図11(a)において、「クリア」ボタン23が押下されると、カラーセレクタ19aでのこのとき選択されている色は解除され、このため、このとき表示されている「期間変更」ボタン52のボタンの文字5aの色は消えるとともに、「色表示」欄21で表示されている色も消える。また、図11(b)において、「クリア」ボタン23が押下されると、カラーセレクタ19bでのこのとき設定されているグラデーションは解除され、このため、このとき表示されている「期間変更」ボタン52のボタンの背景5bでのグラデーションが消えるとともに、「色表示」欄21で表示されているグラデーションも消える。
また、これとともに、上記の選択している色やグラテーションが消えることから、図11に示す「×」マーク31aや「/」マーク31bが設定されている色が変わってくる。例えば、図9において、「期間変更」ボタン52のボタンの背景5bに対するカラーセレクタ19bで「クリア」ボタン23が押下され、そのグラデーションが解除されると、「期間変更」ボタン52のボタンの文字5aに対するカラーセレクタ19aにおいて、これまでのカラーセレクタ19bで設定されているグラテーションによって選択することができず、「×」マーク31aが設定されていた色が選択可能となる場合もあり、このような色に対しては、この「×」マーク31aが除かれることになる。なお、図9において、カラーセレクタ19aで「クリア」ボタン23が押下され、「期間変更」ボタン52のボタンの文字5aでそのとき選択されている色が解除されるが、このとき、これに対するカラーセレクタ19aでは、「期間変更」ボタン52のボタンの背景5bに対するカラーセレクタ19bでグラテーションの設定をしたときに、このグラテーションに対して選択できなくなった色に対して「×」マーク31aが設定されたものであるときには、カラーセレクタ19aで「クリア」ボタン23が押下されても、「×」マーク31aが削除される色もあるが、「×」マーク31aが設定されているままの色もある。カラーセレクタ19aでのかかる色は、カラーセレクタ19bでいずれの色が選択されても、選択することができない色である。
なお、カラーセレクタ19aでの色選択によってカラーセレクタ19bで色に「×」マーク31aが設定されている場合も同様であり、カラーセレクタ19bで「クリア」ボタン23が押下されても、「×」マーク31aが設定されている色が残る場合もある。また、「/」マーク31bが設定されている色についても同様である。
なお、図9に示す色カスタマイズ操作画面17aにおいて、レイアウト6のカラーセレクタ表示エリア20では、このレイアウト6の背景6a,6b(図4)のカラーセレクタ20bのみが展開され、その「単色」タブ29のカラーパレット29c(図11)で「×」マーク31aが設定されていることが示されているが、これは、展開されていないが、このレイアウト6の文字6a,6bのカラーセレクタ20aでのカラーパレットでの色に対して、輝度コントラスト比が4.5:1未満となる色に対して「×」マーク31aが設定されていることになる。
また、「期限変更」ボタン52の枠線5cは、レイアウト6の背景と接することになる。このため、これら間の色では、やはり輝度コントラスト比が1.7:1以上であるように、設定される。この場合、「期限変更」ボタン52が上記のように指定されたものであるから、この枠線5cに対して、レイアウト6の方で選択可能な色が制限されることになる。即ち、「期限変更」ボタン52の枠線5cのカラーパレット29cで「/」マーク31aが設定されていない色に対して、レイアウト6の背景のカラーセレクタ20bでのカラーパレット29cで輝度コントラスト比が1.7:1未満となる色にも、「/」マーク31aが設定されることになる。
以上のように、図8に示す色カスタマイズ操作画面17で色のカスタマイズを必要とする「要素」のカラーセレクタが指定されると、指定された「要素」のカラーセレクタが展開した図9に示す色カスタマイズ操作画面17aが表示されることになる(図3のステップS108)。
この場合、上記のように、指定された「部品」とこれに接する(つまり、この「部品」が重なったり、この「部品」に重なったりすることによって接している)他の1以上の部品毎に、その「要素」のカラーセレクタが展開していて、そのカラーセレクタでのカラーパレットで色を選択したり、グラデーションを選択したりすることにより、該当する「要素」をその選択した色で、あるいは選択したグラデーションで表現させることができる。また、夫々のカラーパレットには、該当する「要素」をこれに接した「要素」に対して必要な輝度コントラスト比を持たせて視認し易くするために、この必要な輝度コントラスト比未満の視認し易くない色に対し、その旨を表示する「×」マーク31aや「/」マーク31bを付加し、選択できない、あるいは選択させないようにしている。
コンテンツ画面2(図4)が表示されたときに、上記のようにして、「部品」を指定してこの「部品」に対し、あるいはこの「部品」に接する「部品」に対し、そのいずれかの「要素」のカラーセレクタで色カスタマイズを行なうと、夫々の「要素」のカラーセレクタのカラーパレットの状態(「×」マーク31aや「/」マーク31bが付加された状態)がそのまま保持され、次に同じコンテンツ画面2が表示されたときも、各「要素」のカラーセレクタのカラーパレットの状態はそのまま保持される。このとき、いずれのカラーセレクタの「クリア」ボタン23も押下操作されなければ、この各「要素」のカラーセレクタのカラーパレットの状態は、変化しない。
けれども、いずれかの「要素」のカラーセレクタの「クリア」ボタン23が押下操作されると、これに応じて、他の「要素」のカラーセレクタのカラーパレットでは、上記のように、適用される輝度コントラスト比に応じて、「×」マーク31aが設定されて選択禁止される色や使用を「/」マーク31bが設定されて選択を勧めない色が変わることもあることになる。
図9に示す色カスタマイズ操作画面17aが表示される状態で(図3のステップS108)、色カスタマイズしたい「要素」があるが(図3のステップS109の“Yes”)、この「要素」のカスタマイズしたい色がこの「要素」のカラーセレクタのカラーパレットで選択可能な状態(「×」マーク31aや「/」マーク31bが付加されていない状態)にあるときには(図3のステップS110の“Yes”)、このカラーパレットで、上記のように、希望する色を選択操作することにより、この「要素」がこの色で表示されるようになる(図3のステップS111)。
これに対し、このカラーパレットで希望する色が選択不可能な状態(「×」マーク31aが付加されている状態)や選択を勧めない状態(「/」マーク31bが付加されている状態)にあるときには(図3のステップS110の“No”)、まず、このカラーパレットを有するカラーセレクタに該当する「要素」に接する他の「要素」のカラーセレクタで「クリア」ボタンを押圧して、その「要素」の色を設定解除し(図3のステップS112)、かかる状態でこのパレットで希望する色が選択可能になったか否かを判定し(図3のステップS110)、それでも、この希望する色が選択不能である場合には(図3のステップS110の“No”)、さらに、この他の「要素」に接するさらに他の「要素」のカラーセれクタで「クリア」ボタン23を押下する(図3のステップS112)。かかる処理が順次行なわれて上記の希望する色に対して「×」マーク31aが解除され、選択可能となると(図3のステップS110の“Yes”)、この希望する色を選択することができるようになる(図3のステップS111)。従って、これにより、この「要素」の色をこの希望する色にカスタマイズできる(図3のステップS111)。
ここで、いま、図9に示す色カスタマイズ操作画面17aで、物品「期限変更」ボタン52(図4)の「要素」である「文字」5a(図4)の色をカスタマイズしたいが、この「文字」5aに対するカラーセレクタ19aのカラーパレット29c(図10(a))で、このカスタマイズしようとする色にカスタマイズを不可とする「×」マーク31aが付加されているとすると、「期限変更」ボタン52の「文字」5aに接するこの「期限変更」ボタン52の「背景」5bのカラーセレクタ19bの「クリア」ボタン23を押下操作することにより、このカラーセレクタ19bで設定されているグラデーションが解除されることになり、これにより、「期限変更」ボタン52の「文字」5aに対するカラーセレクタ19aでカスタマイズしたい色が、その「×」マーク31aが解除されて、選択可能となったとすると、この色を選択することができることになる。
そこで、カーソル11の操作により、このカラーパレット29cから希望する色を選択することにより、コンテンツ画面2(図6)で選択された「期限変更」ボタン52の文字5aがこの色で表示されることになるが、このことが、プレビューエリア24での押下部品エリア16で表わされ、この部品エリア16での該当する「要素」である「期限変更」ボタン52の文字5aがこの選択された色で表現される。
ところで、このとき、例えば、「期限変更」ボタン52の「要素」である「背景」5bのこれまでの色がそのカラーセレクタ19bでのカラーパレット29cで「×」マーク31aが付加されている状態となることもある。しかし、かかる状態はそのまま維持されることになり、カラーパレットでこの色に「×」マーク31aが付加されていることから、現在設定されている色は、「期限変更」ボタン52の「文字」5aに対して、相対コントラスト比を満たしていない色であることが示されることになる。
なお、ある要素、例えば、「期限変更」ボタン52の「背景」5bに対し、上記のように、「クリア」ボタン23を押下した後、所望とする色を選択した結果、「期限変更」ボタン52の「文字」5aで現在設定されている色が、これに対して「×」マーク31aが付加されて選択不能な色となった場合には、上記のように処理がなされない場合には、そのままかかる状態が維持されることになる。この場合も、カラーセレクタ19aのカラーパレットでこの色に「×」マーク31aが付加されることになるので、この色が選択不能な色であることを確認できる。 なお、図9に示す色カスタマイズ操作画面17aで、「全クリア」ボタン28が指定操作されると、この色カスタマイズ操作画面17aで表示されている全てのカラーセレクタ19/20(即ち、ここでは、カラーセレクタ19a〜19c,20a〜20cの全て)で、設定されている色が解除され、これらに対する「期限変更」ボタン52やレイアウト6の色が消去されるとともに(従って、「色表示」欄21(図10)で色も表示されなくなる)、それらのカラーパレットでの「×」マーク31aや「/」マーク31bが付加されない状態となる。
かかる状態で、例えば、カラーセレクタ19aのカラーパレット29cで「ボタンの文字」の文字色を選択すると、「期限変更」ボタン52の「文字」5aの色が設定され、これとともに、他のカラーセレクタ19b,19c,20a〜20cでのカラーパレット29c,30cで、上記のようにして、選択できない色に「×」マーク31aが、選択を勧めない色に「/」マーク31bが夫々付加されることになる。これにより、夫々のカラーパレット29c,30cでは、上記の色を指定することが可能となる(図3のステップS110の“Yes”)。
ここで、部品「期間変更」ボタンの1つの要素である「ボタンの文字」5aの色が設定されると、色カスタマイズ操作画面17aに表示されている全てのカラーセレクタのカラーパレットにおいて、選択できない色に「×」マーク31aが、選択を進めない色に「/」マーク31bが夫々付加される即ち、「ボタンの文字」5bの色が設定されると、これに接する「ボタンの背景」5bについて選択できない色が計算可能となるため、対象となる色に「×」マーク31aが付加される。「ボタンの文字」5bについて選択可能な色が決まると、これに接する「ボタンの枠線」5cについて選択を勧めない色が計算可能となるため、対象となる色に「/」マーク31bが付加される。このように、接する「要素」順に順次計算を行なうことにより、1つの色が設定されると、全てのカラーパレットにおいて、「×」マーク31a及び「/」マーク31bを夫々付加することが可能となる。ここで、例えば、「ボタンの背景」5bについて選択可能な色の中からどの色を選択するかによって、「ボタンの枠線」5cにおける選択を勧めない色が変わる場合がある。この実施形態では、「ボタンの背景」5bでどの色を選択した場合にも、「ボタンの枠線」5cの色として、「選択を勧めない色」に該当するものにのみ選択を勧めない「/」マーク31bを付加するものとする。
図12は「単色」タブ29を用いて「期限変更」ボタン52の「文字」5aの色を設定する操作を示しているが、図13は、「単色」タブ29が選択されたカラーセレクタ19cで、「期限変更」ボタン52の「枠線」5cの色を設定する操作を示すものであり、図14は、「単色」タブ29が選択されたカラーセレクタ20bで、レイアウト6の「背景」6aの色を設定する操作を示すものである。いずれも、上記の「期限変更」ボタン52の「文字」5aの色設定操作と同様、「単色」タブ29のカラーパレット29cで色選択操作をすることにより、それら「要素」の色を決めることができる。そして、このように色カスタマイズされた「要素」には、プレビューエリア24の押下部品エリア16において、該当する色で色付けされる。
なお、図13,図14では、図12に対応する部分には同一符号を付けて重複する説明を省略するが、いずれの図面においても、説明の対象となる部分にのみ符号を付している。
図15は色カスタマイズ操作画面17aでのグラデーション設定部の調整操作例を示す図であって、前出図面に対応する部分には同一符号を付けて重複する説明を省略する。なお、図15では、説明に必要な部分にのみ符号を付けている。
同図において、「グラデーション」タブ30でのグラデーション設定部30fにおける色相/濃度指示マーク30f4を取り除くことができる。このためには、この色相/濃度指示マーク30f4をカーソル11で指示し、カラーセレクタのエリア外にドラッグアンドドロップをすればよく、これにより、この色相/濃度指示マーク30f4がグラデーション設定部30f外の位置に置かれることになる。この状態では、この色相/濃度指示マーク30f4はグラデーション設定部30fに対して機能することができず、このときのグラデーション設定部30fに対しては機能しない。従って、グラデーションバー30f1では、その端部マーク30f2側の色から端部マーク30f3側の色へのグラデーションが表示されることになる。
除かれたこの色相/濃度指示マーク30f4を追加して再度使用する場合には、グラテーション設定部30fのグラデーションバー30f1の近くでダブルクリックすることにより、このグラデーションバー30f1の下側で、かつクリックした地点に一番近い位置に新たに色相/濃度指示マーク30f4が追加されることになる。
図16は図15に示す色カスタマイズ操作画面17aでのグラテーション操作の一具体例を示す図であって、同図(a)はグラデーションバー30f1の一方の端部側の色の設定操作を示し、同図(b)はグラデーションバー30f1の他方の端部側の色の設定操作を示すものであり、前出図面に対応する部分には同一符号を付けて重複する説明を省略する。なお、図15では、説明に必要な部分にのみ符号を付けている。
図16(a)において、「グラデーション」タブ30でのグラデーション設定部30fにおけるグラデーションバー30f1の一方の端部側の端部マーク30f3をカーソル11でクリック操作し、次いで、カラーパレット30cで所望の色を指定すると、このグラデーションバー30f1の端部マーク30f3側の端部の色が設定される。
次に、図16(b)において、このグラデーション設定部30fにおけるグラデーションバー30f1の他方の端部側の端部マーク30f2をカーソル11でクリック操作し、次いで、カラーパレット30cで所望の色を指定すると、このグラデーションバー30f1の端部マーク30f2側の端部の色が設定される。
これにより、グラデーションバー30f1でその一方の端部で設定された色から他方の端部で設定された色までのグラデーションが設定されたことになる。これとともに、このカラーセレクタ19bでの「選択色表示」欄21の設定色表示部21aに、この設定されたグラデーションが表示される。
なお、「単色」タブ29や「グラテーション」タブ30での以上の色やグラデーションの設定は、図3でのステップS111で行なわれる。
ところで、図9に示す色カスタマイズ操作画面17aにおいて、上記のように、プレビューエリア24に、カラーセレクタ表示画面18の操作で色カスタマイズされる「部品」を表わす押下部品エリア16が表示され、この押下部品エリア16に表示される「部品」が色カスタマイズの対象部品となる。
かかる図9に示す色カスタマイズ操作画面17aにおいて、カーソル11をプレビューエリア24内の押下部品エリア16内に移動させ、図17に示すように(なお、図17において、図9に対応する部分には同一符号を付けて重複する説明を省略する。但し、図17では、必要な部分にのみ符号を付けている)、図示しないマウスを用いることによってドラッグしてこのカーソル11を所定の方向に移動させると、レビューエリア24内に表示されるコンテンツ画面2(図4)がその方向に移動する。このときには、押下部品エリア16は位置が固定されている。このため、コンテンツ画面2でのこの押下部品エリア16内に表示されているエリア(コンテンツ画面2での押下部品エリア16内でプレビューされる部分)が変化する。これにより、コンテンツ画面2での押下部品エリア16でプレビューされるエリアを変更させることができ、色カスタマイズの対象となる「部品」以外のエリアの表示内容を閲覧することができる。
なお、プレビューエリア24の任意の位置をキーボードでフォーカスし、キーボードの十字キーを操作することにより、コンテンツ画面2を移動させることもでき、これにより、コンテンツ画面2での押下部品エリア16内に位置するエリアを変更させることもできる。これによっても、上記と同様、コンテンツ画面2での押下部品エリア16でプレビューされるエリアを変更させることができる。
また、上記のように、コンテンツ画面2でのプレビューされるエリアを変化させるカーソル11の機能は、このカーソル11がプレビューエリア24にあるときに実行されるものであり、カーソル11がプレビューエリア24外に移動すると、もはやドラッグ操作によっては、プレビューエリア24でのコンタンツ画面2は移動しない。従って、このコンテンツ画面2を大きく移動させてこのコンテンツ画面2で大きく離れた他の「部品」をプレビューの対象とするためには、カーソル11をプレビューエリア24内で大きく移動させた後、カーソル11を押下部品エリア16内の元の位置に戻し、再度ドラッグして同じ方向にカーソル11を移動させる操作を繰り返せばよい。
図9に示す色カスタマイズ操作画面17aでの色カスタマイズを必要とする全ての「要素」の色カスタマイズ操作が終了して、色カスタマイズ操作が必要な「要素」がなくなり、プレビューエリア24での押下部品エリア16で押下した部品である「期限変更」ボタン52で色カスタマイズの結果が確認されて(図3のステップS109の“No”)、図18に示すように、色カスタマイズ操作画面17aで「OK」ボタン26が押下されると(図3のステップS113)、元のコンテンツ画面2に重なって色カスタマイズの対象となる「部品」を選択するための選択画面が表示される。
図19はかかる選択画面の一具体例を示す図であって、32は選択画面、33はテキスト、34は「はい」ボタン、35は「いいえ」ボタンである。
同図において、コンテンツ画面2は透けて見える状態で表示されており、この透けて見えるコンテンツ画面2上に重ねて選択画面32が表示される。
この選択画面32では、例えば、「同じレイアウト部品に乗っている同じ種類の部品は全て同じ色にしますか?」ということを指示したテキスト33が表示され、この指示に従う場合に操作する「はい」ボタン34と、指示に従わないときに操作する「いいえ」ボタン35が設けられている。
「はい」ボタン34が押下操作されたときには(図3のステップS114の“Yes”)、図6に示すコンテンツ画面2でカーソル11によって選択された「部品」(この場合では、「期間変更」ボタン52)やそれに接する部品(ここでは、レイアウト6)とともに、このレイアウト6に接している他の「部品」(即ち、レイアウト6)に重なっているこの選択された「部品」と同じ種類の「部品」(この場合では、「重要度変更」ボタン51や「担当者変更」ボタン53,「ステータス変更」ボタン54など)の各「要素」も、指定された「部品」の「要素」と同じ色に色カスタマイズされる(図3のステップS115)。しかる後、色カスタマイズ処理が終了する。
また、「いいえ」ボタン35が押下操作されたときには(図3のステップS114の“No”)、図6に示すコンテンツ画面2でカーソル11によって選択された「部品」(即ち、「期間変更」ボタン52)とこれに接する部品(ここでは、レイアウト6)とが色カスタマイズされる(図3のステップS116)。しかる後、色カスタマイズ処理が終了する。
なお、図19に示す選択画面32に表示されるテキスト33としては、上記のものに限定されるものではなく、例えば、「同種類の部品は全て同じ色に変えますか?」といったテキスト33を表示し、「はい」ボタン34が押下操作されたときには(図3のステップS114の“Yes”)、図6に示すコンテンツ画面2でカーソル11によって選択された「部品」(即ち、「期間変更」ボタン52)及びこれと同じ種類の部品(即ち、操作ボタンの全て)を同じ色に色カスタマイズしたり、「同種類のレイアウト部品で、かつ色が同じものに置かれている同種類の部品は全て同じ色に変更しますか?」といったテキスト33を表示し、「はい」ボタン34が押下操作されたときには(図3のステップS114の“Yes”)、これを満足する部品を設定された同じ色に色カスタマイズしたりすることができ、色カスタマイズする部品を適宜決めるようにすることができる。
以上のようにして、図6に示すように、色カスタマイズモードに設定して色カスタマイズを希望する「部品」を選択することにより、いずれの「部品」も、希望する色にカスタマイズすることができる。但し、レイアウト6など多くの「部品」と重なったり、接したりして複数の部品に関連する場合には、これら関連する「部品」に応じて、カスタマイズする色が制限される「部品」もある。
即ち、図19に示す選択画面32で「いいえ」ボタン35が押下されると、上記の指定した操作ボタン5、上記の例では、「期間変更」ボタン52とこれが重なっているレイアウト6とが夫々指定された色にカスタマイズされるが、さらに、他の操作ボタン5、例えば、「担当者変更」ボタン53を色カスタマイズする場合には、同様にして、この「担当者変更」ボタン53に対して、図8に示す色カスタマイズ操作画面17が表示されるが、この「担当者変更」ボタン53に該当するカラーセレクタ19a〜19cのみを選択することにより、既に色カスタマイズされたレイアウト6の色を誤って変化させるようなことなく、「担当者変更」ボタン53のみを色カスタマイズすることができる。但し、この場合には、この「担当者変更」ボタン53に対してカラーセレクタ19a〜19cが展開された図9に示すような色カスタマイズ操作画面17aでは(この場合、レイアウト6のカラーセレクタ20a〜20cは展開されていない)、色カスタマイズされたレイアウト6に影響されて、カラーセレクタ19a〜19cのカラーパレットにおいて、「/」マーク31bや「×」マーク31aが付加された色があり、使用する色に制限が加わることになる。
ところで、以上では、図4に示すコンテンツ画面2で「色カスタマイズモード設定」ボタン3が押下操作されて色カスタマイズモードが設定されたとき、このコンテンツ画面2で1つの「部品」(ここでは、「期限変更」ボタン52)が色カスタマイズする対象として選択されたものであるが、この実施形態では、複数の部品を色カスタマイズの対象として選択するようにすることもできる。以下、これについて説明する。
先に説明したように、図4に示すコンテンツ画面2で「色カスタマイズモード設定」ボタン3が押下操作され、色カスタマイズモードが指定されると(図3のステップS101)、図5に示す選択画面12が透けて見えた状態のコンテンツ画面2上に表示され、この選択画面12で「OK」ボタン14が押下操作されると、図6に示すコンテンツ画面2が表示される。このコンテンツ画面2でのカーソル操作により、同時に色カスタマイズ対象とする複数の部品を指定操作することが可能となる。
図20はコンテンツ画面2でのかかる複数の部品を同時に色カスタマイズ対象とするための操作を示す図であって、36はカーソル、37はドラッグエリアであり、前出図面に対応する部分には同一符号を付けて重複する説明を省略する。但し、図20では、説明に必要な部分についてのみ部号を付している。
図5に示す選択画面12で「OK」ボタン14が押下操作されることによって表示される図6に示すコンテンツ画面2で、カーソル11を色カスタマイズしたい「部品」の近傍位置に移動させ、その位置でクリック操作すると、図20に示すように、この手形のカーソル11が矢印状のカーソル36に代わり、その位置からこのカーソル36をドラッグすると、その位置を起点として、この起点とカーソル36の現位置とを対向する2つの角部とする矩形状のドラッグエリア37が形成される。
このドラッグエリア37がこのコンテンツ画面2での色カスタマイズの対象としたい複数の「部品」を含むように、カーソル37をドラッグ操作する(図3のステップS102,S117)。そして、ドラッグ操作を終了し、このドラッグエリア37が決まると、色カスタマイズ操作画面が表示されるとともに、このドラックエリア37に含まれる「部品」毎に、当該「部品」の上に他の「部品」が重ねられているか否かを判定する(図3のステップS118)。当該「部品」の上に他の「部品」が重なっている場合には(図3のステップS118の“Yes”)、当該「部品」の各「要素」のカラーセレクタと当該「部品」上に重なっている他の「部品」の各「要素」のカラーセレクタとをこの色カスタマイズ操作画面に表示し(図3のステップS119)、当該「部品」の上に他の「部品」が重なっていない場合には(図3のステップS118の“No”)、当該「部品」の各「要素」のカラーセレクタと当該「部品」の下に置かれている他の「部品」の各「要素」のカラーセレクタとをこの色カスタマイズ操作画面に表示する(図3のステップS120)。かかる処理がドラッグエリア37内の「部品」毎に順次行なわれ(図3のステップS121の“No”)、かかる処理がドラッグエリア37内の全ての「部品」について行なわれると(図3のステップS121の“Yes”)、図21に示すように、ドラッグエリア37内の全ての「部品」について、その「要素」のカラーセレクタが設けられた色カスタマイズ操作画面38が表示される。
なお、図21において、191〜193はカラーセレクタ表示エリアであり、前出図面に対応する部分には同一符号を付けて重複する説明を省略する。但し、図21においては、説明に必要な部分にのみ符号を付け、他の部分の符号は省略している。
ここでは、図20に示すコンテンツ画面2において、ドラッグエリア37に含まれる「部品」としては、「重要度変更」ボタン51と「期限変更」ボタン52と「担当者変更」ボタン53と、これらが重なって表示されるレイアウト6としており、これに対し、図21に示す色カスタマイズ操作画面38では、これら「部品」毎にカラーセレクタ表示エリア19/20が設けられている。
カラーセレクタ表示エリア191には、図20での部品「重要度変更」ボタン51の要素「文字」の文字色に対するカラーセレクタ19aと、同じく要素「背景」の背景色に対するカラーセレクタ19bと、同じく要素「枠線」の枠線色に対するカラーセレクタ19cとが設けられ、カラーセレクタ表示エリア192には、図20での部品「期限変更」ボタン52の要素「文字」の文字色に対するカラーセレクタ19aと、同じく要素「背景」の背景色に対するカラーセレクタ19bと、同じく要素「枠線」の枠線色に対するカラーセレクタ19cとが設けられ、カラーセレクタ表示エリア193には、図20での部品「担当者変更」ボタン53の要素「文字」の文字色に対するカラーセレクタ19aと、同じく要素「背景」の背景色に対するカラーセレクタ19bと、同じく要素「枠線」の枠線色に対するカラーセレクタ19cとが設けられている。
これらカラーセレクタ19a〜19cは、図8におけるカラーセレクタ19a〜19cと同じ機能を備えている。また、各セレクタ表示エリア19では、「部品」が有していない「要素」のカラーセレクタは表示されない。例えば、部品「担当者変更」ボタン53(図20)には、枠線がない場合には、カラーセレクタ表示エリア193では、枠線色に対するカラーセレクタ19cが設けられない。
また、カラーセレクタ表示エリア20には、図20での「部品」であるレイアウト6の要素「文字」の文字色に対するカラーセレクタ20aと、同じく要素「背景」の背景色に対するカラーセレクタ20bと、同じく要素「枠線」の枠線色に対するカラーセレクタ20cとが設けられており、このカラーセレクタ20a〜20cは図8におけるカラーセレクタ20a〜20cと同じ機能を有している。このカラーセレクタ表示エリア20でも、レイアウト6が有していない「要素」のカラーセレクタは表示されない。例えば、レイアウト3(図20)には、文字がない場合には、カラーセレクタ表示エリア20では、文字色に対するカラーセレクタ20aが設けられない。
なお、図20におけるレイアウト6は、操作ボタン51〜53に共通のものであるから、即ち、これら操作ボタン51〜53は同じレイアウト6に重ねて表示されているものであるから、図21に示す色カスタマイズ操作画面38では、このレイアウト6のカラーセレクタ表示エリア20は1つであって、これら操作ボタン51〜53のカラーセレクタ19a〜19cの後に配置されて設けられている。
これに対し、操作ボタン51〜53に対するレイアウトが異なる場合には、それらのレイアウトのカラーセレクタ表示エリア20はこれに関係する「部品」(ここでは、操作ボタン)のすぐ後に配置される。例えば、「重要度変更」ボタン51と「期限変更」ボタン52とが同じレイアウト61に重なって表示され、「担当者変更」ボタン53が別のレイアウト62に重なって表示されているものとすると、図21に示す色カスタマイズ操作画面38では、「重要度変更」ボタン51と「期限変更」ボタン52とのカラーセレクタ表示エリア191,192の次にレイアウト61のカラーセレクタ表示エリア201が配置され、「担当者変更」ボタン53のカラーセレクタ表示エリア193の次にレイアウト62のカラーセレクタ表示エリア202が配置される。
このように、複数の「部品」とこれが重なって表示されている他の部品とのカラーセレクタ表示エリア/19,20との配置関係が設定されていることにより、これら「部品」とこれが重なって表示される他の「部品」とのコンテンツ画面2での関係を色カスタマイズ操作画面38でも確認することができ、それら「部品」のカスタマイズする色の選択が容易となる。
図21に示す色カスタマイズ操作画面38では、カラーセレクタ表示エリア191〜193で「要素」のカラーセレクタ19a〜19cのいずれかやカラーセレクタ表示エリア20で「要素」のカラーセレクタ20a〜20cのいずれかを選択することにより、図8に示す色カスタマイズ操作画面17と同様、図3のステップS107〜S116の処理が行なわれ、各「部品」での選択した「要素」の色カスタマイズが行なわれることになる。
以上のように、複数の「部品」を同時に色カスタマイズの対象として指定することができ、同じ色カスタマイズ操作画面で夫々の「部品」の「要素」を所望とする色に、ユーザが視認し易い状態で、カスタマイズすることが可能となる。