JP5632430B2 - ウェブデザイン生成システム - Google Patents

Description

本発明は、ウェブページのデザインを表すデザインデータを生成するためのウェブデザイン生成システムに関するものである。

一般的なウェブページは、ＨＴＭＬ（HyperText Markup Language）、ＣＳＳ（Cascading Style Sheets）、Ｊａｖａｓｃｒｉｐｔ（登録商標）などを用いて作成される。ＣＳＳ（以下、「スタイルシート」と呼ぶ。）は、ウェブページのデザインを定義するためのデータであり、ヘッダ、ボディ、フッタ、グローバルナビゲーションなどといったウェブページの各表示領域のデザインを一義的に定義することができる。

従来、より多くのデザインの中から選択してウェブページを作成することができるように、複数種類のスタイルシートをテンプレートとして用意し、それらのテンプレートの中から所望のスタイルシートを選択してウェブページを作成することができるような構成が提案されている（例えば、下記特許文献１参照）。

特開２００５−４３９２号公報

しかしながら、従来のように複数種類のスタイルシートをテンプレートとして用意するような構成では、用意できるテンプレートの種類に限りがあるため、ウェブページのデザインのバリエーションを十分に確保することが難しいという問題がある。そのため、第三者のウェブページと類似するデザインになりやすく、例えば企業のウェブページの場合には、他社のウェブページと類似することにより企業価値に影響を与えてしまうおそれもある。

また、ユーザにとっては、デザイン性が高いウェブページを容易に作成することができるような構成が好ましい。上記のようなテンプレートを用いた場合には、デザイン性が高いウェブページを作成することが可能であるが、上述のように、ウェブページのデザインのバリエーションを十分に確保することが難しいという問題がある。そのため、ウェブページのデザインのバリエーションを十分に確保することができ、かつ、デザイン性が高いウェブページを容易に作成できるような構成が望まれている。

本発明は、上記実情に鑑みてなされたものであり、より多くのバリエーションでウェブページのデザインデータを生成することができるウェブデザイン生成システムを提供することを目的とする。また、本発明は、デザイン性が高いウェブページのデザインデータを容易に生成することができるウェブデザイン生成システムを提供することを目的とする。

本発明に係るウェブデザイン生成システムは、ウェブページのデザインを表すデザインデータを生成するためのウェブデザイン生成システムであって、ウェブページをヘッダ表示領域、グローバルナビゲーション表示領域、ボディ表示領域及びローカルナビゲーション表示領域を含む複数の表示領域に分割したときの各表示領域に対応付けられ、各表示領域のデザインとしてウェブページのレイアウトを定義するためのベースＨＴＭＬファイルと表示領域ごとに組み合わせて使用可能な複数種類のスタイルシートをモジュールとして含むスタイルシートデータを記憶するスタイルシートデータ記憶部と、ウェブページの各表示領域に対応付けて前記スタイルシートデータ記憶部に記憶されている複数種類のモジュールについての異なる表示領域に対応するモジュール同士の関連付けを記憶するモジュール関連付け記憶部と、前記モジュール関連付け記憶部に記憶されているモジュール同士の関連付けに基づいて、前記スタイルシートデータ記憶部に記憶されているスタイルシートデータの各モジュールを選択するモジュール選択処理部と、前記モジュール選択処理部により選択されたスタイルシートデータの各モジュールを前記スタイルシートデータ記憶部からウェブページの表示領域ごとに読み出すことにより、デザインデータを生成するデザインデータ生成部とを備えたことを特徴とする。

このような構成によれば、ウェブページの各表示領域のデザインとして使用可能な複数種類のモジュールを含むスタイルシートデータを用いて、各モジュールを表示領域ごとに読み出して組み合わせることができる。これにより、各モジュールの組み合わせの数だけウェブページのデザインのバリエーションを確保することができるため、より多くのバリエーションでウェブページのデザインデータを生成することができる。また、ウェブページ全体のデザイン性の観点から、より相性のよいモジュール同士を関連付けて記憶しておくことができる。したがって、モジュール同士の関連付けに基づいて各モジュールを表示領域ごとに読み出して組み合わせるだけで、デザイン性が高いウェブページのデザインデータを容易に生成することができる。

前記ウェブデザイン生成システムは、ユーザが任意のカラーを指定するためのカラー指定部をさらに備えていてもよい。この場合、前記デザインデータ生成部は、前記カラー指定部により指定されたカラーに基づいて、前記スタイルシートデータ記憶部から読み出されるスタイルシートデータの各モジュールに、カラーデータを付加するものであってもよい。

このような構成によれば、ユーザが指定した任意のカラーに基づいて、各モジュールにカラーデータを付加してデザインデータを生成することができる。このように、各モジュールにカラーデータを付加することによって、デザイン性が高いウェブページのデザインデータをより多くのバリエーションで容易に生成することができる。

前記デザインデータ生成部は、前記カラー指定部により指定されたカラー、又は、前記カラー指定部により指定されたカラーに基づいて生成されるカラーを用いて、前記スタイルシートデータ記憶部から読み出されるスタイルシートデータの各モジュールに、カラーデータを付加するものであってもよい。

このような構成によれば、ユーザが指定したカラー、又は、ユーザが指定したカラーに基づいて生成されるカラーを用いて、各モジュールにカラーデータを付加し、デザインデータを生成することができる。この場合、ユーザの好みのカラーがより反映されたウェブページのデザインデータを容易に生成することができる。

前記ウェブデザイン生成システムは、前記デザインデータ生成部により生成されたデザインデータを構成する任意のモジュールを、当該モジュールに対応する表示領域を選択することによりユーザが指定するためのモジュール指定部をさらに備えていてもよい。この場合、前記デザインデータ生成部は、前記モジュール指定部によりモジュールが指定された場合に、そのモジュールを固定した状態で、指定されたモジュールに対応する表示領域以外の表示領域について、別のモジュールを前記スタイルシートデータ記憶部から読み出すことにより、デザインデータを再生成するものであってもよい。

このような構成によれば、生成されたデザインデータを構成する各モジュールの中に、ユーザの好みのデザインのモジュールが含まれている場合に、そのモジュールをユーザが指定することができる。この場合、指定されたモジュールに対応する表示領域以外の表示領域について、別のモジュールが読み出されてデザインデータが再生成されることにより、ユーザの好みのデザインのモジュールを残しつつ、他のバリエーションでウェブページのデザインデータを生成することができる。

本発明に係るウェブデザイン生成システムは、ウェブページのデザインを表すデザインデータを生成するためのウェブデザイン生成システムであって、ウェブページをヘッダ表示領域、グローバルナビゲーション表示領域、ボディ表示領域及びローカルナビゲーション表示領域を含む複数の表示領域に分割したときの各表示領域に対応付けられ、各表示領域のデザインとしてウェブページのレイアウトを定義するためのベースＨＴＭＬファイルと表示領域ごとに組み合わせて使用可能な複数種類のスタイルシートをモジュールとして含むスタイルシートデータを記憶するスタイルシートデータ記憶部と、ユーザが任意のカラーを指定するためのカラー指定部と、カラーの組み合わせのパターンを表す複数種類のカラーパターンを記憶するカラーパターン記憶部と、前記カラー指定部により指定されたカラーが組み合わせられているカラーパターンを前記カラーパターン記憶部から選択するカラーパターン選択処理部と、前記スタイルシートデータ記憶部に記憶されているスタイルシートデータの各モジュールをウェブページの表示領域ごとに読み出し、前記カラーパターン選択処理部により選択されたカラーパターンに基づいて各モジュールにカラーデータを付加することにより、デザインデータを生成するデザインデータ生成部とを備えたことを特徴とする。

このような構成によれば、ウェブページの各表示領域のデザインとして使用可能な複数種類のモジュールを含むスタイルシートデータを用いて、各モジュールを表示領域ごとに読み出して組み合わせることができる。これにより、各モジュールの組み合わせの数だけウェブページのデザインのバリエーションを確保することができるため、より多くのバリエーションでウェブページのデザインデータを生成することができる。また、ユーザが指定した任意のカラーに基づいて、各モジュールにカラーデータを付加してデザインデータを生成することができる。このように、各モジュールにカラーデータを付加することによって、デザイン性が高いウェブページのデザインデータをより多くのバリエーションで容易に生成することができる。さらに、ウェブページ全体のデザイン性の観点から、より相性のよいカラーの組み合わせからなるカラーパターンを記憶しておくことができる。したがって、当該カラーパターンとユーザが指定したカラーとに基づいて各モジュールにカラーデータを付加するだけで、ユーザの好みのカラーが反映され、かつ、デザイン性が高いウェブページのデザインデータを容易に生成することができる。

本発明によれば、ウェブページの各表示領域のデザインとして使用可能な複数種類のモジュールを含むスタイルシートデータを用いて、各モジュールを表示領域ごとに読み出して組み合わせることにより、より多くのバリエーションでウェブページのデザインデータを生成することができる。また、本発明によれば、モジュール同士の関連付け、又は、カラーデータの付加などによって、デザイン性が高いウェブページのデザインデータを容易に生成することができる。

本発明の一実施形態に係るウェブデザイン生成システムの構成例を示したブロック図である。 ウェブページのデザインデータを生成する際におけるユーザ端末の表示部の表示例を示した図である。 デザインデータを生成する際のサーバの制御部による処理の一例を示したフローチャートである。 データ管理を行う際における管理者端末の表示部の表示例を示した図である。

図１は、本発明の一実施形態に係るウェブデザイン生成システムの構成例を示したブロック図である。このウェブデザイン生成システムは、サーバ１と複数のユーザ端末２と管理者端末４とが、インターネットなどのネットワーク３を介して互いに接続されることにより構成されている。

サーバ１には、例えば制御部１１、通信部１２、スタイルシートデータ記憶部１５、モジュール関連付け記憶部１６、カラーパターン記憶部１７、ベースＨＴＭＬ記憶部１８及びウェブページデータ記憶部１９などが備えられている。スタイルシートデータ記憶部１５、モジュール関連付け記憶部１６、カラーパターン記憶部１７、ベースＨＴＭＬ記憶部１８及びウェブページデータ記憶部１９は、１つ又は複数のメモリにより構成することができ、例えばＲＯＭ（Read Only Memory）又はＲＡＭ（Random Access Memory）などにより構成することができる。

制御部１１は、例えばＣＰＵ（Central Processing Unit）を含む構成であり、プログラムを実行することにより、デザインデータ生成部１１１、モジュール選択処理部１１２及びカラーパターン選択処理部１１３などの各種機能部として機能する。通信部１２、スタイルシートデータ記憶部１５、モジュール関連付け記憶部１６、カラーパターン記憶部１７、ベースＨＴＭＬ記憶部１８及びウェブページデータ記憶部１９は、制御部１１に対して電気的に接続されている。制御部１１は、通信部１２を介してネットワーク３に接続されている。

本実施形態では、ウェブページのデザインを表すデザインデータと、ウェブページの内容を表すコンテンツデータとが、分離して管理されており、これらのデザインデータ及びコンテンツデータを組み合わせることにより、ネットワーク３を介して閲覧可能なウェブページデータが生成されるようになっている。ウェブページのデザインデータは、スタイルシート（ＣＳＳ）のデータを用いて生成される。

スタイルシートデータ記憶部１５には、ウェブページを複数の表示領域に分割したときの各表示領域に対応付けて、各表示領域のデザインとして使用可能な複数種類のモジュールを含むスタイルシートデータが記憶されている。ウェブページの各表示領域としては、例えばヘッダ、ボディ、フッタ、グローバルナビゲーション、ローカルナビゲーション、ページャ、トピックパス、フッタナビゲーション、バナーセクション、見出し、リスト、セクション、アーティクルなどを例示することができる。スタイルシートデータ記憶部１５には、これらの各表示領域に対応付けて、各表示領域のデザインを定義するための複数種類のモジュールが記憶されている。

モジュール関連付け記憶部１６には、ウェブページの各表示領域に対応するモジュール同士の関連付けが記憶されている。すなわち、各表示領域に対応付けてスタイルシートデータ記憶部１５に記憶されている複数種類のモジュールが、異なる表示領域に対応するモジュール同士で関連付けられている。この場合、ウェブページ全体のデザイン性の観点から、より相性のよいモジュール同士を関連付けて記憶しておくことができる。このモジュール関連付け記憶部１６に記憶されているモジュール同士の関連付けは、変更できるような構成となっていてもよい。

カラーパターン記憶部１７には、カラーの組み合わせのパターンを表す複数種類のカラーパターンが記憶されている。この場合、ウェブページ全体のデザイン性の観点から、より相性のよいカラーの組み合わせからなるカラーパターンを記憶しておくことができる。例えば、白色に相性のよい色として、黒色や赤色を白色に組み合わせたカラーパターンなどを記憶しておくことができる。このカラーパターン記憶部１７に記憶されているカラーパターンは、変更できるような構成となっていてもよい。

ベースＨＴＭＬ記憶部１８には、ウェブページのレイアウトを定義するための複数種類のベースＨＴＭＬファイルが記憶されている。このベースＨＴＭＬファイルは、スタイルシートによってデザインが定義されていないＨＴＭＬファイルである。本実施形態では、スタイルシートデータ記憶部１５に記憶されている各表示領域に対応するモジュールが、ベースＨＴＭＬファイルと組み合わせられることにより、ウェブページのデザインデータが生成されるようになっている。

ウェブページデータ記憶部１９には、デザインデータとコンテンツデータとが組み合わせられることにより生成されたウェブページデータが、ユーザ情報に対応付けて記憶されている。すなわち、各ユーザにより作成されたウェブページデータが、各ユーザのユーザ情報に対応付けて記憶されている。前記ユーザ情報としては、ユーザＩＤやパスワードなどを例示することができる。

デザインデータ生成部１１１は、スタイルシートデータ記憶部１５に記憶されているスタイルシートデータの各モジュールをウェブページの表示領域ごとに読み出すことにより、デザインデータを生成する。すなわち、スタイルシートデータ記憶部１５に記憶されている各表示領域に対応するモジュールが、表示領域ごとに１つずつ読み出され、それらがベースＨＴＭＬファイルと組み合わせられることにより、デザインデータが生成される。

このように、本実施形態では、ウェブページの各表示領域のデザインとして使用可能な複数種類のモジュールを含むスタイルシートデータを用いて、各モジュールを表示領域ごとに読み出して組み合わせることができる。これにより、各モジュールの組み合わせの数だけウェブページのデザインのバリエーションを確保することができるため、より多くのバリエーションでウェブページのデザインデータを生成することができる。

モジュール選択処理部１１２は、モジュール関連付け記憶部１６に記憶されているモジュール同士の関連付けに基づいて、スタイルシートデータ記憶部１５に記憶されているスタイルシートデータの各モジュールを選択する。このとき、デザインデータ生成部１１１は、モジュール選択処理部１１２により選択されたスタイルシートデータの各モジュールをスタイルシートデータ記憶部１５から読み出すことにより、デザインデータを生成することとなる。

本実施形態では、上述の通り、ウェブページ全体のデザイン性の観点から、より相性のよいモジュール同士を関連付けてモジュール関連付け記憶部１６に記憶しておくことができる。したがって、モジュール同士の関連付けに基づいて各モジュールを表示領域ごとに読み出して組み合わせるだけで、デザイン性が高いウェブページのデザインデータを容易に生成することができる。ただし、このような構成に限らず、スタイルシートデータ記憶部１５に記憶されているスタイルシートデータの各モジュールをランダムに選択するような構成などであってもよい。

後述するが、本実施形態では、ユーザがユーザ端末２を操作することにより、任意のカラーを指定することができるようになっている。そして、デザインデータ生成部１１１は、ユーザにより指定されたカラーに基づいて、スタイルシートデータ記憶部１５から読み出されるスタイルシートデータの各モジュールに、カラーデータを付加することができるようになっている。

すなわち、本実施形態では、ユーザが指定した任意のカラーに基づいて、各モジュールにカラーデータを付加してデザインデータを生成することができる。このように、各モジュールにカラーデータを付加することによって、デザイン性が高いウェブページのデザインデータをより多くのバリエーションで容易に生成することができる。

より具体的には、カラーパターン選択処理部１１３が、ユーザにより指定されたカラーに基づいて、カラーパターン記憶部１７からカラーパターンを選択するようになっている。このとき、デザインデータ生成部１１１は、カラーパターン選択処理部１１３により選択されたカラーパターンに基づいて、スタイルシートデータ記憶部１５から読み出されるスタイルシートデータの各モジュールに、カラーデータを付加することとなる。

本実施形態では、上述の通り、ウェブページ全体のデザイン性の観点から、より相性のよいカラーの組み合わせからなるカラーパターンをカラーパターン記憶部１７に記憶しておくことができる。したがって、当該カラーパターンとユーザが指定したカラーとに基づいて各モジュールにカラーデータを付加するだけで、ユーザの好みのカラーが反映され、かつ、デザイン性が高いウェブページのデザインデータを容易に生成することができる。ただし、このような構成に限らず、各モジュールに対してカラーデータがランダムに付加されるような構成であってもよいし、カラーデータが付加されないような構成などであってもよい。

ユーザ端末２には、例えば制御部２１、通信部２２、操作部２３、表示部２４及びメモリ２５などが備えられている。制御部２１は、例えばＣＰＵを含む構成であり、通信部２２、操作部２３、表示部２４及びメモリ２５が電気的に接続されている。制御部２１は、通信部２２を介してネットワーク３に接続されている。

操作部２３は、例えばキーボード又はマウスを含む構成であり、ユーザが操作部２３を操作することにより入力作業などを行うことができるようになっている。表示部２４は、例えば液晶表示器などにより構成することができ、ユーザは、表示部２４の表示内容を確認しながら操作部２３を操作することにより、ウェブページのデザインデータを生成することができる。メモリ２５は、例えばＲＯＭ又はＲＡＭなどにより構成することができる。

管理者端末４には、例えば制御部４１、通信部４２、操作部４３、表示部４４及びメモリ４５などが備えられている。制御部４１は、例えばＣＰＵを含む構成であり、通信部４２、操作部４３、表示部４４及びメモリ４５が電気的に接続されている。制御部４１は、通信部４２を介してネットワーク３に接続されている。

操作部４３は、例えばキーボード又はマウスを含む構成であり、管理者が操作部４３を操作することにより入力作業などを行うことができるようになっている。表示部４４は、例えば液晶表示器などにより構成することができ、管理者は、表示部４４の表示内容を確認しながら操作部４３を操作することにより、データ管理などを行うことができる。メモリ４５は、例えばＲＯＭ又はＲＡＭなどにより構成することができる。

図２は、ウェブページのデザインデータを生成する際におけるユーザ端末２の表示部２４の表示例を示した図である。ユーザは、ユーザ端末２の操作部２３を操作して、ユーザＩＤやパスワードなどのユーザ情報を入力することにより、サーバ１にログインすることができる。サーバ１にログインしたユーザは、そのユーザのユーザ情報に対応付けてウェブページデータ記憶部１９に記憶されているウェブページデータを読み出すことができる。

ウェブページのデザインデータを生成する際には、サーバ１からのデータに基づいて、ユーザ端末２の表示部２４に、図２に例示されるようなウェブデザイン作成画面が表示される。この表示画面には、例えばカラー指定領域２４１、ベースＨＴＭＬ指定領域２４２、プレビューボタン２４３、書き出しボタン２４４及びプレビュー表示領域２４５などが含まれる。ただし、図２に示すようなウェブデザイン作成画面は、あくまで一例であり、他のあらゆる態様でウェブデザイン作成画面を表示部２４に表示させることができる。

カラー指定領域２４１は、ユーザが任意のカラーを指定するための表示領域である。カラー指定領域２４１には、カラーを指定する場合に選択される指定ボタン２４１ａと、カラーを指定しない場合に選択される非指定ボタン２４１ｂとが含まれる。指定ボタン２４１ａが選択された場合には、カラー指定領域２４１に含まれる５つの指定カラー表示領域２４１ｃを用いて、５色の任意のカラーを指定することができる。ただし、指定できるカラーは、５色に限られるものではなく、４色以下であってもよいし、６色以上であってもよい。また、指定されたカラーの順序に基づいて、カラーパターン選択処理部１１３により選択されるカラーパターンに優先順位が付与されるような構成などであってもよい。

各指定カラー表示領域２４１ｃには、既にカラーが指定されている場合には、それらのカラーが表示（塗り潰し）され、まだカラーが指定されていない場合には、デフォルトで設定されているカラーが表示（塗り潰し）される。各指定カラー表示領域２４１ｃを選択して所定の操作を行えば、その指定カラー表示領域２４１ｃに対応するカラーの指定を変更することができる。

指定ボタン２４１ａ、非指定ボタン２４１ｂ及び各指定カラー表示領域２４１ｃなどの選択は、ユーザがユーザ端末２の操作部２３を操作することにより行うことができる。カラー指定領域２４１に対する入力操作をユーザが行う際、ユーザ端末２の操作部２３は、ユーザが任意のカラーを指定するためのカラー指定部として機能することとなる。

ベースＨＴＭＬ指定領域２４２は、ユーザが任意のベースＨＴＭＬファイルを指定するための表示領域である。ベースＨＴＭＬ指定領域２４２には、例えばプルダウンにより任意のベースＨＴＭＬファイルを指定可能な指定ベースＨＴＭＬ表示領域２４２ａが含まれる。本実施形態では、ベースＨＴＭＬファイルを指定しない場合に、指定ベースＨＴＭＬ表示領域２４２ａにおいて「未選択」を指定することができるようになっている。ただし、このような構成に限らず、カラー指定領域２４１と同様に、ベースＨＴＭＬファイルを指定する場合に選択される指定ボタンと、ベースＨＴＭＬファイルを指定しない場合に選択される非指定ボタンとが設けられた構成などであってもよい。

指定ベースＨＴＭＬ表示領域２４２ａには、既にベースＨＴＭＬファイルが指定されている場合には、そのベースＨＴＭＬファイルのファイル名が表示され、まだベースＨＴＭＬファイルが指定されていない場合には、デフォルトで設定されているベースＨＴＭＬファイルのファイル名が表示される。指定ベースＨＴＭＬ表示領域２４２ａを選択して所定の操作を行えば、ベースＨＴＭＬファイルの指定を変更することができる。

指定ベースＨＴＭＬ表示領域２４２ａなどの選択は、ユーザがユーザ端末２の操作部２３を操作することにより行うことができる。ベースＨＴＭＬ指定領域２４２に対する入力操作をユーザが行う際、ユーザ端末２の操作部２３は、ユーザが任意のベースＨＴＭＬファイルを指定するためのベースＨＴＭＬ指定部として機能することとなる。

プレビュー表示領域２４５には、そのとき指定されているカラー及びベースＨＴＭＬファイルに基づいて生成されたデザインデータが表示されることにより、どのようなデザインデータであるかをユーザが確認できるようになっている。まだカラー及びベースＨＴＭＬファイルが指定されていないときには、デフォルトで設定されているカラー及びベースＨＴＭＬファイルに基づいて生成されたデザインデータが、プレビュー表示領域２４５に表示される。

カラー指定領域２４１においてカラーを指定し、又は、ベースＨＴＭＬ指定領域２４２においてベースＨＴＭＬファイルを指定した後、プレビューボタン２４３を選択した場合には、その指定されたカラー又はベースＨＴＭＬファイルが反映されたデザインデータが、プレビュー表示領域２４５に表示される。したがって、ユーザは、カラー又はベースＨＴＭＬファイルを指定し直してプレビューボタン２４３を選択するという操作を繰り返し行うことにより、プレビュー表示領域２４５に表示されるデザインデータを、ユーザの好みに合ったデザインデータに近づけていくことができる。

本実施形態では、カラーやベースＨＴＭＬファイルだけでなく、デザインデータを構成する任意のモジュールをユーザが指定することができるようになっている。具体的には、プレビュー表示領域２４５に表示されているデザインデータの各モジュールに対応する表示領域を選択することにより、モジュールを指定することができるようになっている。図２の例では、ヘッダ表示領域２４５ａ、グローバルナビゲーション表示領域２４５ｂ、ボディ表示領域２４５ｃ及びローカルナビゲーション表示領域２４５ｄなどがプレビュー表示領域２４５に表示され、これらの各モジュールに対応する表示領域を選択することができる。

ただし、ユーザが指定可能なモジュールは、上記のような各表示領域に対応するモジュールに限らず、他の各種モジュールを指定できるような構成であってもよい。図２の例では、表示画面にスクロールバー２４６が表示されており、当該スクロールバー２４６を選択して表示画面をスクロールさせることにより、デザインデータ全体を確認することができるようになっている。これにより、フッタなどの他のモジュールに対応する表示領域を表示画面に表示させ、当該表示領域を選択することができる。モジュールは、複数指定できるような構成であることが好ましい。

プレビュー表示領域２４５に表示されている各モジュールに対応する表示領域のいずれかをユーザが選択する際、ユーザ端末２の操作部２３は、任意のモジュールをユーザが指定するためのモジュール指定部として機能することとなる。本実施形態では、モジュールを指定した後、プレビューボタン２４３を選択した場合には、指定されたモジュールに対応する表示領域以外の表示領域について、別のモジュールがスタイルシートデータ記憶部１５から読み出されることにより、デザインデータが再生成されるようになっている。

このように、本実施形態では、生成されたデザインデータを構成する各モジュールの中に、ユーザの好みのデザインのモジュールが含まれている場合に、そのモジュールをユーザが指定することができる。この場合、指定されたモジュールに対応する表示領域以外の表示領域について、別のモジュールが読み出されてデザインデータが再生成されることにより、ユーザの好みのデザインのモジュールを残しつつ、他のバリエーションでウェブページのデザインデータを生成することができる。

以上のように、ユーザは、ユーザ端末２の操作部２３を操作することにより、カラー、ベースＨＴＭＬファイル又はモジュールを指定し、プレビュー表示領域２４５に表示されるデザインデータを好みに合ったデザインデータに近づけていくことができる。そして、最終的に書き出しボタン２４４を選択することにより、そのときプレビュー表示領域２４５に表示されているデザインデータを確定し、ユーザ情報に対応付けてウェブページデータ記憶部１９に保存することができる。

図３は、デザインデータを生成する際のサーバ１の制御部１１による処理の一例を示したフローチャートである。デザインデータを生成する際には、まず、デフォルトで設定されている情報に基づいて生成されたデザインデータが、プレビュー表示領域２４５に表示される（ステップＳ１０１）。

ただし、既に生成されたデザインデータがウェブページデータ記憶部１９に記憶されている場合には、そのデザインデータが読み出されてプレビュー表示領域２４５に表示されてもよい。この場合、例えばユーザがサーバ１にログインした状態で、読み込みボタン（図示せず）が選択されたときに、既に生成されているデザインデータがウェブページデータ記憶部１９から読み出されてプレビュー表示領域２４５に表示されるような構成となっていてもよい。

デザインデータがプレビュー表示領域２４５に表示された状態で、ユーザは、カラー指定領域２４１の指定ボタン２４１ａ又は非指定ボタン２４１ｂ、ベースＨＴＭＬ指定領域２４２の指定ベースＨＴＭＬ表示領域２４２ａ、あるいは、プレビューボタン２４３、書き出しボタン２４４、プレビュー表示領域２４５の各表示領域に対応するモジュールなどを選択することができる（ステップＳ１０２、Ｓ１０３、Ｓ１０６、Ｓ１０７、Ｓ１１０、Ｓ１１６、Ｓ１１８）。

ベースＨＴＭＬ指定領域２４２の指定ベースＨＴＭＬ表示領域２４２ａにおいて、いずれかのベースＨＴＭＬファイルが指定された場合には（ステップＳ１０２でＹｅｓ）、その指定されたベースＨＴＭＬファイルが、デザインデータを生成する際のベースＨＴＭＬファイルとして選択される（ステップＳ１０４）。一方、ベースＨＴＭＬ指定領域２４２の指定ベースＨＴＭＬ表示領域２４２ａにおいて、「未選択」が指定された場合には（ステップＳ１０２でＮｏ、ステップＳ１０３でＹｅｓ）、デザインデータを生成する際にベースＨＴＭＬファイルがランダムに選択される（ステップＳ１０５）。

カラー指定領域２４１の指定ボタン２４１ａが選択された場合には（ステップＳ１０６でＹｅｓ）、当該カラー指定領域２４１に対するユーザの入力操作により指定されたカラーに基づいて、デザインデータを生成する際にカラーパターンが選択される（ステップＳ１０８）。一方、カラー指定領域２４１の指定ボタン２４１ａの非指定ボタン２４１ｂが選択された場合には（ステップＳ１０６でＮｏ、ステップＳ１０７でＹｅｓ）、デザインデータを生成する際にカラーパターンがランダムに選択される（ステップＳ１０９）。

プレビューボタン２４３が選択された場合には（ステップＳ１１０でＹｅｓ）、モジュール関連付け記憶部１６に記憶されているモジュール同士の関連付けに基づいて、スタイルシートデータ記憶部１５に記憶されているスタイルシートデータの各モジュールが選択される（ステップＳ１１１）。このとき、プレビュー表示領域２４５に表示されている各モジュールに対応する表示領域のいずれかをユーザが選択することにより、いずれかのモジュールが指定されている場合には（ステップＳ１１６でＹｅｓ）、そのモジュールが固定された状態で（ステップＳ１１７）、他の各表示領域に対応するモジュールが選択されることとなる。

そして、選択された各モジュールがスタイルシートデータ記憶部１５から読み出されるとともに（ステップＳ１１２）、各モジュールにカラーデータが付加され（ステップＳ１１３）、これらの各モジュールがベースＨＴＭＬ記憶部１８から読み出されたベースＨＴＭＬファイル（ステップＳ１１４）と組み合わせられる。これにより、ウェブページのデザインデータが生成され、そのデザインデータがプレビュー表示領域２４５に表示される（ステップＳ１１５）。このとき、ステップＳ１１２〜Ｓ１１４は、デザインデータを生成するためのデザインデータ生成ステップを構成している。

生成されたデザインデータがプレビュー表示領域２４５に表示された後も、ユーザは、カラー指定領域２４１の指定ボタン２４１ａ又は非指定ボタン２４１ｂ、ベースＨＴＭＬ指定領域２４２の指定ベースＨＴＭＬ表示領域２４２ａ、あるいは、プレビュー表示領域２４５の各表示領域に対応するモジュールなどを選択することができる（ステップＳ１０２、Ｓ１０３、Ｓ１０６、Ｓ１０７、Ｓ１１６）。このようにして、カラー、ベースＨＴＭＬファイル又はモジュールを指定し直してプレビューボタン２４３を選択することにより（ステップＳ１１０でＹｅｓ）、プレビュー表示領域２４５に表示されるデザインデータを、ユーザの好みに合ったデザインデータに近づけていくことができる。

最終的に書き出しボタン２４４が選択された場合には（ステップＳ１１８でＹｅｓ）、そのとき生成されているデザインデータが、ユーザ情報に対応付けてウェブページデータ記憶部１９に保存される（ステップＳ１１９）。ここで、図２に例示されるようなウェブデザイン作成画面において、例えば反映ボタン（図示せず）を設けることにより、当該反映ボタンがユーザにより選択された場合に、既に生成されてウェブページデータ記憶部１９に記憶されているデザインデータが上書きされるような構成となっていてもよい。ユーザは、ユーザ端末２の操作部２３を操作することにより、ウェブページデータ記憶部１９に記憶されているウェブページデータ（デザインデータ及びコンテンツデータ）を読み出し、ネットワーク３を介してユーザ端末２のメモリ２５にダウンロードすることができる。

本実施形態では、カラーが指定された場合に、指定されたカラーに基づいてカラーパターン記憶部１７からカラーパターンが選択され、その選択されたカラーパターンに基づいてスタイルシートデータの各モジュールにカラーデータが付加される場合について説明した。しかし、このような構成に限らず、例えば指定されたカラーをそのまま用いて、スタイルシートデータの各モジュールにカラーデータを付加するような構成であってもよい。

また、例えば指定されたカラーに基づいてカラーを生成し、そのカラーを用いてスタイルシートデータの各モジュールにカラーデータを付加するような構成などであってもよい。この場合、例えば指定されたカラーのＲ（レッド）、Ｇ（グリーン）、Ｂ（ブルー）の各値から所定値を加算又は減算するなどの演算を行うことにより、カラーを生成することができる。プレビューボタン２４３が選択されるたびに上記演算を行うことにより、スタイルシートデータの各モジュールに付加するカラーデータを段階的に変化させることも可能である。

このような構成の場合には、ユーザが指定したカラー、又は、ユーザが指定したカラーに基づいて生成されるカラーを用いて、各モジュールにカラーデータを付加し、デザインデータを生成することができる。この場合、ユーザの好みのカラーがより反映されたウェブページのデザインデータを容易に生成することができる。

上記のような構成に限らず、例えばカラー以外の全てのスタイルを保持（保存）したままカラーのみ変更することができるような機能が備えられた構成などであってもよい。この場合、カラーのみを変更するために選択されるボタンが表示されるような構成などであってもよい。

図４は、データ管理を行う際における管理者端末４の表示部４４の表示例を示した図である。ただし、図４に示すような管理画面は、あくまで一例であり、他のあらゆる態様で管理画面を表示部４４に表示させることができる。

本実施形態では、管理者が管理者端末４の操作部４３を操作して、管理者ＩＤやパスワードなどの管理者情報を入力し、サーバ１にログインした状態で、スタイルシートデータ記憶部１５に記憶されているスタイルシートデータのモジュールを追加することができるようになっている。

具体的には、図４に例示されるような管理画面において、スタイルシートデータを構成するモジュールごとに、プログラム入力領域４４１と登録ボタン４４２とが表示される。モジュールごとのプログラム入力領域４４１には、そのモジュールに対応する表示領域のデザインを定義するためのプログラムを入力することができる。このプログラム入力領域４４１にプログラムを入力した状態で、対応する登録ボタン４４２を選択することにより、当該プログラムがモジュールとしてスタイルシートデータ記憶部１５に記憶されるようになっている。

図４の例では、表示画面にスクロールバー４４３が表示されており、当該スクロールバー４４３を選択して表示画面をスクロールさせることにより、ヘッダやグローバルナビゲーションだけでなく、他の表示領域に対応するプログラム入力領域４４１及び登録ボタン４４２を表示させることができる。このように、ウェブページの各表示領域に対応するモジュールを任意に追加することができることにより、各モジュールの組み合わせの数を容易に増加させることができるため、より多くのバリエーションでウェブページのデザインデータを生成することができる。

ただし、管理者が管理者端末４の操作部４３を操作してデータ管理を行うような構成に限らず、ユーザ端末２の表示部２４に管理画面を表示させることにより、ユーザがユーザ端末２の操作部２３を操作してデータ管理を行うことができるような構成とすることも可能である。すなわち、モジュールの追加権限のある者（例えばユーザや管理者など）がデータ管理を行うような構成であればよく、その者がユーザ又は管理者のいずれか一方に限定されるものではない。

図４に例示されるような管理画面では、モジュールの追加だけでなく、他の各種データ管理を行うことができるようになっていてもよい。例えば、モジュール関連付け記憶部１６、カラーパターン記憶部１７、ベースＨＴＭＬ記憶部１８及びウェブページデータ記憶部１９などにデータを登録するための領域が管理画面に表示され、データの登録権限のある者（例えばユーザや管理者など）が当該領域に対する操作によりデータの登録を行うことができるような構成となっていてもよい。

以上の実施形態では、サーバ１、ユーザ端末２及び管理者端末４を含むウェブデザイン生成システムについて説明したが、当該ウェブデザイン生成システムに適用可能な装置として、サーバ１、ユーザ端末２又は管理者端末４を個別に提供することも可能である。また、サーバ１、ユーザ端末２及び管理者端末４を用いてウェブページのデザインデータを生成するウェブデザイン生成方法、あるいは、サーバ１、ユーザ端末２又は管理者端末４を前記ウェブデザイン生成システムに適用可能な装置として機能させるためのプログラムなどを提供することも可能である。前記プログラムは、記憶媒体に記憶した状態で提供されてもよいし、プログラム自体が提供されてもよい。

また、サーバ１、ユーザ端末２及び管理者端末４を用いてウェブページのデザインデータを生成するような構成に限らず、１つ又は２つの装置でウェブページのデザインデータを生成するような構成であってもよいし、４つ以上の装置を用いてウェブページのデザインデータを生成するような構成であってもよい。例えば、ユーザ情報や管理者情報を用いてサーバ１にログインするような構成に限らず、ユーザ端末２又は管理者端末４をサーバ１と一体的に構成するなど、各種構成を採用することが可能である。

１ サーバ
２ ユーザ端末
３ ネットワーク
４ 管理者端末
１１ 制御部
１２ 通信部
１５ スタイルシートデータ記憶部
１６ モジュール関連付け記憶部
１７ カラーパターン記憶部
１８ ベースＨＴＭＬ記憶部
１９ ウェブページデータ記憶部
２１ 制御部
２２ 通信部
２３ 操作部
２４ 表示部
２５ メモリ
４１ 制御部
４２ 通信部
４３ 操作部
４４ 表示部
４５ メモリ
１１１ デザインデータ生成部
１１２ モジュール選択処理部
１１３ カラーパターン選択処理部
２４１ カラー指定領域
２４１ａ 指定ボタン
２４１ｂ 非指定ボタン
２４１ｃ 指定カラー表示領域
２４２ ベースＨＴＭＬ指定領域
２４２ａ 指定ベースＨＴＭＬ表示領域
２４３ プレビューボタン
２４４ 書き出しボタン
２４５ プレビュー表示領域
２４５ａ ヘッダ表示領域
２４５ｂ グローバルナビゲーション表示領域
２４５ｃ ボディ表示領域
２４５ｄ ローカルナビゲーション表示領域
２４６ スクロールバー
４４１ プログラム入力領域
４４２ 登録ボタン
４４３ スクロールバー

Claims (5)

1. ウェブページのデザインを表すデザインデータを生成するためのウェブデザイン生成システムであって、
   ウェブページをヘッダ表示領域、グローバルナビゲーション表示領域、ボディ表示領域及びローカルナビゲーション表示領域を含む複数の表示領域に分割したときの各表示領域に対応付けられ、各表示領域のデザインとしてウェブページのレイアウトを定義するためのベースＨＴＭＬファイルと表示領域ごとに組み合わせて使用可能な複数種類のスタイルシートをモジュールとして含むスタイルシートデータを記憶するスタイルシートデータ記憶部と、
   ウェブページの各表示領域に対応付けて前記スタイルシートデータ記憶部に記憶されている複数種類のモジュールについての異なる表示領域に対応するモジュール同士の関連付けを記憶するモジュール関連付け記憶部と、
   前記モジュール関連付け記憶部に記憶されているモジュール同士の関連付けに基づいて、前記スタイルシートデータ記憶部に記憶されているスタイルシートデータの各モジュールを選択するモジュール選択処理部と、
   前記モジュール選択処理部により選択されたスタイルシートデータの各モジュールを前記スタイルシートデータ記憶部からウェブページの表示領域ごとに読み出すことにより、デザインデータを生成するデザインデータ生成部とを備えたことを特徴とするウェブデザイン生成システム。
2. ユーザが任意のカラーを指定するためのカラー指定部をさらに備え、
   前記デザインデータ生成部は、前記カラー指定部により指定されたカラーに基づいて、前記スタイルシートデータ記憶部から読み出されるスタイルシートデータの各モジュールに、カラーデータを付加することを特徴とする請求項１に記載のウェブデザイン生成システム。
3. 前記デザインデータ生成部は、前記カラー指定部により指定されたカラー、又は、前記カラー指定部により指定されたカラーに基づいて生成されるカラーを用いて、前記スタイルシートデータ記憶部から読み出されるスタイルシートデータの各モジュールに、カラーデータを付加することを特徴とする請求項２に記載のウェブデザイン生成システム。
4. ウェブページのデザインを表すデザインデータを生成するためのウェブデザイン生成システムであって、
   ウェブページをヘッダ表示領域、グローバルナビゲーション表示領域、ボディ表示領域及びローカルナビゲーション表示領域を含む複数の表示領域に分割したときの各表示領域に対応付けられ、各表示領域のデザインとしてウェブページのレイアウトを定義するためのベースＨＴＭＬファイルと表示領域ごとに組み合わせて使用可能な複数種類のスタイルシートをモジュールとして含むスタイルシートデータを記憶するスタイルシートデータ記憶部と、
   ユーザが任意のカラーを指定するためのカラー指定部と、
   カラーの組み合わせのパターンを表す複数種類のカラーパターンを記憶するカラーパターン記憶部と、
   前記カラー指定部により指定されたカラーが組み合わせられているカラーパターンを前記カラーパターン記憶部から選択するカラーパターン選択処理部と、
   前記スタイルシートデータ記憶部に記憶されているスタイルシートデータの各モジュールをウェブページの表示領域ごとに読み出し、前記カラーパターン選択処理部により選択されたカラーパターンに基づいて各モジュールにカラーデータを付加することにより、デザインデータを生成するデザインデータ生成部とを備えたことを特徴とするウェブデザイン生成システム。
5. 前記デザインデータ生成部により生成されたデザインデータを構成する任意のモジュールを、当該モジュールに対応する表示領域を選択することによりユーザが指定するためのモジュール指定部をさらに備え、
   前記デザインデータ生成部は、前記モジュール指定部によりモジュールが指定された場合に、そのモジュールを固定した状態で、指定されたモジュールに対応する表示領域以外の表示領域について、別のモジュールを前記スタイルシートデータ記憶部から読み出すことにより、デザインデータを再生成することを特徴とする請求項１〜４のいずれかに記載のウェブデザイン生成システム。

Images