JP2019020805A - 反応型ウェブサイトビルダーシステム及びその方法 - Google Patents

Abstract

【課題】反応型ウェブサイトビルダーシステム及びその方法を提供する。【解決手段】本発明の実施形態による反応型ウェブサイトビルダーシステムは、テーマ別及び解像度別に複数のレイアウト設定値を含む複数のテーマデータセットを生成し、該生成された複数のテーマデータセットをテーマデータベースに保存するテーマ生成部と、第１ユーザの選択によって、複数のテーマテータセットのうち、選択された１つのテーマデータセットに基づいてユーザウェブサイトデータセットを生成するユーザ編集部と、ユーザウェブサイトデータセットに基づいてユーザウェブサイトを生成するサイト生成部と、を含む。【選択図】図３

Description

本発明の実施形態は、反応型ウェブサイトビルダーシステム及びその方法に係り、より詳細には、画面解像度による反応型ウェブサイトを製作するシステム及びその方法に関する。

インターネット技術及びオンラインサービスの発達につれて、ウェブサイトに対する需要は莫大に増加している。

ウェブサイト（例えば、ホームページ）を作るために、ウェブサイト製作ツールと保存空間とが必要である。一般的に、ホームページは、ホームページの製作に対する専門知識や経験のない通常のインターネットユーザが製作するのは容易ではないために、ホームページ製作を専門とする業者に依頼して製作している。

しかし、この場合、ホームページ製作にあまりにも多いコストと時間とがかかり、製作されたホームページを修正または管理するためにも、別途の専門人力やコストが必要な短所がある。このような短所を改善するために、ホームページを自動で製作するツールや方法が紹介されており、ホームページの自動製作方法に関する先行技術も出ている。

大韓民国公開特許第１０−２００９−００３７２０３号 大韓民国公開特許第１０−２０１５−０１０２１５０号

本発明が解決しようとする技術的な課題は、専門的な知識のない一般ユーザも、プログラムコーディングなしに容易にウェブサイトを製作することができる反応型ウェブサイトビルダーシステム及びその方法を提供するところにある。

また、本発明が解決しようとする技術的な課題は、画面解像度によって可変する反応型ウェブサイトを容易に製作可能にする反応型ウェブサイトビルダーシステム及びその方法を提供するところにある。

本発明の実施形態による反応型ウェブサイトビルダーシステムは、テーマ別及び解像度別に複数のレイアウト設定値を含む複数のテーマデータセットを生成し、該生成された前記複数のテーマデータセットをテーマデータベースに保存するテーマ生成部と、第１ユーザの選択によって、前記複数のテーマテータセットのうち、選択された１つのテーマデータセットに基づいてユーザウェブサイトデータセットを生成するユーザ編集部と、前記ユーザウェブサイトデータセットに基づいてユーザウェブサイトを生成するサイト生成部と、を含む。

前記サイト生成部は、前記ユーザウェブサイトデータセットを保存するウェブサイトデータベースと、前記ウェブサイトデータベースに保存された前記ユーザウェブサイトデータセットのうち、第１レイアウト設定値に基づいて解像度別ＣＳＳファイルを生成するＣＳＳファイル生成器と、前記ＣＳＳファイル及び前記ユーザウェブサイトデータセットのうち、第２レイアウト設定値とコンテンツに基づいて、ユーザウェブサイトを生成する反応型ユーザインターフェースモジュールと、を含みうる。

前記複数のレイアウト設定値は、メインページを構成する複数のメインページ構成項目、及びサブページを構成する複数のサブページ構成項目を含み、前記複数のメインページ構成項目及び前記サブページ構成項目のそれぞれは、１つ以上の細部項目設定値を含みうる。

本発明の実施形態による反応型ウェブサイトビルダーシステム及びその方法によれば、専門的な知識のない一般ユーザも、プログラムコーディングなしに容易にウェブサイトを製作することができる。

また、本発明の実施形態による反応型ウェブサイトビルダーシステム及びその方法によれば、画面解像度によって可変する反応型ウェブサイト（例えば、ホームページ）をプログラムコーディングなしにメニュー選択及び設定作業を通じて便利に製作することができる。

本発明の一実施形態による反応型ウェブサイトビルダーシステムの概略的な連結関係を示す図面である。 図１に示された反応型ウェブサイトビルダーシステムの概略的な構成ブロック図である。 本発明の実施形態による反応型ウェブサイトビルダーシステムの機能ブロック図である。 図３に示されたテーマ生成部の機能を説明する図面である。 図３に示された反応型画面作業ビューアの画面の一実施形態を概略的に示す図面である。 サイトメニュー設定モジュールが提供する画面の一実施形態を示す図である。 サイトメニュー設定モジュールが提供する画面の一実施形態を示す図である。 カラーテーマ設定画面の一実施形態を示す図である。 メインページレイアウト編集画面の一実施形態を示す図である。 メインページレイアウトで上段項目（ロゴやメニュー部分）を編集するポップアップウィンドウの一例を示す図である。 メインページレイアウトでビジュアル項目を編集するポップアップウィンドウの一例を示す図である。 メインページレイアウトでバナーを編集するポップアップウィンドウの一例を示す図である。 メインページレイアウトで下段項目を編集するポップアップウィンドウの一例を示す図である。 内容（コンテンツ）編集画面の一例を表す図である。 メインページ上段項目の内容（コンテンツ）を編集するページの一例を表す図である。 メインページビジュアル項目の内容（コンテンツ）を編集するページの一例を表す図である。 メインページバナー項目の内容（コンテンツ）を編集するページの一例を表す図である。

本明細書または出願に開示されている本発明の実施形態についての特定の構造的ないし機能的説明は、単に本発明による実施形態を説明するための目的として例示されたものであって、本発明による実施形態は、多様な形態で実施され、本明細書または出願に説明された実施形態に限定されるものと解釈されてはならない。以下、添付図面を参照して、本発明の望ましい実施形態を説明することによって、本発明を詳しく説明する。各図面に付された同じ参照符号は、同じ部材を示す。

図１は、本発明の一実施形態による反応型ウェブサイトビルダーシステム３０の概略的な連結関係を示す図面である。

それを参照すれば、反応型ウェブサイトビルダーシステム３０は、通信網２０を通じて複数（２以上）のユーザ端末機１０−１〜１０−ｋ（ｋは、２以上の整数）と通信することができる。

第１ないし第ｎユーザ端末機１０−１〜１０−ｋのそれぞれは、通信網２０を通じて反応型ウェブサイトビルダーシステム３０に接続して反応型ウェブサイトを製作し、また、製作された反応型ウェブサイトを利用することもできる。

反応型ウェブサイトは、各サイトの細部ＵＲＬが解像度に関係なく同一であるために、各サイトページの細部ＵＲＬを配布しても、デバイスに関係なく同じ内容を確認させうる。

ユーザ端末機１０−１〜１０−ｋは、ＰＣ（ｐｅｒｓｏｎａｌ ｃｏｍｐｕｔｅｒ）、ラップトップ（ｌａｐｔｏｐ）コンピュータ、または携帯用端末機として具現可能である。携帯用端末機は、携帯電話、スマートフォン（ｓｍａｒｔ ｐｈｏｎｅ）、タブレット（ｔａｂｌｅｔ）ＰＣ、ＰＤＡ（ｐｅｒｓｏｎａｌ ｄｉｇｉｔａｌ ａｓｓｉｓｔａｎｔ）などであり得るが、これらに限定されるものではない。第１ないし第ｎユーザ端末機１０−１〜１０−ｋの全体あるいは１つを代表的にユーザ端末機１０と称することができる。

ユーザ端末機１０は、反応型ウェブサイトビルダーシステム３０に接続して、会員加入、会員情報登録、反応型ウェブサイト生成、ウェブサイトドメイン生成、メニュー管理、レイアウト選択及び変更、内容登録及び修正、掲示板（ＢＢＳ：Ｂｕｌｌｅｔｉｎ Ｂｏａｒｄ Ｓｙｓｔｅｍ）に書き込み、コメント書き込みなどの機能を行える。

例えば、ユーザは、ユーザ端末機１０で反応型ウェブサイトビルダーシステム３０に接続して、反応型ウェブサイトビルダーシステム３０が提供される各種テンプレート及びユーザインターフェースを用いて反応型ウェブサイトを生成し、該生成された反応型ウェブサイトを管理（例えば、コンテンツまたはレイアウトの変更など）することもできる。

また、ユーザは、特定のＵＲＬで生成された反応型ウェブサイトに接続して、ウェブサイトで提供する情報の閲覧や書き込みなどを行うことができる。

図２は、図１に示された反応型ウェブサイトビルダーシステム３０の概略的な構成ブロック図である。図２を参照すれば、反応型ウェブサイトビルダーシステム３０は、プロセッサ４０、通信部５０、データ保存部６０及びユーザインターフェース部７０を含みうる。

データ保存部６０は、反応型ウェブサイト生成（製作）サービスを提供するためのプログラム及びデータを保存する。データ保存部６０は、ＲＯＭ、不揮発性メモリ、ハードディスク装置など多様な記録媒体を含みうる。

プロセッサ４０は、データ保存部６０に保存されたプログラムを実行して、ユーザ端末機１０に、反応型ウェブサイト生成（製作）サービスを提供することができる。プロセッサ４０は、また、データ保存部６０のプログラム及びデータを管理することができる。

通信部５０は、通信網（図１の２０）を通じてユーザ端末機１０と通信することができる。

ユーザインターフェース部７０は、ユーザからユーザ情報とユーザ選択を入力されて、前記ユーザ情報と前記ユーザ選択によってユーザ入力信号を生成することができる。ユーザは、システム管理者であり得るが、これに限定されるものではない。

ユーザインターフェース部７０は、ユーザ入力信号をプロセッサ４０に伝送しうる。ユーザインターフェース部７０は、キーボード、マウス、タッチスクリーンなどユーザの入力をセンシングすることができる装置として具現可能である。

ユーザインターフェース部７０は、また、映像信号や音声信号を出力することができる。

図３は、本発明の実施形態による反応型ウェブサイトビルダーシステムの機能ブロック図である。図４は、図３に示されたテーマ生成部１００の機能を説明する図面である。図５は、図３に示された反応型画面作業ビューア１３０の画面の一実施形態を概略的に示す図面である。

図３ないし図５を参照すれば、反応型ウェブサイトビルダーシステム３０は、ユーザが画面解像度によって可変する反応型ウェブサイト（例えば、ホームページなど）を便利に製作可能にするシステムである。例えば、反応型ウェブサイトビルダーシステム３０は、ユーザがウェブサイトを製作するために、別途のプログラムコーディングなしに、反応型ウェブサイトビルダーシステム３０から提供されるユーザインターフェースを用いたカラーテーマ選択及びレイアウト設定などを通じて容易に反応型ウェブサイトを製作可能にする。

反応型ウェブサイトビルダーシステム３０に含まれる各構成１００、２００、３００は、ハードウェア（ｈａｒｄｗａｒｅ）、ソフトウェア（ｓｏｆｔｗａｒｅ）またはこれらの組合わせで具現可能である。反応型ウェブサイトビルダーシステム３０の機能は、また、図２に示された反応型ウェブサイトビルダーシステム３０の構成要素を用いて具現可能である。

反応型ウェブサイトビルダーシステム３０は、テーマ生成部１００、ユーザ編集部２００、ウェブサイト生成部３００を含む。

テーマ生成部１００は、基本設定部１１０、解像度別レイアウト設定部１２０、反応型画面作業ビューア１３０、及びテーマデータベース１４０を含む。

基本設定部１１０は、ジャバスクリプト（ｊｓ：ｊａｖａｓｃｒｉｐｔ（登録商標））の駆動のための計算値またはプログラムアルゴリズムを含む。基本設定部１１０は、反応型（画面解像度）による適した基本ＣＳＳ（ｃａｓｃａｄｉｎｇ ｓｔｙｌｅ ｓｈｅｅｔｓ）セッティング値を生成または設定する。

ＣＳＳは、ウェブ文書の全体的なスタイルをあらかじめ保存しておいたスタイルシートを意味する。‘反応型’とは、画面解像度（あるいは、画面サイズ）に適するようにウェブサイトの画面（あるいは、ページ）が自動で変更（あるいは、再構成）されることを意味する。

解像度別レイアウト設定部１２０は、テーマ開発者をしてテーマ別または解像度別にレイアウト設定値を設定可能にする。

例えば、解像度別レイアウト設定部１２０は、反応型ウェブサイトビルダーシステム３０に接続したテーマ開発者にレイアウト設定値を設定することができるインターフェースを提供し、ユーザの入力または選択によって、複数のレイアウト設定値を生成する。

反応型画面作業ビューア１３０は、解像度別レイアウト設定部１２０によって設定された複数のレイアウト設定値によるウェブ画面を生成してディスプレイする。

反応型画面作業ビューア１３０は、複数の解像度のうち、選択された解像度によってウェブ画面を生成することができる。実施形態によって、ユーザの便宜のために、複数の解像度は、ＰＣ、タブレット、端末機横、及び端末機縦に区分されうる。

図５に示された反応型画面作業ビューア１３０の画面１３０ａを参照すれば、反応型画面作業ビューア１３０の画面１３０ａには、ＰＣ、タブレット、端末機横、及び端末機縦を選択することができるメニュー１３１、１３２、１３３、１３４が示されうる。

テーマ開発者の反応型画面作業ビューア画面１３０ａでメニュー１３１、１３２、１３３、１３４のうち１つを選択することによって、解像度を選択することができる。

例えば、テーマ開発者がＰＣ１３１を選択すれば、反応型画面作業ビューア１３０は、設定された複数のレイアウト設定値によってＰＣ画面に合うウェブ画面を生成してディスプレイし、端末機縦１３４を選択すれば、反応型画面作業ビューア１３０は、設定された複数のレイアウト設定値によって端末機縦画面（例えば、端末機を縦に配置した時、横解像度）に合うウェブ画面を生成してディスプレイすることができる。もし、端末機横１３３を選択すれば、反応型画面作業ビューア１３０は、設定された複数のレイアウト設定値によって端末機横画面（例えば、端末機を横に配置した時、横解像度）に合うウェブ画面を生成してディスプレイすることができる。

したがって、テーマ開発者は、レイアウト設定値によるウェブ画面を確認し、必要に応じて、レイアウト設定値を変更することができる。

テーマデータベース１４０は、解像度別レイアウト設定部１２０によって設定された複数のレイアウト設定値を保存する。実施形態によって、テーマデータベース１４０は、テーマ別に、また、解像度別に複数のレイアウト設定値を保存することができる。テーマ別の複数のレイアウト設定値をテーマデータセットと称することができる。

前述したように、テーマ生成部１００は、テーマ別あるいは解像度別の複数のレイアウト設定値を指定または設定する機能を行う。

実施形態によって、テーマ生成部１００は、メインページとサブページとに区分してレイアウト構成値を指定する機能を行う。

図４を参照すれば、メインページ４１０は、メインページのレイアウトを構成する項目４３０（Ｍ１〜Ｍ４）を含み、サブページ４２０は、サブページのレイアウトを構成する項目４４０（Ｓ１〜Ｓ４）を含みうる。

例えば、構成項目４３０、４４０は、上段、メニュー、ロゴ、上段ビジュアル、バナー、掲示板スタイル、ギャラリースタイル、入力フォームスタイル、下段スタイル、内容領域スタイルなどに区分されうる。

各構成項目は、１つ以上の細部項目を含みうる。

例えば、メインページの構成項目（Ｍ１）は、細部項目４５０（Ｍ１−１、Ｍ１−２、Ｍ１−３）を含みうる。図示されていないが、メインページの他の構成項目（Ｍ２〜Ｍ４）やサブページの構成項目（Ｓ１〜Ｓ４）のそれぞれも、１つ以上の細部項目を含みうる。

細部項目は、解像度別に分けることもでき、解像度と無関係に全体的に適用される項目もある。

この細部項目には、例えば、カラー、サイズ、余白値などを含み、場合によっては、基本設定部１１０にあらかじめ構成された適したセッティングのためのアルゴリズムを選択する方式もある。

細部項目は、大きく３つのタイプに区分されうる。例えば、細部項目は、１）カラー、２）形状レイアウト、３）既セッティングされたアルゴリズムがある。

カラーの場合、一般的に固定された値（例えば、ＲＧＢ値）で入力し、‘＃ＡＡ３３ＤＤ’のように表現される。

シングルカラーの場合、１つのＲＧＢ値を入力し、グラデーションの場合には、２つまたは３つの値を入力することができる。透明度の場合には、比率（例えば、％）で入力することができる。

形状レイアウトの場合、サイトレイアウトが反応型に影響を受けるために、固定的なサイズの場合には、ピクセル単位を使用し、流動的な場合には、％単位を使用して入力することができる。

例えば、ピクセルの場合、特定の解像度でイメージやラウンド文字サイズが固定的でなければならない場合、ピクセルで入力する。しかし、解像度に合わせてイメージのサイズを流動的に表現する場合には、比率（例えば、％）で入力する。グラデーションポジションと、コンテンツを構成するボックスやレイアウトのサイズなどが流動的である場合にも、比率（例えば、％）で入力することができる。

基本設定部１１０は、既セッティングされたアルゴリズムを用いて複数のレイアウト設定値を生成することができる。既セッティングされたアルゴリズムは、複雑なセッティングなどを最適化してあらかじめ構成しておいたグループとしてレイアウト設定値で構成しても良く、レイアウト設定値を生成するプログラムなどで構成しても良い。

例えば、解像度別レイアウト設定部１２０でユーザインターフェースを通じて３段バナーまたは４段バナーのように一部レイアウトに対して選択可能にし、テーマ開発者やユーザが特定のレイアウトを選択すれば、該選択されたレイアウトに該当する細部レイアウト設定値は、基本設定部１１０の既セッティングされたアルゴリズムで生成されうる。これにより、テーマ開発者やユーザが、レイアウト設定値をいちいち設定するか、入力する必要なしに、選択のみでレイアウト設定値を生成することができる。

ユーザ編集部２００は、サイトメニュー設定モジュール２１０、テーマ選択モジュール２２０、レイアウト設定モジュール２３０及び内容構成モジュール２４０を含む。

ユーザ編集部２００は、ユーザをしてテーマデータベースに保存されたテーマデータセットに基づいて、ユーザが製作しようとするウェブサイト（以下、‘ターゲットウェブサイト’と称する）のサイトメニュー（あるいは、サイトマップ）及びレイアウトを便利に編集可能にする。

サイトメニュー設定モジュール２１０は、ユーザがターゲットホームページのサイトメニューを設定できるように既定のユーザインターフェースを提供し、ユーザの選択によってサイトメニューデータを生成してウェブサイトＤＢ３１０に保存することができる。

図６は、サイトメニュー設定モジュール２１０が提供する画面の一実施形態を示す。

ユーザが、サイトメニューを選択すれば、サイトメニューを設定するためのサイトメニューテンプレートが示される。

サイトメニューテンプレートは、階層的構造（Ｈｉｅｒａｒｃｈｉｃａｌ ｓｔｒｕｃｔｕｒｅ）またはツリー構造（ｔｒｅｅ ｓｔｒｕｃｔｕｒｅ）を有しうる。

サイトメニューテンプレートは、最上位階層のテンプレートメニュー（それを‘主メニューテンプレート’と称する）と各主メニューの下位に追加される１つ以上のサブメニューテンプレートとを含みうる。

例えば、サイトメニューが選択されれば、複数（２以上）の主メニューテンプレートが示される。

一実施形態において、８つの主メニューテンプレートが提供されうる。

ユーザは、必要なほどの主メニューテンプレートを選択して、使用如何及び主メニュー名を設定することができる。例えば、ユーザは、第１主メニューを選択して‘使用’として設定し、メニュー名を‘会社紹介’として設定することができる。例えば、ユーザは、第２主メニューを選択して‘使用’として設定し、メニュー名を‘掲示板’として設定することができる。

このように、サイトメニュー設定モジュール２１０は、ターゲットウェブサイトのサイトメニューを設定するための多様なテンプレートを提供し、ユーザの選択によって１つ以上の主メニュー及びサブメニューが設定されるようにする。

各主メニューの下段には、サブメニューを追加することができるＵＩ（ユーザインターフェース、例えば、ボタン）が提供されうる。ユーザは‘追加’ボタンをクリックして、サブメニュー名を設定し、当該サブメニューの機能を既定の機能のうち、１つとして設定することができる。例えば、既定の機能は、一般ページ、一般掲示板、ギャラリー掲示板、相談予約ページ、略図などであり得るが、これらに限定されるものではない。設定された機能によって、当該サブメニューのページタイプや様式が変わりうる。

例えば、ユーザは、第１主メニュー（会社紹介）のサブメニューとして、代表者挨拶、いらっしゃる道を追加して設定することができる。代表者挨拶に対しては、機能を一般ページとして設定し、いらっしゃる道に対しては、略図として設定することができる。

このように、ユーザの選択によって１つ以上のサブメニューが設定されうる。また、各サブメニューに対して使用如何を設定することができる。

各主メニューと各サブメニューに対する設定が完了されれば、サイトメニューに対する設定は完了する。

サイトメニュー設定が完了されれば、テーマ設定段階が行われる。

テーマ設定は、テーマ選択モジュール２２０によって行われる。

テーマ選択モジュール２２０は、テーマ生成部１００で既セッティングされた複数のテーマデータセットのうち１つを選択し、該選択されたテーマデータセットをサイト生成部のウェブサイトＤＢにアップデートする。例えば、テーマ選択モジュール２２０は、選択されたテーマデータセットをユーザウェブサイトデータセットとしてウェブサイトＤＢに保存することができる。

テーマ設定のために、ホームページビルダーシステム１０によってカラーテーマ設定メニューが提供されうる。カラーテーマ設定メニューは、ユーザがターゲットホームページのカラーテーマを設定できるように提供されるメニューである。

カラーテーマは、ホームページのメインページ及びサブページのカラー、余白、背景、レイアウト、エッジタイプなどを意味する。

カラーテーマメニューを選択すれば、複数のテンプレートカラーのうち１つを選択することができるメニューが提供されうる。

例えば、複数のテンプレートカラーは、レッド、オレンジ、ブラウン、イエロー、グリーン、ブルー、パープル、ピンク及び黒白を含みうるが、これらに限定されるものではない。

また、ユーザは、カラーテーマ設定メニューを通じて、シングルカラー、グラデーション有無、グラデーション程度、透明度などを確認し、適したテーマ（カラーテーマ）を選択することができる。

レイアウト設定モジュール２３０は、ウェブサイトＤＢ３１０からユーザウェブサイトデータセットを呼び出して編集し、再び変更事項及び追加された内容をウェブサイトＤＢ３１０にアップデートする。

ユーザは、レイアウト設定メニューを通じてターゲットウェブサイトのレイアウトを設定することができる。

レイアウト設定は、メインページ別、サブページ別になされうる。

まず、メインページのレイアウトが設定されうる。
レイアウトは、上段メニューのサイズ、主メニューのサイズ、位置、サブメニューのスタイル（下段に整列、左右に整列、ビジュアルのサイズ、フル画面、一部画面、バナーの位置など）などを含みうる。

ユーザは、レイアウト設定モジュール２３０で提供するユーザインターフェースを用いて基本として設定されたレイアウト（または、基本として設定されたレイアウトによる設定値）を使用しても、一部を変更して使用しても良い。

内容構成モジュール２４０も、レイアウト設定モジュール２３０と類似にウェブサイトＤＢ３１０からユーザウェブサイトデータセットを呼び出して編集し、再び変更事項及び追加された内容をウェブサイトＤＢ３１０にアップデートする。

サイト生成部３００は、ウェブサイトＤＢ３１０、反応型（解像度別）ＣＳＳファイル生成器３２０及び反応型ユーザインターフェースモジュール３３０を含む。

反応型ＣＳＳファイル生成器３２０は、ウェブサイトＤＢ３１０に保存されているユーザウェブサイトデータセットのレイアウトセッティング値とテーマ生成部１００の基本設定部１１０の基本ＣＳＳ設定値とを呼び出して、反応型ユーザインターフェースモジュール３３０に反応型ユーザウェブサイトＣＳＳファイルを生成する。したがって、このファイル（ユーザウェブサイトＣＳＳファイル）は、各ドメイン別（すなわち、ウェブサイト別）に異ならせて生成される。

反応型ユーザインターフェースモジュール３３０は、大きく４つのサブモジュールを含む。

例えば、反応型ユーザインターフェースモジュール３３０は、ＪＳモジュール３３１、ＨＴＭＬモジュール３３３、ＣＳＳモジュール３３５、及びウェブプログラムモジュール３３７を含む。ウェブプログラムモジュール３３７は、ウェブプログラムを駆動する。ウェブプログラムの例としては、ｐｈｐ、ａｓｐ、ｊｓｐなどウェブで駆動されるＤＢ連動可能なプログラムがある。

反応型ユーザインターフェースモジュール３３０は、反応型ＣＳＳファイル生成器３２０によって既生成されたＣＳＳファイルとウェブサイトＤＢ３１０のコンテンツ情報及びＣＳＳファイルで整理されていないその他のレイアウトを構成する値またはコード（ＨＴＭＬのＩｎｌｉｎｅ方式）を呼び出し、基本設定部１１０に既セッティングされているｊｓ（Ｊａｖａｓｃｒｉｐｔ）関連アルゴリズムを呼び出して、ユーザがウェブブラウザーで見られる実際の反応型ウェブサイトを生成する。

また、ユーザが、当該サイトに指定されているＵＲＬ方式で接続可能にし、接続後、画面でウェブの各種フォーム（ｉｎｐｕｔ、ｓｅｌｅｃｔ、ｔｅｘｔａｒｅａなど）の機能を使用して、ユーザが入力した情報をウェブサイトＤＢ３１０にアップデートする役割も行う。

図６ないし図１７は、本発明の実施形態による反応型ウェブサイトビルダーシステム３０がユーザインターフェースのために提供するページ（あるいは、画面）の実施形態を示す。例えば、図６ないし図１７は、反応型ウェブサイトビルダーシステム３０のユーザ編集部２００が提供するユーザインターフェース画面であり得る。

サイトメニュー設定モジュール２１０は、図６及び図７に示したようなサイトメニュー編集画面を提供することができる。サイトメニュー編集画面は、サイトの主メニューとサブメニューとを提供することができる。

図６に示された実施形態によれば、ユーザは、サイトメニュー編集画面で、ロック（１）（明細書中において両括弧で囲った数字は、図面中においては〇で囲った数字を表す。以下同様。）を解除した後にサイトメニューを編集することができる。（２）は、サイトの主メニューであって、ユーザは、主メニューをクリックしてメニュー名を修正することができる。（３）は、サイトのサブメニューであり、サブメニューは、主メニュー下に属するメニューであって、ユーザは、サブメニューをクリックしてメニュー名を修正することができる。ユーザは、アイコンクリック後、ドラッグアンドドロップでメニューの位置を変更することもできる。

図６の実施形態では、主メニューは、最大８つまで作ることができるように提供されるが、これに限定されるものではない。特定の色（例えば、灰色）で表示されたメニューは、現在使わないメニュー（例えば、不活性化されたメニュー）であり得る。ユーザは、不活性化されたメニューをクリックして‘使用’を押してメニューを活性化することができる。

図７の実施形態において、ユーザは、修正する主メニュー（２）を選択することができる。修正する主メニュー（２）を選択すれば、右側に編集ウィンドウが表われ、メニュー名（３）を修正することができる。ユーザが、‘使用’（４）をオン／オフして主メニューを活性化／不活性化することができる。主メニューを修正した後、‘確認’ボタン（６）を押せば、修正が完了する。

サイトメニュー編集画面に‘カラーテーマ’ボタン（７）が提供され、ユーザが、‘カラーテーマ’ボタン（７）を押せば、、カラーテーマを選択するページに移動することができる。ユーザは、主メニューと類似した方式でサブメニューに対してメニュー名入力、修正、位置変更、サブメニューの機能を指定することができる。

サブメニューの機能は、例えば、一般ページ、一般掲示板、ギャラリー掲示板、問い合わせ相談（入力フォーム）、いらっしゃる道（マップ）のようにサイトを構成する機能別コンテンツを意味する。

テーマ選択モジュール２２０は、図８に示したようなカラーテーマ設定画面を提供することができる。カラーテーマ設定画面は、ウェブサイトのカラーテーマを選択するページであって、ユーザは、既定の複数のカラー配色（図８の（１））のうちから所望のカラー配色を選択することができる。カラーテーマ設定画面は、ユーザが複数のテーマに対する紹介及び例示イメージ（図８の（２））を提供することができる。

レイアウト設定モジュール２３０は、図９に示したようなメインページレイアウト編集画面を提供することができる。

メインページレイアウト編集画面は、ユーザが製作するターゲットウェブサイトのメインページの全体レイアウト形状を単純化して分かりやすく確認し、編集できるように提供されるページである。

メインページのレイアウトは、図９の左側に見えるイメージのように上段、ビジュアル、バナー、掲示板、ＳＮＳ、動画、ギャラリー、ショッピングモール、下段などで構成され、項目はさらに追加されうる。あらゆる項目は、順序を変更することができるが、一部項目（例えば、上段とビジュアルを除いた他の項目）のみ順序を変更できるようにインターフェースを構成することもでき、各項目を押せば、編集ポップアップウィンドウが表われる。

メインページレイアウト編集画面は、サブページレイアウト編集画面に移動することができるメニュー（１）、各項目別レイアウト修正後、保存された内容をあらかじめ確認することができるメニュー（２）、全体項目または使用項目表示メニュー（３）などを提供することができる。一部項目は、使わなければオフにする。

メインページレイアウト編集画面は、また、現在選択されてカラーテーマを確認することができるメニュー（４）、コンテンツ領域（内容領域と内容外の余白を区別するための影の処理など）を区別するためのメニュー（５）、コンテンツ領域の外側部分（例えば、余白）の色相を選択することができるメニュー（６）などを提供することができる。

図１０は、メインページレイアウトで上段項目（ロゴやメニュー部分）を編集するポップアップウィンドウの一例を示す。図９のメインページレイアウト編集画面で上段項目を押せば、図１０のような上段項目編集ポップアップウィンドウが表われる。ユーザは、上段項目編集ポップアップウィンドウで上段のレイアウト−例えば、背景色範囲、ロゴと主メニュー整列方式、主メニューラウンドサイズ、サブメニュー整列方式、サブメニューバーの長さ、上段固定有無など−を設定した後、‘保存’ボタン（１）を押せば、変更する内容がウェブサイトＤＢ３３０に保存され、ポップアップウィンドウが閉まる。

図１０のポップアップウィンドウの下段の同期化を行えば、ウェブサイトＤＢ３３０にサービス可能テーブルにアップデートされて、実際のユーザのウェブサイトに適用される。

図１１は、メインページレイアウトでビジュアル項目を編集するポップアップウィンドウの一例を示す。図９のメインページレイアウト編集画面でビジュアル項目を押せば、図１１のようなビジュアル項目編集ポップアップウィンドウ（１）が表われる。

ユーザは、ビジュアル項目編集ポップアップウィンドウでビジュアルのレイアウト−例えば、領域範囲、ビジュアルサイズ、ビジュアル変換方式、変換矢印の色など−を設定した後、‘保存’ボタン（２）を押せば、変更する内容が保存され、ポップアップウィンドウが閉まる。

図１２は、メインページレイアウトでバナーを編集するポップアップウィンドウの一例を示す。図９のメインページレイアウト編集画面でバナー項目を押せば、図１２のようなバナー項目編集ポップアップウィンドウが表われる。

ユーザは、バナー項目編集ポップアップウィンドウでバナーのレイアウト−例えば、使用如何、段数、イメージ比率、テキストボックスの位置、色など−を設定した後、‘保存’ボタンを押せば、変更する内容が保存され、ポップアップウィンドウが閉まる。

図１３は、メインページレイアウトで下段項目を編集するポップアップウィンドウの一例を示す。図９のメインページレイアウト編集画面で下段項目を押せば、図１３のような下段項目編集ポップアップウィンドウが表われる。

下段項目編集ポップアップウィンドウは、メインページレイアウトで下段部分を編集するためのユーザインターフェースである。

ユーザは、下段項目編集ポップアップウィンドウで下段のレイアウト−例えば、背景色範囲、形状、使用如何など−を設定した後、‘保存’ボタンを押せば、変更する内容が保存され、ポップアップウィンドウが閉まる。

前述したように、本発明の実施形態によれば、ユーザは、メインページレイアウト編集画面でのメインページの各レイアウト要素に対する選択のみでも、メインページのレイアウトを所望のレイアウトとして設定することができる。このように、設定されたレイアウト設定値は、ユーザの選択（例えば、保存ボタンの入力あるいは同期化選択）によって、ウェブサイトＤＢ３１０にユーザウェブサイトデータセットの一部として保存することができる。

図９ないし図１３を参照して、メインページレイアウト編集画面を中心にメインページレイアウトを設定する実施形態について説明したが、サブページレイアウト編集も、メインページレイアウト編集と類似になされうる。

内容構成モジュール２４０は、図１４ないし図１７に示したような内容（コンテンツ）編集画面を提供することができる。内容（コンテンツ）編集画面は、ユーザウェブサイトコンテンツの内容を編集し、管理するために提供されるページである。

図１４を参照すれば、内容（コンテンツ）編集画面は、レイアウト内容管理メニュー（１）及びメニュー別内容管理メニュー（２）を提供することができる。

レイアウト内容管理メニュー（１）は、レイアウト編集画面で設定した項目の内容を編集するページが集まっているメニューであり、メニュー別内容管理メニュー（２）は、各サブメニューに入る内容を編集、管理するページが集まっているメニューである。

内容構成モジュール２４０は、図１５に示したようなメインページ上段項目の内容（コンテンツ）を編集するページを提供することができる。

内容構成モジュール２４０は、また、図１６に示したようなメインページビジュアル項目の内容（コンテンツ）を編集するページを提供することができる。

内容構成モジュール２４０は、また、図１７に示したようなメインページバナー項目の内容（コンテンツ）を編集するページを提供することができる。

図１５ないし図１７の実施形態では、メインページのレイアウト要素に相応するコンテンツを編集及び構成する例を図示するが、サブページに対しても、同様にコンテンツを編集及び構成することができる。

メニュー別内容管理メニュー（２）は、サイトメニュー設定モジュール２１０で設定したサブメニューの各機能の既具現されているインターフェースによってコンテンツを入力する方式で構成される。例えば、一般掲示板の場合、題目項目と内容項目とのコンテンツを入力し、ファイルアップロード機能を通じてファイルを添付し、使用如何、オープン時間設定、メインページ露出などの付加機能を設定することができる。

前述したように、本発明の実施形態によれば、ユーザは、レイアウト設定モジュール２３０で設定された各レイアウト要素に相応するコンテンツを、内容構成モジュール２４０で便利に編集することができる。

本発明は、また、コンピュータで読み取り可能な記録媒体にコンピュータで読み取り可能なコードとして具現することが可能である。コンピュータで読み取り可能な記録媒体は、コンピュータシステムによって読み取れるデータが保存されるあらゆる種類の記録装置を含む。コンピュータで読み取り可能な記録媒体の例としては、ＲＯＭ、ＲＡＭ、Ｆｌａｓｈ Ｍｅｍｏｒｙ、ＣＤ−ＲＯＭ、磁気テープ、フロッピーディスク（登録商標）、光データ記録装置などがある。

また、コンピュータで読み取り可能な記録媒体は、ネットワークで連結されたコンピュータシステムに分散されて、分散方式でコンピュータで読み取り可能なコードとして保存されて実行可能である。そして、本発明を具現するための機能的な（ｆｕｎｃｔｉｏｎａｌ）プログラム、コード及びコードセグメントは、本発明が属する技術分野のプログラマーによって容易に推論されうる。

本発明は、図面に示された一実施形態を参考にして説明されたが、これは例示的なものに過ぎず、当業者ならば、これより多様な変形及び均等な他実施形態が可能であるという点を理解できるであろう。したがって、本発明の真の技術的保護範囲は、特許請求の範囲の技術的思想によって決定されるべきである。

本発明は、反応型ウェブサイトビルダーシステム及びその方法関連の技術分野に適用可能である。

１０−１〜１０−ｋ：ユーザ端末機
２０：通信網
３０：反応型サイトビルダーシステム
１００：テーマ生成部
１１０：基本設定部
１２０：解像度別レイアウト設定部
１３０：反応型画面作業ビューア
１４０：テーマデータベース
２００：ユーザ編集部
３００：サイト生成部

Claims (15)

1. テーマ別及び解像度別に複数のレイアウト設定値を含む複数のテーマデータセットを生成し、該生成された前記複数のテーマデータセットをテーマデータベースに保存するテーマ生成部と、
   ユーザの選択によって、前記複数のテーマテータセットのうち、選択された１つのテーマデータセットに基づいてユーザウェブサイトデータセットを生成するユーザ編集部と、
   前記ユーザウェブサイトデータセットに基づいてユーザウェブサイトを生成するサイト生成部と、を含み、
   前記テーマ生成部は、
   テーマ開発者に前記複数のレイアウト設定値のうち少なくとも１つを設定することができるインターフェースを提供し、前記テーマ開発者の入力または選択によって、前記複数のレイアウト設定値を生成する解像度別レイアウト設定部と、
   前記解像度別レイアウト設定部によって設定された複数のレイアウト設定値によるウェブ画面を生成してディスプレイする反応型画面作業ビューアと、
   前記解像度別レイアウト設定部によって最終設定された値を保存するテーマＤＢと、を含み、
   前記反応型画面作業ビューアは、
   ＰＣ、タブレット、端末機横、及び端末機縦を選択することができるメニューを提供し、
   前記テーマ開発者によって選択されたメニューによって、前記複数のレイアウト設定値のうち、選択されたメニューの解像度に相応するレイアウト設定値によって選択されたメニューの解像度に合うウェブ画面を生成してディスプレイする反応型ウェブサイトビルダーシステム。
2. 前記複数のレイアウト設定値は、
   メインページを構成する複数のメインページ構成項目、及びサブページを構成する複数のサブページ構成項目を含み、
   前記複数のメインページ構成項目及び前記サブページ構成項目のそれぞれは、１つ以上の細部項目設定値を含む請求項１に記載の反応型ウェブサイトビルダーシステム。
3. 前記細部項目設定値は、解像度によって可変される必要のない非反応型設定値及び解像度によって可変される必要のある反応型設定値のうち１つである請求項２に記載の反応型ウェブサイトビルダーシステム。
4. 前記メインページ構成項目及び前記サブページ構成項目のそれぞれは、
   上段、メニュー、ロゴ、上段ビジュアル、バナー、掲示板スタイル、ギャラリースタイル、入力フォームスタイル、及び下段スタイルのうち少なくとも１つを含み、
   前記細部項目設定値は、
   カラー、サイズ及び余白値のうち少なくとも１つを含む請求項２に記載の反応型ウェブサイトビルダーシステム。
5. 前記ユーザ編集部は、
   主メニューと主メニューの下段にサブメニューを追加し、当該メニューの機能を選択することができるユーザインターフェースを提供するサイトメニュー設定モジュールと、
   前記テーマデータベースに保存されている前記複数のテーマデータセットのうち、レイアウトのカラーセットを選択できるようにカラーテーマ設定メニューを提供するテーマ選択モジュールと、
   前記テーマデータベースに保存されている前記複数のテーマデータセットのうち、余白、背景、レイアウト及びエッジスタイルのセットの位置及び細部設定値を変更することができるレイアウト設定モジュールと、
   前記サイトメニュー設定モジュールによって選択されたメニュー別機能によってユーザが追加内容を登録することができる内容構成モジュールと、
   を含む請求項１に記載の反応型ウェブサイトビルダーシステム。
6. 前記カラーテーマは、
   前記テーマ生成部で設定したレイアウトのシングルカラー、グラデーション有無、グラデーション程度、または透明度が設定されている値の特定のセットを意味し、
   前記カラーテーマ設定メニューは、前記ユーザが前記カラーテーマを選択可能にするユーザインターフェースを提供する請求項５に記載の反応型ウェブサイトビルダーシステム。
7. 前記ユーザウェブサイトデータ及びユーザ編集部で設定した設定値を保存するウェブサイトデータベースをさらに含み、
   前記ユーザ編集部は、
   前記ウェブサイトデータベースから前記ユーザウェブサイトデータセット及び機能別に登録した内容を呼び出して編集し、変更事項及び追加内容を前記ウェブサイトデータベースにアップデートする請求項５に記載の反応型ウェブサイトビルダーシステム。
8. 前記サイト生成部は、
   前記ユーザウェブサイトデータセットを保存し、ユーザ編集部で設定した値を保存するウェブサイトデータベースと、
   前記ウェブサイトデータベースに保存された前記ユーザウェブサイトデータセットのうち、第１レイアウト設定値に基づいて解像度別ＣＳＳファイルを生成するＣＳＳファイル生成器と、
   前記ＣＳＳファイル及び前記ユーザウェブサイトデータセットのうち、第２レイアウト設定値とコンテンツに基づいて、ユーザウェブサイトを生成する反応型ユーザインターフェースモジュールと、
   を含む請求項１に記載の反応型ウェブサイトビルダーシステム。
9. テーマ別及び解像度別に複数のレイアウト設定値を含む複数のテーマデータセットを生成する段階と、
   前記複数のテーマテータセットのうち、選択された１つのテーマデータセットに基づいてユーザウェブサイトデータセットを生成する段階と、
   前記ユーザウェブサイトデータセットに基づいてユーザウェブサイトを生成する段階と、を含み、
   前記テーマデータセットを生成する段階は、
   テーマ開発者に解像度別レイアウト設定値を設定することができるインターフェースを提供し、前記テーマ開発者の入力または選択によって、前記複数のレイアウト設定値を生成する段階と、
   前記解像度別レイアウト設定部によって設定されたレイアウト設定値によるウェブ画面を生成して反応型画面作業ビューアの画面にディスプレイする段階と、
   前記解像度別レイアウト設定部によって最終設定された値をテーマＤＢに保存する段階と、を含み、
   前記反応型画面作業ビューアは、
   ＰＣ、タブレット、端末機横、及び端末機縦を選択することができるメニューを提供し、
   前記テーマ開発者によって選択されたメニューによって、前記複数のレイアウト設定値のうち、選択されたメニューの解像度に相応するレイアウト設定値によって選択されたメニューの解像度に合うウェブ画面を生成してディスプレイする反応型ウェブサイト製作方法。
10. 前記ユーザウェブサイトデータセットを生成する段階は、
    前記ユーザウェブサイトのサイトメニューを設定することができるサイトメニューテンプレートを提供し、ユーザの選択によって１つ以上の主メニュー及びサブメニューを設定する段階と、
    前記ユーザウェブサイトのカラーテーマを設定するためのカラーテーマ設定画面を提供し、ユーザの選択によって、前記ユーザウェブサイトのカラーテーマを設定する段階と、
    を含む請求項９に記載の反応型ウェブサイト製作方法。
11. 前記主メニュー及びサブメニューを設定する段階は、
    複数（２以上）の主メニューテンプレートを提供する段階と、
    前記ユーザの選択によって、前記複数の主メニューテンプレートのうちの少なくとも１つの主メニューを活性化する段階と、
    前記活性化された主メニューの主メニュー名が設定される段階と、
    前記主メニューの下段に前記サブメニュー及び前記サブメニューのサブメニュー名を設定する段階と、
    前記サブメニューを既定の機能のうち１つとして設定する段階と、を含み、
    前記サブメニューの設定された機能によって、前記サブメニューのページタイプまたは様式が変わることを特徴とする請求項１０に記載の反応型ウェブサイト製作方法。
12. 前記ユーザウェブサイトのカラーテーマを設定する段階は、
    前記ユーザウェブサイトのメインページ及びサブページのカラー、余白、及び背景のうち少なくとも１つを選択することができるメニューを提供する段階と、
    前記ユーザがテーマ設定部であらかじめ設定したシングルカラー、グラデーション有無、グラデーション程度、または透明度によって登録されているカラーセットを選択可能にするメニューを提供する段階と、
    を含む請求項１０に記載の反応型ウェブサイト製作方法。
13. 前記ユーザウェブサイトデータセットを生成する段階は、
    前記メインページのレイアウトを編集し、前記メインページレイアウトの構成項目の順序を変更することができるメインページレイアウト編集画面を提供する段階を含み、
    前記メインページレイアウトの構成項目は、
    上段と、
    ビジュアル、バナー、掲示板、ギャラリー、及び動画を含むコンテンツボックスと、
    下段と、
    を含む請求項１０に記載の反応型ウェブサイト製作方法。
14. 前記ユーザウェブサイトデータセットを生成する段階は、
    前記ユーザウェブサイトのコンテンツの内容を編集するためのコンテンツ編集画面を提供する段階をさらに含み、
    前記コンテンツ編集画面は、レイアウト内容管理メニュー及びメニュー別内容管理メニューを含む請求項１３に記載の反応型ウェブサイト製作方法。
15. 前記ユーザウェブサイトを生成する段階は、
    ウェブサイトデータベースに保存された前記ユーザウェブサイトデータセットのうち、第１レイアウト設定値に基づいて解像度別ＣＳＳファイルを生成する段階と、
    前記ＣＳＳファイル及び前記ユーザウェブサイトデータセットのうち、第２レイアウト設定値とコンテンツに基づいて、前記ユーザウェブサイトを生成する段階と、
    を含む請求項９に記載の反応型ウェブサイト製作方法。