まず、本発明の概念について説明する。
パソコンなどの端末装置の表示画面に表示されるコンテンツは各部品から構成されるものであって、各部品はその構成要素からなるものである。
図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によると、部品「ボタン」,「レイアウト」,「テキストボックス」,「チェックボックス」,「ラジオボタン」,「タブパネル」は、「文字/記号」や「文字/記号の縁取り」,「背景」,「枠線」,「影」の要素から成るが、これらには、全て「非活性」の状態が存在する。部品「レイアウト」は、「文字/記号」や「文字/記号の縁取り」,「背景」,「枠線」,「影」の要素から成るが、押下するものではないから、これら要素は不活性の状態も、また、選択の状態も存在しない。部品「テキスト」は、「文字/記号」と「文字/記号の縁取り」の要素から成るものであるが、これら要素には、不活性の状態が存在する。また、「タブパネル」は、「文字/記号」,「文字/記号の縁取り」,「背景」,「枠線」,「影」の要素からなり、これら要素には、「非活性」の状態とともに、「選択」可能な状態も存在する。
以上のことを基に、以下、本発明の第1の実施形態を図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の操作で押下されると、色のカスタマイズモードがキャンセルされ、図4に示すコンテンツ画面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で表示される全てのカラーセレクタ19a〜19c,20a〜20cの「クリア」ボタン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と、同じく要素「ボタンの枠線」5cの枠線色を設定するためのカラーセレクタ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を指定して、カラーパレット30cで所望の濃度で色相の色を選択操作することにより、グラデーションバー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以上でなければならないという規定があり、この第1の実施形態では、この規定を満たさない色が「単色」タブ29や「グラデーション」タブ30のカラーパレットで表示される。
図11(a)は、「単色」タブ29を例として、要素「文字/記号」とこれに接する他の要素に対するカラーパレット29cの表示状態の一具体例を示す図であって、これら「要素」間で輝度コントラスト比が4.5:1未満の色に対して、「×」マーク31aが示され、この色を選択できないようにしている。
図9に示す色カスタマイズ操作画面17aでは、選択された「期限変更」ボタン52(図6)でのボタンの文字5a(図4)のカラーセレクタ19aにおいて、その「単色」タブ29のカラーパレット29cで「×」マーク31aが付された色が示されているが、これは、この「期限変更」ボタン52において、文字5aとこれが重なって表示される文字の背景5bとにおいて、この文字の背景5bの色に対し、輝度コントラスト比が4.5:1未満となる文字5aの色に対して「×」マーク31aが付されているものである。従って、図9に示す色カスタマイズ操作画面17aでは、カラーパレット29cで「×」マーク31aが付された色は、選択できないものである。このカラーパレット29cで「×」マーク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のカラーパレット29cで「/」マーク31bが付された色が示されているが、これは、この「期限変更」ボタン52において、枠線5cとこれに接して表示される文字の背景5bとにおいて、この文字の背景5bの色に対し、輝度コントラスト比が1.7:1未満となる枠線5cの色に対して「/」マーク31bが付されているものである。従って、図9に示す色カスタマイズ操作画面17aでは、ボタン枠線色のカラーセレクタ19cのカラーパレット29cで「/」マーク31bが付された色は、選択が推奨されないものである。このカラーパレット29cで「/」マーク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が付加されている状態となることもある。しかし、かかる状態はそのまま維持されることになり、カラーパレット29cでこの色に「×」マーク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”)。
ここで、部品「期間変更」ボタン52の1つの要素である「ボタンの文字」5aの色が設定されると、色カスタマイズ操作画面17aに表示されている全てのカラーセレクタのカラーパレットにおいて、選択できない色に「×」マーク31aが、選択を進めない色に「/」マーク31bが夫々付加される。即ち、「ボタンの文字」5bの色が設定されると、これに接する「ボタンの背景」5bについて選択できない色が計算可能となるため、対象となる色に「×」マーク31aが付加される。「ボタンの文字」5bについて選択可能な色が決まると、これに接する「ボタンの枠線」5cについて選択を勧めない色が計算可能となるため、対象となる色に「/」マーク31bが付加される。このように、接する「要素」順に順次計算を行なうことにより、1つの色が設定されると、全てのカラーパレットにおいて、「×」マーク31a及び「/」マーク31bを夫々付加することが可能となる。ここで、例えば、「ボタンの背景」5bについて選択可能な色の中からどの色を選択するかによって、「ボタンの枠線」5cにおける選択を勧めない色が変わる場合がある。この第1の実施形態では、「ボタンの背景」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(図8)の操作で色カスタマイズされる「部品」を表わす押下部品エリア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)が色カスタマイズする対象として選択されたものであるが、この第1の実施形態では、複数の部品を色カスタマイズの対象として選択するようにすることもできる。以下、これについて説明する。
先に説明したように、図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の処理が行なわれ、各「部品」での選択した「要素」の色カスタマイズが行なわれることになる。
以上のように、複数の「部品」を同時に色カスタマイズの対象として指定することができ、同じ色カスタマイズ操作画面で夫々の「部品」の「要素」を所望とする色に、ユーザが視認し易い状態で、カスタマイズすることが可能となる。
次に、本発明によるコンテンツ画面の色カスタマイズ方法の第2の実施形態について説明する。
この第2の実施形態においても、先の第1の実施形態と同様にして得られた図8に示す色カスタマイズ操作画面8において、カラーセレクタ19a〜19c,20a〜20cのうちの所定のカラーセレクタ19/20の「選択色の候補表示」ボタン22がカーソル11を用いて押下操作されると、この「選択色の候補表示」ボタン22が押下操作されたカラーセレクタ19/20が、図9に示すように、展開した状態となるが、この第2の実施形態でのカラーセレクタは先の第2の実施形態でのカラーセレクタ19/20とは構成が異なるものである。
図22は本発明によるコンテンツ画面の色カスタマイズ方法の第2の実施形態における図8に示すような色カスタマイズ操作画面で展開されるカラーセレクタの一具体例を示す図であって、21cは色相名、40はカラーセレクタ、41はグレースケール、41aはグレーセル、42はカラーパレット、43は色セル、43aは中心位置色セル、44は色相指定部、44aは色相表示バー、44bは色相指定スライダ、44cは色相指定範囲、44cUは上側境界線、44cDは下側境界線、44dは選択色相値表示ボックス、45は輝度指定部、45aは輝度表示バー、45bは輝度指定スライダ、45cは輝度指定範囲、45cUは上側境界線、45cDは下側境界線、45dは選択輝度値表示ボックス、46は彩度指定部、46aは彩度表示バー、46bは彩度指定スライダ、46cは選択彩度値表示ボックス、47は透明度指定部、47aは透明度表示バー、47bは透明度指定スライダ、47cは選択透明度表示ボックス、48は中心セル枠、49は選択セル枠であり、図10に対応する部分には同一符号をつけて重複する説明を省略する。
同図において、展開されたカラーセレクタ40は「単色」タブ29と「グラデーション」タブ30とを有しており、ここでは、「単色」タブ29が選択されているものとする。
この「単色」タブ29では、グレースケール41と、物品の要素の表示色を表示するためのカラーパレット42と、カラーパレット42での色相を指定するための色相指定部44と、カラーパレット42での明るさ(ここでは、輝度とするが、明度でもよい)を指定するための輝度指定部45と、カラーパレット42での彩度を指定するための彩度指定部46と、物品の要素の透明度を指定するための透明度指定部47とが設けられている。
グレースケール41は、物品の要素をグレー(灰色)で表示するためのものであって、濃度が異なるグレーを表わすグレーセル41aが、例えば、5個横方向に配列されてなり、かかるグレーセル41aの配設の一方の端側(例えば、左端側)から順にグレーセル41aで表示されるグレーの濃度が順次濃くなっていき、これにより、グレーのスケールが表わされている。かかるグレースケール41で所望とするグレーセル41aをカーソル11で指定すると、このカラーセレクタ40に該当する物品の要素、例えば、図4に示すコンテンツ画面2での「期間変更」ボタン52の要素「文字」5aがグレースケール41で選択されたグレーセル41aで表わされるグレーで表示されることになる。なお、カーソル11で指定されたグレーセル41aには、これを囲むようにして、選択セル枠49が付される。
カラーパレット42は、図10に示す第1の実施遺体でのカラーパレット29cと同様、縦横5個ずつ色セル43がマトリックス上に配列された色セル43からなり、縦軸を色相軸として、同じ横列の5個の色セル43は同じ色相の色を表わして、上側の横列から順に表示される色の色相が異なっている。また、このカラーパレット42で横軸を輝度軸として、同じ縦列の5個の色セル43は同じ輝度の色を表わして、左側の縦列から順に表示される色の輝度が異なっている。
色相指定部44は、カラーパレット42の色セル43で表わされる色の色相を変化させて所望の色相の色を指定できるようにするものであって、縦方向にその位置が色相の値(色相値H)を表わす色相表示バー44aと、この色相表示バー44aでの色相を指定するための色相指定スライダ44bとからなり、この色相指定スライダ44bをカーソル11の操作でもって色相表示バー44aに沿って移動させることにより、カラーパレット42での色セル43で表示される色の色相を変化させることができる。
色相表示バー44aには、色相指定スライダ44bの指示点(色相指定スライダ44bが、図示するように、三角形状をなすときには、色相表示バー44a上のその頂点の位置)を中心点として、この中心点から上下等しい幅を持つ色相指定範囲44cが設定され、この色相指定範囲44c内の等間隔の5個の色相値Hの色相の色がカラーパレット42の縦列の色セル43夫々毎に表示される。即ち、この色相指定範囲44cの上側境界線44cUの色相値Hの色相の色がカラーパレット42の最も上側の横列の色セル43で表示され、この色相指定範囲44cの下側境界線44cDの色相Hの色相の色がカラーパレット42の最も下側の横列の色セル43で表示され、これら上側,下側の色セル43の横列間の3つの横列の色セル43には、色相指定範囲44cの上側境界線44cU,下側境界線44cD間の順次の色相値Hの色相の色が表示される。
色相は数値(色相値H)で表わされており、ここでは、「0」〜「255」の整数値を取るものとして、色相表示バー44aの下端の色相値Hを「0」とし、上端の色相値Hを「255」とする。色相指定範囲44cでは、色相指定スライダ44bの指示点での色相値Hよりも、例えば、「20」だけ値が小さい色相値Hの位置に下側境界線44cDが設定され、色相指定スライダ44bの指示点での色相値Hよりも、例えば、「20」だけ値が大きい色相値Hの位置に上側境界線44cUが設定されている。色相指定スライダ44bが色相表示バー44aに沿って移動すると、下側境界線44cD,上側境界線44cUも同様に移動し、色相指定範囲44cが、色相指定スライダ44bの指示点を中心とし、下側境界線44cD,上側境界線44cUの間隔を一定に保って移動する。
カラーパレット42での5個の色セル43の横列では、夫々毎に色相表示バー44aでの色相指定範囲44c内の色相値Hが「10」ずつ異なる5個の色相の色が設定されるものであり、例えば、最も上側の色セル43の横列で色相値Hが「195」の色相の色が表示されるとすると、それよりも下側に順に配列されている4個の色セル43の横列では夫々、色相値Hが「185」,「175」,「165」,「155」の色相の色が表示されることになる。
なお、このカラーパレット42の中心位置に位置する色セル(即ち、中心位置色セル)43aは、色相表示バー44aでの色相指定スライダ44bで指定される色相値H(色相指定スライダ44bが、図示するように、三角形状をなすときには、色相表示バー44a上のその頂点が位置する色相値H)の色相の色を表わしているものであり、このため、この中心位置色セル43aに、これを囲むようにして、中心セル枠48が設けられている。
また、色相表示バー44aの上側には、選択色相値表示ボックス44dが設けられており、これに色相表示バー44aでの色相指定スライダ44bで指定される色相Hの値(即ち、カラーパレット42の中心位置色セル43aで表示される色相Hの値:ここでは、値「175」)が表示される。
以上のことからして、カーソル11の操作により、色相指定部44で色相表示バー44a上で色相指定スライダ44bを上下に移動させると、カラーパレット42での色セル43の各横列では、この移動とともに色相値Hが「1」ずつ変化するようにして、色相が変化していくことになる。また、これとともに、選択色相値表示ボックス44dで表示される色相値Hも「1」ずつ変化していくことになる。
輝度指定部45は、カラーパレット42の色セル43で表わされる色やグレースケール41のグレーセル41aで表わされるグレーの輝度を変化させて所望の輝度の色やグレーを指定できるようにするものであって、横方向にその位置が輝度の値(輝度値L)を表わす輝度表示バー45aと、この輝度表示バー45aでの色の輝度値Lを指定するための輝度指定スライダ45bとからなり、この輝度指定スライダ45bをカーソル11の操作でもって輝度表示バー45aに沿って移動させることにより、カラーパレット42での色セル43で表示される色の輝度を変化させることができる。これとともに、グレースケール41でのグレーセルで表示されるグレーの輝度(濃さ)も変化する。
輝度表示バー45aには、輝度指定スライダ45bの指示点(輝度指定スライダ45bが、図示するように、三角形状をなすときには、輝度表示バー45a上のその頂点の位置)を中心点として、この中心点を中心とする左右等しい幅を持つ輝度指定範囲45cが設定され、この輝度指定範囲45c内の5個の等間隔の輝度値Lの輝度がカラーパレット42の横列の色セル43夫々毎に設定される。即ち、この輝度指定範囲45cの右側境界線45cU側の輝度値Lの輝度がカラーパレット42の最も右側の縦列の色セル43に設定され、この輝度指定範囲45cの左側境界線44cD側の輝度値Lの輝度がカラーパレット42の最も左側の縦列の色セルに設定され、これら右側,左側の色セル43の縦列間の3つの縦列の色セル43には、輝度指定範囲45cの右側境界線45cU,左側境界線45cD間の順次の輝度値Lの輝度が設定される。
輝度は数値(輝度値L)で表わされており、ここでは、「0」〜「255」の整数値を取るものとして、輝度表示バー45aの左端の輝度値Lを「0」とし、右端の輝度値Lを「255」とする。輝度指定範囲45cでは、輝度指定スライダ45bの指示点での輝度値Lよりも、例えば、「20」だけ値が小さい輝度値Lの位置に左側境界線45cDが設定され、輝度指定スライダ45bの指示点での輝度値Lよりも、例えば、「20」だけ値が大きい輝度値Lの位置に右側境界線45cUが設定されている。輝度指定スライダ45bが輝度表示バー45aに沿って移動すると、左側境界線45cD,右側境界線45cUも同様に移動し、輝度指定範囲45cが、輝度指定スライダ45bの指示点を中心とし、左側境界線45cD,右側境界線45cUの間隔を一定に保って移動する。
カラーパレット42での5個の色セル43の縦列では、輝度表示バー45aでの輝度指定範囲45c内の輝度値が「10」ずつ異なる5個の輝度が設定されるものであり、例えば、最も右側の色セル43の縦列で輝度値Lが「194」の輝度の色が表示されるとすると、それよりも左側に順に配列されている4個の色セル43の縦列では夫々、輝度値L「184」,「174」,「164」,「155」の輝度の色が表示されることになる。
なお、このカラーパレット42の中心セル枠48が設けられた中心位置色セル43aは、輝度表示バー45aでの輝度指定スライダ45bで指定される輝度値L(輝度指定スライダ45bが、図示するように、三角形状をなすときには、輝度表示バー45a上のその頂点が位置する輝度値L)の輝度の色を表わしているものである。
また、輝度表示バー45aの左側には、選択輝度値表示ボックス45dが設けられており、これに輝度表示バー45aでの輝度指定スライダ45bで指定される輝度値L(即ち、カラーパレット42の中心位置色セル43aで表示される輝度値L:ここでは、値「174」)が表示される。
以上のことからして、カーソル11の操作により、輝度指定部45で輝度表示バー45a上で輝度指定スライダ45bを左右に移動させると、カラーパレット42での色セル43の各縦列では、この移動とともに輝度値Lが「1」ずつ変化するようにして、輝度が変化していくことになる。また、これとともに、選択輝度値表示ボックス45dで表示される輝度値Lも「1」ずつ変化していくことになる。
なお、選択色相値表示ボックス44dで表示される色相値H及び選択輝度値表示ボックス45dで表示される輝度値Lは、カラーパレット42で中心セル枠48が付された中心位置色セル43aの色相値H,輝度値Lを表わしてもいる。
彩度指定部46は、カラーパレット42の色セル43で表わされる色の彩度を変化させて所望の彩度を指定できるようにするものであって、横方向にその位置が彩度の値(彩度値S)を表わす彩度表示バー46aと、この彩度表示バー46aでの彩度値Sを指定するための彩度指定スライダ46bとからなり、この彩度指定スライダ46bをカーソル11の操作でもって彩度表示バー46aに沿って移動させることにより、カラーパレット42での色セル43で表示される色の彩度を変化させることができる。
彩度指定スライダ46bが、図示するように、三角形状をなすときには、彩度表示バー46a上のその頂点の位置の彩度値Sがこの彩度指定スライダ46bによって指定される彩度であり、カラーパレット42の全ての色セル43に表示される色の彩度がこの指定された彩度値Sの彩度となる。
彩度は数値(彩度値S)で表わされており、ここでは、0−255の値を取るものとして、彩度表示バー46aの左端の彩度Sを値「0」とし、右端の彩度Sを「255」とする。カラーパレット42での全ての色セル43の彩度は、彩度指定スライダ46bで指定された彩度値Sの彩度となる。
また、彩度表示バー46aの左側には、選択彩度値表示ボックス46cが設けられており、これに彩度表示バー46aでの彩度指定スライダ46bで指定される彩度値Sが表示される。ここでは、彩度表示バー46aで彩度指定スライダ46bによって値「236」の彩度値Sが指定されているものとしており、これにより、選択彩度値表示ボックス46cには、この値「236」の彩度値Sが表示されている。
以上のことからして、カーソル11の操作により、彩度指定部46において、彩度表示バー46a上で彩度指定スライダ46bを左右に移動させると、カラーパレット42での全ての色セル43では、この移動とともに彩度値Sが「1」ずつ変化するようにして、彩度が同時に変化していくことになる。また、これとともに、選択彩度値表示ボックス46cで表示される彩度値Sも「1」ずつ変化していくことになる。
グレースケール41のグレーセル41aやカラーパレット42の色セル43のいずれか1つを、カーソル11で押下操作することにより、選択することができ、選択されたグレーセル41aまたは色セル43に選択セル枠49が付される。また、これとともに、選択されたグレーセル41aで表示されるグレー、もしくは選択された色セル43で表示される色相,輝度,彩度の色が「選択色表示」欄21の設定色表示部21aで表示されることなる。選択セル枠49が付されたグレーセル41aや色セル43での表示とともに、設定色表示部21aでの表示によっても、このカラーセレクタ40に該当する物品の要素に付される色(グレーも含む)を確認することができる。
透明度指定部47は、物品の要素の色の透明度α(%)を指定できるようにするものであって、横方向にその位置が透明度αを表わす透明度表示バー47aと、この透明度表示バー47aでの透明度αを指定するための透明度指定スライダ47bとからなり、この透明度指定スライダ47bをカーソル11の操作でもって透明度表示バー47aに沿って移動させることにより、変化させることができる。
透明度指定スライダ47bが、図示するように、三角形状をなすときには、透明度表示バー47a上のその頂点の位置の透明度αがこの透明度指定スライダ47bによって指定される透明度αであり、この色の透明度αは、「選択色表示」欄21の設定色表示部21aで表示される色に表われる。
透明度αは数値で表わされており、ここでは、0〜100(%)の値を取るものとして、透明度表示バー47aの左端の透明度αを「0(%)」とし、右端の透明度αを「100(%)」とする。設定色表示部21aで表示される色の透明度αは、透明度指定スライダ47bで指定された透明度表示バー47aでの値となる。ここで、透明度α=0%は全く透過しない状態にあることをいい、透過度α=100%は最大に透過する状態をいう。
また、透明度表示バー47aの左側には、選択透明度表示ボックス47cが設けられており、これに透明度表示バー47aでの透明度指定スライダ47bで指定される透明度αの値が表示される。ここでは、透明度表示バー47aで透明度指定スライダ47bによって値「50(%)」の透明度αが指定されているものとしており、これにより、選択透明度表示ボックス47cには、この値「50(%)」が表示されている。
以上のことからして、カーソル11の操作により、透明度指定部47において、透明度表示バー47a上で透明度指定スライダ47bを左右に移動させると、カラーパレット42で選択されて「選択色表示」欄21の設定色表示部21aで表示される色の透明度αの値が「1(%)」ずつ変化するようにして、透明度αが変化していくことになる。また、これとともに、選択透明度表示ボックス47cで表示される透明度αの値も「1(%)」ずつ変化していくことになる。
なお、ユーザは該当する物品の要素に表示希望の色の種類(色相)が分かっており、その名称(例えば、「808080」とする)をキーボードで入力すると、「選択色表示」欄21での色の名称21cが現在の「#A708EE」から入力されて色の名称「#808080」に変更され、これとともに、色の名称「#808080」の色相値Hの色がカラーパレット42で表示されるように、色相指定部44で色相指定スライダ44bが色相表示バー44aに沿って移動し、これに伴って、「選択色表示」欄21の設定色表示部21aでの色が入力された色の名称の色に変更される。この場合、輝度値L,彩度値S,透明度αは変更されない。
以上のカラーセレクタ40によると、物品の要素で表示する色を、色相指定部44の色相表示バー44aでの色相指定スライダ44bの位置に応じた色相指定範囲44c内の複数の色相と、輝度指定部45の輝度表示バー45aでの輝度指定スライダ45bの位置に応じた輝度指定範囲44c内の複数の輝度とに応じた複数の色が指定されてカラーパレット42として表示され、その中から所望とする色相,輝度の色を選択することができるから、色相指定スライダ44bで色相表示バー44aから色相を選択し、輝度指定スライダ45bで輝度表示バー45aから輝度を選択して物品の要素の色を選択する方法に比べ、所望とする色相,輝度の色を的確かつ簡単に、しかも、迅速に選択することが可能となる。
図23はこの「選択色表示」欄21の設定色表示部21aの表示状態の一具体例を示す図であって、50は対象要素色表示エリア、51は背景色表示エリアである。
同図において、設定色表示部21aでは、カラーセレクタ40に該当する物品の要素を対象要素として、周辺部にこの対象要素の背景の色(背景色)が表示される背景色表示エリア51が設けられ、この背景色表示エリア51の内側が対象要素の色(対象要素色)を表示する対象要素色表示エリア50が設けられている。背景での対象要素が重なった部分に文字や記号模様などのパターンが存在する場合には、かかるパータンの色が対象要素色表示エリア50に重なっている。
図23(a)は透明度指定部47で透明度α=0%が指定(選択)されたときの設定色表示部21aの表示状態を示すものであって、この場合には、対象要素色表示エリア50で表示される色は透けておらず、グレースケール41やカラーパレット42で選択された対象要素色(グレーを含む)のみが表示され、背景色(以下、上記のパターンの色も含む)は表示されない。
図23(b)は透明度指定部47で、例えば、透明度α=50%が指定(選択)されたときの設定色表示部21aの表示状態を示すものであって、この場合には、対象要素色表示エリア50で表示される対象要素色は透けたものとなり、対象要素色表示エリア50では、対象要素色を通して、背景色がこの対象要素色の透明度αに応じて度合いで見えることになる。このため、対象要素色表示エリア50で表示される色は、グレースケール41やカラーセレクタ42で選択された色(グレーを含む)とは異なる色、即ち、この選択された色(グレーを含む)とこの透明度αに応じた度合いの背景色とに応じた色が表示されることになる。また、背景色表示エリア51での背景色を持つ背景に文字や記号,模様などのパターンが描かれている場合には、かかるパターンも対象要素色表示エリア50でこの透過度αに応じた強度(濃さ)で表示されることになる。
このように、透明度指定部47で透明度表示バー47aでの透明度指定スライダ47bの操作により、該当する物品の要素の色(グレーも含む)の透明度αを変化させることができ、かかる透明度αの設定状態が対象要素色表示エリア50で確認することができるから、かかる物品の要素を直接表示させる図4に示すコンテンツ画面2に戻すことなく、かかる要素の透明度に応じた表示状態を確認することができて、所望とする透明度を容易にかつ確実に設定することが可能となる。
また、グレースケール41やカラーパレット42で対象要素の色(グレーも含む)を選択するとしても、背景との対比で選択されるものではなく、背景との関係も考慮することが好ましい場合もある。例えば、上記のようなパターンが描かれた背景も透して見えるような表示状態とする必要がある場合もある。このような場合、この具体例では、透明度指定部47の操作により、対象要素色表示エリア50で対象要素の色の透明度αを変化させることができ、これにより、かかる対象要素の背景が透して見えるようにしているから、ユーザがかかる要素の透明度を確認しながら変化させることができて、所望とする透明度を容易に確実に設定することが可能となる。しかも、設定色表示部21aでは、背景色表示エリア51が設けられて対象要素の背景色も同時に表示されているから、かかる背景色との対比で対象要素が認識しにくくならない程度の透明度αを設定することが容易となる。
物品の各要素について、図22に示すカラーセレクタ40で色の設定がなされ、図18に示すように、「OK」ボタン26が押下され、これに伴って表示される図19での選択画面32を操作すると、色カストマイズ処理が終了して図4に示すコンテンツ画面2の表示状態に戻ることになるが、図4に示すコンテンツ画面2の物品の要素について、再度色カスタマイズするために、図8に示す色カスタマイズ操作画面17を表示させ、カラーセクタ表示エリア18で所望の物品の要素の図22に示すカラーセレクタ40を展開したときには、この要素で既に色が設定(選択)されている場合には、デフォルトとして、グレースケール41やカラーパレット42,色相指定部44,輝度指定部45,彩度指定部46,透明度指定部47は前回の色カスタマイズ処理がなされたときの状態が設定されることになり、このため、カラーパレット42では、前回設定された色相,輝度の色セル43を含む5×5個の色セル43が表示されて、この設定されている色の色セル53に選択セル枠49が付されており、「選択色表示」欄21の設定色表示部21aでは、前回設定されて対象要素の色が設定されている。
図24は本発明によるコンテンツ画面の色カスタマイズ方法の第2の実施形態における色カスタマイズ操作画面で展開されるカラーセレクタの他の具体例を示す図であって、40aはカラーセレクタ、44b’は色相指定スライダ、44b1はベーススライダ、44b2は下側境界変更用スライダ、44b3は上側境界変更用スライダ、44d1は下側境界選択色相値表示ボックス、44d2は上側境界選択色相値表示ボックス、45b’は輝度指定スライダ、45b1はベーススライダ、45b2は下(左)側境界変更用スライダ、45b3は上(右)側境界変更用スライダ、45d1は下(左)側境界選択輝度値表示ボックス、45d2は上(右)側境界選択輝度値表示ボックスであり、図23に対応する部部には同一符号をつけて重複する説明を省略する。
同図において、この具体例としてのカラーセレクタ40aが図22に示すカラーセレクタ40と異なる点は、色相指定部44と輝度指定部45である。これら以外の点は、図22に示すカラーセレクタ40と同様である。
色相指定部44では、図22に示すカラーセレクタ40の色相表示バー44aの一点を指示する色相指定スライダ44bに代えて、3個のスライダ部、即ち、ベーススライダ44b1と下側境界変更用スライダ44b2と上側境界変更用スライダ44b3とからなる色相指定スライダ44b’を用いるものである。この色相指定スライダ44b’では、下側境界変更用スライダ44b2が色相表示バー44aでの色相指定範囲44cの下側境界線44cDを設定し、上側境界変更用スライダ44b3がこの色相指定範囲44cの上側境界線44cUを設定するものであり、これら下側境界変更用スライダ44b2と上側境界変更用スライダ44b3とがベーススライダ44b1に設けられている。
そして、図25(a)の(イ)に示す状態から同図(a)の(ロ)で示すように、下側境界変更用スライダ44b2をカーソル11を用いた操作によって上下方向に移動させると、色相指定範囲44cの下側境界線44cDが移動し、これによって色相指定範囲44cが色相表示バー44a中で拡大・縮小する。同様に、上側境界変更用スライダ44b3をカーソル11を用いた操作によって上下方向に移動させると、色相指定範囲44cの上側境界線44cUが移動し、これによって色相指定範囲44cが色相表示バー44a中で拡大・縮小する。
ベーススライダ44b1は、下側境界変更用スライダ44b2や上側境界変更用スライダ44b3の移動にかかわらず、これら下側境界変更用スライダ44b2や上側境界変更用スライダ44b3を保持しているものであって、下側境界変更用スライダ44b2や上側境界変更用スライダ44b3の移動とともに、即ち、色相指定範囲44cの拡大・縮小に伴って、図25(a)の(ロ)に示すように、その長さが拡大・縮小する。
また、ベーススライダ44b1はカーソル11を用いた操作によって上下方向に移動させることができ、このとき、図25(b)の(イ),(ロ)で示すように、これら下側境界変更用スライダ44b2や上側境界変更用スライダ44b3はベーススライダ44b1の同じ位置に保持されていて、色相指定範囲44cが、その上下方向の長さを一定に保ったまま、色相表示バー44aに沿って上下移動する。
ここで、カラーパレット42には、この色相指定範囲44cの上側境界線44cUから下側境界線44cDまでの等間隔の5個の色相値Hに夫々該当する5個の色セル43の横列が設定される。最上位の色セル43の横列では、色相指定範囲44cの上側境界線44cUの色相値Hの色相が表示され、最下位の色セル43の横列では、色相指定範囲44cの下側境界線44cDの色相値Hの色相が表示される。最上位の色セル43の横列と最下位の色セル43の横列との間の3個の色セル43の横列では夫々、上側境界線44cUの色相値Hと下側境界線44cDの色相値Hとの間の等間隔で異なる色相値Hの色相が表示される。最上位の色セル43の横列で表示される上側境界線44cUの色相の色相値Hを「195」、最下位の色セル43の横列で表示される下側境界線44cDの色相の色相値を「155」とすると、上から2番目の色セル43の横列で表示される色相の色相値Hは「185」、上から3番目の色セル43の横列で表示される色相の色相値Hは「175」、上から4番目の色セル43の横列で表示される色相の色相値Hは「165」となる。
また、この具体例では、図22に示すカラーセレクタ40の色相指定部44での選択色相値表示ボックス44dに代えて、2つのボックス、即ち、下側境界選択色相値表示ボックス44d1と上側境界選択色相値表示ボックス44d2とが設けられており、下側境界選択色相値表示ボックス44d1では、色相指定範囲44cの上側境界線44cUの色相値H(上記の例では、「155」)が表示され、上側境界選択色相値表示ボックス44d2では、色相指定範囲44cの下側境界線44cDの色相値H(上記の例では、「195」)が表示される。これにより、色相指定範囲44cでの色相値H、従って、カラーパレット42で表示される色相の色相値Hを確認することを可能にする。
輝度指定部45も同様であって、図22に示すカラーセレクタ40の輝度表示バー45aの一点を指示する輝度指定スライダ45bに代えて、3個のスライダ部、即ち、ベーススライダ45b1と下(左)側境界変更用スライダ45b2と上(右)側境界変更用スライダ45b3とからなる輝度指定スライダ45b’を用いるものである。この輝度指定スライダ45b’では、下側境界変更用スライダ45b2が輝度表示バー45aでの輝度指定範囲45cの下側境界線45cDを設定し、上側境界変更用スライダ45b3がこの輝度指定範囲45cの上側境界線45cUを設定するものであり、これら下側境界変更用スライダ45b2と上側境界変更用スライダ45b3とがベーススライダ45b1に設けられている。
そして、色相指定スライダ44b’と同様、図25(a)の(イ)に示す状態から同図(a)の(ロ)で示すように、下側境界変更用スライダ45b2をカーソル11を用いた操作によって左右方向に移動させると、輝度指定範囲45cの下側境界線45cDが移動し、これによって輝度指定範囲45cが輝度表示バー45a中で拡大・縮小する。同様に、上側境界変更用スライダ45b3をカーソル11を用いた操作によって左右方向に移動させると、輝度指定範囲45cの上側境界線45cUが移動し、これによって輝度指定範囲45cが輝度表示バー45a中で拡大・縮小する。
ベーススライダ45b1は、下側境界変更用スライダ45b2や上側境界変更用スライダ45b3の移動にかかわらず、これら下側境界変更用スライダ45b2や上側境界変更用スライダ45b3を保持しているものであって、下側境界変更用スライダ45b2や上側境界変更用スライダ45b3の移動とともに、即ち、輝度指定範囲45cの拡大・縮小に伴って、図25(a)の(ロ)に示すように、その長さが拡大・縮小する。
また、ベーススライダ45b1はカーソル11を用いた操作によって左右方向に移動させることができ、このとき、図25(b)の(イ),(ロ)で示すように、これら下側境界変更用スライダ45b2や上側境界変更用スライダ45b3はベーススライダ45b1の同じ位置に保持されていて、輝度指定範囲45cが、その左右方向の長さを一定に保ったまま、輝度表示バー45aに沿って左右移動する。
ここで、カラーパレット42には、この輝度指定範囲45cの上側境界線45cUから下側境界線45cDまでの等間隔の5個の輝度値Lに夫々該当する5個の色セル43の縦列が設定される。同じ縦列の色セル43(夫々の色セル43では、異なる色相値Hの色相が表示される)では、同じ輝度値の輝度が設定される。最も右側の色セル43の縦列では、輝度指定範囲45cの上側境界線45cUの輝度値Lの輝度が設定され、最も左側の色セル43の横列では、輝度指定範囲45cの下側境界線45cDの輝度値Lの輝度が表示される。最も右側の色セル43の縦列と最も左側の色セル43の縦列との間の3個の色セル43の縦列では夫々、上側境界線45cUの輝度値Lと下側境界線45cDの輝度値Lとの間の等間隔で異なる輝度値Lの輝度が表示される。最も右側の色セル43の縦列で表示される上側境界線45cUの輝度の輝度値Lを「194」、最も左側の色セル43の縦列で表示される下側境界線45cDの輝度の輝度値を「154」とすると、上から2番目の色セル43の縦列で表示される輝度の輝度値Lは「184」、上から3番目の色セル43の縦列で表示される輝度の輝度値Lは「174」、上から4番目の色セル43の縦列で表示される輝度の輝度値Lは「164」となる。
また、この具体例では、図22に示すカラーセレクタ40の輝度指定部45での選択輝度値表示ボックス45dに代えて、2つのボックス、即ち、下(左)側境界選択輝度値表示ボックス45d1と上(右)側境界選択輝度値表示ボックス45d2とが設けられており、下側境界選択輝度値表示ボックス45d1では、輝度指定範囲45cの上側境界線45cUの輝度値L(上記の例では、「154」)が表示され、上側境界選択輝度値表示ボックス45d2では、輝度指定範囲45cの下側境界線45cDの輝度値L(上記の例では、「194」)が表示される。これにより、輝度指定範囲45cでの輝度値L、従って、カラーパレット42で表示される輝度の輝度値Lを確認することを可能にする。
図26は本発明によるコンテンツ画面の色カスタマイズ方法の第2の実施形態における色カスタマイズ処理がなされていないときの図22に示すカラーセレクタ40での「単色」タブ29の表示状態の一具体例を示す図であって、21dはメッセージ、40bはカラーセレクタであり、図22に対応する部分には同一符号をつけて重複する説明を省略する。
物品での色付け(グレーも含む)がなされていない要素(以下、これを対象要素という)に対するカラーセレクタ40bは、その「単色」タブ29が図26に示される表示状態のものとなる。かかる状態は、例えば、「クリア」ボタン23が押下され、対象要素の色付け(グレーも含む)を解除することにより、設定されることになる。
即ち、「選択色表示」欄21では、設定色表示部21aが色表示されず、斜線印である「/」マークが付されて該当する対象要素が色付けされていないことが示され、また、色の名称21cに代わって、例えば、「塗りつぶしなし」とのメッセージ21dが表示される。従って、カラーセレクタ40bが展開されたときには、「選択色表示」欄21の表示内容により、このカラーセレクタ40bに該当する対象要素が色付け(グレーも含む)されているか否かを確認することができ、色付けされているときには、図22に示すカラーセレクタ40が表示されることから、どのような色(グレーも含む)で色付けされているかも確認することができる。
このカラーセレクタ40bでは、色相指定部44において、色相指定スライダ44bが色相表示バー44aの中間の色相値H(=「128」)を指示した状態に設定されており、カラーセレクタ42では、中間の色セル43の横列でこの中間の色相値Hの色相が表示されて、その上側の2つの色セル43の横列では、この中間の色相値Hから値「10」ずつ大きい色相値Hの色相が、また、その下側の2つの色セル43の横列では、この中間の色相値Hから値「10」ずつ小さい色相値Hの色相が夫々表示される。これとともに、選択色相値表示ボックス44dには、この中間の色相値Hである値「128」が表示される。
また、輝度指定部45においても、輝度指定スライダ45bが輝度表示バー45aの中間の色相値H(=「128」)を指示した状態に設定されており、カラーセレクタ42では、中間の色セル43の縦列でこの中間の輝度値Lの輝度が設定されて、その右側の2つの色セル43の縦列では、この中間の色相値Hから値「10」ずつ大きい輝度値Lの輝度が、また、その下側の2つの色セル43の縦列では、この中間の輝度値Lから値「10」ずつ小さい輝度値Lの輝度が夫々設定される。これとともに、選択輝度値表示ボックス45dには、この中間の輝度値Lである値「128」が表示される。
かかる状態で、グレースケール41、あるいは、カラーパレット42での所望の色(グレーも含む)のセル41a,43を選択することにより、図22に示すカラーセレクタ40のように、「選択色表示」欄21において、設定色表示部21aにこの選択されたセル41a,43で表示されている色が表示され、メッセージ21dの代わりにこの表示される色の名称21cが表示される。また、色相指定部44で色相指定スライダ44bの移動操作をすることにより、あるいは、輝度指定部45で輝度指定スライダ45bの移動操作をすることにより、カラーパレット42の色セル43で表示される色の色相あるいは輝度を変化させることができる。
以上の状態は、図24に示すカラーセレクタ40aにおいても、同様である。但し、かかる状態でのカラーセレクタ40aでは、色相指定部44において、色相指定範囲44cが色相表示バー44aの中心の色相値Hを中心とする予め決められた長さ(上側境界線44cUから下側境界線44CDまでの色相値Hの個数であって、例えば、図22に示すカラーセレクタ40での色相指定範囲44cに等しい長さ)となるように、色相表示バー44aに対する下側境界変更用スライダ44b2,上側境界変更用スライダ44b3の位置が設定される。輝度指定部45についても同様であって、輝度指定範囲45cが輝度表示バー45aの中心の輝度値Lを中心とする予め決められた長さ(上側境界線45cUから下側境界線45CDまでの輝度値Lの個数であって、例えば、図22に示すカラーセレクタ40での輝度指定範囲45cに等しい長さ)となるように、輝度表示バー45aに対する下側境界変更用スライダ45b2,上側境界変更用スライダ45b3の位置が設定される。
図27は本発明によるコンテンツ画面の色カスタマイズ方法の第2の実施形態における対象要素がグレーに色カスタマイズ処理がなされているときの図22に示すカラーセレクタ40での「単色」タブ29のデフォルトの表示状態の一具体例を示す図であって、40cはカラーセレクタであり、図22に対応する部分には同一符号をつけて重複する説明を省略する。
図8に示す色カスタマイズ操作画面17でグレーに色カスタマイズ処理されている対象要素に対するカラーセレクタを、その「セレクト」ボタン22をカーソル11で押下操作することにより、展開させると、図27に示すデフォルト状態のカラーセレクタ40cが表示される。
このカラーセレクタ40cでは、「選択色表示」欄21において、その設定色表示部21aに対象要素に色付けされている色であるグレーが表示され、色の名称21cにこのグレーの名称が表示されている。
また、グレースケール41では、「選択色表示」欄21の設定色表示部21aで表示されるグレーを表わすグレーセル41aを中心に、その両側に2個ずつのグレーセル41aが配列された5個のグレーセル41aが配列されている。この中心位置にあるグレーセル41aには、選択セル枠49が付されており、このグレーセル41aが選択されていることを示している。
かかるカラーセレクタ40cのデフォルトの状態では、色相指定部44では、色相はグレーに関係がないので、図26に示すカラーセレクタ40bでの色相指定部44と同様、色相指定スライダ44bや色相指定範囲44cが色相表示バー44aの中央部の位置に設定されている。これに対し、輝度指定部45では、輝度指定スライダ45bがグレースケール41の中央部での選択セル枠49が付されたグレーセル41aで表示されるグレーの輝度値L(例えば、値「170」)に対応する輝度表示バー45aでの位置に設定されており、これとともに、輝度指定範囲45cが輝度表示バー45aでの輝度指定スライダ45bの位置に応じた位置に設定されている。
これにより、カラーパレット42では、色相指定部44で位置設定されている色相指定範囲44cに応じた色相値Hで輝度指定部45で位置設定されている式度指定範囲45cに応じた輝度値Lの色が色セル43で表示されていることになる。
ここで、輝度指定部45において、輝度指定スライダ45bを移動操作すると、カラーパレット42での各色セル43の輝度値Lが値「1」ずつ変化していくとともに、グレースケール41においても、各グレーセル41aでのグレーの輝度値Hも値「1」ずつ変化してその濃さが変化していく。但し、セル41a,43の選択操作をしなければ、選択セル枠49の位置は変化しないので、この選択セル枠49が付されたグレーセル43の輝度(濃さ)が変化し、従って、この選択セル枠49が付されたグレーセル43のグレーを表わす「選択色表示」欄21の設定色表示部21aでも、そこで表示されるグレーの輝度(濃さ)が変化する。
また、彩度指定部46では、彩度はグレーに関係がないので、図26に示すカラーセレクタ40bでの彩度指定部46と同様、彩度指定スライダ46bが彩度表示バー46aでの最大の彩度値Sの位置に設定されている。
さらに、透明指定部47では、「選択色表示」欄21の設定色表示部21aで表示されているグレーの透明度に該当する透明度表示バー47aの透明度αの位置(例えば、「30%」)に設定されている。
このように、グレーに色付けされた対象要素に対するカラーセレクタ40cのデフォルトの状態では、グレーに関係する輝度指定部45や透明度指定部47でこのグレーに応じた輝度値Lや透明度αが設定されており、グレーに関係しない色相指定部44や彩度指定部46では、上記のような初期状態に設定されることになる。
なお、以上の点は、図24に示すカラーセレクタ40aも、グレーに色付けられた対象要素について、そのデフォルトの状態は同様である。
図28(a)は図22に示すカラーセレクタ40の色相指定部44での操作状態の一具体例を示す図であって、40dはカラーセレクタ、43’は不活性の色セルであり、図22に対応する部分には同一符号をつけて重複する説明を省略する。
同図において、このカラーセレクタ40dは、色相指定部44において、色相表示バー44aに沿って色相指定スライダ44bを上方向に移動させて色相指定範囲44cの一部が色相表示バー44aの上端からはみ出した状態を示すものであって、この場合には、カラーパレット42での色セル43の横列のうち、この色相指定範囲44cの色相表示バー44aの上端からはみ出した部分に相当する横列での色セル43は不活性の色セル43’となる。
ここでは、色相指定スライダ44bが色相表示バー44aの色相値H=「247」を指定した状態にあるものとしており、このため、20−(255−247)=12個の色相値分だけ色相指定範囲44cが色相表示バー44aから上方にはみ出していることになる。色相指定スライダ44bから色相指定範囲44cの上側境界線44cUまでに20個の色相値Hに相当する距離があり、色相指定範囲44cでの色相指定スライダ44bが指定する色相値Hとそれから10個間隔の色相値Hがカラーセレクタ42で表示する色セル43の横列が設定されるものとすると、色相指定スライダ44bが指定する色相値H(=「247」)から上側境界線44cUまでのカラーセレクタ42で表示されるべき10個間隔の色相値Hは「257」,「267」となるが、これらの色相値Hは色相表示バー44aの上端(色相値H=「255」)からはみ出して存在しないものであるから、カラーパレット42で表示することができず、これら色相値H=「257」,「267」に相当する上から2個のカラーセル43の横列は選択できない不活性のカラーセル43’からなるものとなる。この不活性のカラーセル43’では、色相,輝度,彩度の色は表示されず、例えば、その枠だけが表示される透明なカラーセルとなる。もちろんかかる不活性なカラーセル43’は、選択することができない。
なお、色相指定スライダ44bは、色相表示バー44aの上側境界線44cUに一致するまで移動可能であって、この位置まで移動させたときには、この上側境界線44cUでの色相値Hを指定していることになる。このため、カラーパレット42での状態は変わらないが、最上位の選択可能に活性化している(即ち、下から3番目の)色セル43の横列は、この上側境界線44cUでの色相値Hの色相を表示していることになる。
また、色相指定スライダ44bを下方に移動させて色相指定範囲44cの一部が色相表示バー44aの下端(色相値=「0」)からはみ出した場合でも、同様であって、カラーパレット42の下側に不活性の色セル43’の横列が存在することになる。
なお、図24に示すカラーセレクタ40aでは、その下側境界変更用スライダ44b2,上側境界変更用スライダ44b3が色相表示バー44aの下端から上端まで移動するものであるから、カラーパレット42には、上記のような選択できない不活性の色セル43’の横列は生じない。
図28(b)は、図28(a)に示すカラーセレクタ40dにおいて、輝度指定部45cの輝度指定スライダ45aを輝度表示バー45cの上端側に移動させた場合の状態の一具体例を示す図であって、40eはカラーセレクタであり、図28(a)に対応する部分には同一符号をつけて重複する説明を省略する。
図28(a)に示すカラーセレクタ40dで、さらに、輝度指定部45において、輝度表示バー45aに沿って輝度指定スライダ45bを右方向に移動させて輝度指定範囲45cの一部が輝度表示バー45aの右端からはみ出した状態にすると、このカラーセレクタ40eは図28(b)に示す状態となる。この場合には、カラーパレット42での色セル43の縦列のうち、この輝度指定範囲45cの輝度表示バー45aの右端からはみ出した部分に相当する縦列での色セル43は不活性の色セル43’となる。
ここでは、輝度指定スライダ45bが輝度表示バー45aの輝度値L=「238」を指定した状態にあるものとしており、このため、20−(255−238)=3個の輝度値分だけ輝度指定範囲45cが輝度表示バー45aから右方にはみ出していることになる。輝度指定スライダ45bから輝度指定範囲45cの右側境界線45cUまでに20個の輝度値Lに相当する距離があり、輝度指定範囲45cでの輝度指定スライダ45bが指定する輝度値Lとそれから10個間隔の輝度値Lがカラーセレクタ42で表示する色セル43の縦列が設定されるものとすると、輝度指定スライダ45bが指定する輝度値L(=「238」)から上側境界線45cUまでのカラーセレクタ42で表示されるべき値「10」ずつの輝度値Lは「248」,「258」となるが、これらの輝度値Lのうち、右側境界線45cUの輝度値L=「255」を越える「258」の輝度値Lは輝度表示バー45aの右端(輝度値L=「255」)からはみ出して存在しないものであるから、カラーパレット42で表示することができず、この輝度値L=「258」に相当する右から1個のカラーセル43の縦列は選択できない不活性のカラーセル43’からなるものとなる。この不活性のカラーセル43’では、色相,輝度,彩度の色は表示されず、例えば、その枠だけが表示される透明なカラーセルとなる。勿論かかる不活性なカラーセル43’は、選択することができない。
なお、輝度指定スライダ45bは、輝度表示バー45aの上側境界線45cUに一致するまで移動可能であって、この位置まで移動させたときには、この上側境界線45cUでの輝度値Lを指定していることになる。この場合には、色相指定部44の状態の場合と同様に、カラーセレクタ42の右側2つのカラーセルの縦列が不活性なカラーセル43’からなるものとなるものであり、最も右側の選択可能に活性化している(即ち、左から3番目の)色セル43の縦列は、この右側境界線45cUでの輝度値Lの輝度を表示していることになる。
また、輝度指定スライダ45bを左方に移動させて輝度指定範囲45cの一部が輝度表示バー45aの左端(輝度値L=「0」)からはみ出した場合でも、同様であって、カラーパレット42の左側に不活性の色セル43’の縦列が存在することになる。
なお、図24に示すカラーセレクタ40aでは、その左側境界変更用スライダ45b2,右側境界変更用スライダ45b3が輝度表示バー45aの左端から右端まで移動するものであるから、カラーパレット42には、上記のような選択できない不活性の色セル43’の縦列は生じない。
この第2の実施形態のカラーパレット40においても、図11に示す第1の実施形態でのカラーパレットと同様、物品の要素「文字/記号」の色(グレーも含む)とこれに接する背景などの他の要素の色(グレーも含む)との間で輝度コントラスト比が4.5:1未満であるカラーセル43(グレーセル41aも含む)には、「×(バツ)」マーク31aが付され、また、物品の要素「文字/記号」以外の互いに接する要素間で色(グレーも含む)の輝度コントラスト比が1.7:1未満であるカラーセル43(グレーセル41aも含む)には、「/」マーク31bが付される。
図29は1つの物品の各要素のカラーセレクタでのカラーパレットの状態の一具体例を示す図であって、40Cは要素「文字」のカラーセレクタ、40Bは要素「背景」のカラーセレクタ、40Fは要素「枠線」のカラーセレクタであり、前出図面に対応する部分には同一符号をつけて重複する説明を省略する。なお、同図では、必要な部分にのみ部号を付している。
同図において、要素「文字」のカラーセレクタ40Cのグレースケール41やカラーパレット42では、要素「背景」のカラーセレクタ40Bのグレースケール41やカラーパレット42で表示される色(クレスケールも含む)に対し、輝度コントラスト比が4.5:1未満であるカラーセル43(グレーセル41aも含む)に「×」マーク31aが付され、かかるカラーセル43(グレーセル41aも含む)を選択できないものとしている。同様にして、要素「背景」のカラーセレクタ40Bのグレースケール41やカラーパレット42では、要素「文字」のカラーセレクタ40Cのグレースケール41やカラーパレット42で表示される色(クレスケールも含む)に対し、輝度コントラスト比が4.5:1未満であるカラーセル43(グレーセル41aも含む)に「×」マーク31aが付され、かかるカラーセル43(グレーセル41aも含む)を選択できないものとしている。
また、要素「背景」のカラーセレクタ40Bのグレースケール41やカラーパレット42では、要素「枠線」のカラーセレクタ40Fのグレースケール41やカラーパレット42で表示される色(クレスケールも含む)に対し、輝度コントラスト比が1.7:1未満であるカラーセル43(グレーセル41aも含む)に「/」マーク31bが付され、かかるカラーセル43(グレーセル41aも含む)の選択を推奨しないものとしている。要素「枠線」のカラーセレクタ40Fのグレースケール41やカラーパレット42においても、同様にして、選択を推奨しないカラーセル43(グレーセル41aも含む)に「/」マーク31bが付される。
なお、ここでは図示しないが、このようにカラーパレット42に「×」マーク31aや「/」マーク31bが付されたカラーセル43があっても、色相指定スライダ44bが指示する色相値で輝度指定スライダ45bが指示する輝度値の色を表わすカラーパレット42の中央部に位置するカラーセル43には、中心セル枠48(図22)が付される。
図29に示すようなカラーセレクタ40C,40B,40Fにおいて、グレースケール41やカラーパケット42での「×」マーク31aが付されていないカラーセル43(但し、グレーセル41aも含む:従って、「/」マーク31bが付されたカラーセルやグレーセルも含む)がカーソル11の操作によって選択され、図18に示すように、「OK」ボタン26が押下操作されると、このときの物品の各要素(文字や背景,枠線)の表示色が決定されるが、これら要素「文字」のカラーセレクタ40C及び要素「背景」のカラーセレクタ40Bの少なくともいずれかで「×」マーク31aが付されているカラーセル43(グレーセル41aも含む)がカーソル11の操作で指定され、図18に示すように、「OK」ボタン26が押下操作されると、再度の色(グレーも含む)選択を指示する図30に示す指示画面が表示される。
なお、図30において、52は指示画面、53はメッセージ、54は「OK」ボタン、55は「×」ボタンである。
かかる指示画面52には、図29に示す要素「文字」のカラーセレクタ40C及び要素「背景」のカラーセレクタ40Bの少なくともいずれかで「×」マーク31aが付されているカラーセル43(グレーセル41aも含む)がカーソル11の操作で指定されたことを指摘するメッセージ53、例えば、「使用者によっては文字が判別出来ない可能性があるので、文字、またはその背景の色を「×」がついていない色に変えて下さい」といったメッセージ53が表示され、また、「OK」ボタン54と「×」ボタン55とが設けられている。
そこで、かかるメッセージ53にしたがって使用者がカーソル11を操作して「OK」ボタン54を押下操作すると、この指示画面52が表示されなくなって、図18に示すような色カスタマイズ操作画面で色選択がなされる前の要素「文字」のカラーセレクタ40C,要素「背景」のカラーセレクタ40B及び要素「枠線」のカラーセレクタ40Fが表示され、再度の色選択が可能となる。
なお、かかる指示画面52で「×」ボタン55がカーソル11の押下操作で選択されると、この指示画面52が表示されなくなって、色選択がなされた状態にある要素「文字」のカラーセレクタ40C,要素「背景」のカラーセレクタ40B及び要素「枠線」のカラーセレクタ40Fを含む上記の色カスタマイズ操作画面に戻る。勿論かかる色カスタマイズ操作画面での要素「文字」のカラーセレクタ40C,要素「背景」のカラーセレクタ40B及び要素「枠線」のカラーセレクタ40Fで、別のカラーセル43(グレーセル41aも含む)を選択することもできる。
このようにして、誤って「×」マーク31aが付されたカラーセル43(グレーセル41aも含む)が選択しても、これに反応して指示画面52が表示され、再度カラーセル43(グレーセル41aも含む)の選択も直ちに可能となる。
図29,図30で説明した点も、図24,図25に示す他の具体例でも、同様である。
図31は図22,図23,図26〜図30に示すカラーセレクタの一変形例を示す図であって、40’はカラーセレクタ、561〜565はカラーセル横列、571〜575はカラーセル縦列、581〜583は選択不可エリアであり、前出図面に対応する部分には同一符号をつけて重複する説明を省略する。
同図において、この一変形例としてのカラーセレクタ40’においては、カラーパレット42において、「×」マーク31aが付されたカラーセル43の横列で表示される色相値Hに該当する色相指定部44の色相表示バー44aのエリアに選択不可エリア(ここでは、選択不可エリア581,582)が設けられるものであり、同様にして、「×」マーク31aが付されたカラーセル43の縦列で表示される輝度値に該当する輝度指定部45の輝度表示バー45aのエリアに選択不可エリア(ここでは、583)が設けられるものである。
ここで、カラーパレット42において、カラーセル43の横列を上から順にカラーセル横列561,562,563,564,565とし、カラーセル43の縦列を右から順にカラーセル横列571,572,573,574,575とする。いま、色相指定部44の色相表示バー44aにおいて、例えば、この色相表示バー44aの上端から現時点での色相指定範囲44c内の上側までのエリアが選択不可エリア581となっている場合には、カラーパレット42において、例えば、上から1番目のカラーセル横列561と2番目のカラーセル横列562には、「×」マーク31aが付されたカラーセル43が存在することになる。また、輝度指定部45の輝度表示バー45aにおいて、例えば、このの左端から現時点での輝度指定範囲45c内の左側までのエリアが選択不可エリア583となっている場合には、カラーパレット42において、例えば、左から1番目のカラーセル横列571と2番目のカラーセル横列572には、「×」マーク31aが付されたカラーセル43が存在することになる。
同じ物品の他の要素での色選択に応じて、このカラーセレクタ40での「×」マーク31aが付されるカラーセル43が変化するが、これとともに、色相表示バー44や輝度表示バー45aでの選択不可エリア58が変化することになる。
該当する要素を色カスタマイズするとき、「×」マーク31aが付されないカラーセル43を選択するものであるが、カラーパレット42で選択できないカラーセル43のみが存在して色カスタマイズのための色選択ができない場合、図22に示す先の具体例では、色相指定スライダ44b,輝度指定スライダ45bを操作してカラーパレット42に「×」マーク31aが付されない色相や輝度がカラーセル43を表示されるようにする必要があり、これらスライダ44b,45bの移動方向によっては、いつまでもかかるカラーセル43が表示されない場合もあるが、この図31に示す具体例では、色相表示バー44aや輝度表示バー45aにおいて、選択不可エリア58から「×」マーク31aが付される色相値Hの範囲や輝度値Lの範囲を一目で把握することができるから、「×」マーク31aが付されない色相や輝度で色表示されるカラーセル43をカラーパレット42に迅速、的確に表示させることができる。
なお、以上のことは、図24,図25に示す他の具体例でも、同様である。
また、選択不可エリア581,582では、「×」マーク31aが付されたカラーセル43で表示される選択できない色の色相値Hを含むものとして説明したが、「/」マーク31bが付されたカラーセル43で表示される選択できるが、選択を推奨しない色の色相値Hも含むようにしてもよい。また、同様に、選択不可エリア583では、「×」マーク31aが付されたカラーセル43で表示される選択できない色の輝度値Lを含むものとして説明したが、「/」マーク31bが付されたカラーセル43で表示される選択できるが、選択を推奨しない色のし輝度値Lも含むようにしてもよい。
図32は図31に示す構成の図9におけるカラーセレクタ40C,40Bの一方の「クリア」ボタン23が操作されたときのこれらカラーセレクタ40C,40Bの状態の変化を示す図であって、40C’は要素「文字」のカラーセレクタ、40B’は要素「背景」のカラーセレクタであり、前出図面に対応する部分には同一符号をつけて重複する説明を省略する。
同図(a)において、色選択がなされたことにより、要素「文字」のカラーセレクタ40C’と要素「背景」のカラーセレクタ40B’とでは、そのカラーパレット42で「×」マーク49が付されてカラーセル43が表示されている。ここでは、説明を簡略化するために、要素「文字」のカラーセレクタ40C’は、図31に示す構成をなして、カラーパレット42での一つのカラーセル43が選択されて選択セル枠49が付された図29に示す要素「文字」のカラーセレクタ40Cと同様の状態にあり、要素「背景」のカラーセレクタ40B’は、図31に示す構成をなして、グレースケール41での1つのグレーセル41aが選択されて選択セル枠49が付され、図29に示す要素「背景」のカラーセレクタ40Bと同様の状態にあるものとする。
かかる表示状態で、いま、要素「背景」のカラーセレクタ40B’での「クリア」ボタン23がカーソル11で押下操作されると、図32(b)に示すように、要素「背景」のカラーセレクタ40B’では、色の選択状態が解除されてグレースケール41で選択セル枠49が付されていたグレーセル41aでこの選択セル枠49が排除され、これとともに、「選択色表示」欄21おいて、設定色表示部21aの色が解除されて「/」マークが付されるとともに、メッセージ21dが「塗りつぶしなし」に変更される。
そして、この要素「背景」の色の選択が排除されることから、要素「文字」のカラーセレクタ40C’では、図32(b)に示すように、要素「背景」のカラーセレクタ40B’の色選択によって色選択が不可となっていた色相や輝度が選択可能となって、色相指定部44の色相表示バー44aや輝度指定部45の輝度表示バー45aに設定されていた選択不可エリア581,582,583が排除されるとともに、カラーパレット42のカラーセル43に付加されていた「×」マーク31aが排除される。
これにより、要素「文字」のカラーセレクタ40C’では、色の選択状態のみが保持され、現在選択されている色相またはグレーに対して、カラーパレット42の該当するカラーセル43、または、グレースケール41の該当するグレーセル41aに選択セル枠49が付され、これに該当する色(グレーも含む)が「選択色表示」欄21の設定色表示部21aにそのまま表示される。
一方、要素「背景」のカラーセレクタ40B’では、要素「文字」のカラーセレクタ40C’で選択されている色(グレーも含む)に応じて選択できない色相や輝度が決まることになり、このため、色相指定部44の色相表示バー44aで選択不可エリア581,582や輝度指定部45の輝度表示バー45aで選択不可エリア583が変化する。また、カラーパレット42やグレースケール41での「×」マーク31aが付されるカラーセル43やグレーセル41aが変化することになる。図32(b)に示す要素「文字」のカラーセレクタ40C’のグレースケール41やカラーパレット42では、全てのグレースケール41やカラーパレット42から「×」マーク31aが排除された状態を示している。
このようにして、一方のカラーセレクタでの色選択が解除されると、他方のカラーセレクタでの色選択不可状態が解除されて全ての色から所望の色を選択できることになり、色選択が解除されたカラーセレクタにおいても、色選択不可状態が変更されることになる。
なお、上記は2つのカラーセレクタのうちの一方が要素「文字」のカラーセレクタであったが、要素「文字」のカラーセレクタ以外の2つのカラーセレクタに対しても、「/」マーク31bで表わす推奨しない色(グレーも含む)について同様である。
また、以上のことは、図24,図25に示す構成のカラーセレクタについても、同様である。
図33は図22に示すカラーセレクタ40で「グラデーション」タブ30が選択されたときの状態を示す図であって、60はグラデーション角度設定部、61はグラデーション分岐点設定部、62は分岐点数表示部、63は分岐点増減部、64は選択分岐点位置表示部、65はグラデーション表示部、66はグラデーションバー、67Lは左端側指示体、67Rは右端側指示体、67Iは中間部指示体、68は選択枠であり、前出図面に対応する部分には同一符号をつけて重複する説明を省略する。
同図において、「グラデーション」タブ30は、「文字」や「背景」,「枠線」などの物品の要素の領域の色やグレーのグラデーションを設定するためのものであって、そこには、物品の要素の表示エリアに設定される色やグレーのグラテーションの方向(角度)を設定するためのグラデーション角度設定部60と、グラデーション分岐点設定部61と、グラデーション表示部65とが設けられている。また、この「グラデーション」タブ30には、グレースケール41やカラースケール42,色相指定部44,輝度指定部45,彩度指定部46,透明度指定部47も設けられているが、これらはグラデーションでの色(グレーも含む)を指定するためのものであって、先の「単色」タブ29と同様のものであり、重複する説明は省略する。
まず、グラデーション表示部65について説明すると、横長のグラデーションバー66の左側端部に左端側指示体67Lが、右側端部に右端側指示体67Rが夫々設定されており、必要に応じてこれら左端側指示体67L,右端側指示体67R間に1以上の中間部指示体67Iが設定される。
ここで、これら左端側指示体67L,右端側指示体67R,中間部指示体67Iでは夫々、グレースケール41やカラーパレット42を用いてグラデーションバー66上のそれが指示する位置(左端部や右端部,それらの中間位置)に、これらグレースケール41のグレーセル41aやカラーパレット42のカラーセル43で表示される色(グレーも含む)のうちの所望とする色を選択することにより、選択された色(グレーも含む)を表示させることができるものである。その色の表示方法としては、左端側指示体67L,右端側指示体67R,中間部指示体67I(以下、これらを総称するときには、指示体67という)のうちで色付けしたい指示体67を選択し、次いで、グレースケールセル41やカラーパレット42で色付けしたい所望の色(グレーを含む)を表示したグレーセル41aまたはカラーセル43を選択することにより、グラデーションバー66の該当する指示体67が指示する位置が色付けされる。そして、このように色付けられると、グラデーションバー66での左端側指示体67Lと中間部指示体67Iとの間で、これらの位置に設定された色のグラデーション(即ち、左端側指示体67Lで指示されるグラデーションバー66の左端部での設定色から中間部指示体67Iで指示されるグラデーションバー66の中間位置での設定色までのグラデーション(色の変化))が設定されることになり、また、中間部指示体67Iと右端側指示体67Rとの間で、これらの位置に設定された色のグラデーション(即ち、中間部指示体67Iで指示されるグラデーションバー66の中間位置での設定色から右端側指示体67Rで指示されるグラデーションバー66の右端部での設定色までのグラデーション)が設定されることになる。
グラデーション分岐点設定部61は、左端側指示体67Lで指示されるグラデーションバー66の左端部と右端側指示体67Rで指示されるグラデーションバー66の右端部と中間部指示体67Iで指示されるグラデーションバー66の中間位置とを分岐点とし、グラデーションバー66で設定される分岐点の個数を表わす分岐点数表示部62と、この分岐点の個数を増減する(即ち、中間部指示体67Iなどを追加,削減する)ための分岐点増減部63と、分岐点、即ち、左端側指示体67Lと右端側指示体67Rと中間部指示体67Iとのうちの、選択された指示体67のグラデーションバー66上での位置をパーセント(%)で表わす選択分岐点位置表示部64とからなるものである。ここでは、中間部指示体67Iが選択された指示体67とし、この中間部指示体67Iがグラデーションバー66の50%の位置にあるものとしており、これ故、選択分岐点位置表示部64には、「50%」が表示されている。なお、選択分岐点位置表示部64では、同じ指示体67が選択されている限り、この指示体67の位置を表わすパーセント(%)が表示される。グラデーションバー66での2個以上の指示体67は、そのいずれか1つが選択されており、従って、選択分岐点位置表示部64では、常時選択された指示体67の位置が表示されている。
なお、選択された指示体67には、これを囲むようにして所定の色(例えば、青色)の選択枠68が付けられている。ここでは、中間部指示体67Iが選択されているものとしている。
分岐点の個数は最小2個であって、1個または0個とはすることができず、分岐点数表示部62で表示される数値は「2」以上である。また、分岐点数表示部62では、「▼」をカーソル11(図示せず)で押下操作することにより、分岐点(即ち、指示体67)の一連の個数を表わすプルダウンメニューが展開され、このうちの1つを選択することにより、その個数の分岐点(指示体67)がグラデーションバー66に沿って表示されることになる。
また、いずれの指示体67も、カーソル11を用いた操作により、グラデーションバー66に沿って移動させることができるが、この場合でも、その移動する指示体67が指示するグラデーションバー66上での位置の色は変化しない。従って、例えば、中間部指示体67Iを移動させると、グラデーションバー66上でのこの中間部指示体67Iに対して設定された色が同様にグラデーションバー66上を移動することになる。この結果、この中間部指示体67Iと左端側指示体67L,右端側指示体67Rとの間の色(グレーも含む)のグラデーションの傾向が変化する。例えば、中間部指示体67Iを左端側指示体67Lに近づけると、この左端側指示体67Lから中間部指示体67Iへの色(グレーを含む)のグラデーション(色の変化)が急激となり、また、このとき、中間部指示体67Iが右端側指示体67Rから離れるので、中間部指示体67Iから右端側指示体67Rへの色(グレーを含む)のグラデーションが緩やかとなる。
次に、グラデーション分岐点設定部61の分岐点増減部63の操作について、図34により説明する。なお、同図において、67Iaは中間指示体、63aは「+」ボタン、63bは「−」ボタンであり、図33に対応する部分には同一符号をつけて重複する説明を省略する。
分岐点増減部63は、「+」ボタン63aと「−」ボタン63bとからなり、「+」ボタン63aはグラデーションバー66で中間指示体を増加させるためのものであり、カーソル11での押下操作毎に1つずつ中間指示体を増加させる。また、「−」ボタン63aはグラデーションバー66で中間指示体を減少させるためのものであり、カーソル11での押下操作毎に1つずつ中間指示体を減少させる。
図34(a)は「+」ボタン63aの操作を示すものであって、その(イ)は図33と同じ中間部指示体67Iが選択されている状態を示すものである。かかる状態で「+」ボタン63aがカーソル11による押下操作されると、図34(a)・(ロ)に示すように、選択されていた中間指示体67Iとこれより右側の指示体、ここでは、右端側指示体67Rとの中間位置に、新たな中間指示体67Iaが追加表示される。ここで、図34と同様、中間指示体67Iのグラデーションバー66上での位置を「50%」の位置とすると(この場合、選択分岐点位置表示部64では、この「50%」が表示されている)、中間指示体67Iと右端側指示体67Rとの間の中間の「75%」の位置にこの新たな中間指示体67Iaが選択された状態(従って、中間指示体67Iに代わって選択枠68が付された状態)で表示されていることになる。また、選択分岐点位置表示部64では、選択されているこの新たな中間指示体67Iaの位置を表わす「75%」が表示される。また、指示体67が1つ増加したことになるから、分岐点数表示部62での表示は、値「3」から値「4」に変更される。
このように、分岐点増減部63で「+」ボタン63aを操作すると、その操作毎に1つずつ中間指示体67Iが追加されていく。このときの追加位置としては、そのとき選択されている中間指示体67Iとその右隣りの指示体67との中間の位置となる。そこで、図34(a)・(ロ)の状態で「+」ボタン63aが操作されると、このとき選択されている中間指示体67Iaとその右隣りの右端側指示体67Rとの中間位置に新たな中間指示体67Iが追加される。この位置は「83%」(端数切上げ)となり、この新たな中間指示体67Iが選択状態となって、選択分岐点位置表示部64にこの位置の「83%」が表示されることになる。
このように、追加された中間指示体67Iaについても、これを選択枠68が付された選択状態とし、グレースケール41やカラーパレット42でグレーや色を選択することにより、グラデーションバー66のこの中間指示体67Iaの位置にこの選択された色(グレーも含む)を設定することができる。従って、図34(a)・(ロ)に示す状態では、中間指示体67Iの位置と中間指示体67Iaの位置との間や中間指示体67Iaの位置と右端側指示体67Rの位置との間で、中間指示体67Iaの位置に設定された色(グレーを含む)からのグラデーションが設定されることになる。
なお、選択された指示体67が右端側指示体67Rの場合には、その右隣りの指示体67は存在しないから、このとき「+」ボタン63aが操作されても、新たな中間指示体67Iは追加されない。即ち、このときには、「+」ボタン63aは不活性の状態に設定されている。
また、ここでは、分岐点増減部63の「+」ボタン63aが操作されると、このとき選択されている中間指示体67Iaとその右隣りの指示体67との間の位置に新たな中間指示体67Iが追加されるとしたが、選択されている中間指示体67Iaとその左隣りの指示体67との間の位置に新たな中間指示体67Iが追加されるようにしてもよい。但し、この場合には、選択された指示体67が左端側指示体67Lであるときには、それより左隣りの指示体67は存在しないから、「+」ボタン63aは不活性となる。
図34(b)は「−」ボタン63bの操作を示すものであって、その(イ)は図33と同じ状態で右側指示体67Rが選択されている状態を示すものである。かかる状態で「−」ボタン63bがカーソル11による押下操作されると、図34(b)・(ロ)に示すように、この選択されていた右端側指示体67Rが削除され、この削除された指示体67、即ち、右端側指示体67Rの左隣りの指示体67、ここでは、中間指示体67Iが選択された状態となる。従って、この中間指示体67Iに選択枠68が付されるとともに、選択分岐点位置表示部64では、この新たに選択された中間指示体67Iの位置である「50%」が表示されることになる。また、指示体67が1つ減少したことになるから、分岐点数表示部62での表示は、値「3」から値「2」に変更される。
左端側指示体67Lが選択されて「−」ボタン63bが操作された場合も同様であって、左端側指示体67Lが削除されるし、また、中間指示体67Iが選択された「−」ボタン63bが操作された場合も、同様に、この中間指示体67Iが削除される。
なお、グラデーションバー66での指示体67が左端側指示体67Lと右端側指示体67Rの2個の指示体67だけになるということは、左端側指示体67Lで設定された色から右端側指示体67Rで設定された色までのグラデーション(色(グレーも含む)の変化)が設定されており、該当する要素のエリアでは、その一方の端側から他方の端までグラデーション角度設定部60で設定された角度でかかるグラデーションが設定されることになるが、図34(b)・(ロ)に示すように、2つの指示体67が左端側指示体67Lと中間指示体67Iである場合には、左端側指示体67Lで設定された色から個の中間指示体67Iまでのグラデーションが、該当する要素のエリアでの一方の端側から他方の端までグラデーション角度設定部60で設定された角度で、設定されることになる。
また、グラデーションバー66で設定されている指示体67の個数が2個であるときには(このとき、分岐点数表示部62での表示は、値「2」)、これ以上指示体67を減少させることができないことから、分岐点増減部63の「−」ボタン63bは不活性となり、カーソル11で押下操作しても、応答はない。
以上のように、分岐点増減部63を操作することにより、分岐指示体67Iの追加や削除をすることができ、要素のエリアに設定する色(グレーも含む)のグラデーションの態様を適宜設定することが可能となる。
次に、図33での中間指示体67Iの操作について、図35により説明する。なお、同図においては、図34に対応する部分には同一符号をつけて重複する説明を省略する。
図35(a)は図34(a)・(ロ)と同様の状態を示すものであって、「+」ボタン63aの操作を示すものであって、図33に示す状態で、中間指示体67Iと右端側指示体67Rとの間に中間指示体67Iaが追加され、グラデーションバー66でのこの中間指示体67Iaの位置に、グレースケール41やカラーパレット42で所望の色(グレーを含む)が設定されているものとする。
かかる状態で、この中間指示体67Iaを選択枠68が付された選択状態として、カーソル11(図示せず)の移動操作を行なうと、この中間指示体67Iaをグラデーションバー66に沿って移動させることができる。いま、矢印で示す左端側指示体67Lの方向に移動操作すると、この中間指示体67Iaが移動するが、その移動は他の中間指示体67Iによって影響されることがなく、図35(b)に示すように、この中間指示体67Iを越えてこの中間指示体67Iよりも左端側指示体67L側に移動させることができる。ここでは、グラデーションバー66の「75%」の位置から中間指示体67Iの「50%」を越えて「30%」の位置まで移動させたものとしており、このとき、選択分岐点位置表示部64では、この中間指示体67Iaの位置を示す「30%」が表示される。中間指示体67Iaの移動は、右端側指示体67Rへの上記とは反対方向についても同様である。但し、右端側指示体67Rや左端側指示体67Lの位置には、移動させることができない。
このようにして、中間指示体67aの位置を、グラデーションバー66内で任意に変更させることができ、これによって要素での色(グレーも含む)のグラテーションの態様を任意に設定できることになる。
図36は本発明によるコンテンツ画面の色カスタマイズ方法の第3の実施形態における図8に示すような色カスタマイズ操作画面で展開されるカラーセレクタの一具体例を示す図であって、40”はカラーセレクタ、46’は彩度指定部、46a’は彩度表示バー、46b’は彩度指定スライダ、46c’は選択彩度値表示ボックス、47’は透明度指定部、47a’は透明度表示バー、47b’は透明度指定スライダ、47c’は選択透明度表示ボックスであり、図22に対応する部分には同一符号をつけて重複する説明を省略する。
同図において、この具体例のカラーセレクタ40”は、図22に示すカラーセレクタ40とは、「単色」タブ29において、彩度指定部46’,透明度指定部47’が夫々彩度指定部46,透明度指定部47と異なるものであり、グレースケール41,カラーパレット42及び輝度指定部(なお、この具体例では、以下、明るさ指定部ということにする)45は、図22に示すカラーセレクタ40でグレースケール41,カラーパレット42及び輝度指定部45と同様である。
彩度指定部46’は、グレースケール41や色相指定部44よりも上側に配置されており、彩度表示バー46a’,彩度指定スライダ46b’及び選択彩度値表示ボックス46c’とからなり、図22における彩度指定部46での彩度表示バー46aに彩度値に応じた彩度の色が表示されているが、この彩度指定部46’での彩度表示バー46a’は、図示するように、横長の細いバー(棒)状をなし、このバーの位置が彩度値に対応するようにしている。ここでは、図22での彩度表示バー46と同様、この彩度表示バー46a’の左端部が「0」の最小彩度値であり、右端部が「255」の最大彩度値である。この彩度表示バー46a’での彩度値は彩度指定スライダ46b’によって選択され、この彩度指定スライダ46b’を彩度表示バー46a’に沿って移動操作することにより、選択する彩度値を変化させることができる。
図22に示す彩度指定部46での彩度表示バー46aのように、そこに彩度に応じた色を表示すると、感覚的にこの彩度表示バー46aで表示される選択された彩度とこれによって実際に要素で表われる彩度とが異なるように見える場合もあり、ユーザを混乱させてしまう場合もある。この具体例では、これを回避可能とするものとして、色を表現しない細いバー状に彩度表示バー46a’を表わすものである。
なお、この彩度指定部46’での選択彩度値表示ボックス46c’は、図22に示すカラーセレクタ40における彩度指定部46での選択彩度値表示ボックス46cと同様、彩度表示バー46a’で彩度指定スライダ46b’によって選択された彩度値が表示されるものであるが、図22に示すカラーセレクタ40における彩度指定部46での選択彩度値表示ボックス46cでは、これに表示される対象(選択された彩度値)を明示するために、彩度を表わす符号「S」でもって「S:」と表示したが、この具体例では、表示される対象をより明確にするために、選択彩度値表示ボックス46cには、その標題として、表示される対象の名称を表わす、例えば、「鮮やかさ:」を表示するものである。
このように、この具体例では、彩度指定部46’を他の指定部よりも上側に、即ち、一番上側に配置しており、これにより、ユーザがカラーセレクタ40”を操作するときに、まずはこの彩度指定部46’に着目するようにしている。通常、彩度値が値「0」である場合には、他の指定部を操作しても、グレーのままであって、そのことに気が付かずに色相や輝度ばかりを繰り返し操作するようになる場合があるが、このように、彩度指定部46’を他の指定部よりも上側に配置することにより、ユーザがこの彩度指定部46’に注目する可能性が高くなり、はじめに彩度の選択を行なうことを促して、彩度が色相や輝度と同程度の操作の対象となり得て色の選択が容易となる。
また、選択彩度値表示ボックス46c’に選択操作対象の名称が表示されるので、彩度指定部46’が色の彩度、即ち、鮮やかさを調整するためのものであることが簡単に把握でき、色(グレーも含む)の選択に彩度指定部46’も、色相指定部44や輝度指定部42と同程度に、扱われることになる。
透明度指定部47’も、彩度指定部46’のように、透明度表示バー47a’,透明度指定スライダ47b’及び選択透明度値表示ボックス47c’とからなり、図22における透明度指定部47での透明度表示バー47aに透明度に応じた透明度の色が表示されているが、この透明度指定部47’での透明度表示バー47a’は、図示するように、横長の細いバー(棒)状をなし、このバーの位置が透明度に対応するようにしている。ここでは、図22での透明度表示バー47aと同様、この透明度表示バー47a’の左端部が「0」の最小透明度であり、右端部が「255」の最大透明度である。この透明度表示バー47a’での透明度は透明度指定スライダ47b’によって選択され、この透明度指定スライダ47b’を透明度表示バー47a’に沿って移動操作することにより、選択する透明度を変化させることができる。
また、透明度指定部47’も透明度指定部46’と同様であって、図22に示す透明度指定部47での透明度表示バー47aのように、そこに透明度に応じた色を表示すると、感覚的にこの透明度表示バー47aで表示される選択された透明度とこれによって実際に要素で表われる透明度とが異なるように見える場合もあり、ユーザを混乱させてしまう場合もある。この具体例では、これを回避可能とするものとして、色を表現しない細いバー状に透明度表示バー47a’を表わすものである。
なお、この透明度指定部47’での選択透明度値表示ボックス47c’でも、図22に示すカラーセレクタ40における透明度指定部47での選択透明度表示ボックス47cと同様、透明度表示バー47a’で透明度指定スライダ47b’によって選択された透明度が表示されるものであるが、彩度指定部46’と同様、図22での選択透明度表示ボックス47cで標題としての透明度を表わす符号「α」の代わりに、この具体例では、表示される対象をより明確にするために、選択透明度値表示ボックス47c’には、その標題として、表示される対象の名称を表わす、例えば、「透明度:」を表示するものである。
この具体例のカラーセレクタ40”の「単色」タブ29では、以上の点が図22に示すカラーセレクタ40での「単色」タブ29と異なるものであり、この具体例のグレースケール41やカラーパレット42,色相指定部44は図22に示すカラーセレクタ40での「単色」タブ29のグレースケール41やカラーパレット42,色相指定部44である。但し、色相指定部44での選択色相値表示ボックス44dや輝度指定部45での選択輝度値表示ボックス45dでは、上記の選択彩度値表示ボックス46c’や選択透明度値表示ボックス47c’と同様に、その表示対象の名称が、例えば、図示するように、「色合い」や「明るさ」といった表現で表示される。
以上の点以外の点については、先の実施形態と同様である。例えば、色相指定部44や輝度指定部45として、図24に示す構成の色相指定スライダ44b’,輝度指定スライダ45b’を用いることができるものであるし、図28(a),(b),図29〜図32に示す表示も行なわれるものである。
また、「グラデーション」タブ30についても、同様であって、例えば、図33に示す「グラデーション」タブ30において、グレースケール41やカラーパレット42,色相指定部44,彩度指定部46,透明度指定部47を、図36に示すグレースケール41やカラーパレット42,色相指定部44,彩度指定部46’,透明度指定部47’の構成とするものである。