JP5232119B2 - How to customize the content screen color - Google Patents

Description

  The present invention customizes the color of a content screen that can customize (change) the color of an operation button, text, check box, and the like constituting the content displayed on the display screen of a terminal device and the like, and the background area of these items. Regarding the method.

  The contents displayed on the display screen of a personal computer are provided with operation buttons, text, check boxes, etc., which enable screen operations, and in order to make the operations easier, It is colored so that it can be easily identified.

  By the way, when displaying text etc., this text may become difficult to see depending on the background color of this text, etc. For this reason, the display color of the text is changed according to the background situation, and this text is easy to see Techniques to do so have been proposed.

  As an example, when text such as the shooting date and the name of the photographer is superimposed and displayed on an image taken with a digital camera (burn-in), the text is easy to see with the area where the text of this image is superimposed as a background. There has been proposed a technique for displaying a background in a color (see, for example, Patent Document 1).

  This is because the color used for the background in advance, that is, the background color is set as multiple character color management information, the color of the area (burn-in position) that is the background of the text in the image is acquired as the background color, Obtain the contrast (brightness difference) with the background color obtained by sequentially selecting the set color of this character color management information, compare this contrast with the preset reference value, and this control exceeds this reference value. In this case, the set color corresponding to the contrast is set as the background color, and when there is no set color whose contrast exceeds the reference value, the set color having the highest contrast is set as the background color.

  As another example, when subtitles with characters on the background are superimposed on the video reproduced from the optical disc, the relationship between the characters in the subtitles (text) and the background color is easy to see. Thus, a technique has been proposed in which a playback video on which such subtitles are superimposed is displayed after being changed (see, for example, Patent Document 2).

  This technology has multiple color relationships between characters and backgrounds in subtitles to make the characters easy to see in advance (for example, a combination of black characters and white background, a combination of white characters and black background, red characters) If the color code table that is set) is set and the transparency of the background, which makes it difficult to see the characters depending on the video, is within the specified range, it corresponds to the character color at this time The background color in the color code table is used as the background color of this subtitle.

JP 2008-182513 A JP 2009-27605 A

  By the way, in the technologies described in Patent Documents 1 and 2, the color used for the background is determined, and the color actually used for the background is determined in relation to the color of the text (character). is there. This may make it easier for the text to be visually recognized against the background, but it may not always be easy for some users to see, and there may be coloring that makes it easier to see. Such coloring cannot be performed.

  In addition, it may be necessary to color the background so that it is easy to see not only the text but also the background. However, the techniques described in Patent Documents 1 and 2 make it easy to see the background of the text with respect to the above images and videos. There is no consideration for what to do.

  Further, on the content screen to be displayed, operation buttons, text, check boxes, and the like (hereinafter referred to as content components) constitute this content. It is different from the text added to the image and its background, and it is not considered to allow such parts to be displayed in a color that is easy for the user to visually recognize.

  The present invention has been made in view of the above, and an object of the present invention is to provide a color customization method for a content screen that can display each part of the displayed screen in a color that is easy for the user to visually recognize. It is to provide.

In order to achieve the above object, the present invention provides a method for customizing a color of a content screen that supports selection of the color of a component displayed on the content screen, and specifies a component that is a target of color selection on the content screen. together, is displayed color customization operation screen, in the color customization operation screen, each element constituting the given said parts, the color palette for color selection is displayed Rutotomoni, other in contact with the specified the part A color palette for color selection is displayed for each element constituting the part. By selecting a desired color from the color palette, the selected part and each of the other parts are selected. Displayed in this color, the part is composed of a character and background as the element, and further has a border as the element as necessary, and the character and back as the element. In any one of the color palettes, the color indicating that the luminance contrast ratio between the character and the background is less than the first ratio is an unselectable color and cannot be selected as the color. In either of the color palette for the element other than the designated character of the part or the element constituting the other part in contact with the designated part , the brightness of these parts is indicated. the color contrast ratio is less than the second ratio, a color not recommend a selection, and is characterized in subjecting mark indicating a color not recommend a selection to the color.

  Furthermore, the present invention is characterized in that the first ratio is 4.5: 1 and the second ratio is 1.7: 1.

  Further, according to the present invention, a specified part is a plurality of parts included in the specified drag area, and a color palette for color selection of each element constituting the part is displayed for each part in the drag area. It is characterized by that.

  Further, the present invention is characterized in that a selected part area including a part specified on the content screen is displayed in a preview area set on the color customization operation screen.

  According to the present invention, a desired part on the content screen can be designated as a color customization target, and for each element constituting this part on the color customization operation screen, the “element” is operated by operating the color selector. It is possible to customize the desired color in a state that the user can easily see.

It is a figure which shows a part of one specific example of content. It is a figure which shows the element at the time of the kind of a part in content, its element, when a part is selected, and when it is not selected (inactive). It is a flowchart which shows a series of processing procedures of one Embodiment of the color customization method of the content screen by this invention. It is a figure which shows one specific example of the content screen displayed by step S100 of FIG. FIG. 5 is a diagram illustrating a specific example of a selection screen when a “color customization setting” button on the content screen illustrated in FIG. 4 is operated. FIG. 6 is a diagram showing a specific example of a content screen when an “OK” button is selected with the “color customization setting” button shown in FIG. 5. FIG. 7 is a diagram illustrating a specific example of a selected component area when one component is selected on the content screen illustrated in FIG. 6. It is a figure which shows one specific example of the color customization operation screen displayed after the movement of the selected components area shown in FIG. FIG. 9 is a specific example of a color customization operation screen in a state where a color selector selected on the color customization operation screen shown in FIG. 8 is open. FIG. 10 is a diagram illustrating a specific example of a “single color” tab and a “gradation” tab in FIG. 9. It is a figure which shows the state which showed the color which cannot be selected with the "single color" tab and the "gradation" tab shown in FIG. 10, and the color which selection is not recommended. FIG. 10 is a diagram illustrating a state in which a character color customization operation of the operation button on the color customization operation screen illustrated in FIG. 9 is performed. It is a figure which shows the state in which the color customization operation of the frame line of the operation button is made on the color customization operation screen shown in FIG. FIG. 10 is a diagram illustrating a state in which a layout background color customization operation is performed on the color customization operation screen illustrated in FIG. 9. FIG. 10 is a diagram illustrating an operation example of a color selector for a layout background on the color customization operation screen illustrated in FIG. 9. FIG. 10 is a diagram showing a gratification operation for a layout background on the color customization operation screen shown in FIG. 9. FIG. 17 is a diagram showing a gratation operation following the operation shown in FIG. FIG. 9 is a diagram illustrating an operation for changing a color customization target on the color customization operation screen. It is a figure which shows an example of operation when color customization operation is complete | finished on the color customization operation screen shown in FIG. It is a figure which shows one specific example of the selection screen displayed by operation shown in FIG. FIG. 7 is a diagram illustrating a specific example of an operation of selecting a plurality of “components” on the content screen illustrated in FIG. 6. It is a figure which shows an example of the color customization operation screen displayed by operation shown in FIG.

  First, the concept of the present invention will be described.

  The content displayed on the display screen of a terminal device such as a personal computer is composed of each component, and each component is composed of its components.

  FIG. 1 shows a part of a specific example of such content, where 100 is an operation button, 101 is a character, 102 is a button background, 103 is a button frame, and 200 is a background.

  In this figure, this part of the content is composed of an operation button 100 and a background 200 of an area other than the operation button 100. Here, the operation button 100 and the background 200 are parts, and this part of the content is constituted by the parts of the operation button 100 and the background 200. Here, the operation button 100 is “component 1”, and the background 200 is “component 2”.

  The operation button 100 of the part 1 includes a frame line 103 that represents the outline of the operation button 100, a button background 102 that is an internal area of the button frame line 103, and characters 101 that form text. 101, the button background 102, and the frame line 103 are elements constituting the component 1.

  The embodiment described below is provided in the terminal device, and customizes (changes) the color of such a content component and each component or each component of the component so that the user can easily recognize the component. ).

  By the way, in order to be able to clearly distinguish a part or an element of a part, the luminance contrast ratio (difference in darkness) between the part or element and another part or other element that is in contact with the part or element (hereinafter referred to as adjacent) Must be sufficiently large.

Here, according to W3C (World Wide Web Consortium) WCAG (Web Content Accesibility Guidelines) recommendation, the luminance contrast ratio is
(L1 + 0.05) / (L2 + 0.05) (1)
However, L1: Relative luminance L of the lighter color of adjacent parts or elements
L2: Relative luminance L of the darker color of adjacent parts or elements
It is represented by

The relative luminance L of the color is sRGB color space of IEC (International Electrotechnical Commission) standard,
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
It is represented by However, the R (red) component, G (green) component, and B (blue) component in the relative luminance of such a color are RsRGB in the sRGB color space, GsRGB in the same G component, and BsRGB in the same B component. ,
When RsRGB ≦ 0.03928, R = RsRGB / 12.92
When RsRGB> 0.03928, R = ((RsRGB + 0.055) /1.055) ^ 2.4
When GsRGB ≦ 0.03928, G = GsRGB / 12.92
When GsRGB> 0.03928, G = ((GsRGB + 0.055) /1.055) ^ 2.4
When BsRGB ≦ 0.03928, B = BsRGB / 12.92
When BsRGB> 0.03928, B = ((BsRGB + 0.055) /1.055) ^ 2.4
However, "^" is represented by an exponent operator, and RsRGB, GsRGB, and BsRGB are respectively
RsRGB = R8bit / 255
GsRGB = G8bit / 255
BsRGB = B8bit / 255
It is.

  Note that R8bit, G8bit, and B8bit are values each represented by 8 bits.

As described above, the luminance contrast ratio is expressed by the above equation (1).
(1) Since the content creator cannot control user settings regarding text rendering (imaging from numerical data: for example, font smoothing or anti-aliasing), the brightness contrast ratio of the text is anti-aliased (displayed). It is evaluated with the process of eliminating jagged edges appearing on lines and the like turned off.
(2) When there is a border around the character, the border may increase the contrast and is used for calculating the contrast between the character and the background color. However, a thin border around the character is treated as a character. If the thick border around the character looks like a bulk (暈: halo or afterglow) and fills the fine strokes of the character, it will be considered as the background color.
(3) Application to WCAG should be evaluated for the combination of colors specified in the content, assuming the producer is adjacent in typical representation. Producers do not need to consider unusual expressions, such as color changes by user agents. However, this is excluded if it occurs due to the creator's source code.

  When dithering (representing an intermediate color by combining displayable colors) occurs, the value of the original color is used. For colors that are dithered at the source, the average color used (R average, G average, B average) should be used.

  The embodiment described below regulates the color of content parts and their elements based on the above luminance contrast ratio, and enables the color of any part or element to be customized according to the user. Is.

  Here, this color regulation is to make it impossible to select a color whose luminance contrast ratio is less than 4.5: 1 between a character and its background (a background in which this character overlaps). In addition, an element other than a character and its background or an element adjacent to the element other than the character (for example, the background color of the button and the border color of this button, the border color of the button and the background color in which this button is placed) Etc.) can be selected if the luminance contrast ratio is 1.7: 1 or more.

  In the following, the embodiment will be described assuming that the luminance contrast ratio specified above is 4.5: 1 and 1.7: 1 as described above. Other luminance contrast ratios that make each “element” easily visible can be defined. However, it is assumed that the luminance contrast ratio defined between the character and the “element” adjacent to the character is larger than the defined contrast ratio between the “element” other than the character.

  Further, in this embodiment, all the elements in contact with each other (in FIG. 1, the character 101 of the part 1, the background 102 of the part 1, the frame line 103 of the part 1, and the part 2) are individually customized. In the case of gradation (continuous change in color and shading), the lowest luminance contrast ratio (4.5: 1 or 1.7: 1 above) is discriminated with the most severe color.

  FIG. 2 is a diagram showing a list of component types and their elements.

  In this figure, here, as a part, “button”, “text”, “layout” as a background where these “button” and “text” are arranged, “text box” for inputting characters, two or more "Check box" that is provided for each item and can select one of them, and for any two or more items, only one of them can be selected “Radio buttons” that can be used, “tab panels” used to display multiple types of information in a limited area, and elements for these are listed. Such elements include “character / symbol”, “character / symbol border”, “background”, “frame line”, and “shadow”. Here, as attributes of the elements “character / symbol”, “character / symbol border”, “background”, and “border”, an element in a state where it can be “pressed” (functions by pressing operation) and “pressed” There are “inactive” elements that can be “pressed” but cannot be “pressed” (but do not function even if pressed), and for the elements that can be “pressed”, for example, Taking “character / symbol” as an example, there are “character / symbol” and “inactive character / symbol”. The state indicating that the part was selected when “pressed” was set to “when selected”. For example, when “character / symbol” is taken as an example, “character / symbol” indicating a state where the character can be pressed before being pressed and “not active” indicating a state where the character cannot be pressed before being pressed. Character / symbol ”and“ character / symbol at the time of selection ”indicating the state after being pressed. For each part, the corresponding attribute of each element is marked with a circle.

  According to FIG. 2, the parts “button”, “layout”, “text box”, “check box”, “radio button”, “tab panel” are “character / symbol”, “character / symbol border”, “background” ”,“ Frame line ”, and“ shadow ”elements, all of which are in an“ inactive ”state. The part “layout” consists of elements of “character / symbol”, “character / symbol border”, “background”, “border”, and “shadow”, but these elements are inactive because they are not pressed. There is no state or selection state. The part “text” is composed of elements of “character / symbol” and “character / symbol border”, and these elements have an inactive state. The “Tab Panel” is composed of “character / symbol”, “character / symbol border”, “background”, “border”, and “shadow” elements. There are also states that can be “selected”.

  Based on the above, an embodiment of the present invention will be described below with reference to FIGS. FIG. 3 is a flowchart showing a series of processing procedures of an embodiment of the content screen color customization method according to the present invention. The embodiment will be described with reference to FIG.

  First, when content data is downloaded by a terminal device (not shown), the content screen based on the content data shown in FIG. 4 is displayed on the display screen (step S100 in FIG. 3).

In FIG. 4, 1 is a display screen, 2 content screen, the "set color customization mode" button 3, 4 content data display area, 5,5 _{1-5 4} operation buttons, 5 ₅ the right side Is an operation unit for selecting a function to be executed when the “execute” button provided in the button is pressed (here, a pull-down menu), 5a is a button character, 5b is a button background, and 5c is a button background. Button border, 6 is background, 6a and 6b are characters, 7 is a tab panel, 7a is tab panel characters, 7b is a tab panel background, 8 is text, 9 is a check box, 10 is a text box, and 11 is a cursor .

In the figure, the content screen 2 displayed on the display screen 1 includes, for example, “importance” for processing the content displayed in the content display area 4 together with the content display area 4 displaying the downloaded content. “Change” button 5 ₁ , “Change deadline” button 5 ₂ , “Change person in charge” button 5 ₃ , “Change status” button 5 ₄ (hereinafter referred to as operation button 5 when collectively or collectively) and function selection operation unit 5 ₅ for, such operation buttons 5 or the operation unit _{5. 5} is displayed superimposed layout (background) 6, tab panel 7, the text 8 displayed on the tab panel within 7 are displayed in the content display area 4 A check box 9 text box 10 or the like provided for each content data is displayed. These are the above-mentioned “parts” constituting the content screen 2.

In the content display area 4, here, a list of tasks including items “importance”, “deadline”, “person in charge”, “status”, “memo”, and the like is displayed. Is provided with a check box 9 for enabling processing. 'Importance Modify "button 5 ₁ and" date change "button 5 _2," the person in charge Change "button 5 _3," Status Change "button 5 _4, the operating unit 5 ₅ parts, of any of the content display area 4 When a task is not checked by the check box 9 and cannot be processed, all the tasks are inactive and will not function even if pressed, but even if there is one task in the content display area 4, the check box 9 All of these are in a state where they can be “pressed” when they are checked and checked.

For example, as illustrated, when the task 3 and 4 were selected in the processable state for these tasks 3,4, by selecting the "importance change" button 5 _1, the item " it can be made to change the contents of the importance ", by selecting the" date change "button 5 _2, to be able to change the content of the item" date "," the person in charge changes "button 5 ₃ by selecting, to be able to change the content of the item "person in charge", by selecting the "status change" button 5 _4, it is possible to change the content of the item "status". Further, the operation unit 5 _5, as illustrated, in a state in which the item is selected in the "Notes Description" and "run" buttons is depressed, the content of the item "Notes" of the task 3,4 It can be changed. In the operation portion 5 _5, by pressing the ▲ button, a list of functions, a desired function is pressed "Run" button of which is depressed, this function is above tasks It is executed for 3 and 4.

In the following, as an object of color customization, it will be described the operation button 5 as a representative example, this "memo describing" change operation unit 5 ₅ or the other of the "parts", that is, the tab panel 7, text 8, check box The same applies to the radio box 10 and the like.

The operation button 5 as a part is composed of a character 5 a, a background 5 b, and a frame line 5 c, and these are “elements” constituting the operation button 5. The characters as such elements, the "importance Modify" button 5 ₁ is the "importance of Change", is in the "date change" button 5 ₂ "date change", in the "personnel changes" button 5 ₃ "in charge is a person change ", is" the status change "button 5 _4" status change ". Similarly, characters 6 a and 6 b indicating the title of the layout 6 are displayed in the layout 6 as a component. The characters 6 a and 6 b and the background of the layout 6 are elements constituting the layout 6. . The characters 6 a are “change importance” button 5 ₁ , “expiration date change” button 5 ₂ , “change person in charge” button 5 ₃ , and “status change” button 5 as parts displayed overlapping the layout 6. _When a command such as ₄ is designated, it is represented by a title (text) such as “frequently used commands”.

  The text 8 displayed on the tab panel 7 is content data and is a component. On the other hand, a character 7 a “person” displayed on the tab panel 7 represents the title of the tab panel 7 and is an element constituting the tab panel 7. The tab panel 7 is composed of the character 7a as an element and the background 7b as an element, and the text 8 as a part is superimposed on the background 8b. Here, there is a tap panel whose title is “group”, but this is also the same as the tab panel 7.

  Furthermore, in the content display area 4, a list of tacts is displayed as shown in the figure, but here, a check box 9 as a part is provided for each tact.

  Furthermore, the content screen 2 displays mode selection buttons such as a “color customization” button 3 on the upper side thereof, and any of these buttons is designated with the cursor 11 and clicked (hereinafter, this operation is performed). A mode corresponding to this is set. The “color customization” button 3 is used to set a mode for customizing the colors of parts and elements on the content screen 2.

  When the content screen 2 is displayed (step S100 in FIG. 3) and the cursor 11 is operated and the “color customization” button 3 is pressed (step S101 in FIG. 3), the selection screen shown in FIG. 5 is displayed. Is displayed.

  In FIG. 5, 12 is a selection screen, 13 is text, 14 is an “OK” button, and 15 is a “cancel” button.

  In this figure, here, the selection screen 12 is displayed in the center of the content screen 2 so that the content screen 2 can be seen through. However, only the selection screen 12 may be displayed.

  In this selection screen 12, for example, a text 13 such as “Please select the part you want to customize the color” is displayed, and an “OK” button 14 for customizing the color of the part and a color customization mode are displayed. A “Cancel” button 15 for canceling is displayed. When the “Cancel” button 15 is pressed by the operation of the cursor 11, the color customization mode is canceled and only the content screen 2 shown in FIG. 3 is displayed. Return to.

When the “OK” button 14 is pressed, the color customization mode is set, and the content screen 2 shown in FIG. 6 is displayed (however, in FIG. 6, parts corresponding to FIG. omitted) and redundant description Te, one component to be desired by operating the cursor 11, for example, pressing the "date change" button 5 _2, so that this part is pressed (step S102 in FIG. 3 , S103).

At the same time, in this case, components that are pressed a "date change" button 5 _2, on the parts not overlap other components (step S104 in FIG. 3 "No"), As shown in FIG. 7 (in FIG. 7, reference numeral 16 denotes a pressed part area. Parts corresponding to the above-mentioned drawings are given the same reference numerals, and redundant description is omitted). This part on the content screen 2 completely includes "date change" button 5 ₂ is and the other components (in this case, the layout 6) adjacent to it and a part of, pressing part area 16 is clearly that eliminated as much as possible other components The other areas of the content screen 2 are seen through.

  Then, the entire content screen 2 shown in FIG. 6 is moved, for example, in the left direction, whereby the pressed part area 16 is moved, and the color customization operation screen shown in FIG. 8 is displayed (FIG. 3). Step S105).

  In FIG. 8, 17 is a color customization operation screen, 18 is a color selector display screen, 19 is a “button” color selector display area, 19a to 19c are color selectors, 20 is a “layout” color selector display area, and 20a. ˜20c is a color selector, 21 is a “selected color display” field, 22 is a “selected color candidate display” button, 23 is a “clear” button, 24 is a preview area, 25 is a scroll operation unit, and 26 is an “OK” button. , 27 is a “cancel” button, and 28 is a “clear all” button.

In this figure, the color customization operation screen 17 includes a color selector display screen 18 in which the content data display area 4 in the content screen 2 shown in FIG. 4 is changed, and a preview area 24 in which the display area of the tab panel 7 is changed. As described above, the entire content screen 2 shown in FIG. 6 is moved until the pressed parts area 16 is positioned in the preview area 24, and this preview area 24 of the content screen 2 is displayed. Only the portion included in the preview area 24 is displayed. However, in the preview area 24, only the pressed part area 16 is clearly shown, and the other parts are seen through. Thereby, the part pressed in the content screen 2 of FIG. 6 (in this case, the “change time limit” button 5 ₂ ) is clearly shown and can be easily confirmed.

Further, on the color selector display screen 18, a color selector is displayed for each component specified in the pressed component area 16 between the component pressed on the content screen 2 in FIG. 6 and another component displayed by overlapping this component. An area is set. In the above example, the color selector display area 19 of a selected "deadline change" button 5 _2, color selector display color selector display area (Layout 6 for layout 6 this "limit change" button 5 ₂ are stacked Area) 20 is set. Then, for each color selector display area 19, 20, a color selector for displaying the color for each element of the corresponding part is displayed. In the example in this case, the color selector display area 19 for characters 5a button is "element" of the "date change" button 5 ₂ as components (Fig. 4) color selector 19a is, in the background 5b For the color selector 19b, the color center 19c is set for the frame line 5c, and the color selector display area 20 of the layout 6 has a layout 6 that is an “element” of the layout 6 as “component”. The color selector 20a is set for the character 6a (FIG. 4), the color selector 20b is set for the background, and the color selector 20c is set for the frame line.

  Each color selector is described by taking the color selector 20c as an example. The color selector 20c includes a "selection color display" column 21, a "selection color candidate display" button 22, and a "clear" button 23. In the "selection color display" column 21, The current color of the “element” (in this case, the frame line of the layout 6) corresponding to the color selector 20c is displayed, so that the current display color of this “element” can be confirmed. . The “selected color candidate display” button 22 is for displaying means for customizing (changing) the color as will be described later, and the “clear” button 23 is for selecting the color as described later. This is for canceling the selected color and also for canceling the restriction on the selection of the color.

  Further, one part selected on the content screen 2 shown in FIG. 6 (step S103 in FIG. 3) is overlaid with another part (for example, the operation button 5) as shown in the layout 6, for example. Even if it is present ("Yes" in step S104 in FIG. 3), as shown in FIG. 8, the color selector display area 19 of the selected part and the color selector display area 20 of the other parts superimposed on this part A color customization operation screen 17 in which is set is displayed. However, when the pressed component is the layout 6, the overlapping components are a plurality of operation buttons 5. In this case, a color selector display area 20 is provided for each of these operation buttons 5. It is set and displayed (step S106 in FIG. 3). If the pressed part is the tab panel 7, the part that overlaps the text is the text 8, and in this case, it is overlapped with the color selector display area 19 of the selected tab panel 7. The color customization operation screen 17 in which the color selector display area 20 for the text 8 is set is displayed (step S106 in FIG. 3).

  The color customization operation screen 17 includes a scroll operation unit 25 for scrolling the color selector display screen 18 up and down, an “OK” button 26 for confirming a color customization operation result described later, and a later-described color customization operation screen 17. The same function as operating the “Cancel” button 27 for canceling the color customization operation and the “Clear” button 23 of all the color selectors 18 a to 18 c and 19 a to 19 c displayed on the color selector display screen 18 at the same time. And a “clear all” button 28.

  When the “selection color candidate display” button 22 of the desired “element” color selector is pressed using the cursor 11 on the color customization operation screen 17 shown in FIG. 8, as shown in FIG. The selected color selector is expanded by pressing the “candidate display of selected color” button 22, and the color of the “element” can be customized.

  In FIG. 9, 17a is a color customization operation screen at this time, 29 is a "single color" tab, 30 is a "gradation" tab, and portions corresponding to those in FIG. To do.

Now, the color selector display "candidate display selection color" in the area 19 Karasekuku 19a~19c button 22 "Period Change" button 5 ₂ in the color customization operation screen 17 shown in FIG. 8, also the color selector layout 6 If the “selection candidate for selected color” button 22 of the color selector 20 b is pressed in the display area 20, the color selectors 19 a to 19 c and 20 b are selected and expanded. That is, here, "Period Change" button 5 ₂ of element "text" 5a color selector 19b of the color selector 19a for setting the text color, also element for setting the background color of the "button background" 5b Similarly, the color selector 19c for setting the border color of the element “button border” 5b and the color selector 20b for setting the background color of the element “background” of the layout 6 are developed. .

These color selectors 19/20 (collective names of the color selectors 19a to 19c and 20a to 20c) include a “single color” tab 29 for determining colors and a “gradation” tab 30 for determining gradations. One of these is selected by the operation. In the example shown in FIG. 9, the color selector "button Border color" for color selector 19a Like elements "button border" 5c of "buttons character color" for "time change" button 5 ₂ of element "text" 5a "monochromatic" tab 29 and the color selector 20b of the "background color" 19c and for the elements of the layout 6, "background" is selected, "period changes" button 5 ₂ of the element "button background to" button in the background "5b This shows a state in which the “gradation” tab 30 is selected in the “color” color selector 19b.

  These “single color” tab 29 and “gradation” tab 30 are in a state in which the color representing the corresponding “element” (that is, “selected color display” column 21) is selected (step S107 in FIG. 3). ).

FIG. 10A is a diagram showing a specific example of the “single color” tab 29 in FIG. 9, in which 21a is a set color display section, 29a is an opacity designation section, 29b is a hue display column, 29c is a color palette, 29d ₁ is a hue designation part, 29d ₂ is a density designation part, and 29e ₁ and 29e ₂ are sliders.

In FIG. 10 (a), "single color" tab 29, "element" (e.g., "elements" of the "Period Change" button 5 ₂₎ and opacity specified portion 29a that represents the opacity of the color that is currently set to , A color palette 29c for selecting a color representing a list of colors at various densities that can be set, and a hue display column 29b representing the type of color included in the color palette 29c.

  In the color palette 29c, the horizontal axis is a color (color type) coordinate axis, and various colors are arranged along the color coordinate axis. The vertical axis is a density coordinate axis, and the color of the same color along the density coordinate axis. Are arranged at different concentrations. By selecting a desired color on the color palette 29c by operating the cursor 11, the color of the “element” corresponding to the “single color” tab 29 is set to the selected color. At the same time, the color displayed in the set color display section 21a in the “selected color display” column 21 (FIG. 8) is also changed to the selected color.

On the upper side of the color palette 29c, a hue designation unit 29d ₁ for changing the hue to be selected is provided, and a slider 29e ₁ for selecting a hue is provided in the hue designation unit 29d ₁ . By moving the slider 29e ₁ in the left-right direction along the color coordinate axis, it becomes possible to select the color of the hue facing the slider 29e ₁ . Further, on the left side of the color pallet 29c, a density designation unit 29d ₂ for changing the color density is provided, and a slider 29e ₂ for selecting the density is provided in the density designation unit 29d _2. Yes. By moving the slider 29e ₂ in the vertical direction along the density coordinate axis, it becomes possible to select the color of the density facing the slider 29e ₂ . When the slider 29e ₁ is moved in the left-right direction, the hue selected in accordance with this is changed, and at the same time, the color displayed in the color setting display section 21a of the “selected color display” column 21 is changed. When 29e ₂ is moved in the vertical direction, the density of the hue selected by the slider 29e ₁ changes accordingly, and is displayed on the color setting display portion 21a in the “selected color display” column 21 together with this. The density of the color changes.

Thus, when the slider 29e ₁ is set at a position facing the desired hue and the slider 29e ₂ is set at a position facing the desired density, the color of the desired color is selected at the desired density. The color of the desired color at the desired density is displayed in the color setting display section 21a of the “Selected color display” column 21.

FIG. 10B is a diagram showing a specific example of the “gradation” tab 30 in FIG. 9, in which 21b is a setting gratification display portion, 30a is an opacity designation portion, 30b is a hue display column, and 30c is a color. Palette, 30d ₁ is a hue designation part, 30d ₂ is a density designation part, 30e ₁ and 30e ₂ are gradation setting parts, 30f ₁ is a gradation bar, 30f ₂ and 30f ₃ are end marks, and 30f ₄ is a hue / A density instruction mark 30g is a gradation direction setting field.

  In the figure, a “gradation” tab 30 is provided with an opacity designation portion 30 a, a hue display field 30 b and a color palette 30 c, as well as a gradation setting portion 30 f and gradation direction setting, like the “monochrome” tab 29. A column 30g is provided. Here, the color palette 30c is for selecting a color when setting gradation.

The gradation direction designation field 30g allows the gradation direction (color or darkness change direction) to be arbitrarily switched and set. When this direction is at an angle of 0 °, the color and its darkness are displayed in the horizontal direction. When the angle is 90 °, the color and its intensity are changed sequentially. When the angle is 45 °, the color and its intensity are changed obliquely. It is. For example, when setting the direction of the graphene station in the background 5b of the "Period Change" button 5 in ₂ (FIG. 4), as shown in FIG. 9, in the color selector 19b of "buttons background color""GrasStation" The tab 30 may be selected and an operation may be performed so as to set an angle corresponding to the direction in the gradation direction setting field 30g in the “gradation” tab 30 (FIG. 10B). Now the gradation direction angles 0 ° to specify, the color and the density of the background 5b of the "Period Change" button 5 within ₂ appears to vary in the transverse direction, by specifying an angle of 90 °, the "period appears color and its density of the background 5b change "button 5 within ₂ is changed in the vertical direction, by specifying an angle 45 °, the color and the density of the background 5b of the" period change "button 5 within ₂ Is displayed in an oblique direction.

Gradation setting unit 30f includes a gradation bar 30f ₁ representing a gradation, and an end mark 30f _2, 30f ₃ representing the edge of the gradation bar 30f _1, for indicating the color or density between the ends of the gradation bar 30f ₁ It is made from the hue / density indication mark 30f ₄ Metropolitan. The hue / density instruction mark 30f ₄ can be changed in position along the gradation bar 30f ₁ , can be deleted, and the deleted hue / density instruction mark 30f ₄ is added again. You can also. ,
At the position indicated by the end marks 30f ₂ and 30f ₃ and the hue / density indication mark 30f ₄ on the gradation bar 30f ₁ , the color is designated by the same operation method as the color designation method on the “single color” tab 29. can do. That is, by designating one end mark 30f ₂ or 30f ₃ (touching with the cursor 11) and selecting a hue of a desired density on the color palette 30c, this end of the gradation bar 30f ₁ is selected. The color of the selected density is set at the end on the mark 30f ₂ or 30f ₃ side, the other end mark 30f ₃ or 30f ₂ is designated and operated, and the hue of the desired density is selected on the color palette 30c. by, set the color of the selected concentration on the end portion of the end mark 30f ₃ or 30f ₂ side of the gradation bar 30f ₁ is a result, is set to the gradation bar 30f ₁ the end of this one A gradation is set from a color having a different density to a color having a density set at the other end. At the same time, this color gradation is displayed in the setting gradation display portion 21b of the “color” display field 21.

Here, the color gradient set by the gradation bar 30f ₁ is here for one end (for example, the end on the end mark 30f ₂ side) of the gradation bar 30f ₁ on the color palette 30c. specified color and the other end (e.g., end portions of the mark 30f ₃ side) color gradient consisting of rows of color along a straight line connecting the designated color is displayed for. Therefore, when these two specified colors are on one straight line parallel to the density coordinate axis of the color palette 30c, the gradation bar 30f ₁ can obtain a color gradation in which the density of the same color changes. When the two specified colors are on a single straight line that is not parallel to the density coordinate axis, a color gradation in which at least the colors change is obtained.

Here, when the gradation direction designation field 30g has an angle of 90 ° and the gradation direction of the “element” such as the layout 6 is the vertical direction (vertical direction), the end mark 30f of the gradation bar 30f _{1 The} density and hue color set at the end on the ₂ side represent the color at the lower end of this “element”, and the density set at the end on the other end mark 30 f ₃ side of the gradation bar 30 f _1. The color of represents the color at the upper end of this “element”, and the gradation bar 30f ₁ represents the gradation between the colors of the colors at these densities, and in this gradation, this “element” represents the color / density. Gradation will be displayed. Further, when the gradation direction designation field 30g has an angle of 0 ° and the gradation direction of the “element” such as the layout 6 is the horizontal direction (lateral direction), the end mark 30f ₂ of the gradation bar 30f ₁ The density and color set at the end on the side represent the color at the left end of the “element”, and the density and color set at the end on the other end mark 30f ₃ side of the gradation bar 30f _1. The color of represents the rightmost color of the “element”, and the gradation between the density and color is represented by the gradation bar 30f _{1. In} this gradation, the “element” represents the color / density gradation. Will be displayed. When the gradation direction designation field 30g is an angle other than 0 ° or 90 ° and the gradation direction of the “element” such as the layout 6 is an oblique direction, the end mark 30f of the gradation bar 30f _{1 The} density and color set at the end on the ₂ side represent, for example, the color on the lower left corner side of this “element”, and at the end on the other end mark 30 f ₃ side of the gradation bar 30 f _1. The set density and color represent the color on the upper right corner of this “element”, and the gradation between these density and color is represented by the gradation bar 30f _1. Element "is displayed in gradation of color / density.

Hue / concentration indicator mark 30f ₄ is for to be able to specify the color hue at the desired concentration in the middle of the gradation bar 30f _1, by specifying the hue / density indication mark 30f _4, color by selecting operating the color hue at the desired concentration in the palette 29c, the the selected concentration to the position of the hue / density indication mark 30f ₄ the gradient bar 30f _1, the color hue is set. In this case, between the end of the gradation bar 30f _{1 on} the one end mark 30f ₂ side and the position facing the hue / density instruction mark 30f ₄ , between the density and color set in these. gradient is set, further, between a position and the other end mark 30f ₃ side end portion opposite the hue / density indication mark 30f _4, the concentration which is set to, the gradation colors hue setting Is done. For example, the end mark 30f ₂ , 30f ₃ has the same color C at the different densities D1, D2, and the hue / density instruction mark 30f ₄ has the same hue and a dark density D3 (> D1, D2). Assuming that the color C is set, the gradation bar 30f ₁ sets a gradation in which the density changes from D1 to D3 from the left side and further changes from D3 to D2. This gradation is set to the corresponding “element”.

  FIG. 10 shows the configuration of the “monochrome” tab 29 and the “gradation” tab 30. In these “monochrome” tab 29 and “gradation” tab 30, based on the luminance contrast ratio described above, Colors that cannot be selected in the color palettes 29c and 30c (hereinafter referred to as “color” is assumed that “color” is composed of hue and density) and a color that is not recommended for selection are set.

  FIG. 11 is a diagram showing a display example of such a “single color” tab 29 on a color palette, in which 31a is an “X (cross)” mark indicating a cross mark, and 31b is a “/” mark indicating an oblique line mark. Parts corresponding to those in FIG. 10 are denoted by the same reference numerals and redundant description is omitted.

  As described above, the luminance contrast ratio must be 4.5: 1 or more between the element “character / symbol” and the other elements adjacent to the element “character / symbol”, and between elements other than the element “character / symbol”. In this embodiment, colors that do not satisfy this rule are displayed in the color palette of the “single color” tab 29 or the “gradation” tab 30. The

  FIG. 11A is a diagram showing a specific example of the display state of the color palette 29c for the element “character / symbol” and other elements in contact with the element “character / symbol”, taking the “monochrome” tab 29 as an example. "×" mark 31a is displayed for a color having a luminance contrast ratio of less than 4.5: 1, so that this color cannot be selected.

In the color customization operation screen 17a shown in FIG. 9, the color palette of the “single color” tab 29 in the color selector 19a of the button character 5a (FIG. 4) with the selected “change expiration date” button 5 ₂ (FIG. 6). While color "×" mark 31a is attached at 29a is shown, which in this "date change" button 5 _2, in the background 5b of characters character 5a and which are clustered together, the character The “x” mark 31a is attached to the color of the character 5a whose luminance contrast ratio is less than 4.5: 1 with respect to the color of the background 5b. Therefore, in the color customization operation screen 17a shown in FIG. 9, the color with the “x” mark 31a on the color palette 29a cannot be selected. By selecting a color without the “x” mark 31a in the color palette 29a, the content screen 2 (FIG. 4) is displayed for the character 5a with respect to the color of the background 5b of the character displayed in an overlapping manner. Thus, the color is colored so that the user can clearly see.

  FIG. 11B is a diagram showing a specific example of the display state of the color palette 29c for two elements other than the element “character / symbol”, taking the “single color” tab 29 as an example. For a color with a luminance contrast ratio of less than 1.7: 1, a “/” mark 31b is shown and this color can be selected, but when it is selected, the luminance between these “elements” Since the contrast ratio is less than 1.7: 1, it is not recommended.

In the color customization operation screen 17a shown in FIG. 9, the color of the “single color” tab 29 in the color selector 19c of the button border 5c (FIG. 4) of the selected “change expiration date” button 5 ₂ (FIG. 6). While color "/" mark 31b is attached in the pallet 29a is shown, which in this "date change" button 5 _2, in the background 5b of characters displayed borders 5c and this contact The “/” mark 31b is attached to the color of the frame 5c having a luminance contrast ratio of less than 1.7: 1 with respect to the color of the background 5b of the character. Therefore, in the color customization operation screen 17a shown in FIG. 9, selection of the color with the “/” mark 31b in the color palette 29a of the button frame color selector 19c is not recommended. By selecting a color to which the “/” mark 31b is not attached in the color palette 29a, the content frame 2 is displayed on the button frame 5c with respect to the color of the background 5b of the character displayed in contact therewith. In FIG. 4, it is colored so that the user can clearly see it.

Here, in the color customization operation screen 17a shown in FIG. 9, a “clear” button 23 is provided for each color selector 19/20, but when the “clear” button 23 is pressed, the “clear” button 23 is provided. In the color selector 19/20 in which is pressed, the color selection or the gratation selection is canceled. In other words, no color or any gradient is selected. For example, in FIG. 11A, when the “Clear” button 23 is pressed, the color currently selected in the color selector 19a is canceled, and therefore the “Period change” button displayed at this time is displayed. 5 with the color of the _second button character 5a disappears, the color displayed by the "color display" column 21 disappears. Further, in FIG. 11B, when the “clear” button 23 is pressed, the gradation set at this time in the color selector 19b is canceled, and therefore the “period change” button displayed at this time is displayed. 5 together with the gradient disappears in the _second button of the background 5b, it lost even gradient that is displayed in the "color display" column 21.

At the same time, since the selected color or gratation disappears, the color set with the “x” mark 31 a and the “/” mark 31 b shown in FIG. 11 changes. For example, in FIG. 9, "Period Change" button 5 "Clear" button 23 in the color selector 19b for _second button background 5b is depressed, if the gradient is canceled, "Period Change" button 5 ₂ buttons In the color selector 19a for the character 5a, the color set with the “x” mark 31a cannot be selected by the gratation set by the color selector 19b so far. For such a color, the “x” mark 31a is removed. In FIG. 9, "Clear" button 23 in the color selector 19a is pressed, the color selected at that time with the character 5a buttons "Period Change" button 5 ₂ is released, this time, for this in the color selector 19a, upon the setting of the graphene station in the color selector 19b for "period change" button 5 ₂ button background 5b, "×" mark 31a with respect to the color it can no longer be selected for this graph station Is set, even if the “clear” button 23 is pressed by the color selector 19a, there are colors in which the “x” mark 31a is deleted, but the “x” mark 31a remains set. There are also colors. Such a color in the color selector 19a is a color that cannot be selected regardless of which color is selected in the color selector 19b.

  The same applies to the case where the color selector 19b selects the “x” mark 31a for the color by the color selector 19a. Even if the “clear” button 23 is pressed on the color selector 19b, the “x” mark is displayed. In some cases, the color to which the mark 31a is set remains. The same applies to the color for which the “/” mark 31b is set.

  In the color customization operation screen 17a shown in FIG. 9, only the color selector 20b of the backgrounds 6a and 6b (FIG. 4) of the layout 6 is expanded in the color selector display area 20 of the layout 6, and the “single color” tab 29 is displayed. The color palette 29c (FIG. 11) shows that the “x” mark 31a is set. This is not expanded, but the characters 6a and 6b of the layout 6 are displayed in the color selector 20a. The “x” mark 31a is set for a color having a luminance contrast ratio of less than 4.5: 1 with respect to the color in the color palette.

In addition, the "date change" button 5 ₂ of the frame line 5c will be in contact with the background of the layout 6. For this reason, the color contrast ratio is set so that the luminance contrast ratio is 1.7: 1 or more. In this case, since "date change" button 5 ₂ is what is specified as described above, with respect to the frame line 5c, so that the color can be selected in the way of the layout 6 is restricted. That is, the color is not set the "/" symbol 31a in the color palette 29c of "date change" button 5 ₂ borders 5c, luminance contrast ratio in the color palette 29c on the color selector 20b background layout 6 The “/” mark 31a is also set for a color that is less than 1.7: 1.

  As described above, when the “element” color selector that requires color customization is designated on the color customization operation screen 17 shown in FIG. 8, the designated “element” color selector is expanded as shown in FIG. 9. The color customization operation screen 17a is displayed (step S108 in FIG. 3).

  In this case, as described above, the specified “part” and each other one or more parts that are in contact with this (that is, the “parts” are in contact with each other by being overlapped or overlapped with this “part”) In addition, the color selector of the “element” is expanded, and by selecting a color in the color palette of that color selector or selecting a gradation, the corresponding “element” is selected with the selected color. Alternatively, it can be expressed with a selected gradation. In addition, each color palette has a necessary luminance contrast ratio with respect to the “element” in contact with the “element” so that it can be visually recognized easily. An “x” mark 31a or a “/” mark 31b for indicating that is added to a color that is not easy to do so that it cannot be selected or is not selected.

  When the content screen 2 (FIG. 4) is displayed, either “part” is designated as described above, and either “part” or “part” in contact with this “part” is selected. When the color customization is performed with the “element” color selector, the state of the color palette of each “element” color selector (the state where the “x” mark 31 a and the “/” mark 31 b are added) is maintained as it is. Next, when the same content screen 2 is displayed, the state of the color palette of the color selector of each “element” is maintained as it is. At this time, unless the “clear” button 23 of any color selector is pressed, the state of the color palette of the color selector of each “element” does not change.

  However, when the “clear” button 23 of any “element” color selector is pressed, the color palettes of the other “element” color selectors are applied as described above. Depending on the brightness / contrast ratio, the color that is prohibited from being selected by setting the “x” mark 31a and the color that is not recommended for selection due to the use of the “/” mark 31b may change.

  While the color customization operation screen 17a shown in FIG. 9 is displayed (step S108 in FIG. 3), there is an “element” that you want to customize (“Yes” in step S109 in FIG. 3). When the color to be selected is selectable in the color palette of the color selector of this “element” (the state where the “x” mark 31a and the “/” mark 31b are not added) (“Yes” in step S110 in FIG. 3) ) By selecting and operating a desired color in this color palette as described above, this “element” is displayed in this color (step S111 in FIG. 3).

  On the other hand, the desired color cannot be selected in this color palette (the state where the “x” mark 31a is added) or the case where the selection is not recommended (the state where the “/” mark 31b is added). In some cases (“No” in step S110 in FIG. 3), first, the “clear” button is pressed with the color selector of another “element” that touches the “element” corresponding to the color selector having this color palette, The color of “element” is canceled (step S112 in FIG. 3), and in this state, it is determined whether or not the desired color can be selected with this palette (step S110 in FIG. 3). If the color cannot be selected (“No” in step S110 in FIG. 3), the “Clear” button is pressed with the color selector of another “element” in contact with the other “element”. Pressing the 23 (step S112 in FIG. 3). When such a process is sequentially performed and the “x” mark 31a is canceled for the desired color and becomes selectable (“Yes” in step S110 in FIG. 3), the desired color can be selected. (Step S111 in FIG. 3). Accordingly, the color of this “element” can be customized to this desired color (step S111 in FIG. 3).

Now, on the color customization operation screen 17a shown in FIG. 9, it is desired to customize the color of the “character” 5a (FIG. 4) which is the “element” of the item “change expiry date” button 5 ₂ (FIG. 4). If the color palette 29c (FIG. 10A) of the color selector 19a for the "character" 5a is added with an "x" mark 31a that disables customization to the color to be customized, "expiration date change" by presses the "clear" button 23 of the color selector 19b of the button 5 ₂ in contact with the "text" 5a this "date change" button 5 ₂ of "background" 5b, gradient which is set in the color selector 19b There would be released, this way, you want to customize the color selector 19a to the "character" 5a of the "date change" button 5 ₂ But the "×" mark 31a is released, when it became possible selection, will be able to select this color.

Therefore, by operation of the cursor 11, by selecting the desired color from the color palette 29c, content screen 2 is selected (Fig. 6) of the "date change" button 5 ₂ characters 5a is displayed in this color While thus, this is represented by the depressed part area 16 in the preview area 24, corresponding an "element", "date change" button 5 ₂ character 5a in this part area 16 is the selected Expressed in different colors.

However, this time, for example, "×" mark 31a in the color palette 29c in previous color that color selector 19b which is a "date change" button 5 ₂ of "elements", "background" 5b is added Sometimes it becomes a state. However, such a state is to be maintained, since the "×" marks 31a to this color in the color palette is added, the color that is currently set, "date change" button 5 ₂ "Character "5a" indicates that the color does not satisfy the relative contrast ratio.

Note that an element, for example, to "background" 5b of "date change" button 5 _2, as described above, after pressing the "Clear" button 23, the result of selecting a color for a desired, "date change" If the color currently set in "character" 5a of button 5 _2, if the "×" mark 31a becomes added to selectively non color contrast, the process as described above is not made In this case, this state is maintained as it is. Also in this case, since the “x” mark 31a is added to this color in the color palette of the color selector 19a, it can be confirmed that this color cannot be selected. When the “clear all” button 28 is designated on the color customization operation screen 17a shown in FIG. 9, all the color selectors 19/20 displayed on the color customization operation screen 17a (ie, here, color selector 19 a - 19 c, on all 20 a to 20 c), is released color set, along with the color of the "date change" button 5 ₂ or layout 6 for these is deleted (hence, "color display" column 21 (FIG. 10), the color is also not displayed), and the “x” mark 31a and the “/” mark 31b in those color palettes are not added.

In this state, for example, selecting the text color "button Character" in the color palette 29c on the color selector 19a, a color of the "text" 5a of the "date change" button 5 ₂ is set, the same time, another color In the color palettes 29c and 30c in the selectors 19b, 19c, and 20a to 20c, as described above, the “x” mark 31a is added to a color that cannot be selected, and the “/” mark 31b is added to a color that is not recommended for selection. It will be. As a result, it is possible to specify the above-mentioned color in each of the color palettes 29c and 30c (“Yes” in step S110 in FIG. 3).

  Here, if the color of “button text” 5a, which is one element of the component “change period” button, is set, it cannot be selected in the color palettes of all color selectors displayed on the color customization operation screen 17a. The “x” mark 31a is added to the color, and the “/” mark 31b is added to the color that cannot be selected. That is, when the color of the “button character” 5b is set, the “button background” 5b in contact therewith Since a color that cannot be selected for can be calculated, an “x” mark 31a is added to the target color. When a selectable color is determined for the “button character” 5b, it is possible to calculate a color that is not recommended for the “button border” 5c in contact with the “button character” 5b. Therefore, a “/” mark 31b is added to the target color. Is done. In this way, by sequentially calculating in the order of “elements” in contact, when one color is set, it is possible to add “x” mark 31 a and “/” mark 31 b to all color palettes. Become. Here, for example, depending on which color is selected from the colors that can be selected for the “button background” 5 b, the color that is not recommended for selection in the “button border” 5 c may change. In this embodiment, no matter which color is selected in the “button background” 5b, it is not recommended to select only the color corresponding to the “button is not recommended” as the color of the “button border” 5c. The “/” mark 31b is added.

But Figure 12 shows the operation of setting the color "date change" button 5 ₂ of "text" 5a using the "single color" tab 29, 13 is a color selector "monochromatic" tab 29 is selected in 19c, and shows the operation of setting the color of the "date change" button 5 ₂ of "border" 5c, FIG. 14 is a color selector 20b that "monochrome" tab 29 is selected, the layout 6 " The operation of setting the color of “background” 6a is shown. Both, like the color setting operation described above in "date change" button 5 ₂ "Character" 5a, by the color selection operation on the color palette 29c of "monochrome" tab 29, determines the color of their "elements" be able to. Then, the “element” whose color is customized in this way is colored with a corresponding color in the pressed component area 16 of the preview area 24.

  In FIGS. 13 and 14, the same reference numerals are given to the portions corresponding to those in FIG. 12, and the duplicated description is omitted, but in all the drawings, only the portions to be explained are given the reference numerals. .

  FIG. 15 is a diagram showing an example of the adjustment operation of the gradation setting unit on the color customization operation screen 17a. The same reference numerals are given to portions corresponding to the previous drawings, and redundant description is omitted. In FIG. 15, only parts necessary for the description are denoted by reference numerals.

In the figure, the hue / density instruction mark 30f ₄ in the gradation setting section 30f on the “gradation” tab 30 can be removed. To do this, instructs the color / density indication mark 30f ₄ with the cursor 11, it is sufficient to drag and drop out of the color selector area, thereby, the hue / density indication mark 30f ₄ gradients setting unit 30f It will be placed outside. In this state, the hue / density instruction mark 30f ₄ cannot function for the gradation setting unit 30f, and does not function for the gradation setting unit 30f at this time. Therefore, the gradation bar 30f ₁ displays a gradation from the color on the end mark 30f ₂ side to the color on the end mark 30f ₃ side.

When using the excluded again by adding the color / density indication mark 30f _4, by double-clicking near Gras station setting unit gradation bar 30f ₁ of 30f, the lower the gradation bar 30f ₁ In addition, a hue / density instruction mark 30f ₄ is newly added at a position closest to the clicked point.

Figure 16 is a diagram showing a specific example of a graph stations operating in the color customization operation screen 17a shown in FIG. 15, the same figure (a) shows setting operation of the color of one end side of the gradation bar 30f ₁ shown, FIG. (b) is shows the operation of setting the color of the other end of the gradation bar 30f _1, the parts corresponding to the preceding figures and the description thereof is omitted here with the same reference numerals. In FIG. 15, only parts necessary for the description are denoted by reference numerals.

In FIG. 16 (a), and clicks the gradation bar 30f end mark 30f ₃ of one end side ₁ of the gradation setting portion 30f of the "Gradient" tab 30 with the cursor 11, then the desired color palette 30c If you specify a color, the color of the end portions of the mark 30f ₃ side of the gradation bar 30f ₁ is set.

Next, in FIG. 16 (b), the gradation bar 30f end mark 30f ₂ of the other end ₁ in the gradation setting unit 30f clicking operated with the cursor 11, then the desired color in the color palette 30c If specified, the color of the end of the gradation bar 30f _{1 on} the end mark 30f ₂ side is set.

Thus, the gradation from the color set at one end of the gradation bar 30f ₁ to the color set at the other end is set. At the same time, the set gradation is displayed in the set color display portion 21a of the “selection color display” column 21 in the color selector 19b.

  The above color and gradation settings on the “single color” tab 29 and “gradation” tab 30 are performed in step S111 in FIG.

  By the way, in the color customization operation screen 17a shown in FIG. 9, as described above, the pressed part area 16 representing the “part” whose color is customized by the operation of the color selector display screen 18 is displayed in the preview area 24. The “component” displayed in the component area 16 is the target component for color customization.

  In the color customization operation screen 17a shown in FIG. 9, the cursor 11 is moved into the pressed part area 16 in the preview area 24, and as shown in FIG. 17 (in FIG. 17, there is a portion corresponding to FIG. 9). (The same reference numerals are used to omit redundant descriptions. However, in FIG. 17, only necessary parts are provided with reference numerals), and the cursor 11 is moved in a predetermined direction by dragging with a mouse (not shown). Then, the content screen 2 (FIG. 4) displayed in the review area 24 moves in that direction. At this time, the position of the pressed part area 16 is fixed. For this reason, the area (the part previewed in the pressed part area 16 on the content screen 2) displayed in the pressed part area 16 on the content screen 2 changes. As a result, the area to be previewed in the pressed parts area 16 on the content screen 2 can be changed, and the display contents of the area other than the “parts” to be subjected to color customization can be browsed.

  It is also possible to move the content screen 2 by focusing an arbitrary position in the preview area 24 with the keyboard and operating the cross key on the keyboard, so that the position in the pressed part area 16 on the content screen 2 can be moved. You can also change the area to be. This also allows the area to be previewed in the pressed parts area 16 on the content screen 2 to be changed as described above.

  As described above, the function of the cursor 11 for changing the area to be previewed on the content screen 2 is executed when the cursor 11 is in the preview area 24, and the cursor 11 is outside the preview area 24. When moved to, the content screen 2 in the preview area 24 is no longer moved by the drag operation. Accordingly, in order to move the content screen 2 greatly and make other “parts” far apart on the content screen 2 subject to previewing, the cursor 11 is moved in the preview area 24 and then the cursor 11 is moved. May be returned to the original position in the pressed part area 16 and dragged again to move the cursor 11 in the same direction.

The color customization operation for all “elements” that require color customization on the color customization operation screen 17a shown in FIG. is a component which presses in the area 16 "date change" button 5 ₂ in the color customization result is confirmed ( "No" in step S109 in FIG. 3), as shown in FIG. 18, in the color customization operation screen 17a " When the “OK” button 26 is pressed (step S113 in FIG. 3), a selection screen for selecting “components” to be color customized is displayed overlapping the original content screen 2.

  FIG. 19 is a diagram showing a specific example of such a selection screen. 32 is a selection screen, 33 is text, 34 is a “Yes” button, and 35 is a “No” button.

  In the figure, the content screen 2 is displayed in a transparent state, and a selection screen 32 is displayed on the transparent content screen 2.

  In this selection screen 32, for example, a text 33 is displayed instructing that “Do all parts of the same type on the same layout part have the same color?”, And “Yes” is operated when this instruction is followed. A button 34 and a “No” button 35 to be operated when not following the instructions are provided.

When the “Yes” button 34 is pressed (“Yes” in step S114 in FIG. 3), the “part” (in this case, the “change period” button selected by the cursor 11 on the content screen 2 shown in FIG. 6) 5 ₂ ) and the parts in contact therewith (here, layout 6) as well as other “parts” in contact with this layout 6 (ie, layout 6) and the same type of “parts”. parts "(in this case, the" importance modify "button 5 ₁ and" personnel changes "button 5 _3," status change "button 5 _4, etc.)" element of each "element of" has also been designated "component" The color is customized to the same color as “” (step S115 in FIG. 3). Thereafter, the color customization process ends.

When the “No” button 35 is pressed (“No” in Step S114 in FIG. 3), the “Part” (ie, “Period change” button selected by the cursor 11 on the content screen 2 shown in FIG. 6). 5 ₂ ) and parts in contact therewith (here, layout 6) are color customized (step S116 in FIG. 3). Thereafter, the color customization process ends.

Note that the text 33 displayed on the selection screen 32 shown in FIG. 19 is not limited to the above, and for example, the text 33 such as “Do all parts of the same type change to the same color?” Is used. When the “Yes” button 34 is pressed (“Yes” in step S114 in FIG. 3), the “component” selected by the cursor 11 on the content screen 2 shown in FIG. 6 (that is, “period change”). Button 5 ₂ ) and parts of the same type (that is, all of the operation buttons) can be customized to the same color, or “the same type of layout parts and the same type of parts placed in the same color” Are all changed to the same color? "And when the" Yes "button 34 is pressed (" Yes "in step S114 in FIG. 3), this is satisfied. Parts can be or color customization to the same color that are set to be color customization can be made to determine the parts appropriately.

  As described above, as shown in FIG. 6, any “component” can be customized to a desired color by setting the color customization mode and selecting “component” for which color customization is desired. . However, when there are multiple “parts” such as layout 6 that are related to multiple parts by overlapping or touching, there are also “parts” for which the color to be customized is limited according to these related “parts”. .

That is, if "NO" button 35 on the selection screen 32 shown in FIG. 19 is pressed, the operation buttons specified in 5, in the above example, and the layout 6 that this overlaps the "Period Change" button 5 ₂ While customized to each specified color, further, other operation buttons 5, for example, in the case of color customize "personnel change" button 5 _3, similarly, the "personnel change" button 5 ₃ respect, although color customization operation screen 17 shown in FIG. 8 is displayed by selecting only the color selector 19a~19c corresponding to the "person change" button 5 _3, layout already customized color 6 without such as to change the wrong color, it is possible to color customize only the "personnel changes" button 5 _3. However, in this case, in the "person Change" button 5 ₃ to the color selector 19a~19c is expanded color customization operation screen 17a as shown in FIG. 9 (in this case, the color selector 20a layout 6 ~ 20c are not developed), and there are colors to which the “/” mark 31b and “x” mark 31a are added in the color palette of the color selectors 19a to 19c due to the influence of the color customized layout 6. Restriction on the color to be performed.

  By the way, in the above, when the color customization mode is set by pressing the “color customization mode setting” button 3 on the content screen 2 shown in FIG. 4, one “part” (here “ The “change time limit” button 52) is selected as a color customization target, but in this embodiment, a plurality of parts may be selected as color customization targets. This will be described below.

  As described above, when the “color customization mode setting” button 3 is pressed on the content screen 2 shown in FIG. 4 and the color customization mode is designated (step S101 in FIG. 3), the selection screen shown in FIG. When the “OK” button 14 is pressed on the selection screen 12, the content screen 2 shown in FIG. 6 is displayed. By operating the cursor on the content screen 2, it is possible to specify and operate a plurality of parts that are subject to color customization at the same time.

  FIG. 20 is a diagram showing an operation for simultaneously selecting a plurality of parts on the content screen 2 as a color customization target. 36 is a cursor, 37 is a drag area, and the same parts as those in the previous drawings are shown. A duplicate description will be omitted with reference numerals. However, in FIG. 20, the part number is attached | subjected only about the part required for description.

  In the content screen 2 shown in FIG. 6 displayed when the “OK” button 14 is pressed on the selection screen 12 shown in FIG. 5, the cursor 11 is moved to a position near the “component” whose color is to be customized. When the click operation is performed, as shown in FIG. 20, the hand-shaped cursor 11 is replaced by the arrow-shaped cursor 36, and when the cursor 36 is dragged from the position, the starting point and the current position of the cursor 36 are started from that position. A rectangular drag area 37 having two corners facing each other is formed.

  The cursor 37 is dragged so that the drag area 37 includes a plurality of “parts” that are desired to be subjected to color customization on the content screen 2 (steps S102 and S117 in FIG. 3). When the drag operation is finished and the drag area 37 is determined, a color customization operation screen is displayed. For each “part” included in the drag area 37, another “part” is placed on the “part”. "Is superimposed or not (step S118 in FIG. 3). When another “part” is superimposed on the “part” (“Yes” in step S118 in FIG. 3), the color selector of each “element” of the “part” and the “part” are displayed. The color selector of each “element” of the other “part” that overlaps is displayed on this color customization operation screen (step S119 in FIG. 3), and no other “part” overlaps the “part”. In this case (“No” in step S118 in FIG. 3), the color selector of each “element” of the “part” and each “element” of another “part” placed under the “part” are displayed. The color selector is displayed on this color customization operation screen (step S120 in FIG. 3). Such processing is sequentially performed for each “part” in the drag area 37 (“No” in step S121 in FIG. 3), and when such processing is performed for all “parts” in the drag area 37 (step in FIG. 3). As shown in FIG. 21, a color customization operation screen 38 in which a color selector for the “element” is provided for all “parts” in the drag area 37 is displayed.

In FIG. 21, reference numerals 19 _{1 to} 19 ₃ denote color selector display areas, and portions corresponding to those in the previous drawings are denoted by the same reference numerals and redundant description is omitted. However, in FIG. 21, only parts necessary for explanation are denoted by reference numerals, and the other parts are omitted.

Here, the content screen 2 shown in FIG. 20, the "parts" included in the drag area 37, "importance Change" button 5 ₁ "date change" button 5 ₂ and "personnel change" button 5 ₃ On the other hand, a layout 6 is displayed in which these are overlapped. On the other hand, in the color customization operation screen 38 shown in FIG. 21, a color selector display area 19/20 is provided for each of these “components”.

The color selector display area 19 _1, and the color selector 19a for component "importance Change" button 5 character color of _one element "character" in FIG. 20, a color selector 19b similarly to the background color of the element "background", similarly the color selector 19c is provided for the border color of the element "border", the color selector display area 19 _2, a color for the text color of the part "date change" button 5 ₂ of element "character" in FIG. 20 a selector 19a, also the color selector 19b to the background color of the element "background", and the color selector 19c is provided also for the border color of the element "border", the color selector display area 19 _3, in FIG. 20 mosquitoes against the background color of the parts and the color selector 19a to the "personnel changes" button 5 ₃ of the text color of the element "character", also the element "background" And over the selector 19b, and the color selector 19c is provided also for the border color of the element "border".

These color selectors 19a to 19c have the same functions as the color selectors 19a to 19c in FIG. In each selector display area 19, the “element” color selector that the “component” does not have is not displayed. For example, the component "personnel change" button 5 ₃ (FIG. 20), if there is no border, the color selector display area 19 _3, the color selector 19c is not provided for the border color.

  In the color selector display area 20, the color selector 20 a for the character color of the element “character” of the layout 6, which is “component” in FIG. 20, and the color selector 20 b for the background color of the element “background” are the same. A color selector 20c for the border color of the element “border” is provided, and the color selectors 20a to 20c have the same functions as the color selectors 20a to 20c in FIG. Also in this color selector display area 20, the “element” color selector that the layout 6 does not have is not displayed. For example, when there is no character in the layout 3 (FIG. 20), the color selector display area 20 does not include the color selector 20a for the character color.

Note that the layout 6 in FIG. 20 is common to the operation buttons 5 _{1 to} 5 ₃ , that is, these operation buttons 5 _{1 to} 5 ₃ are displayed so as to overlap the same layout 6. in color customization operation screen 38 shown in FIG. 21, the color selector display area 20 of the layout 6 is a one, is provided to be placed after the color selector 19a~19c of operation buttons 5 ₁ to 5 ₃ .

In contrast, if the layout for the operation button 5 ₁ to 5 ₃ are different, (in this case, the operation button) their color selector display area 20 of the layout related to "part" is placed immediately after the. For example, "importance Modify" button 5 ₁ and the "date change" button 5 ₂ is displayed in an overlapping in the same layout 6 _1, is displayed "personnel changes" button 5 ₃ is superimposed over the different layout 6 ₂ assuming that there, in the color customization operation screen 38 shown in FIG. 21, "importance change" button 5 ₁ "date change" button 5 ₂ color selector display area 19 _1, 19 ₂ next layout ₆₁ of the color selector display area 20 ₁ is disposed, the color selector display area 20 ₂ of the next layout 6 ₂ "personnel change" button 5 ₃ color selector display area 19 ₃ is arranged.

  As described above, since the arrangement relationship between the color selector display areas / 19 and 20 with a plurality of “parts” and other parts displayed in an overlapping manner is set, these “parts” and these are overlapped. The relationship on the content screen 2 with other “parts” to be displayed can also be confirmed on the color customization operation screen 38, and it becomes easy to select a color to be customized for these “parts”.

In the color customization operation screen 38 shown in FIG. 21, _one of the “element” color selectors 19 a to 19 c in the color selector display areas 19 _{1 to} 19 ₃ and the “element” color selectors 20 a to 20 c in the color selector display area 20. By selecting one of them, similarly to the color customization operation screen 17 shown in FIG. 8, the processing in steps S107 to S116 in FIG. 3 is performed, and the color customization of the selected “element” in each “part” is performed. It will be.

  As described above, a plurality of “components” can be designated as color customization targets at the same time, and the user can easily recognize the desired “element” of each “component” in the same color customization operation screen. It can be customized in the state.

1 Display screen 2 Content screen 3 “Color customization mode setting” button 4 Content data display area 5 Operation buttons 5 ₁ “Change importance” button 5 ₂ “Change deadline” button 5 ₃ “Change person in charge” button 5 ₄ “Change status” ”Button 5 ₅ pull-down menu 5a button text 5b button background 5c button border 6 layout (background)
6a, 6b Character 7 Tab Panel 7a Tab Panel Character 7b Tab Panel Background 8 Text 9 Check Box 10 Text Box 11 Cursor 12 Selection Screen 13 Text 14 “OK” Button 15 “Cancel” Button 16 Pressed Parts Area 17, 17a Color Customization Operation Screen 18 Color selector display screen 19, 19 _{1 to} 19 ₃ “Button” color selector display area 19a to 19c Color selector 20 “Layout” color selector display area 20a to 20c Color selector 21 “Selected color display” column 21a Set color display Section 21b Setting gradation display section 22 “Selected candidate color” button 23 “Clear” button 24 Preview area 25 Scroll operation section 26 “OK” button 27 “Cancel” button 28 All Clear "button 29" monochrome "tab 29a opacity specifying portion 29b hue display column 29c color palette 29d ₁ color specifying unit 29d ₂ concentration specified portion 29e _1, 29e ₂ slider 30" Gradient "tab 30a opacity display column 30b color type Field 30c Color palette 30d ₁ Hue designation part 30d ₂ Density designation part 30e ₁ , 30e ₂ Slider 30f Gradation setting part 30f ₁ Gradation bar 30f ₂ , 30f ₃ End mark 30f ₄ Hue / density instruction mark 30g Gradation direction setting field 31a “ × ”mark 31b“ / ”mark 32 Selection screen 33 Text 34“ I ”button 35“ No ”button 36 Cursor 37 Drag area 38 Color customization operation screen

Claims (4)

A method for customizing the color of a content screen that supports selection of the color of a component displayed on the content screen,
A color customization operation screen is displayed together with the designation of the part that is the target of color selection on the content screen,
In the color customization operation screen, each element constituting the given the component displays the color palette for color selection Rutotomoni, each element constituting the other parts in contact with the specified the component, color selection The color palette for
By selecting a desired color in the color palette, the selected part and the elements of the other parts are displayed in the selected color,
The component is composed of a character and a background as the element, and further has a frame line as the element as necessary.
In any one of the color palettes for the character as the element and the background, the color whose luminance contrast ratio between the character and the background is less than the first ratio may be selected as the non-selectable color. A mark indicating that the color is not possible,
In any one of the color palettes for the elements other than the characters of the designated part or the elements constituting the other parts in contact with the designated part , the luminance contrast ratio in these elements is less than the second ratio. and the color becomes, as a color that does not recommend a selection, color customization how content screen which is characterized in subjecting a mark indicating that it is a color that does not recommend a selection the color. In claim 1,
The method for customizing a color of a content screen, wherein the first ratio is 4.5: 1 and the second ratio is 1.7: 1. In claim 1 or 2,
The designated part is a plurality of parts included in the designated drag area, and the color palette for color selection of each element constituting the part is displayed for each part in the drag area. A method for customizing the color of a content screen. In any one of Claims 1-3,
A color customization method for a content screen, wherein a selected component area including the component designated on the content screen is displayed in a preview area set on the color customization operation screen.