特許 6235744 ウェブページ制作支援システム

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】特許公報(B1)

(11)【特許番号】6235744

(24)【登録日】2017年11月2日

(45)【発行日】2017年11月22日

(54)【発明の名称】ウェブページ制作支援システム

(51)【国際特許分類】

   G06F 13/00 20060101AFI20171113BHJP

   G06F 3/0484 20130101ALI20171113BHJP

   G06F 17/22 20060101ALI20171113BHJP

   G06F 17/21 20060101ALI20171113BHJP

【ＦＩ】

   G06F13/00 560A

   G06F3/0484 120

   G06F17/22 635

   G06F17/21 620

【請求項の数】6

【全頁数】22

(21)【出願番号】特願2017-31298(P2017-31298)

(22)【出願日】2017年2月22日

【審査請求日】2017年7月13日

【早期審査対象出願】

(73)【特許権者】

【識別番号】316020181

【氏名又は名称】エヴリ・チューンズ株式会社

(74)【代理人】

【識別番号】110000578

【氏名又は名称】名古屋国際特許業務法人

(72)【発明者】

【氏名】鈴木 英樹

【審査官】 北川 純次

(56)【参考文献】

【文献】 特開平９−２８２１２９（ＪＰ，Ａ）

【文献】 特開平９−２３７２７４（ＪＰ，Ａ）

【文献】 特開２０１０−７２７６４（ＪＰ，Ａ）

【文献】 特開２００７−１８３８３（ＪＰ，Ａ）

【文献】 特開２００７−１０８９９４（ＪＰ，Ａ）

(58)【調査した分野】（Int.Cl.，ＤＢ名）

Ｇ０６Ｆ １３／００

Ｇ０６Ｆ ３／０４８４

Ｇ０６Ｆ １７／２１

Ｇ０６Ｆ １７／２２

(57)【特許請求の範囲】

【請求項1】

制作すべきウェブページの意匠デザインを表す少なくとも１つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報であって、前記ウェブページに設けられる少なくとも１つのクリッカブル領域の画像上の座標を表す座標情報を含む設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成された受領部と、
前記受領部によって受領されたデザイン情報と設定情報とを、当該ウェブページに関する識別情報に対応付けて、所定の記憶装置に保存するように構成された保存部と、
前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するための生成プログラムを作成するように構成されたプログラム作成部と、
前記ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための前記生成プログラムとを含む閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成された送信部とを備え、
前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示し、その表示された画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記ウェブブラウザにクリッカブル領域として認識させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
ウェブページ制作支援システム。

【請求項2】

前記受領部は、前記デザイン情報として、前記ウェブページに設けられる少なくとも１つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す非アクティブ画像情報、及び前記非アクティブ画像情報に対応する画像情報であって、前記クリッカブル領域に対応する画像領域が操作の対象となっている状態を表すアクティブ画像情報を含むデザイン情報を受領するように構成されており、
前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に非アクティブ画像情報を表示し、その表示された非アクティブ画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、前記非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
請求項１に記載のウェブページ制作支援システム。

【請求項3】

前記保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成された公開処理部を更に備える、
請求項１又は請求項２に記載のウェブページ制作支援システム。

【請求項4】

前記受領部は、前記クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能を表す機能情報を更に含む前記設定情報を受領するように構成されおり、
前記プログラム作成部は、前記生成プログラムとして、表示された前記画像情報において、前記設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、前記設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている、
請求項１ないし請求項３の何れか１項に記載のウェブページ制作支援システム。

【請求項5】

前記受領部は、前記クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能として、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する前記機能情報を含む前記設定情報を受領するように構成されている、
請求項４に記載のウェブページ制作支援システム。

【請求項6】

前記受領部は、前記画像情報がウェブブラウザ上でウェブページとして表示されるときに、前記画像情報の全横幅のうち表示を必須とする横幅方向の範囲を定義する情報であるコンテンツ幅情報を更に取得するように構成されており、
前記保存部は、更に、前記受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて前記記憶装置に保存するように構成されており、
前記プログラム作成部は、前記生成プログラムとして、ウェブブラウザ上に前記画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体を前記ウェブブラウザの横幅方向の表示対象に含み、かつ、当該画像情報のうち前記コンテンツ領域以外の横幅方向の領域であって前記ウェブブラウザの表示領域の横幅を超える部分については、前記ウェブブラウザの横幅方向の表示対象から除外する機能を有するウェブページを生成する生成プログラムを作成するように構成されている、
請求項１ないし請求項５に記載のウェブページ制作支援システム。

【発明の詳細な説明】

【技術分野】

【0001】

本開示は、ウェブページの制作を支援するウェブページ制作支援システムに関する。

【背景技術】

【0002】

インターネット上のワールド・ワイド・ウェブ（略名：ＷＷＷ又はウェブ）で公開・閲覧されるウェブページには、例えば、マウスオーバーやクリックといった閲覧者による操作に反応して何らかの処理を実行する機能を有するものが知られている。また、特許文献１には、予め準備された特定のデータに基づいて、定型のウェブページを自動制作する技術が記載されている。

【先行技術文献】

【特許文献】

【0003】

【特許文献1】特開２００１−２７３２３３号公報

【発明の概要】

【発明が解決しようとする課題】

【0004】

閲覧者からの操作に対応する処理を実行する機能を持つウェブページを制作するにあたって、元となるデザイン画像から、ＨＴＭＬ、ＸＨＴＭＬ、ＣＳＳ等のプログラミング言語を駆使して、当該ウェブページを構成するデータを制作するコーディング作業が必要であった。この種のコーディング作業は、専門的な知識や多大な手間が必要であり、専門的な知識や経験の乏しい人には敷居が高いという問題がある。

【0005】

一方、特許文献１には、ウェブページを自動制作する技術が記載されているものの、定型のフォーマットに沿ったウェブページに限られ、デザインの自由度が低い。そのため、ウェブページを制作してこれをＷＷＷで公開しようとする人（以下、ページ制作者という）の意図に沿った独自性のあるウェブページを制作することには適していない。

【0006】

本開示は、上記問題を解決するためになされたものである。本開示は、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援するための技術を提供する。

【課題を解決するための手段】

【0007】

本開示の一態様にかかるウェブページ制作支援システムは、受領部と、保存部と、プログラム作成部と、送信部とを備える。受領部は、制作すべきウェブページの意匠デザインを表す少なくとも１つの画像情報を含むデザイン情報と、当該ウェブページの機能に関する設定を表す設定情報とを、ウェブページの制作を依頼するウェブクライアントから受領するように構成されている。このうち、設定情報には、ウェブページに設けられる少なくとも１つのクリッカブル領域の画像上の座標を表す座標情報が含まれる。

【0008】

プログラム作成部は、保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧するウェブクライアント側で、当該ウェブページに対応するデザイン情報及び設定情報に応じたウェブページを自動的に生成して表示するための生成プログラムを作成するように構成されている。このプログラム作成部は、生成プログラムとして、次のような機能を有するウェブページを生成する生成プログラムを作成するように構成されている。

【0009】

そのウェブページは、ウェブブラウザ上にデザイン情報の画像情報を表示する。そして、その表示された画像情報において、設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、ウェブブラウザにクリッカブル領域として認識させる。

【0010】

送信部は、ウェブページに対するウェブクライアントからの閲覧要求に応じて、当該ウェブページに対応する閲覧用データを、閲覧要求元のウェブクライアントへ送信するように構成されている。この閲覧用データには、当該ウェブページに対応するデザイン情報と、当該ウェブページを生成するための生成プログラムとが含まれる。

【0011】

上述のウェブページ制作支援システムによれば、ウェブページの制作を依頼するウェブクライアントから、少なくとも１つの画像情報を含むデザイン情報と設定情報とをアップロードするだけで、クリッカブルな機能を有するウェブページを制作することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。

【0012】

本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。受領部は、前記デザイン情報として、非アクティブ画像情報、及びアクティブ画像を含むデザイン情報を受領するように構成されている。非アクティブ画像情報は、ウェブページに設けられる少なくとも１つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない状態を表す画像情報である。アクティブ画像情報は、非アクティブ画像情報に対応する画像情報であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像情報である。

【0013】

そして、プログラム作成部は、前記生成プログラムとして、次のような機能を有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に非アクティブ画像情報を表示する。そして、その表示された非アクティブ画像情報において、設定情報の座標情報で示されるクリッカブル領域に対して所定の操作が行われたときに、非アクティブ画像情報内の当該クリッカブル領域に該当する画像領域を、対応するアクティブ画像情報における当該クリッカブル領域に該当する画像領域に差し替えて表示させる。

【0014】

上述のウェブページ制作支援システムによれば、クリッカブル領域への操作に対して、ページ制作者の意図に沿った画像の変化を起す機能を有するウェブページを制作することができる。

【0015】

本開示のウェブページ制作支援システムにおいては、公開処理部を更に備えるように構成されていてもよい。公開処理部は、保存部によって保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを、ワールド・ワイド・ウェブでの公開対象として登録するように構成されている。このような構成によれば、ウェブページの制作を依頼するウェブクライアントからデザイン情報と設定情報とをアップロードするだけで、ウェブページが自動的にＷＷＷに公開される。これにより、閲覧者側のウェブクライアントから容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。

【0016】

本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。具体的には、受領部は、クリッカブル領域に対する所定の実行操作が入力されたときに実行すべき機能を表す機能情報を更に含む設定情報を受領するように構成されている。そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、表示された画像情報において、設定情報の座標情報で示されるクリッカブル領域に対する実行操作が入力されたときに、設定情報における当該クリッカブル領域の機能情報で示される機能を実行させる機能を更に有する。

【0017】

また、受領部は、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアントの少なくとも何れかに関する機能情報を含む設定情報を受領するように構成されているとよい。上述のウェブページ制作支援システムによれば、更に、ウェブページ上のクリッカブル領域が操作された際に実行すべき処理に関して、ページ制作者の意図に沿って様々な機能を有するウェブページの制作を支援することができる。

【0018】

本開示のウェブページ制作支援システムにおいては、さらに、以下の構成を採用してもよい。具体的には、受領部は、画像情報がウェブブラウザ上でウェブページとして表示されるときに、画像情報の全横幅のうち表示を必須とする横幅方向の範囲を定義する情報であるコンテンツ幅情報を更に取得するように構成されている。また、保存部は、更に、受領部によって受領されたコンテンツ幅情報を当該ウェブページに関する識別情報に対応付けて記憶装置に保存するように構成されている。

【0019】

そして、プログラム作成部は、生成プログラムとして、次のような機能を更に有するウェブページを生成する生成プログラムを作成するように構成されている。そのウェブページは、ウェブブラウザ上に画像情報を表示する際、当該画像情報に対応するコンテンツ幅情報で表される領域であるコンテンツ領域の横幅全体をウェブブラウザの横幅方向の表示対象に含める。かつ、当該画像情報のうちコンテンツ領域以外の横幅方向の領域であってウェブブラウザの表示領域の横幅を超える部分については、ウェブブラウザの横幅方向の表示対象から除外する。

【0020】

上述のウェブページ制作支援システムによれば、例えば、アップロードされる画像情報のうち、ウェブページにおいて閲覧者に伝達したいメッセージ等の主要な情報を含む領域をコンテンツ領域として設定できる。このコンテンツ領域については、ウェブブラウザの表示範囲の幅に関わらず必ず表示されるようになっている。一方、コンテンツ領域以外の領域については、ウェブブラウザの表示幅に一致する背景として表示されるようになっている。このように、アップロードされる画像情報に対して、ページ制作者の意図に沿って主要なコンテンツ領域と背景とを使い分けることが可能な態様にてウェブページを制作することができる。

【図面の簡単な説明】

【0021】

【図1】システム全体の構成を表すブロック図。

【図2】認証処理の手順を表すフローチャート。

【図3】制作依頼画面の一例。

【図4】ウェブページの意匠デザインを表す画像の一例。

【図5】制作依頼画面の一例。

【図6】制作依頼画面の一例。

【図7】制作依頼画面の一例。

【図8】制作依頼画面の一例。

【図9】制作依頼受付処理の手順を表すフローチャート。

【図10】デザイン情報及び設定情報が保存されるテーブルの一例。

【図11】閲覧要求受付処理の手順を表すフローチャート。

【図12】ウェブページの表示例。

【図13】コンテンツ幅の設定手順を表す説明図。

【図14】コンテンツ幅の設定に基づくウェブページの表示手順を表す説明図。

【発明を実施するための形態】

【0022】

以下、本開示の実施形態を図面に基づいて説明する。なお、本開示は下記の実施形態に限定されるものではなく様々な態様にて実施することが可能である。
［ネットワークシステムの構成の説明］
実施形態のウェブページ制作支援システム１を含むネットワークの構成について、図１を参照しながら説明する。

【0023】

ウェブページ制作支援システム１は、ウェブページの制作を支援するサービスを運営する運営者により管理されるコンピュータシステムであり、インターネット１００に接続されている。このウェブページ制作支援システム１は、ＷＷＷサーバ１１と、デザイン情報データベース１２と、設定情報データベース１３とを備える。

【0024】

ＷＷＷサーバ１１は、インターネット１００に接続されたウェブクライアントからの要求に応じて各種情報を提供するサーバコンピュータであり、図示しないＣＰＵ、ＲＡＭ、ＲＯＭ、補助記憶装置、入出力インタフェース等を中心に構成されている。このＷＷＷサーバ１１は、ウェブページの制作を依頼するウェブクライアント（例えば、クライアント端末２０）から、ウェブページの基となる情報を受領し、これらの情報から構築され得るウェブページをＷＷＷに公開する機能を有する。

【0025】

また、ＷＷＷサーバ１１は、公開したウェブページに対してウェブクライアント（例えば、クライアント端末３０）から閲覧要求を受付けた場合、当該ウェブページを構築するために必要な情報を、閲覧要求元のウェブクライアントに送信する機能を有する。これらの機能は、例えば、ＷＷＷサーバ１１に実装された周知のＰＨＰ：Hypertext Preprocessorスクリプトを実行することにより実現される。

【0026】

デザイン情報データベース１２は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページの意匠デザインに関する情報を含むデザイン情報を保存するためのデータベースである。設定情報データベース１３は、ウェブページの制作を依頼したウェブクライアントから受領したウェブページの基となる情報のうち、ウェブページに付与される機能の設定に関する情報を含む設定情報を保存するためのデータベースである。なお、ウェブページ制作支援システム１を構成するＷＷＷサーバ１１、デザイン情報データベース１２、及び設定情報データベース１３は、それぞれ別体の装置であってもよいし一体の装置として構成されていてもよい。

【0027】

また、インターネット１００には、ウェブサイトの閲覧を行うためのウェブブラウザを備えるクライアント端末２０，３０が接続されている。これらのクライアント端末２０，３０は、例えば、パーソナルコンピュータや、いわゆるスマートフォンやタブレットコンピュータ等の携帯端末により具現化される。なお、図１では、説明を簡潔にするためにクライアント端末２０，３０をそれぞれ一台ずつ図示しているが、多数のクライアント端末２０，３０がインターネット１００に接続されていてもよい。

【0028】

クライアント端末２０は、インターネット１００を介してウェブページ制作支援システム１に対してウェブページの制作を依頼するウェブクライアントとして機能するコンピュータである。クライアント端末３０は、インターネット１００を介してウェブページ制作支援システム１によりＷＷＷに公開されたウェブページを閲覧するウェブクライアントとして機能するコンピュータである。また、クライアント端末２０，３０は、例えば、JavaScript（登録商標）等の特定のスクリプト言語で構築されたクライアントサイド・アプリケーションを実行する機能を有する。

【0029】

［認証処理の説明］
ＷＷＷサーバ１１が実行する認証処理の手順について、図２のフローチャートを参照しながら説明する。この処理は、ウェブページの制作を依頼するクライアント端末２０で動作するウェブブラウザからの要求を受付けたときに実行される。

【0030】

Ｓ１００では、ＷＷＷサーバ１１は、依頼元のクライアント端末２０に係るユーザに対する認証を行う。具体的には、ＷＷＷサーバ１１は、ユーザを識別するための認証コードをクライアント端末２０から受信し、この受信した認証コードと、正当なユーザとして予め登録されている認証コードとが一致するか否かを判断することにより、ユーザの認証を行う。

【0031】

Ｓ１０２では、ＷＷＷサーバ１１は、Ｓ１００の結果、ユーザの認証を受理したか否かを判定する。ユーザの認証を受理しない場合（Ｓ１０２：ＮＯ）、ＷＷＷサーバ１１はＳ１００の処理に戻る。一方、ユーザの認証を受理した場合（Ｓ１０２：ＹＥＳ）、ＷＷＷサーバ１１はＳ１０４の処理に進む。

【0032】

Ｓ１０２で肯定判定をした場合に進むＳ１０４では、ＷＷＷサーバ１１は、依頼用アプリケーションのプログラムを、依頼元のクライアント端末２０のウェブブラウザに送信する。この依頼用アプリケーションは、クライアント端末２０のウェブブラウザ上で実行されるクライアントサイド・アプリケーションであり、例えばJavaScript等のスクリプト言語で構築されている。この依頼用アプリケーションは、制作すべきウェブページの基となる情報をユーザに入力させるためのＧＵＩで構成される制作依頼画面をウェブブラウザの表示画面に表示させ、そのＧＵＩに従って入力された情報をＷＷＷサーバ１１にアップロードする機能を有する。

【0033】

［情報入力処理の説明］
ウェブページの制作を依頼するクライアント端末２０のウェブブラウザによって行われる情報入力処理の手順について、図３〜図８を参照しながら説明する。この処理は、クライアント端末２０のウェブブラウザが、ＷＷＷサーバ１１から受信した依頼用アプリケーションのスクリプトを実行することにより実現する。

【0034】

クライアント端末２０のウェブブラウザによって情報入力処理が開始されると、初期画面として、図３に例示されるような制作依頼画面４０がウェブブラウザの表示画面上に表示される。図３に例示される制作依頼画面４０の初期画面では、制作すべきウェブページの意匠デザインを表す画像情報や、当該ウェブページの概要を表す基本情報等を入力するためのユーザインタフェースが表示されている。

【0035】

図３に例示されるとおり、制作依頼画面４０には画像表示領域４１が設けられている。この画像表示領域４１は、制作すべきウェブページの意匠デザインを表す画像を取得して表示するためのユーザインタフェースである。図３に例示される初期画面においては、画像表示領域４１には、意匠デザインを表す画像情報、すなわち画像ファイルを入力することを促すメッセージが記述されている。本実施形態では、ユーザがウェブブラウザ上で任意のファイルフォルダを開いて画像ファイルを選択するか、画像ファイルを示すアイコンを画像表示領域４１上にドラッグ・アンド・ドロップする操作を行うことで、画像ファイルを入力できるようになっている。

【0036】

なお、本実施形態では、ウェブページの意匠デザインを表す画像情報として、図４に例示されるような非アクティブ画像５０及びアクティブ画像５１の２種類の画像情報が入力されることを前提としている。これらの非アクティブ画像５０及びアクティブ画像５１は、文書やハイパーテキスト等の仕組みを含まない単純なビットマップ画像で構成されている。

【0037】

非アクティブ画像とは、ウェブページの意匠デザインを表す画像であって、当該ウェブページに設けられる少なくとも１つのクリッカブル領域に対応する画像領域が全て操作の対象となっていない、素の状態を表す画像である。一方、アクティブ画像とは、非アクティブ画像情報に対応する画像であって、クリッカブル領域に対応する画像領域が操作の対象となっている状態を表す画像である。なお、クリッカブル領域とは、ウェブブラウザの表示画面上で、マウスやタッチパッド等のポインティングデバイスによるポイント・アンド・クリックの操作（以下、単に「クリック」という）が入力されたときに、所定の処理を実行する特定の画像領域である。

【0038】

図４の事例では、素の状態を表す非アクティブ画像５０に対応するアクティブ画像５１として、クリッカブル領域に相当する画像領域５１ａ，５１ｂ，５１ｃ，５１ｄに対して網掛け等の強調表示が施されているものとする。なお、クリッカブル領域以外の画像領域については両者の画像は同一である。

【0039】

図３の説明に戻る。さらに、制作依頼画面４０には情報入力領域４２が設けられている。情報入力領域４２は、制作すべきウェブページに関する基本情報を入力するためのユーザインタフェースを有する。この情報入力領域４２には、符号４２ａ〜４２ｇ，４３で示される複数種類のテキストボックスやドロップダウンリスト、ボタン等のユーザインタフェースが設けられている。

【0040】

符号４２ａは、ウェブページのタイトルを表すテキスト情報を入力するためのテキストボックスである。符号４２ｂは、ウェブページによる情報提供の主体（すなわち、広告主）の名称を表す情報を入力するためのテキストボックスである。符号４２ｃは、ウェブページの簡単な要約文や説明文を表す情報を入力するためのテキストボックスである。符号４２ｄは、ウェブページの特徴を表す単語であって、インターネット上の情報を検索する周知の検索エンジンによる検索の対象となり得るキーワードを表す情報を入力するためのテキストボックスである。符号４２ｅは、ウェブページをＷＷＷに公開する期間を表す情報を入力するためのテキストボックスである。

【0041】

符号４２ｆは、ウェブページをＷＷＷに公開するか否かを指定する指示を、複数の選択肢の中から１つ選択するプルダウンメニューである。符号４２ｇは、ウェブページの表示形式を指定する指示を、複数の選択肢の中から１つ選択するプルダウンメニューである。例えば、ウェブページが、パソコンでの表示に専用されるものであるか、スマートフォンでの表示に専用されるものであるか、パソコン及びスマートフォンでの表示に共用されるものであるかを選択できるようになっている。符号４３は、画像情報及び基本情報の入力を完了し、制作依頼画面４０を次の画面に遷移させる指示を与えるボタンである。

【0042】

図３に例示される初期画面に従って、ユーザが制作依頼画面４０に画像情報及び基本情報を入力した後の状態を図５に例示する。図５に例示されるとおり、制作依頼画面４０の画像表示領域４１には、ユーザにより入力された画像が表示されている。ただし、画像表示領域４１には、図４に例示される非アクティブ画像５０及びアクティブ画像５１の２つの画像のうち、アクティブ画像５１の上に非アクティブ画像５０が重ねて描画されており、ユーザには非アクティブ画像５０だけが見える状態になっている。あるいは、非アクティブ画像５０を画像表示領域４１に表示し、その横にアクティブ画像５１を非表示状態で並べて配置してもよい。また、情報入力領域４２の各ボックス４２ａ〜４２ｇには、ユーザにより入力又は選択された各種情報が表示されている。

【0043】

図５に例示される状態からボタン４３がクリックされると、これまでに入力された各情報が確定し、制作依頼画面４０は図６〜図８に例示される次の入力受付状態に移行する。図６〜図８に例示される制作依頼画面４０では、ウェブページに付与される機能の設定に関する情報の入力を受け付ける。

【0044】

具体的には、画像表示領域４１に表示された画像上において、マウスやタッチパッド等のポインティングデバイスによりクリッカブル領域に設定すべき領域を指定できるようになっている。例えば、矩形の左上の頂点に相当する座標をクリックし、そのまま右下の座標までドラッグする操作により、矩形のクリッカブル領域の座標範囲を指定することができる。続いて、指定されたクリッカブル領域がクリックされたときに実行すべき処理の内容を設定できるようになっている。これらの操作を繰り返し行うことで、複数のクリッカブル領域の機能を設定することができるようになっている。

【0045】

図６は、画像表示領域４１に表示されている画像上において、符号５１ａのクリッカブル領域が指定された状況を表している。このとき、アクティブ画像５１の上に重ねて表示されている非アクティブ画像５０のうち、クリッカブル領域５１ａに該当する画像領域が、アクティブ画像５１における対応する画像領域に差し替えられて表示されている。あるいは、非アクティブ画像５０の横にアクティブ画像５１を非表示状態で並べて配置し、非アクティブ画像５０上でクリッカブル領域が指定されると、その部分だけ非アクティブ画像５１における対応する画像領域が一定分スライドした画像を表示する構成であってもよい。

【0046】

また、クリッカブル領域５１ａが指定されることにより、設定ウィンドウ４５ａがクリッカブル領域５１ａの近傍にポップアップ表示される。この設定ウィンドウ４５ａは、クリッカブル領域５１ａに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ４５ａの中には、テキストボックス４６ａが設けられている。このテキストボックス４６ａに実行すべき処理の内容を示す情報が入力され、設定ウィンドウ４５ａの内の適用ボタン４７ａがクリックされることにより、クリッカブル領域５１ａの範囲及び機能が確定するようになっている。

【0047】

図６の事例では、設定ウィンドウ４５ａ内のテキストボックス４６ａに、インターネット上のウェブサイトのリソースを指すＵＲＬが入力されている。ここに、ＵＲＬが入力されることで、クリッカブル領域５１ａの機能として、ハイパーリンク機能による移動先のウェブサイトが設定されるようになっている。また、図６に例示されるとおり、制作依頼画面４０の右側領域にはリンク情報表示領域４４が設けられている。このリンク情報表示領域４４には、クリッカブル領域５１ａの機能として設定されたリンク先のＵＲＬを表す情報４４ａが表示されている。

【0048】

つぎに、図７は、図６に例示される状況から更に別のクリッカブル領域５１ｂが設定された状況を表している。このとき、アクティブ画像５１の上に重ねて表示されている非アクティブ画像５０のうち、クリッカブル領域５１ｂに相当する画像領域が、アクティブ画像５１における対応する画像領域に差し替えられて表示されている。

【0049】

また、クリッカブル領域５１ｂが指定されることにより、設定ウィンドウ４５ｂがクリッカブル領域５１ｂの近傍にポップアップ表示される。この設定ウィンドウ４５ｂは、クリッカブル領域５１ｂに割り当てる機能を設定するためのユーザインタフェースである。設定ウィンドウ４５ｂの中に設けられているフォーム使用ボタン４８がクリックされると、テキストボックス４６ｂ内に「"フォーム使用"」という文字列が自動入力される。ここに、「"フォーム使用"」が入力されることで、クリッカブル領域５１ｂの機能として、入力フォームが起動する機能が設定されるようになっている。そして、設定ウィンドウ４５ｂの内の適用ボタン４７ｂがクリックされることにより、クリッカブル領域５１ｂの範囲及び機能が確定する。また、図７に例示されるとおり、リンク情報表示領域４４には、クリッカブル領域５１ｂの機能として設定された"フォーム使用"を表す情報４４ｂが表示されている。

【0050】

つぎに、図８は、図６及び図７の事例において説明した手順と同様に、更に別のクリッカブル領域５１ｃ，５１ｄが設定された状況を表している。図８の事例では、クリッカブル領域５１ｃの機能として、指定された電話番号を通話相手として電話かける電話アプリケーションを起動する機能が設定されている。また、クリッカブル領域５１ｄの機能として、指定された電子メールアドレスを宛先として電子メールクライアントを起動する機能が設定されている。

【0051】

また、図８に例示されるとおり、リンク情報表示領域４４には、クリッカブル領域５１ｃの機能として設定された、電話の通話先の電話番号を表す情報４４ｃが表示されている。また、リンク情報表示領域４４には、クリッカブル領域５１ｄの機能として設定された、電子メールの宛先を示す電子メールアドレスを表す情報４４ｄが表示されている。

【0052】

そして、ウェブページに付与すべき全ての機能について、クリッカブル領域の範囲及び機能をユーザが入力し終えた後、リンク情報表示領域４４内に設けられた公開ボタン４９がクリックされることにより、制作依頼画面４０を通じてユーザから入力された各情報が、ＷＷＷサーバ１１にアップロードされるようになっている。

【0053】

ここでは、ウェブページの意匠デザインを表す画像情報（すなわち、非アクティブ画像及びアクティブ画像のファイル）と、当該ウェブページの基本情報とが、デザイン情報としてＷＷＷサーバ１１にアップロードされる。また、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが、設定情報としてＷＷＷサーバ１１にアップロードされる。

【0054】

［制作依頼受付処理の説明］
ＷＷＷサーバ１１が実行する制作依頼受付処理の手順について、図９のフローチャートを参照しながら説明する。この処理は、図２に例示される認証処理に続いて実行される処理である。

【0055】

Ｓ２００では、ＷＷＷサーバ１１は、依頼元のクライアント端末２０のウェブブラウザによって実行された情報入力処理においてアップロードされたデザイン情報と設定情報とを受信する。ここで受信するデザイン情報には、ウェブページの意匠デザインを表す画像情報（すなわち、非アクティブ画像及びアクティブ画像のファイル）と、当該ウェブページの基本情報とが含まれる。また、設定情報には、ウェブページ上の各クリッカブル領域の座標範囲を表す座標情報と、各クリッカブル領域の機能を表す情報とが含まれる。

【0056】

Ｓ２０２では、ＷＷＷサーバ１１は、Ｓ２００で受信したデザイン情報と設定情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース１２及び設定情報データベース１３に保存する。具体的には、ＷＷＷサーバ１１は、ウェブページの基本情報の内容等を記述したテーブルである「ページ」テーブルを作成し、その「ページ」テーブルと、非アクティブ画像及びアクティブ画像のファイルとをデザイン情報データベース１２に保存する。また、ＷＷＷサーバ１１は、設定情報の内容を記述したテーブルである「リンク設定」テーブルを作成し、設定情報データベース１３に保存する。

【0057】

ここで、「ページ」テーブル及び「リンク設定」テーブルの具体的な内容について、図１０を参照しながら説明する。図１０に例示されるとおり、「ページ」テーブル６０には、「ＩＤ」、「タイトル」、「会社名・店名」、「タグ」、「説明」、「画像ファイル名」等の項目が設けられている。このうち、「ＩＤ」の項目には、ウェブページを識別するために付与される固有の識別情報が記述される。この「ＩＤ」の項目は、複数桁の数字列で表現される。

【0058】

「タイトル」の項目には、ウェブページのタイトルが記述される。この「タイトル」項目は、テキスト情報で表現される。「タイトル」項目に記述される内容は、図５に例示されるテキストボックス４２ａに入力された内容である。「会社名・店名」の項目には、ウェブページの広告主の名称が記述される。この「会社名・店名」の項目は、テキスト情報で表現される。「会社名・店名」の項目に記述される内容は、図５に例示されるテキストボックス４２ｂに入力された内容である。「説明」の項目には、ウェブページの要約や説明文が記述される。この「説明」の項目は、テキスト情報で表現される。「説明」の項目に記述される内容は、図５に例示されるテキストボックス４２ｃに入力された内容である。これらの「タイトル」、「会社名・店名」及び「説明」の各項目に記述された情報は、インターネット上で検索エンジンの機能を提供する周知の検索サイトによる検索結果において、閲覧者に対して提示され得る情報である。

【0059】

「タグ」の項目には、ウェブページの特徴を表す単語が記述される。この「タグ」の項目は、テキスト情報で表現される。「タグ」の項目に記述される内容は、図５に例示されるテキストボックス４２ｄに入力された内容である。この「タグ」の項目に記述された情報は、検索エンジンによる検索の対象となるキーワードとして用いられ得る情報である。

【0060】

「画像ファイル名」の項目には、ウェブページの表示に用いられる非アクティブ画像及びアクティブ画像のファイルのファイル名が記述される。この「タグ」の項目は、テキスト情報で表現される。

【0061】

この「画像ファイル名」の項目には、デザイン情報データベース１２に保存される非アクティブ画像及びアクティブ画像の各ファイルについて、共通のファイル名が記述される。例えば、共通のファイル名を「aaa.jpg」とする場合、非アクティブ画像のファイル名を「aaa.jpg」とし、アクティブ画像のファイル名を「aaa_activ.jpg」とする。このようにすることで、非アクティブ画像とアクティブ画像とを対応付けるとともに、両者を区別できるようになっている。

【0062】

つぎに、図１０に例示されるとおり、「リンク設定」テーブル６１には、「ＩＤ」、「ページＩＤ」、「リンク種類」、「値」、「座標」、「削除フラグ」等の項目が設けられている。なお、「リンク設定」テーブル６１は、ウェブページに設定された個々のクリッカブル領域ごとに作成される。つまり、１つのウェブページについて複数のクリッカブル領域が設定されている場合には、個々のクリッカブル領域ごと対応する複数の「リンク設定」テーブル６１が設定情報ＤＢ１３に保存される。

【0063】

この「リンク設定」テーブル６１について、「ＩＤ」の項目には、当該クリッカブル領域を識別するために付与される固有の識別情報が記述される。この「ＩＤ」の項目は、複数桁の数字列で表現される。

【0064】

「ページＩＤ」の項目には、当該「リンク設定」テーブル６１が適用されるウェブページの識別情報が記述される。具体的には、この「ページＩＤ」の項目に、「ページ」テーブル６０の「ＩＤ」の項目と同一の識別情報が記述されることで、その「ページ」テーブル６０と「リンク設定」テーブル６１とが対応付けされるようになっている。これにより、当該「リンク設定」テーブル６１で表されるクリッカブル領域の機能が、対応付けされた「ページ」テーブル６０に関するウェブページに適用される。

【0065】

「リンク種類」の項目には、ウェブページ上でクリッカブル領域がクリックされたときに実行すべき機能の種類を表す情報が記述される。この「リンク種類」の項目は、機能の種類ごとに予め割り当てられている識別番号の数字で表現される。具体的には、ハイパーリンク、入力フォーム起動、電話アプリケーション起動、電子メールクライアント起動等といった機能ごとに、１，２，３…等の識別番号が割り当てられている。そして、Ｓ２００で受信した設定情報に含まれるクリッカブル領域の機能を表す情報の内容に応じて、対応する機能の識別情報が「リンク種類」の項目に記述される。

【0066】

「値」の項目には、クリッカブル領域に対応するリンク先を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。「値」の項目に記述される内容は、クリッカブル領域に割り当てられた機能の接続先となるＵＲＬ、電話番号、電子メールアドレス等であり、図６，７等に例示されるテキストボックス４６に入力された内容である。

【0067】

「座標」の項目には、非アクティブ画像及びアクティブ画像上におけるクリッカブル領域の座標範囲を表す情報が記述される。この「値」の項目は、テキスト情報で表現される。例えば、クリッカブル領域が矩形として設定されている場合、その矩形の画像領域の左上の頂点の座標と、右下の頂点の座標とを表す座標値が記述される。

【0068】

「削除フラグ」の項目には、クリッカブル領域を無効にするか否かを指定する情報が記述される。この「値」の項目は、０又は１の数字で表現される。具体的には、この「削除フラグ」の項目に１の数字を記述することで、当該クリッカブル領域を無いものとしてウェブページを表示するように設定できる。

【0069】

図９のフローチャートの説明に戻る。Ｓ２０４では、ＷＷＷサーバ１１は、Ｓ２０２で保存したデザイン情報及び設定情報に基づいて生成され得るウェブページを、ＷＷＷでの公開対象として登録する処理を実行する。具体的には、ＷＷＷサーバ１１は、検索エンジンの機能を提供する周知の検索サイトにアクセスして、ＷＷＷサーバ１１に対して当該ウェブページを指し示す情報を含むＵＲＬを検索の対象として登録する。これにより、閲覧者は、検索サイトを通じて当該ウェブサイトを検索することが可能になる。

【0070】

また、ウェブページを検索サイトに登録する際、ＷＷＷサーバ１１は、当該ウェブページに関する「ページ」テーブル６０に記述されている「タイトル」、「会社名・店名」、「説明」、「タグ」等の各項目の内容を当該ウェブページのＵＲＬと共に登録してもよい。これにより、「タイトル」、「会社名・店名」、「説明」等の各項目の内容を検索エンジンによる検索結果の内容として閲覧者に対して提示することができる。また、「タグ」の各項目に記述された単語を、当該ウェブページを検索するためのキーワードに設定することができる。

【0071】

Ｓ２０６では、ＷＷＷサーバ１１は、ウェブページの公開が完了したことを表す情報を、依頼元のクライアント端末２０のウェブブラウザに送信する。Ｓ２０６の後、ＷＷＷサーバ１１は制作依頼受付処理を終了する。

【0072】

［閲覧要求受付処理の説明］
ＷＷＷサーバ１１が実行する閲覧要求受付処理の手順について、図１１のフローチャートを参照しながら説明する。この処理は、ウェブページの閲覧を要求するクライアント端末３０で動作するウェブブラウザからのアクセスを受付けたときに実行される。

【0073】

Ｓ３００では、ＷＷＷサーバ１１は、クライアント端末３０からの閲覧要求に該当するウェブページの基となるデザイン情報及び設定情報を、デザイン情報データベース１２及び設定情報データベース１３から読み込む。ここで読み込まれる情報には、当該ウェブページに対応付けられている各テーブル６０，６１の内容と、当該ウェブページに対応付けられている非アクティブ画像及びアクティブ画像のファイルとが含まれる。

【0074】

Ｓ３０２では、ＷＷＷサーバ１１は、Ｓ３００で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだＨＴＭＬ文書を作成する。このウェブページ生成用のスクリプトは、例えばJavaScript等のスクリプト言語の仕組みを用いてＷＷＷサーバ１１により作成される。

【0075】

具体的には、ＷＷＷサーバ１１は、次のような仕組みを有するウェブページを自動生成するスクリプトを組み込んだＨＴＭＬ文書を作成する。そのウェブページは、非アクティブ画像をウェブブラウザの表示画面に前面に表示させるように構成される。その表示された非アクティブ画像のクリッカブル領域に対して、ポインティングデバイスによる所定の操作が入力された場合、次のように振る舞うように構成される。すなわち、非アクティブ画像の当該クリッカブル領域に該当する画像領域を、アクティブ画像における当該クリッカブル領域に該当する画像領域に差し替えてウェブブラウザの表示画面に前面に表示させる。

【0076】

なお、クリッカブル領域の座標範囲については、「リンク設定」テーブル６１の「座標」の項目で表される内容のとおりにウェブページが生成されるように、ＷＷＷサーバ１１がスクリプトを組む。また、ここでいう所定の操作とは、例えば、クリッカブル領域内にマウスのポインタを置く、いわゆるマウスオーバーの操作が例示される。一方、クリッカブル領域に対する所定の操作が解除された場合、非アクティブ画像の表示に戻すように構成されている。

【0077】

さらに、このウェブページは、クリッカブル領域に対してクリック等の実行操作が入力された場合、当該クリッカブル領域に割り当てられた機能をウェブブラウザに実行させるように構成される。なお、クリッカブル領域に実行操作がなされたときに実行される機能については、当該クリッカブル領域の「リンク設定」テーブル６１の「リンク種類」の項目で表される内容のとおりにウェブページが生成されるように、ＷＷＷサーバ１１がスクリプトを組む。また、クリッカブル領域に実行操作がなされたときに起動するアプリケーションに渡されるパラメータは、当該クリッカブル領域の「リンク設定」テーブル６１の「値」の項目で表される内容のとおりにウェブページが生成されるように、ＷＷＷサーバ１１がスクリプトを組む。

【0078】

Ｓ３０４では、ＷＷＷサーバ１１は、Ｓ３０２で作成したＨＴＭＬ文書と、ウェブページを構成する画像ファイル（すなわち、非アクティブ画像及びアクティブ画像）とを含む閲覧用データを、閲覧要求元のクライアント端末３０に送信する。Ｓ３０４の後、ＷＷＷサーバ１１は閲覧要求受付処理を終了する。

【0079】

［ウェブページの表示例］
ＷＷＷサーバ１１から閲覧用データを受信したクライアント端末３０では、ウェブブラウザによりウェブページ生成用のスクリプトが実行されることで、ウェブページが自動的に生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。そのウェブページの表示例について、図１２を参照しながら説明する。

【0080】

図１２の事例では、図３〜図８の事例において設定された内容に対応するウェブページが、クライアント端末３０のウェブブラウザの表示画面に表示されている状況を想定している。図１２の（１）の段階では、非アクティブ画像だけの状態のウェブページ７０が表示されている。また、ウェブブラウザの表示画面上には、マウス等のポインティングデバイスで操作されるポインタ７１も表示されている。

【0081】

つぎに、図１２の（２）段階では、ポインタ７１がウェブページ７０の左上部に設定されているクリッカブル領域７２内に置かれ、マウスオーバーの状態になっている状況を想定している。このとき、クリッカブル領域７２には網掛けによる強調表示が施され、このクリッカブル領域が操作の対象になっていることが閲覧者に対して明示される。この強調表示は、非アクティブ画像のクリッカブル領域７２に該当する画像領域が、アクティブ画像のクリッカブル領域７２に該当する画像領域に置き換えられて表示されることにより実現する。

【0082】

クリッカブル領域７２には、ハイパーリンク機能による移動先のウェブサイトが設定されていること前提とする。したがって、図１２の（２）の段階から、ポインタ７１によりクリッカブル領域７２がクリックされた場合、図１２の（３）に例示されるとおり、ウェブブラウザは、設定されているリンク先のウェブサイトにアクセスし、そのウェブサイトのコンテンツを表示画面に表示する。

【0083】

なお、図示は省略するが、入力フォームの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは所定の入力フォームを起動して表示する。また、電話アプリケーションの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは、設定された電話番号を通話先として電話アプリケーションを起動する。また、電子メールクライアントの起動が設定されたクリッカブル領域がクリックされた場合には、ウェブブラウザは、設定された電子メールアドレスを宛先として電子メールクライアントを起動する。

【0084】

［効果］
実施形態のウェブページ制作支援システム１によれば、以下の効果を奏する。
ウェブページの制作を依頼するクライアント端末２０のウェブブラウザから、デザイン情報と設定情報とをＷＷＷサーバ１１にアップロードするだけで、クリッカブルな機能を有するウェブページをＷＷＷに公開することができる。したがって、ページ制作者がコーディング作業等に必要な専門的な知識を持っていなくても、ページ制作者の意図に沿った独自性のあるウェブページの制作を支援することができる。

【0085】

また、ウェブページが自動的にＷＷＷに公開されることで、閲覧者が容易に検索をすることができるようになるので、ウェブページが閲覧される機会を増すことができる。また、ページ制作者の意図に沿って、例えば、ハイパーリンク、入力フォーム、電話アプリケーション、及び電子メールクライアント等の様々な機能を有するウェブページの制作を支援することができる。

【0086】

［特許請求の範囲に記載の構成との対応］
実施形態の各構成と、特許請求の範囲に記載の構成との対応は次のとおりである。
ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ１０４及びＳ２００の処理が、受領部としての処理に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ２０２の処理が、保存部としての処理に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ２０４の処理が、公開処理部としての処理に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ３０２の処理が、プログラム作成部としての処理に相当する。ＷＷＷサーバ１１のＰＨＰスクリプトにより実行されるＳ３０４の処理が、送信部としての処理に相当する。

【0087】

［変形例］
上記各実施形態における１つの構成要素が有する機能を複数の構成要素に分担させたり、複数の構成要素が有する機能を１つの構成要素に発揮させたりしてもよい。また、上記各実施形態の構成の一部を省略してもよい。また、上記各実施形態の構成の少なくとも一部を、他の上記実施形態の構成に対して付加、置換等してもよい。なお、特許請求の範囲に記載の文言から特定される技術思想に含まれるあらゆる態様が、本開示の実施形態である。

【0088】

例えば、上述の実施形態では、非アクティブ画像とアクティブ画像との２種類の画像をアップロードしてウェブページを制作する事例について説明した。これに限らず、更にウェブページの背景として表示される画像がアップロードされることにより、ウェブページの表示に適用可能な構成であってもよい。その場合、ウェブブラウザには、背景画像の前面側に重ねて非アクティブ画像が表示されるように構成することが考えられる。

【0089】

あるいは、アクティブ画像のアップロードを省略し、非アクティブ画像に相当する画像のアップロードのみでウェブページを制作可能な構成であってもよい。その場合、非アクティブ画像に相当する画像に設定されたクリッカブル領域にマウスオーバー操作が行われたときに、ウェブブラウザにクリッカブル領域として認識されるように構成することが考えられる。例えば、クリッカブル領域にマウスオーバー操作が行われたときに、そのクリッカブル領域を認識したウェブブラウザ側の機能によりマウスのポインタの表示態様が変化することで、画像の変化を伴わずとも閲覧者がクリッカブル領域を認識することができる。あるいは、非アクティブ画像に相当する画像に設定されたクリッカブル領域にマウスオーバー操作が行われたときに、そのクリッカブル領域に相当する画像領域に対して予め定められた画像処理（例えば、白濁や反転表示）を施して表示するように構成することが考えられる。

【0090】

上述の実施形態では、ウェブページの制作を依頼するウェブクライアントに制作依頼画面を表示させるクライアントサイド・アプリケーションを提供することによって、ウェブサーバの基となるデザイン情報や設定情報を入力させる構成について説明した。これに限らず、ＷＷＷサーバ１１側で動作するサーバサイド・アプリケーションに作成される制作依頼画面をウェブクライアントに提供し、その制作依頼画面に沿ってウェブクライアントにデザイン情報や設定情報を入力させる構成であってもよい。

【0091】

上述の実施形態の構成に加え、更に、アップロードされる画像情報に対してコンテンツ幅を設定可能にし、設定されたコンテンツ幅を反映した態様にてウェブページが表示されるように構成してもよい。その具体的な手順について、図１３及び図１４を参照しながら説明する。なお、以下の図１３及び図１４の説明において、特に言及しない構成については、上述の実施形態の構成に準ずるものとする。

【0092】

ここでいうコンテンツ幅とは、制作側のクライアント端末２０からアップロードされる画像情報の全横幅のうち、ウェブページを閲覧するウェブブラウザの表示幅に関わらず、表示を必須とする横幅方向の範囲である。以下、コンテンツ幅を定義する情報をコンテンツ幅情報という。コンテンツ幅情報は、例えば、画像の横幅方向の画素数の範囲等で表現される。

【0093】

まず、ウェブページの制作を依頼するクライアント端末２０のウェブブラウザによって行われる情報入力処理において、画像情報の入力後、ウェブブラウザの表示画面上に表示されている制作依頼画面４０が、図１３の（１）に例示されるような内容に遷移する。図１３の（１）の制作依頼画面４０に移行するタイミングとしては、例えば、図３に例示される制作依頼画面４０において画像ファイルや基本情報が入力された直後とすることが挙げられる。

【0094】

図１３の（１）に例示される制作依頼画面４０には、先の段階で入力された画像情報を表示するための領域や、コンテンツ幅を設定するためのＧＵＩが設けられている。図１３の（１）に例示されるとおり、制作依頼画面４０に設けられている画像表示領域４１には、入力された画像情報全体を表す画像５２が表示されている。

【0095】

また、制作依頼画面４０には、スライダ８１が設けられている。このスライダ８１は、画像表示領域４１に表示されている画像５２に対してコンテンツ幅を指定するためのＧＵＩであり、ポインティングデバイスによりつまみを左右に移動させることで、画像５２上でコンテンツ幅の伸縮を操作できるようになっている。また、画像５２上には、スライダ８１のつまみの位置に連動して左右に動いてコンテンツ幅を表示する表示線８２が表示されている。

【0096】

また、制作依頼画面４０には、設定ボタン８３が設けられている。設定ボタン８３がクリックされると、スライダ８１で指定されているコンテンツ幅が確定し、制作依頼画面４０は次の項目の入力受付状態へと移行する。その後、クライアント端末２０のウェブブラウザによって行われる情報入力処理が完了すると、制作依頼画面４０を通じてユーザから入力された各情報（すなわち、デザイン情報、設定情報、及びコンテンツ幅情報を含む）が、ＷＷＷサーバ１１にアップロードされる。

【0097】

一方、ＷＷＷサーバ１１は、制作依頼受付処理（図９参照）のＳ２００において、依頼元のクライアント端末２０からアップロードされたデザイン情報と、設定情報と、コンテンツ幅情報とを受信する。そして、Ｓ２０２において、ＷＷＷサーバ１１は、Ｓ２００で受信したデザイン情報と設定情報とコンテンツ幅情報とを、ウェブページを識別するための識別情報に対応付けて、デザイン情報データベース１２及び設定情報データベース１３に保存する。

【0098】

このうち、コンテンツ幅情報については、例えば、図１３の（２）に例示されるとおり、デザイン情報データベース１２に保存される「ページ」テーブル６０に「コンテンツ幅」の項目を設けて記録することが考えられる。「ページ」テーブル６０における「コンテンツ幅」の項目は、画像の幅方向の画素数の範囲を表す情報が記述される。この「コンテンツ幅」の項目は、テキスト情報で表現される。

【0099】

つぎに、ＷＷＷサーバ１１が、コンテンツ幅に関する情報を含む閲覧用データをウェブクライアントに送信し、ウェブクライアントにおいてコンテンツ幅が制御された態様にてウェブページが表示される一連の手順について、図１４を参照しながら説明する。

【0100】

ＷＷＷサーバ１１は、制作依頼受付処理（図１１参照）のＳ３００において、閲覧要求に該当するウェブページの基となるデザイン情報、設定情報、及びコンテンツ幅情報を、デザイン情報データベース１２及び設定情報データベース１３から読み込む。次のＳ３０２では、ＷＷＷサーバ１１は、Ｓ３００で読み込んだ各情報に基づいて、ウェブクライアント側でウェブページを自動生成して表示するように構成されたスクリプトを組み込んだＨＴＭＬ文書を作成する。さらに、ＷＷＷサーバ１１は、図１４の（１）に例示されるとおり、コンテンツ幅を定義するＣＳＳファイルを生成する。ここでいうＣＳＳとは、Cascading Style Sheetsの略語であり、ウェブページのスタイルを指定するための周知のプログラミング言語である。

【0101】

ここで生成されるＣＳＳファイルには、次のようにウェブページのレイアウトを定義する情報が含まれる。すなわち、ウェブブラウザ上に画像情報を表示する際、コンテンツ幅情報で定義されたコンテンツ幅に該当する領域の横幅全体をウェブブラウザの横幅方向の表示対象に含む。かつ、当該画像情報のうちコンテンツ幅以外の横幅方向の領域であってウェブブラウザの表示領域の横幅（すなわち表示幅）を超える部分については、ウェブブラウザの横幅方向の表示対象から除外して非表示とする。

【0102】

そして、ＷＷＷサーバ１１は、図１４の（２）に例示されるように、コンテンツ幅を定義するＣＳＳファイルと、ＨＴＭＬ文書と、画像ファイルとを含む閲覧用データを、閲覧要求元のクライアント端末３０に送信する。

【0103】

一方、ＷＷＷサーバ１１から閲覧用データを受信したクライアント端末３０では、ウェブブラウザによりウェブページが生成され、生成されたウェブページがウェブブラウザの表示画面上に表示される。図１４の（３）に例示されるように、クライアント端末３０のウェブブラウザは、コンテンツ幅を定義するＣＳＳファイルに基づいて、ウェブページの表示幅を制御する。図１４の（３）の表示例において、符号９０はウェブブラウザにおける画像の表示範囲を表している。

【0104】

図１４の（３）に例示されるとおり、ウェブブラウザの表示範囲９０には、画像ファイルで表される画像情報のうち、ＣＳＳファイルにおいて定義されているコンテンツ幅全体が少なくとも含まれる。その際、コンテンツ幅に該当する画像領域は、ウェブブラウザの表示範囲９０の横幅方向の中央に配置される。また、当該画像情報のうち、コンテンツ幅以外の左右両外側の背景部分については、ウェブブラウザの表示幅に相当する範囲までが表示対象に含まれ、ウェブブラウザの表示幅を超える背景部分は、トリミングされて非表示となっている。

【0105】

このように、ＣＳＳファイルにより定義されるコンテンツ幅に基づいてウェブページの表示幅を制御することで、ウェブページにおける主要な情報をもれなく表示させつつ、ウェブページの横幅をウェブブラウザの表示幅に一致させることができる。

【0106】

なお、ＣＳＳファイルにおいて定義されているコンテンツ幅が、ウェブブラウザの表示幅より大きい場合、ウェブブラウザに実装されているスクロールバー等のＧＵＩにより表示領域を移動可能にすることが考えられる。具体的には、コンテンツ幅全体のうち、ウェブブラウザの表示幅に収まる部分領域だけを表示し、スクロールバーにより必要に応じて表示領域を横幅方向に移動させることにより、少なくともコンテンツ幅全体に相当する領域を閲覧可能にする。

【0107】

上述したウェブページ制作支援システム１を構成要件とするシステム、ウェブページ制作支援システム１としてコンピュータを機能させるためのプログラム、このプログラムを記録した半導体メモリ等の非遷移的実態的記録媒体、ウェブページ制作支援方法等の種々の形態で本開示を実現することもできる。

【符号の説明】

【0108】

１…ウェブページ制作支援システム、１１…ＷＷＷサーバ、１２…デザイン情報データベース、１３…設定情報データベース、２０…クライアント端末（制作側）、３０…クライアント端末（閲覧側）、１００…インターネット。

【要約】

【課題】ページ制作者の意図に沿った独自性のあるウェブページの制作を支援する。
【解決手段】ＷＷＷサーバ１１は、ウェブページの意匠デザインを表すデザイン情報と、ウェブページの機能に関する設定情報とをクライアント端末２０から受領し、受領したデザイン情報と設定情報とをデータベース１２，１３に保存する。ＷＷＷサーバ１１は、保存されたデザイン情報及び設定情報に基づいて生成され得るウェブページを閲覧側のウェブクライアントにおいて自動的に生成して表示するための生成プログラムを作成する。ＷＷＷサーバ１１は、閲覧要求に該当のウェブページに対応するデザイン情報と、当該ウェブページを生成するための生成プログラムとを含む閲覧用データを、閲覧要求元のクライアント端末３０へ送信する。
【選択図】 図１

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】