(57)【要約】      （修正有）【課題】Ｗｅｂマーケティングの効果とコンバージョン率を高める表示要素が飛び出す動画埋め込み型ウェブページを作成する方法及びその装置を提供する。【解決手段】動画スペース要素表示後移動アニメーション実行手段１１９によるアニメーションが、CSSスクリーンサイズ条件分岐選択部１０９及びJavaScript（登録商標）スクリーンサイズ条件分岐選択部１１０により「マルチデバイス対応」となる。【選択図】図１
2016178382.tif 000002
【特許請求の範囲】
【請求項１】
ＨＴＭＬ情報、CSS情報、およびJavaScript情報をアップロードしたウェブサーバー装置があって、前記ウェブサーバー装置は、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、又、前記ウェブサーバー装置により出力されてユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、さらに、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーションの全部もしくは一部を備え、さらにまた、前記動画再生プレーヤーで動画の再生が開始されると、この再生開始を起点として時間の進行が始まる基準タイマーを外部から呼び込むか、もしくは備え、以上の内容を備える前記ウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように設定された動画スペース要素表示後移動アニメーション実行手段により、前記動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動することを特徴とする動画埋め込み型ウェブページの作成方法。
【請求項２】
前記ウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように設定された動画スペース要素表示後移動アニメーション実行手段により、前記動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと拡大しながら移動することを特徴とする動画埋め込み型ウェブページの作成方法。
【請求項３】
請求項１に記載のウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように設定された動画スペース要素移動後消滅アニメーション実行手段により、請求項１に記載の動画再生プレーヤーが表示される枠の外側となるウェブページ上の位置に表示された要素が、前記動画再生プレーヤーが表示される枠の外側となるウェブページ上の位置から前記動画再生プレーヤーが表示される枠の内側となる位置へと移動し、その後、前記動画再生プレーヤーが表示される枠の内側で消滅することを特徴とする動画埋め込み型ウェブページの作成方法。
【請求項４】
請求項１に記載の動画再生プレーヤーで再生される動画の再生が一時停止されると前記基準タイマーの時間進行も一時停止することに加えて、請求項１に記載の動画再生プレーヤーで再生される動画の再生が一時停止されて前記動画再生プレーヤーの状態が変化すると、前述した動画再生プレーヤー状態別アニメーション起動発令部により、請求項１に記載された、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーションの全部もしくは一部の進行が一時停止するウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生が一時停止している状態のものを再開すると前記基準タイマーの時間進行も再開することに加えて、一時停止しているアニメーションの進行が再開することを特徴とする請求項１から３のいずれかに記載の動画埋め込み型ウェブページの作成方法。
【請求項５】
請求項１に記載のウェブサーバー装置において、請求項１に記載された動画再生プレーヤーの設定で動画の自動再生が行われないように設定した場合、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると、請求項１に記載された基準タイマーの時間の進行が始動し、また、前記動画再生プレーヤーの状態が停止の状態から初回再生の状態に変化するとともに、前記変化を起点として請求項１に記載の動画再生プレーヤー状態別アニメーション起動発令部により、請求項１に記載の、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーションの全部もしくは一部の進行が始動することを特徴とする請求項１から４のいずれかに記載の動画埋め込み型ウェブページの作成方法。
【請求項６】
請求項１に記載のウェブサーバー装置において、請求項１に記載された動画再生プレーヤーの設定で自動再生が行われないように設定した場合、請求項１に記載された基準タイマーの始動、ならびに動画スペース要素表示後移動アニメーション実行手段によるアニメーションの始動、動画スペース要素移動後消滅アニメーション実行手段によるアニメーションの始動、これら二つの前記手段で表示されるもの以外のアニメーションの始動、カウントダウンタイマーのカウントダウンアニメーションの始動の全部もしくは一部については、請求項１に記載のウェブページが所定の値だけスクロールされたことを起点として実行されることを特徴する請求項１から４のいずれかに記載の動画埋め込み型ウェブページの作成方法。
【請求項７】
アップロードしたＨＴＭＬ情報、CSS情報およびJavaScript情報を備え、また、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、また、ユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、また、前記動画再生プレーヤーで動画の再生が開始されると、これを起点として時間の進行が始まる基準タイマーを備え、また、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについて、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備え、以上を備えたうえで、前述した動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するもので、以上のとおり、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備えることを特徴とするウェブサーバー装置。
【請求項８】
アップロードしたＨＴＭＬ情報、CSS情報およびJavaScript情報を備え、また、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、また、ユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、また、前記動画再生プレーヤーで動画の再生が開始されると、これを起点として時間の進行が始まる基準タイマーを備え、また、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについて、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備え、以上を備えたうえで、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するもので、また、動画スペース要素表示後移動アニメーション実行手段によるアニメーションの進行については、前記動画再生プレーヤーの一時停止ボタンがクリックないしタップされると、一時停止の状態となり、その後、前記動画再生プレーヤーで再生される動画の再生が再開させると前記アニメーションの進行も再開するもので、以上のとおり、前記アニメーションおよび前記進行についてコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備えることを特徴とするウェブサーバー装置。
【請求項９】
アップロードしたＨＴＭＬ情報、CSS情報およびJavaScript情報を備え、また、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、また、ユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、また、前記動画再生プレーヤーで動画の再生が開始すると、これを起点として時間の進行が始まる基準タイマーを備え、また、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについて、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備え、以上を備えたうえで、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するもので、また、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると始動するもので、以上のとおり、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備えることを特徴とするウェブサーバー装置。
【請求項１０】
請求項１から９に記載のウェブサーバー装置については、デバイスのスクリーンサイズに対応してCSSを切り替えるメディアクエリを含んだCSSスクリーンサイズ条件分岐選択部と、前記メディアクエリを使用することによってレイアウトの幅が変わったウェブページにアニメーションを行う表示要素の位置を対応させるために、デバイスのスクリーンサイズに対応させるための条件式を含んだJavaScriptスクリーンサイズ条件分岐選択部を備えて、様々なサイズのユーザー端末に対して予め指定した動画埋め込み型ウェブページを表示させるように、該当するデータを前記デバイスに返すための、また、コンピュータに実行させるための、プログラムとして記録した記録媒体を備えていることを特徴とするウェブサーバー装置。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、たとえば、ウェブページないしマルチデバイス対応のウェブページにおいて、これらのウェブページに埋め込まれた動画の再生ボタンがクリックないしタップされることを起点として、もしくは前記動画の自動再生による再生を起点として、前記動画プレーヤーの枠内に表示されたサッカーボールなどの商品や、メッセージボード、サービス内容を記載したテキスト、またはアバターやナレーターが、動画再生プレーヤーの再生時間に対応しながら、前記動画プレーヤーの枠外へ飛び出して訴求力のあるコール・トゥ・アクションを視聴者に行うことで、Ｗｅｂマーケティングの効果とコンバージョン率を高めるウェブページの作成方法ならびにその装置に関するものである。
【背景技術】
【０００２】
当初、ウェブページは概ねテキストや画像を使用することで作成されてきた。近年では、ウェブページにテキストや画像とともに、いわゆる動画を埋め込んだものも頻繁に目にするようになってきた。ウェブページに埋め込まれた動画には、テキストや画像と比べ、視聴者に対し短時間で極めて多くの情報を訴求することができるという大きな利点がある。そのため、近年では、企業のサイトにとどまらず個人のサイトであってもウェブページにテキストや画像に加えて動画を埋め込むものが極めて多くなってきた。
【０００３】
このようななか、企業のサイトでは、ウェブページに動画を埋め込むものとして、アバターのアニメーションを利用して双方向的なコミュニケーションを可能にしたものまで現れてきた（非特許文献１参照。）。
【０００４】
前記企業のサイトで利用されている従来技術（非特許文献１）は、そのウェブページの右上に記載のとおり、「番組画像作成方法およびその装置」（特許文献１）である。
【先行技術文献】
【特許文献】
【０００５】
【特許文献１】特許第５１４６９７４号
【非特許文献】
【０００６】
【非特許文献１】株式会社４COLORS “動画作成における課題”、［online］、作成日ないしアップロード日不明、PIP-Maker、［平成２６年７月１９日検索］、インターネット  http://www.pip-maker.com/
【発明の概要】
【発明が解決しようとする課題】
【０００７】
ところで、前述した従来技術（特許文献１ないし非特許文献１）は、双方向的なコミュニケーションを可能にして、次の段落で示す特許文献１の図３のとおり、動画再生プレーヤー内部において番組画像を提供するものである。
【０００８】
2016178382.tif 000003
【０００９】
前述した従来技術で作成される番組画像を使った動画再生プレーヤー内部の画面構成には大きな特徴がある。それは上の特許文献１の図３のとおり、視聴者に伝えたいことを掲載したメッセージボードとこれを説明するアバターが表示されることである。
【００１０】
そして、この特徴が次の結果を生み出す。それはアバターを表示することで、本来伝えたい内容を記載したメッセージボードが縮小されてしまう問題である。
【００１１】
一方、近年では、デスクトップ型のパソコンやノート型のパソコンと比べ、画面サイズが小さいタブレット型の端末やスマートフォンで、ウェブページを閲覧する人の割合が高くなっている。インターネット上の行動の約７割がスマートフォンを起点とするものである、と報じられるように、スマートフォンでウェブページを閲覧する割合が大変高くなっている。
【００１２】
前述した従来技術では、マルチデバイスへの対応が示されていない。前述した従来技術を使ったウェブページをそのまま仮に「マルチデバイス対応」にした場合、次のような問題が生じる。それは、上で示した特許文献１の図３のとおり、最も訴求すべきメッセージボードや商品・サービスが、ナレーターやアバターを登場させるために、縮小されてしまうという問題が生じることである。この問題に加えて、小型のタブレット端末やスマートフォンの画面サイズは、デスクトップ型のパソコンのものと比べて小さいため、前述した従来技術を採用して作成したウェブページをマルチデバイスに対応のウェブページにして、このウェブページを小型のタブレット端末やスマートフォンで閲覧すると、前記メッセージボードや商品・サービスの映像がさらに縮小されてしまうという問題が生じてしまうのである。
【００１３】
このように前述した従来の技術には、二つの問題が存在していたのであった。これらの問題は、視聴者に対し本来最も訴求すべき表示要素（メッセージボードや商品・サービスなどの画像）が縮小されて、訴求力が弱くなってしまう問題でもあった。
【００１４】
そして、これらの問題は、前述のとおり視聴者に対し短時間で極めて多くの情報を訴求することができる動画を採用する一方で、視聴者に対し訴求したい要素をウェブページに埋め込まれた画再生プレーヤーの内部だけで表示しようとするところから生じるものであった。
【００１５】
そこで、ウェブページに埋め込まれた画再生プレーヤーの内部だけで映し出されるという制限をもつ前記の表示要素（メッセージボードや商品・サービスなど）について、前記制限を取り除き、前記問題を解決することが求められている。
【００１６】
本発明は、このような従来の問題点に鑑みてなされたものである。従来技術では動画再生プレーヤーの内部だけで映し出されるという制限をもつ表示要素について、まずこの表示要素が動画によって映し出される内容の一部であるという発想をやめる一方で、この表示要素が動画によって映し出された内容の一部であると視聴者に感じ取らせるために、前記動画がオートプレイ機能で再生されるか否かを問わず、この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。その後、前記制限を取り除き、前記問題を解決するために、この表示要素が前記動画再生プレーヤーの枠内から同枠外へ飛び出す。また、この表示要素が前記動画の内容に応じて前記動画再生プレーヤーの枠外から同枠内へ戻り、前記動画の内容に参加する。本発明は、このような「マルチデバイス対応」の動画埋め込み型ウェブページを提供することを課題とする。
【課題を解決するための手段】
【００１７】
本発明の請求項１に記載された動画埋め込み型ウェブページの作成方法は、ＨＴＭＬ情報、CSS情報、およびJavaScript（JavaScriptは、Sun Microsystems,Incの米国およびその他の国における商標または登録商標。以下省略）情報をアップロードしたウェブサーバー装置があって、前記ウェブサーバー装置は、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、又、前記ウェブサーバー装置により出力されてユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、さらに、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーションの全部もしくは一部を備え、さらにまた、前記動画再生プレーヤーで動画の再生が開始されると、この再生開始を起点として時間の進行が始まる基準タイマーを外部から呼び込むか、もしくは備え、以上の内容を備える前記ウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように設定された動画スペース要素表示後移動アニメーション実行手段により、前記動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動することを特徴としている。
【００１８】
このような構成とすることにより、次のようになる。たとえば、従来の技術では動画再生プレーヤーの内部だけで映し出されるという制限をもつ表示要素について、まずこの表示要素が動画によって映し出された内容の一部であると視聴者に感じ取らせるために、この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。その後、前記制限を取り除き、前記問題を解決するために、この表示要素が前記動画再生プレーヤーの枠内から同枠外へ飛び出す。本発明では、このような動画埋め込み型ウェブページが作成される。
【００１９】
こうすることで、たとえば、表示要素が前記動画再生プレーヤーの枠内から同枠外に飛び出すようになり、視聴者の関心を前記表示要素に引き付けることができる。また、こうすることで、前記表示要素に書かれた内容に強い訴求効果をもたせることができる。さらに、こうすることで、前記表示要素が、前記動画再生プレーヤーの枠内から同枠外へ飛び出すために、前記動画再生プレーヤーの枠内からなくなり、その結果、同枠内に残っているその他の表示要素や前記番組画像を、同枠内でそれまでより拡大して表示することができる。
【００２０】
ここで本発明の請求項１に記載されたウェブサーバー装置について、これを構成する技術的な内容として、まずは、時間と対応させたアニメーションのタイミングの取り方について説明し、その作用および効果についても説明する。次に、本発明の請求項１に記載された各アニメーションについて説明し、その作用および効果についても説明する。最後に、請求項１に記載されたウェブサーバー装置について、その他の技術的な細部とその作用・効果を説明し、ついで全体の構成を説明する。なお、その後、請求項１の説明をもとに請求項２から請求項１０までについて説明する。
【００２１】
請求項１に記載された動画再生プレーヤー状態別アニメーション起動発令部とは、その名の通り動画再生プレーヤーの状態が、たとえば、初回再生前（デフォルト）の状態、再生中の状態（ウェブページを開いた時に自動再生による再生中の状態を含む状態）、再生終了の状態、一時停止の状態、再生再開の状態、バッファ中の状態のいずれかに変化した時に、本発明の請求項１に記載された各アニメーションを構成するJavaScriptやjQueryに対し起動するように命令を出す箇所である。
【００２２】
この動画再生プレーヤー状態別アニメーション起動発令部があることによって、請求項１に記載された各アニメーションは、前記動画再生プレーヤーで再生される動画の再生開始、再生停止、一時停止、再生再開とタイミングを合わせることが可能となり、その結果、前記動画の内容と連動性をもたせることが可能となる。
【００２３】
また、請求項１に記載された各アニメーションがこの動画再生プレーヤー状態別アニメーション起動発令部で集中して起動のタイミングを取ることによって、前述した各アニメーション同士の連動性も可能となる。
【００２４】
一方、請求項１に記載された基準タイマーとは、動画埋め込み型ウェブページに表示される動画再生プレーヤーにおいて、前記動画再生プレーヤーで再生される動画の再生経過の時間を把握して、前記時間に関する情報を表示するタイマーである。そして、たとえば、前記動画再生プレーヤーの再生開始、再生停止、一時停止、再生再開の各操作スイッチを操作することによって、前記基準タイマーの開始、停止、一時停止、再開が行われ、その結果、前記基準タイマーの時間の進行がコントロールされる。
【００２５】
また、前記基準タイマーは、前記動画再生プレーヤーで再生される動画の再生の経過時間をカウントアップするものもあれば、前記動画についての全体での再生時間を最初に示し、カウントダウンするものもある。この場合のカウントダウンする基準タイマーと請求項１に記載されたカウントダウンタイマーは全く別のものである。
【００２６】
前記基準タイマーによって表示される時間の一例として、図８の符号３０３の時間スライダによる経過時間や動画再生プレーヤーの下部にある動画の再生経過の時間を示しているものが挙げられる。
【００２７】
請求項１に記載された基準タイマーを請求項１に記載されたウェブサーバー装置に備えるために、たとえば、前記基準タイマーを作り上げる情報を請求項１に記載された情報として前記ウェブサーバー装置にアップロードする場合もあれる。また、たとえば、請求項１に記載された基準タイマーに関する情報を請求項１に記載されたウェブサーバー装置に呼び込むために、呼び込みのコードを請求項１に記載された情報として請求項１に記載されたウェブサーバー装置にアップロードする場合もある。後者の場合、たとえば、請求項１に記載された動画再生プレーヤーを外部のサーバーから呼び込むために、前述した呼び込みのコードが、HTMLコードに含まれる場合もある。
【００２８】
以上のように、請求項１に記載された、動画再生プレーヤー状態別アニメーション起動発令部と基準タイマーがあることによって、動画再生プレーヤーに表示される経過時間に対応させて、各アニメーションを操作することが可能となる。
【００２９】
このような構成にすることにより、次のようなタイミングの取り方が可能となる。それは、「発明が解決しようとする課題」の末尾の段落で述べた「この表示要素が動画によって映し出された内容の一部であると視聴者に感じ取らせる」というようなタイミングの取り方である。また、それは、同じく前記段落で述べた「この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。」というようなタイミングの取り方である。さらに、それは、前記タイミングの取り方と同様に、前記段落で述べた「この表示要素が前記動画再生プレーヤーの枠内から同枠外へ飛び出す」というようなタイミングの取り方である。
【００３０】
これらとは別のタイミングの取り方として、本発明では次のものがある。請求項１に記載されたカウントダウンタイマーは、そのカウントダウンアニメーションが完了したタイミングで、前述した、動画再生プレーヤー状態別アニメーション起動発令部が行う処理と同様に、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段よるアニメーション、あるいはこれら二つの前記手段で表示されるもの以外のアニメーションに対し命令を出すことができ、予め設定したアニメーションを実行させることができる。
【００３１】
このような構成にすることにより、前述した、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段よるアニメーション、あるいはこれら二つの前記手段で表示されるもの以外のアニメーションが始動すること対し、動画再生プレーヤー状態別アニメーション起動発令部から直接命令を出さなくても、これらの各アニメーションをそれぞれ実行することができる。
【００３２】
また、このような構成にすることにより、もともと前述したカウントダウンタイマーのカウントダウンアニメーションは、前述した動画再生プレーヤー状態別アニメーション起動発令部により起動の命令を受けて開始するものなので、このカウントダウンアニメーションが完了したタイミングで命令を出すということは、結果として、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように、これらの各アニメーションをそれぞれ実行することができる、ということにつながる。
【００３３】
さらに、このような構成にすることにより、カウントダウンの効果で視聴者の注目を集めてこれらの各アニメーションを実行することができる。
【００３４】
以上のように、本発明では、動画再生プレーヤー状態別アニメーション起動発令部をもとにしたタイミングの取り方と、請求項１に記載されたカウントダウンタイマーをもとにしたタイミングの取り方が、可能となる。次に、表示要素のアニメーションについて説明する。
【００３５】
請求項１に記載された動画スペース要素表示後移動アニメーション実行手段によるアニメーションとは、動画埋め込み型ウェブページにおいて動画再生プレーヤーが表示される枠の内側となる位置に表示された要素について、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するものである。
【００３６】
ここで、動画スペース要素表示後移動アニメーション実行手段によるアニメーションは、本発明の請求項１に記載の「予め設定した」アニメーションの一つとして利用するものである。そして、動画スペース要素表示後移動アニメーション実行手段は、前記動画再生プレーヤーの枠内に要素を表示させるために、次の四つの特色をもつ。
【００３７】
まず一つ目の特色は、動画を再生させるためのコードに関連付けて、パラメータとなるwmodeが含まれ、その値をtransparentとすることである。次に二つ目の特色は、前記表示要素にかかるCSSのプロパティにz-indexが含まれ、その値を１以上とすることである。そして三つ目の特色は、前記表示要素にかかるCSSのプロパティにpositionが含まれ、その値をabsoluteもしくはfixedとすることである。ただし、fixedにした場合には、ユーザーがウェブページをスクロールしてしまうと、動画と表示要素との位置関係がずれてしまうことがある。そして四つ目の特色は、前記表示要素にかかるCSSにおいて、前記表示要素の位置を前記動画再生プレーヤーの枠内になるように指定することである。
【００３８】
こうすることで、前記動画再生プレーヤーの枠内に要素を表示させることができる。また、前述した動画スペース要素表示後移動アニメーション実行手段については、以上の四つの特色に加えて、次の二つの特色がある。
【００３９】
動画スペース要素表示後移動アニメーション実行手段の五つ目の特色は、動画スペース要素表示後移動アニメーション実行手段の名のとおり、以上の四つの特色をもったうえで、要素を表示させた後にその要素を移動させることである。この移動ではJavaScriptやjQueryを利用して、たとえば、前記表示要素について移動後の位置をCSSで指定して移動させるか、または、上下左右への移動距離を指定して移動させることになる。そして、この移動の特徴は前記動画再生プレーヤーの枠内から同枠外へと行うことである。
【００４０】
動画スペース要素表示後移動アニメーション実行手段の六つ目の特色は、本発明の請求項１に記載のとおり、この手段によるアニメーションが動画再生プレーヤー状態別アニメーション起動発令部から出される命令の対象となっていることである。そして、その結果、前述のとおり、前記アニメーションが前記動画再生プレーヤーで再生される動画の再生開始、再生停止、一時停止、再生再開とタイミングを合わせることが可能となり、これにより前記アニメーションと前記動画の内容に連動性をもたせることが可能となることである。
【００４１】
前述した動画スペース要素表示後移動アニメーション実行手段には、以上の特色がある。
【００４２】
ついで、もう１つの、前述した動画スペース要素移動後消滅アニメーション実行手段によるアニメーションとは、動画スペース要素表示後移動アニメーション実行手段によるアニメーションと同様に、本発明の請求項１に記載の「予め設定した」アニメーションの一つとして利用するものである。また、前述した動画スペース要素移動後消滅アニメーション実行手段は、前述した動画スペース要素表示後移動アニメーション実行手段で表示させた要素を、同じ動画再生プレーヤーの枠内の所定位置で消滅させるか、前記動画再生プレーヤーの枠外にある表示要素を同枠内の所定位置に移動させて消滅させる時に利用するものである。
【００４３】
前述した動画スペース要素移動後消滅アニメーション実行手段にも、動画再生プレーヤーの枠内で要素を表示させるために、動画スペース要素表示後移動アニメーション実行手段の説明の箇所で示した一つ目から四つ目までの特色が必要となり、これら四つが動画スペース要素移動後消滅アニメーション実行手段の特色の一部となる。
【００４４】
こうすることで、要素が前記動画再生プレーヤーの枠内にある場合でも要素を表示させることができるようになる。また、前述した動画スペース要素移動後消滅アニメーション実行手段については、以上の四つの特色に加えて、次の二つの特色がある。
【００４５】
動画スペース要素移動後消滅アニメーション実行手段の五つ目の特色は、動画スペース要素移動後消滅アニメーション実行手段の名のとおり、以上の四つの特色をもったうえで、要素を移動させた後にその要素を消滅させることである。この移動ではJavaScriptやjQueryを利用して、たとえば、前記表示要素について移動後の位置をCSSで指定して移動させるか、または、上下左右への移動距離を指定して移動させることになる。そして、この移動の特徴は前記動画再生プレーヤーの枠外から同枠内へと行うことである。この五つ目の特色が前述した動画スペース要素表示後移動アニメーション実行手段の特色と大きく異なる点である。
【００４６】
動画スペース要素移動後消滅アニメーション実行手段の六つ目の特色は、本発明の請求項１に記載のとおり、この手段によるアニメーションが動画再生プレーヤー状態別アニメーション起動発令部から出される命令の対象となっていることである。そして、その結果、前述のとおり、前記アニメーションが前記動画再生プレーヤーで再生される動画の再生開始、再生停止、一時停止、再生再開とタイミングを合わせることが可能となり、これにより前記アニメーションと前記動画の内容に連動性をもたせることが可能となることである。
【００４７】
前述した動画スペース要素移動後消滅アニメーション実行手段には、以上の特色がある。
【００４８】
ここで表示要素について説明する。
【００４９】
前表示要素には画像も利用することができ、たとえば、画像の拡張子が.jpgのものや背景色を透明にした.pngのもの、あるいはサッカーボールなどのボールについては回転している.gifのものを利用するとリアリティがでる。
【００５０】
もしくは前記表示要素となる画像に、円形や四角形以外の、動くものを当てたい場合には、背景色が透明で拡張子が.gifのものを利用するとよい。例えば、前記表示要素に動く人物をあてたい場合に利用するとよい。
【００５１】
こうすることで視聴者に動画の中に登城した人物が、動画の中から飛び出てくるように見せることができる。
【００５２】
ここで、前記表示要素が画像の場合にもこれら画像に文字やハイパーリンクを含ませるとコール・トゥ・アクションの効果が高まる。
【００５３】
一方、前記表示要素がメッセージボードの場合には、たとえば、前記表示要素の全体を画像にする他にCSSを利用して表示し、前記メッセージボードの中にテキスト、画像、動画、コンタクト・フォーム、あるいはCSSや画像のボタンのいずれかを含めるとよい。
【００５４】
また、これらのテキスト、画像、動画、ないしボタンに、ハイパーリンクを含ませるとコール・トゥ・アクションの効果が高まる。
【００５５】
さらに、たとえば、前記表示要素がメッセージボードのように四角形の場合、前記表示要素自体を動画再生プレーヤーにすることができる。この場合、動画再生プレーヤーの中に別の動画再生プレーヤーが表示されることになり、動画のなかから別の動画が飛び出てくることになる。
【００５６】
このような構成にすることにより、請求項１に記載された動画再生プレーヤー状態別アニメーション起動発令部でコントロールできる表示要素のアニメーションの幅が広がり、その結果、請求項１に記載された動画再生プレーヤーで再生される動画と連動性をもったアニメーションの幅が広がることになる。
【００５７】
こうすることで、例えば、動画の枠内でメッセージボードを大きく表示するために、動画再生プレーヤーの枠外に一旦出たアバターを必要に応じて同枠内に移動させて（その後、消滅させて）、動画の内容に再び参加させることができる。
【００５８】
ついで、請求項１に記載された、「これら二つの手段で表示されるもの以外のアニメーション」とは、請求項１に記載されたウェブページの動画再生プレーヤーの枠外でのみ実行されるアニメーションを指し、本発明の請求項１に記載の「予め設定した」アニメーションの一つとして利用するものである。
【００５９】
このような構成にすることにより、前記アニメーションが前記動画再生プレーヤーの再生と連動性をもつ。その結果、前記アニメーションが動画の内容と連動性をもって実行されることになる。
【００６０】
こうすることで、例えば、前記動画自体に字幕を付けたりすると文字が小さくなってしまう場合があるが、前記動画再生プレーヤーの枠外となる枠下で、テキストや画像に文字を入れたものを字幕として利用することでアニメーションを行うと、前記動画自体に字幕を付けるより文字を大きく表示することができる。
【００６１】
ついで、請求項１に記載されたカウントダウンタイマーのカウントダウンアニメーションは、前述した動画再生プレーヤー状態別アニメーション起動発令部により起動の命令を受けて開始するもので、ウェブページに表示されるカウントダウンタイマーの時間が減少していくものである。
【００６２】
前記カウントダウンタイマーの具体的な一例として、図８の２００のように表示する。前述のとおり、このカウントダウンタイマーのカウントダウンアニメーションは、前記基準タイマーがカウントダウンして動画再生プレーヤーに時間を表示する場合のものとは、まったく別物である。
【００６３】
ついで、請求項１に記載された動画再生プレーヤーで再生される動画のアップロード先について、たとえば、請求項１に記載されたウェブサーバー装置に直接動画をアップロードする場合もあれば、他のウェブサーバー装置に動画をアップロードする場合もあり、また、動画共有サービスが用意するウェブサーバー装置に動画をアップロードする場合もある。
【００６４】
また、請求項１に記載された動画再生プレーヤーを請求項１に記載されたウェブサーバー装置に備えるために、たとえば、前記動画再生プレーヤーに関する情報のすべてを請求項１に記載された情報として前記ウェブサーバー装置にアップロードする場合もあれば、請求項１に記載された動画再生プレーヤーを請求項１に記載されたウェブサーバー装置に備えるために、前記動画再生プレーヤーに関する情報を外部のウェブサーバーから呼び込ためのむコードとして、かつ、このコードを請求項１に記載された情報として、請求項１に記載されたウェブサーバー装置にアップロードする場合もある。
【００６５】
ついで、請求項１に記載されたウェブサーバー装置は、全体的な構成として、例えば、演算部、通信部、入力部、記憶部、出力部を備え、前記記憶部にある記録媒体に向けてローカル端末となるパソコンから、少なくともＨＴＭＬ情報、CSS情報、およびJavaScript情報をアップロードすることによって構成されることになる。
【００６６】
つまり、前記記録媒体と前記記録媒体に向けてアップロードされる情報が本発明の中核となるもので、本発明の最も主要な特徴となる。
【００６７】
そして、たとえば、前記JavaScript情報にJavaScriptやjQueryが含まれることによって、前述した動画再生プレーヤー状態別アニメーション起動発令部が構成されることになる。また、たとえば、前記JavaScript情報にJavaScriptやjQueryが含まれることによって、前述した、動画スペース要素表示後移動アニメーション実行手段および動画スペース要素移動後消滅アニメーション実行手段がそれぞれのアニメーションを動かすことができるようになる。加えて、たとえば、前記JavaScript情報にJavaScriptやjQueryが含まれることによって、本発明の請求項１に記載された各アニメーションが動くことになる。
【００６８】
そして、たとえば、前述したそれぞれの表示要素は、前記ＨＴＭＬ情報、CSS情報、およびJavaScript情報が前記記録媒体に記録されることで、ウェブページに表示できるようになる。以上が請求項１についてである。
【００６９】
本発明の請求項２に記載された動画埋め込み型ウェブページの作成方法は、前記ウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように設定された動画スペース要素表示後移動アニメーション実行手段により、前記動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと拡大しながら移動することを特徴としている。
【００７０】
このような構成とすることにより、たとえば、JavaScriptやjQueryを利用して前記表示要素を移動させる場合に、次のことができるようになる。それは、前述した二つの手段の特色のうち、それぞれ五つ目の特色の箇所で説明したように、表示要素について移動後の位置をCSSで指定して移動させる場合、表示要素が飛び出しながら拡大するようになる、ことである。たとえば、次のようにするとよい。
【００７１】
それは、前記移動の後の位置について、前記CSSのプロパティにwidthとheightを加えて前記移動後の表示要素のサイズを指定し、かつ、元のサイズより大きいサイズとなるように前記プロパティの値を指定することである。またそれは、このことに加えて、表示要素が画像や動画の場合、リキッドレイアウトを採用し、たとえば。CSSのプロパティとなるwidthの値についてパーセントを利用することである。
【００７２】
こうすることで、たとえば、前述した動画スペース要素表示後移動アニメーション実行手段による表示要素の移動中に、前記動画再生プレーヤーの枠内に表示された前記表示要素となるサッカーボールやメッセージボードが、移動しながら拡大するようになる。本発明では、このような動画埋め込み型ウェブページが作成される。
【００７３】
これを見たユーザーは遠近感を覚え、前記サッカーボールやメッセージボードが動画の中から飛び出してきたように感じ、その結果、驚くことになる。こうすることで、視聴者に対しコール・トゥ・アクションを強く訴求することができる。以上が請求項２についてである。
【００７４】
本発明の請求項３に記載された動画埋め込み型ウェブページの作成方法は、請求項１に記載のウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生開始からの経過時間に対応するように設定された動画スペース要素移動後消滅アニメーション実行手段により、請求項１に記載の動画再生プレーヤーが表示される枠の外側となるウェブページ上の位置に表示された要素が、前記動画再生プレーヤーが表示される枠の外側となるウェブページ上の位置から前記動画再生プレーヤーが表示される枠の内側となる位置へと移動し、その後、前記動画再生プレーヤーが表示される枠の内側で消滅することを特徴としている。
【００７５】
このような構成とすることにより、たとえば、前記動画再生プレーヤーの枠外にある表示要素を同枠内の所定位置に移動させて消滅させることができる。本発明では、このような動画埋め込み型ウェブページが作成される。
【００７６】
こうすることで、たとえば、動画再生プレーヤーの枠内でメッセージボードを大きく表示するために、動画再生プレーヤーの枠外に一旦出たアバターを必要に応じて同枠内に移動させて、動画の内容に再び参加させることができる。
【００７７】
また、こうすることで、たとえば、それまで前記動画再生プレーヤーの枠外で動画の内容について客観的にナレーションをしていたアバターが、動画の中へと移動して、動画の中で演じられる短編ドラマの登場人物となることができる。その結果、ユーザーの関心を動画の内容に向けることが可能となる。以上が請求項３についてである。
【００７８】
本発明の請求項４に記載された動画埋め込み型ウェブページの作成方法は、請求項１に記載の動画再生プレーヤーで再生される動画の再生が一時停止されると前記基準タイマーの時間進行も一時停止することに加えて、請求項１に記載の動画再生プレーヤーで再生される動画の再生が一時停止されて前記動画再生プレーヤーの状態が変化すると、前述した動画再生プレーヤー状態別アニメーション起動発令部により、請求項１に記載された、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーションの全部もしくは一部の進行が一時停止するウェブサーバー装置において、前記動画再生プレーヤーで再生される動画の再生が一時停止している状態のものを再開すると前記基準タイマーの時間進行も再開することに加えて、一時停止しているアニメーションの進行が再開することを特徴としている。
【００７９】
このような構成とすることにより、たとえば、次のようになる。ユーザー端末に表示されるウェブページの中の、前記動画再生プレーヤーの一時停止ボタンがクリックないしタップされると（クリックないしタップのイベントが行われると）、前記基準タイマーの時間の進行が一時停止する他に、前記動画再生プレーヤーの状態が再生の状態から一時停止の状態に変化する。
【００８０】
この変化によって、また、この変化を起点として、たとえば、請求項１に記載の動画再生プレーヤー状態別アニメーション起動発令部の一時停止に係る「アニメーションを処理する」機能ないし「アニメーションを実行して呼び出す」機能が応じる。ここで「アニメーションを処理する」機能とは、たとえば、JavaScriptやjQueryによって構成されるもので、アニメーションについてのコードを直に記載したものである。一方、「アニメーションを実行して呼び出す」機能とは、たとえば、アニメーションに係る（複数の）処理をまとめて名前を付けたものとなる関数名と、括弧()によって構成されるものである。
【００８１】
そうすることで、イベントの発生に応じて動画再生プレーヤー状態別アニメーション起動発令部において予め設定した、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーション、これらそれぞれの「アニメーションを処理する」機能ないし「アニメーションを実行して呼び出す」機能が働くことで、前記アニメーションの進行を一時停止することができる。
【００８２】
その後、ユーザー端末に表示されるウェブページの中の、前記動画再生プレーヤーの再開ボタン（スタートボタン）がクリックないしタップされると、前記基準タイマーの時間の進行が再開する他に、前記動画再生プレーヤーの状態が一時停止の状態から再生の状態に変化する。
【００８３】
この変化によって、また、この変化を起点として、たとえば、請求項１に記載の動画再生プレーヤー状態別アニメーション起動発令部の再開に係る「アニメーションを処理する」機能ないし「アニメーションを実行して呼び出す」機能が応じる。
【００８４】
そうすることで、イベントの発生に応じて前述した動画再生プレーヤー状態別アニメーション起動発令部において予め設定した、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、そしてカウントダウンタイマーのカウントダウンアニメーション、これらそれぞれの、「アニメーションを処理する」機能ないし「アニメーションを実行して呼び出す」機能が働くことで、前記各アニメーションの進行をそれぞれ再開することができる。本発明では、このような動画埋め込み型ウェブページが作成される。
【００８５】
以上のようにすることにより、前記動画再生プレーヤーで再生される動画が途中で一時停止される場合があっても、前述した動画再生プレーヤー状態別アニメーション起動発令部の働きにより、前記呼び出しの対象となるアニメーションの進行と、前記基準タイマーの時間の進行が、一致するようになる。その結果、動画が途中で一時停止される場合があっても、前記動画再生プレーヤーで再生される動画の内容と、前記アニメーションの進行が一致するようになり、前記動画の内容に合わせて前記アニメーションが連動性をもって進行するようになる。
【００８６】
その結果、本発明では、前記動画再生プレーヤーで再生される動画が途中で一時停止される場合があっても、前述した従来技術がもつ課題を解決するために、「発明が解決しようとする課題」の末尾の段落で述べた「この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。」というように、前記アニメーションの進行を行えるようになる。
【００８７】
なお、前述した動画再生プレーヤー状態別アニメーション起動発令部において、「アニメーションを実行して呼び出す」機能に係るコードと、この「アニメーションを実行して呼び出す」機能に対応する「アニメーションを処理する」機能に係るコードを分けて記述しても、また、この「アニメーションを実行して呼び出す」機能に係るコードと「アニメーションを処理する」機能に係るコードをあわせて記述しても、いずれであってもよい。以上が請求項４についてである。
【００８８】
本発明の請求項５に記載された動画埋め込み型ウェブページの作成方法は、請求項１に記載のウェブサーバー装置において、請求項１に記載された動画再生プレーヤーの設定で動画の自動再生が行われないように設定した場合、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると、請求項１に記載された基準タイマーの時間の進行が始動し、また、前記動画再生プレーヤーの状態が停止の状態から初回再生の状態に変化するとともに、前記変化を起点として請求項１に記載の動画再生プレーヤー状態別アニメーション起動発令部により、請求項１に記載の、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーションの全部もしくは一部の進行が始動することを特徴としている。
【００８９】
このような構成とすることにより、たとえば、次のようになる。ユーザー端末に表示されるウェブページの中の、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると、請求項１に記載された基準タイマーの時間の進行が始動する他に、前記動画再生プレーヤーの状態がデフォルトの状態から初回再生の状態に変化する。
【００９０】
この変化によって、また、この変化を起点として、たとえば、請求項１に記載の動画再生プレーヤー状態別アニメーション起動発令部の「アニメーションを実行して呼び出す」機能が応じる。そうすることで、イベントの発生に応じて前述した動画再生プレーヤー状態別アニメーション起動発令部において予め設定した、請求項１に記載の、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーション、これらそれぞれの「アニメーションを実行して呼び出す」機能が働き、この「アニメーションを実行して呼び出す」機能がアニメーションに始動の命令を出すことで、前記アニメーションの進行を始動することができる。本発明では、このような動画埋め込み型ウェブページが作成される。
【００９１】
こうすることで、前記の「予め設定した」アニメーションの進行と、前記基準タイマーの時間の進行が一致するようになる。その結果、動画再生プレーヤーで再生される動画の再生にかかる時間進行と、前記アニメーションの進行が一致するようになる。
【００９２】
また、こうすることで、ユーザーがウェブページを開いたときには、ウェブページに埋め込まれた動画も静止状態で、かつ、前記動画に関連付けられたウェブページ上のアニメーションも静止状態であったにもかかわらず、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると、前記動画の時間進行にあわせて前記アニメーションが行われることになる。
【００９３】
その結果、本発明では、前記動画再生プレーヤーの自動再生を行わないように設定した場合であっても、前述した従来技術がもつ課題を解決するために、「発明が解決しようとする課題」の末尾の段落で述べた「この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。」というように、前記アニメーションを始動することができるようになる。
【００９４】
なお、前述した動画再生プレーヤー状態別アニメーション起動発令部に、「アニメーションを実行して呼び出す」機能を設けず、前記アニメーションの動作にかかる記述を直接行ってもよい。以上が請求項５についてである。
【００９５】
本発明の請求項６に記載された動画埋め込み型ウェブページの作成方法は、請求項１に記載のウェブサーバー装置において、請求項１に記載された動画再生プレーヤーの設定で自動再生が行われないように設定した場合、請求項１に記載された基準タイマーの始動、ならびに動画スペース要素表示後移動アニメーション実行手段によるアニメーションの始動、動画スペース要素移動後消滅アニメーション実行手段によるアニメーションの始動、これら二つの前記手段で表示されるもの以外のアニメーションの始動、カウントダウンタイマーのカウントダウンアニメーションの始動の全部もしくは一部については、請求項１に記載のウェブページが所定の値だけスクロールされたことを起点として実行されることを特徴とするものである。
【００９６】
この場合、たとえば、jQuery標準のイベントとなるscrollを利用することもできる。
【００９７】
このような構成にすることにより、たとえば、ユーザー端末に表示されるウェブページの中の、前記動画再生プレーヤーが前記ウェブページの上部に配置されていなくても、ウェブページを所定の値だけスクロールしたことを起点として、前記アニメーションの始動を実行することができ、また、前記動画再生プレーヤーで再生される動画の再生を実行することができる。本発明では、このような動画埋め込み型ウェブページが作成される。
【００９８】
こうすることで、前記動画再生プレーヤーの設定で自動再生を行わないように設定した場合で、かつ、前記動画再生プレーヤーがウェブページの上部に配置されていない場合であっても、前記ウェブページを所定の値だけスクロールすれば、前記の「予め設定した」アニメーションの進行と、前記基準タイマーの時間の進行が一致して実行される。その結果、動画再生プレーヤーで再生される動画の再生の時間進行と、前記アニメーションの進行が一致するようになる。
【００９９】
その結果、本発明では、前記動画再生プレーヤーの設定で自動再生を行わないように設定した場合で、かつ、前記動画再生プレーヤーがウェブページの上部に配置されていない場合であっても、前述した従来技術がもつ課題を解決するために、「発明が解決しようとする課題」の末尾の段落で述べた「この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。」というように、前記アニメーションを始動することができるようになる。以上が請求項６についてである。
【０１００】
本発明の請求項７に記載されたウェブサーバー装置は、アップロードしたＨＴＭＬ情報、CSS情報およびJavaScript情報を備え、また、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、また、ユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、また、前記動画再生プレーヤーで動画の再生が開始されると、これを起点として時間の進行が始まる基準タイマーを備え、また、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについて、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備え、以上を備えたうえで、前述した動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するもので、以上のとおり、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備えることを特徴としている。
【０１０１】
このような構成とすることにより、次のようになる。たとえば、従来の技術では動画再生プレーヤーの内部だけで映し出されるという制限をもつ表示要素について、まずこの表示要素が動画によって映し出された内容の一部であると視聴者に感じ取らせるために、この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。その後、前記制限を取り除き、前記問題を解決するために、この表示要素が前記動画再生プレーヤーの枠内から同枠外へ飛び出す。本発明では、このような動画埋め込み型ウェブページの情報を出力データとしてユーザー端末に返す、ウェブサーバー装置を提供することができる。
【０１０２】
また、このような構成とすることにより、前述した動画スペース要素表示後移動アニメーション実行手段によるアニメーションの進行と、前記基準タイマーの時間の進行が一致するようになる。その結果、動画再生プレーヤーで再生される動画の再生の時間進行と、前記アニメーションの進行が一致するようになる。
【０１０３】
こうすることで、たとえば、前記表示要素が前記動画の内容に合わせてアニメーションを行うことが可能となり、また、前記表示要素が前記動画再生プレーヤーの枠内から同枠外に飛び出すようになり、視聴者の関心を前記表示要素に引き付けることができる。また、こうすることで、前記表示要素に書かれた内容に強い訴求効果をもたせることができる。さらに、こうすることで、前記表示要素が、前記動画再生プレーヤーの枠内から同枠外へ飛び出すために、前記動画再生プレーヤーの枠内からなくなり、その結果、同枠内に残っているその他の表示要素や前記番組画像について、これらを同枠内でそれまでより拡大して表示することができる。
【０１０４】
本発明の請求項７に記載されたウェブサーバー装置にかかる、その他の作用および効果については、請求項１の説明の箇所に記載のとおりである。
【０１０５】
以上の結果、本発明では、前述した従来技術がもつ課題を解決するために、「発明が解決しようとする課題」の末尾の段落で述べた「動画再生プレーヤーの内部だけで映し出されるという制限をもつ表示要素について、まずこの表示要素が動画によって映し出される内容の一部であるという発想をやめる一方で、この表示要素が動画によって映し出された内容の一部であると視聴者に感じ取らせるために、前記動画がオートプレイ機能で再生されるか否かを問わず、この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。その後、前記制限を取り除き、前記問題を解決するために、この表示要素が前記動画再生プレーヤーの枠内から同枠外へ飛び出す。」というような、動画埋め込み型ウェブページの情報を出力データとしてユーザー端末に返すウェブサーバー装置を提供することができるようになる。以上が請求項７についてである。
【０１０６】
本発明の請求項８に記載されたウェブサーバー装置は、アップロードしたＨＴＭＬ情報、CSS情報およびJavaScript情報を備え、また、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、また、ユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、また、前記動画再生プレーヤーで動画の再生が開始されると、これを起点として時間の進行が始まる基準タイマーを備え、また、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについて、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備え、以上を備えたうえで、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するもので、また、動画スペース要素表示後移動アニメーション実行手段によるアニメーションの進行については、前記動画再生プレーヤーの一時停止ボタンがクリックないしタップされると、一時停止の状態となり、その後、前記動画再生プレーヤーで再生される動画の再生が再開させると前記アニメーションの進行も再開するもので、以上のとおり、前記アニメーションおよび前記進行についてコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備えることを特徴としている。
【０１０７】
このような構成とすることにより、前記請求項４の説明の箇所で示したことができるウェブサーバー装置を提供することができる。
【０１０８】
その結果、本発明では、前記動画再生プレーヤーで再生される動画が途中で一時停止される場合があっても、前述した従来技術がもつ課題を解決するために、「発明が解決しようとする課題」の末尾の段落で述べた「この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。」というように、前記アニメーションを始動することができるようになる、動画埋め込み型ウェブページの情報を、出力データとしてユーザー端末に返すウェブサーバー装置を提供することができるようになる。
【０１０９】
本発明の請求項９に記載されたウェブサーバー装置は、アップロードしたＨＴＭＬ情報、CSS情報およびJavaScript情報を備え、また、演算部、通信部、入力部、記憶部、出力部の全部もしくは一部を備え、また、ユーザー端末のブラウザに表示される動画再生プレーヤーについて前記動画再生プレーヤーの状態によって予め設定した命令を出す動画再生プレーヤー状態別アニメーション起動発令部を備え、また、前記動画再生プレーヤーで動画の再生が開始すると、これを起点として時間の進行が始まる基準タイマーを備え、また、前記情報によって構成され、かつ、前記命令の対象となる、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについて、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備え、以上を備えたうえで、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、動画再生プレーヤーが表示される枠の内側となる位置に表示された要素が、前記動画再生プレーヤーが表示される枠の内側となる位置から前記動画再生プレーヤーが表示される枠の外側となる前記ウェブページ上の位置へと移動するもので、また、動画スペース要素表示後移動アニメーション実行手段によるアニメーションについては、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると始動するもので、以上のとおり、前記アニメーションをコンピュータに実行させるためのプログラムとして記録した記録媒体を前記記憶部に備えることを特徴としている。
【０１１０】
このような構成とすることにより、前記請求項５の説明の箇所で示したことができるウェブサーバー装置を提供することができる。
【０１１１】
その結果、本発明では、前記動画再生プレーヤーの自動再生を行わないように設定した場合であっても、前述した従来技術がもつ課題を解決するために、「発明が解決しようとする課題」の末尾の段落で述べた「この表示要素と動画の内容に連動性をもたせる必要がある。そのためには、この表示要素のアニメーションが動画再生プレーヤーで再生される動画の再生時間に対応する必要がある。これらの要件を満たすと、特定範囲のスクリーンサイズのブラウザにおいて、この表示要素が、毎回、動画再生プレーヤーの内部で、あたかも動画によって映し出された内容の一部であるようなアニメーションを行うことが可能となる。」というように、前記アニメーションを始動することができるようになる、動画埋め込み型ウェブページの情報を、出力データとしてユーザー端末に返すウェブサーバー装置を提供することができるようになる。以上が請求項９についてである。
【０１１２】
本発明の請求項１０に記載されたウェブサーバー装置は、請求項１から９に記載のウェブサーバー装置と同じく、デバイスのスクリーンサイズに対応してCSSを切り替えるメディアクエリを含んだCSSスクリーンサイズ条件分岐選択部と、前記メディアクエリを使用することによってレイアウトの幅が変わったウェブページにアニメーションを行う表示要素の位置を対応させるために、デバイスのスクリーンサイズに対応させるための条件式を含んだJavaScriptスクリーンサイズ条件分岐選択部を備えて、様々なサイズのユーザー端末に対して予め指定した動画埋め込み型ウェブページを表示させるように、該当するデータを前記デバイスに返すための、また、コンピュータに実行させるための、プログラムとして記録した記録媒体を備えていることを特徴としている。
【０１１３】
このような構成にすることにより、例えば、ユーザー端末のデバイスについて、そのブラウザのスクリーンサイズが異なる場合であっても、前記デバイスのスクリーンサイズに対応して、本発明の請求項１から６に記載のウェブページを表示することができる。本発明では、前記プログラムとして記録した記録媒体を備えた、動画埋め込み型ウェブページの情報を出力データとしてユーザー端末に返す、ウェブサーバー装置を提供することができるようになる。
【０１１４】
また、本発明では、これだけではなく、ウェブページを「マルチデバイス対応」とするための手法として現在最も普及し始めているレスポンシブ・ウェブデザインについて、この手法が抱える次の問題を解決することができる。その問題とは、レスポンシブ・ウェブデザインによって全体的なデザインが崩れることに起因するもので、具体的には、レスポンシブ・ウェブデザインではブラウザのスクリーンサイズによって、表示される要素の位置関係が大きく変わる、ことである。
【０１１５】
そのため、前述したアニメーションを行う表示要素の位置や移動距離について、修正する必要がある。本発明の請求項１０に記載されたウェブサーバー装置では、この修正にかかる問題を解決することができる。
【０１１６】
ここで、広く知られているとおり、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更してウェブページを作成する手法をレスポンシブ・ウェブデザイン（またはレスポンシブ・ウェブ・デザインあるいはレスポンシブ・デザイン）という。または、CSS3のメディアクエリを使用して見た目を変更するウェブページの構築手法で、デバイスに関わらず共通の 1 つの HTML を用意し、CSS メディアクエリを使用して、そのページを表示する画面サイズからデバイスを判断しCSSを選択し、そのデザインを変更する手法のことをレスポンシブ・ウェブデザイン（またはレスポンシブ・ウェブ・デザインあるいはレスポンシブ・デザイン）という。
【０１１７】
また、前記レスポンシブ・ウェブデザインを支える主なコンセプトとして、固定幅のレイアウトとは対照的な流動性と比例性が挙げられ、そのため前記レスポンシブ・ウェブデザインでは幅の値に相対的な単位となるパーセントを利用することが推奨されている。
【０１１８】
一方、本発明の請求項１０に記載されたウェブサーバー装置で実現できる動画埋め込み型ウェブページのマルチデバイスへの対応については、前記レスポンシブ・ウェブデザインと同じく「デバイスに関わらず共通の 1 つの HTML を用意し、CSS メディアクエリを使用して、そのページを表示する画面サイズからデバイスを判断しCSSを選択し、そのデザインを変更する」ものではあるが、前記「固定幅のレイアウト」を排除するものではない。そのため、本発明の請求項１０に記載されたウェブサーバー装置で実現できる動画埋め込み型ウェブページは、厳密には、前記レスポンシブ・ウェブデザインではないともいえる。
【０１１９】
ここで、CSSスクリーンサイズ条件分岐選択部とは、デバイスのスクリーンサイズに対応してCSSを切り替えるメディアクエリを含んだ箇所を指し、CSSのなかから前記スクリーンサイズに該当するものを選択する役割を果たす。例えば、ＨＴＭＬのheadタグ内でlink要素としてのmedia属性となるmin-widthやmax-widthを利用してデバイスのスクリーンサイズごとにCSSを切り替えるように記述された箇所を指す。また、例えば、CSSソースの中に@media screenを利用してデバイスのスクリーンサイズごとにCSSを切り替えるように記述された箇所を指す。
【０１２０】
一方、JavaScriptスクリーンサイズ条件分岐選択部とは、前記メディアクエリを使用することによってレイアウトの幅が変わったウェブページに対して動的な表示要素の位置を対応させるために必要となるもので、記述する場所としては、デバイスのスクリーンサイズに対応させるためのJavaScriptの条件式を含んだ箇所を指し、JavaScriptのなかから前記スクリーンサイズに該当するものを選択する役割を果たす。例えば、前述した個別の動的な表示要素に対応するJavaScriptの中に、前記条件式を記述する場合もあれば、また、CSSスクリーンサイズ条件分岐選択部の箇所で説明したように、ＨＴＭＬの中でスクリーンサイズごとにJavaScriptを切り替えるように記述する場合もある。
【０１２１】
以上のように、本発明の動画埋め込み型ウェブページを「マルチデバイス対応」とする際に、CSSスクリーンサイズ条件分岐選択部でのスクリーンサイズの分岐点は、JavaScriptスクリーンサイズ条件分岐選択部でのスクリーンサイズの分岐点に影響を与える。本発明では、このような動画埋め込み型ウェブページの情報を出力データとしてユーザー端末に返すウェブサーバー装置を提供することができるようになる。以上が請求項１０についてである。
【発明の効果】
【０１２２】
本願の各請求項に係る発明によれば、動画埋め込み型ウェブページの動画再生プレーヤーの枠内に表示される表示要素（最も訴求すべきメッセージボードや商品・サービスなど）を、動画の内容に合わせるために動画再生プレーヤーの再生時間に合わせながら同枠内でアニメーションを行った後に、同枠内から同枠外へ（拡大させながら）飛び出させることができる。また、同枠内に表示されるアバターやナレーターの動きを、動画の内容に合わせるために動画再生プレーヤーの再生時間に連動性をもたせながら、同枠内から同枠外へ移動させることができる。
【０１２３】
これによって、従来の技術では、前述した表示要素ないしアバターやナレーターは、ウェブページに埋め込まれた画再生プレーヤーの内部だけで映し出されるという制限があったが、前記制限から解放されることになる。また、これによって、前記表示要素に表示された内容を強く訴求できるだけではなく、前述した表示要素ないしアバターやナレーターが同枠外に移動することによって前記動画再生プレーヤーの枠内に映し出される要素の数が減ることになり、その結果、前記動画再生プレーヤーの枠内に映し出される要素の一つ一つの表示割合を大きくすることができる。
【０１２４】
そのため、上で示した特許文献１の図３のとおり前記表示要素（最も訴求すべきメッセージボードや商品・サービスなど）が、ナレーターやアバターを登場させるために縮小されてしまう、という問題を本発明では解決することができる。
【０１２５】
また、本願の各請求項に係る発明によれば、マルチデバイスに対応した動画埋め込み型ウェブページの動画再生プレーヤーの枠内に表示される前記表示要素（最も訴求すべきメッセージボードや商品・サービスなど）を、動画の内容に合わせるために動画再生プレーヤーの再生時間に連動性をもたせながら同枠内でアニメーションを行った後に、同枠内から同枠外の所定の位置へ拡大させながら飛び出させることができる。つまり、動画の中から物が飛び出てくるように表示することができる。
【０１２６】
これによって、視聴者を驚かせることができる。また、視聴者に対し訴求したいものを強く訴求することができるだけではなく、上で示した特許文献１の図３のとおり前述した従来の技術（特許文献１ないし非特許文献１）では、その技術を使ったウェブページをそのまま「マルチデバイス対応」としても解決できなかった、前記表示要素（最も訴求すべきメッセージボードや商品・サービスなど）が縮小されてしまう、という問題を、本発明では解決することができる。
【図面の簡単な説明】
【０１２７】
【図１】本発明の一実施形態のブロック図である。（実施例１から４）
【図２】本発明で利用するＷｅｂサーバー装置の形態を表すブロック図である。（実施例１から４）
【図３】本発明の一実施形態の動画埋め込み型ウェブページをレスポンシブ・ウェブデザインに対応させるために行う、ウェブページ作成の処理ステップを示すフローチャートである。（実施例１から４）
【図４】本発明の一実施形態の動画埋め込み型ウェブページをレスポンシブ・ウェブデザインに対応させるために行う、JavaScriptの処理ステップを示すフローチャートである。（実施例１から４）
【図５】本発明の一実施形態の動画埋め込み型ウェブページについて、動画の表面に表示されてアニメーションを行うサッカーボールを作成するための処理ステップを示すフローチャートである。（実施例１および実施例４）
【図６】本発明の一実施形態の動画スペース要素表示後移動アニメーション実行手段に係る処理ステップを示すフローチャートである。（実施例１から４）
【図７】本発明の一実施形態の動画スペース要素移動後消滅アニメーション実行手段に係る処理ステップを示すフローチャートである。（実施例１から４）
【図８】本発明の一実施形態のウェブページ画像を示す概略図である。（実施例１）
【図９】本発明の一実施形態のウェブページ画像を示す概略図である。（実施例２）
【図１０】本発明の一実施形態のウェブページ画像を示す概略図である。（実施例３）
【図１１】本発明の一実施形態における台本の例で、動画再生の経過時間を基準として、アニメーションのＨＴＭＬコード、ならびにアニメーションの始動・移動・一時停止・再開・終了の関係を示す概略図である。
【図１２】他の発明において使用される視聴者のアクセス情報の一例を示す統計表である。
【図１３】他の発明において使用される視聴者のアクセス情報の一例を示す統計表である。
【図１４】他の発明において使用される視聴者のアクセス情報の一例を示す統計表である。
【発明を実施するための形態】
【０１２８】
以下、図面を参照してローカル環境で既に実現しているもののうち、本発明を実施するための一形態について、図８（動画枠から飛び出すサッカーボール）および図９（動画枠から飛び出す申込ボタン付きメッセージボード）の内容をもとに具体的に説明する。
【０１２９】
ただ、他者が作成したウェブサイト関連の発明を当業者が実施するにあたり、最も簡単な方法は、そのソースコードをすべて開示してもらうことである。ウェブサイト関連の発明については、図や文言で説明してもらうより、ソースコードを開示してもらう方が最も分かりやすい方法であるため、以下では、すぐに再現できるように説明に加えて、発明を実施するための形態の末尾で、本発明の実施例としてソースコードを開示する。なお、本発明は、以下の実施例に限定されるものではない。
【実施例１】
【０１３０】
まずは、ソースコードの開示の前に概要から説明する。
【０１３１】
図１中、符号１００は、本発明により作成されるウェブページのもととなるデータ（図１の１０２から１０７）について、これらのデータを符号１０１の記憶媒体へアップロードすることによって構成されるＷｅｂサーバー装置の一実施形態を示している。
【０１３２】
また、図１中、符号０１０のアップロード用ローカル端末は、前記Ｗｅｂサーバー装置（図１の１００）の外部にあるもので、このローカル端末で前記データ（図１の１０２から１０７）を作成して、その後、前記データを前記Ｗｅｂサーバー装置（図１の１００）にアップロードする場合に利用するものである。
【０１３３】
また、図１中、符号０２１から０２３はインターネットのネットワークを示している。
【０１３４】
また、図１中、符号０３０は、動画共有サービスを利用して動画をアップロードする場合のアップロード先となるＷｅｂサーバー装置、もしくは符号１００以外のＷｅｂサーバー装置に動画をアップロードする場合のアップロード先となるＷｅｂサーバー装置を示している。
【０１３５】
一方、図１中、符号１０６の動画のデータは、符号０３０の動画配信Ｗｅｂサーバー装置を利用しないで、符号１０１の記憶媒体へアップロードしたもので、動画埋め込み型ウェブページで動画を表示する場合に利用するものである。
【０１３６】
図１中、符号０３０のＷｅｂサーバー装置に動画のデータをアップロードしたうえで、この動画を動画埋め込み型ウェブページの動画再生プレーヤーで再生するものとし、これとは別にアップロードした符号１０６の動画のデータを、下のイメージのように前記動画再生プレーヤーの中から飛び出す要素として利用する場合もある。また、これとは逆に、符号０３０の動画配信Ｗｅｂサーバーにアップロードされた動画を前記の飛び出す要素として利用し、符号１０６の動画を前記動画再生プレーヤーで再生される動画として利用することもできる。
【０１３７】
2016178382.tif 000004
【０１３８】
また、図１中、符号０４０のユーザー端末は、前記Ｗｅｂサーバー装置（図１の１００）にアクセスしてブラウザでウェブページを見るためのものである。近年、ユーザー端末はデスクトップ型のものだけではなく、スマートフォンやタブレット型のものが増えているため、動画埋め込み型ウェブページであっても、また、動的なアニメーションを含むウェブページであっても、マルチデバイスへの対応を行った方が効率的なサイト運営につながる。
【０１３９】
また、図１中、符号１０８はデータベースを示している。
【０１４０】
また、図１中、符号１０９のCSSスクリーンサイズ条件分岐選択部は、デバイスのスクリーンサイズに関係するメディアクエリを含んだ箇所となる。CSSがHTML以外の外部ファイルとしてデバイスのスクリーンサイズの範囲ごとにファイルが用意されている場合には、通常、HTMLのhead部分にデバイスのスクリーンサイズの範囲ごとにリンクタグが用意されており、前記リンクタグが用意された場合には、たとえば、次の段落で示すイメージのようにCSSスクリーンサイズ条件分岐選択部は、デバイスのスクリーンサイズに対応してCSSを切り替えるメディアクエリがある箇所を含む、linkタグ（のまとまり）を指す。
【０１４１】
2016178382.tif 000005
【０１４２】
一方、上のイメージのようにlink要素としてのmedia属性ではなく、CSSソース内で@mediaを複数利用してデバイスのスクリーンサイズの範囲ごとにCSSを用意する場合には、CSSスクリーンサイズ条件分岐選択部は、前記@mediaを記述した（複数の）箇所を含むことになる。
【０１４３】
本発明では、CSSは、上のイメージのように外部ファイルにしてもよく、また、HTMLへ直書してもよい。そして、CSSは、単一のファイルにまとめて書いても、また、上のイメージの場合のようにデバイスのスクリーンサイズごとに別のファイルに分けて書いてもよい。
【０１４４】
ただし、本発明では、ウェブページに動画とアニメーションを加えるため、デバイスへの読み込みスピードのことを考慮した場合、上のイメージのようにデバイスのスクリーンサイズごとにリンクタグを使って分けて書く方が、それぞれが平行してデバイスに読み込まれるため読み込みスピードが速くなるという利点がある。そのため、CSSを単一のファイルにまとめて書くより、上のイメージのようにデバイスのスクリーンサイズごとにリンクタグを使って分けて書いた方がよい。
【０１４５】
そしてCSSスクリーンサイズ条件分岐選択部は、デバイスサイズ取得部（図１の１１３）を含む要求処理部（図１の１１２）が、ユーザー端末（図１の０４０）のブラウザのユーザーエージェント情報として、前記端末の画面のスクリーンサイズを取得した後、前記情報を受け取り、前記情報をもとに符号１０４のCSSのなかから前記スクリーンサイズに該当するものを選択する。
【０１４６】
また、図１中、符号１０９のJavaScriptスクリーンサイズ条件分岐選択部は、JavaScript（図１の１０２）のうちデバイスのスクリーンサイズに関係する条件式を記述した箇所を含む。例えば、JavaScript（図１の１０２）のうちifを用いた条件式でデバイスのスクリーンサイズを記述した箇所を含む。
【０１４７】
そしてJavaScriptスクリーンサイズ条件分岐選択部は、デバイスサイズ取得部（図１の１１３）を含む要求処理部（図１の１１２）が、ユーザー端末（図１の０４０）のブラウザのユーザーエージェント情報として、前記端末の画面のスクリーンサイズを取得した後、前記情報を受け取り、前記情報をもとに符号１０２のJavaScriptのなかから前記スクリーンサイズに該当するものを選択する。
【０１４８】
そして、JavaScriptスクリーンサイズ条件分岐選択部は、ウェブページ上の動的な表示要素を適切に表示するため、デバイスのスクリーンサイズの分岐点についてCSSスクリーンサイズ条件分岐選択部から影響を受ける。例えば、CSSスクリーンサイズ条件分岐選択部がデバイスのスクリーンサイズの分岐点について、640pxと480pxを含んでいる場合には、JavaScriptスクリーンサイズ条件分岐選択部はこの２つの分岐点を含んだ方が、アニメーションの位置を管理しやすくなる。
【０１４９】
そのため、デバイスのスクリーンサイズの分岐点については、CSSスクリーンサイズ条件分岐選択部とJavaScriptスクリーンサイズ条件分岐選択部で、そろえた方がよい。
【０１５０】
また、図１中、符号１１１のデバイステーブルは、ユーザー端末（図１の０４０）のブラウザのユーザーエージェント情報として、その画面のスクリーンサイズを効率的に取得するために、CSSスクリーンサイズ条件分岐選択部で指定したデバイスのスクリーンサイズについて、まとめた情報である。
【０１５１】
また、図１中、符号１１５の表示部を含む符号１１４の応答処理部は、符号０４０のユーザー端末から符号１００のＷｅｂサーバー装置で出力する動画埋め込み型ウェブページへアクセスがあった場合に応答して、動画埋め込み型ウェブページを表示するために必要な情報（出力データ）を出力する箇所である。
【０１５２】
また、図１中、符号１１６の動画再生プレーヤー情報処理部は、動画埋め込み型ウェブページの動画再生プレーヤーで動画を再生するために必要となる情報を司る箇所で、前記動画再生プレーヤーに固有の基準タイマー（図１の１１８）を外部から読み込むか、もしくは備え、加えて動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）を備えている。
【０１５３】
ここで図１の符号１１８の基準タイマーは、例えば、図８から図１０の符号３０３の時間スライダや動画再生プレーヤーに表示される時間を制御し、前記時間スライダを強制的に移動させた場合には基準タイマーの時間もあわせて変化する。しかし、この場合、本実施例では前述した各アニメーションは前記変化から影響を受けないようにする。
【０１５４】
一方、図１中、符号１１７の動画再生プレーヤー状態別アニメーション起動発令部は、その名の通り動画再生プレーヤーの状態が、たとえば、初回再生前（デフォルト）の状態、再生中の状態、再生終了の状態、一時停止の状態、バッファ中の状態のいずれかに変化した時に、アニメーションを構成するJavaScriptやjQueryに対し起動するように命令を出す箇所である。例えば、次の二つの段落で示すイメージのうち、いずれか一つのイメージのような「アニメーションを実行して呼び出す」機能が記述された箇所を含む。
【０１５５】
2016178382.tif 000006
【０１５６】
2016178382.tif 000007
【０１５７】
前述した動画再生プレーヤー状態別アニメーション起動発令部は、次のような特徴をもつ。
【０１５８】
ユーザー端末（図１の０４０）に表示されるウェブページの中の、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると、前記動画再生プレーヤーの状態がデフォルトの状態から初回再生の状態に変化する。
【０１５９】
この変化によって、また、この変化を起点として、前記動画埋め込み型ウェブページに表示される動画についての情報を司る動画再生プレーヤー情報処理部（図１の１１６）の中の、JavaScript・jQuery（図１の１０２）によって構成される動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）の「アニメーションを実行して呼び出す」機能が応じる。イベントの発生に応じて前述した動画再生プレーヤー状態別アニメーション起動発令部において予め設定した、動画スペース要素表示後移動アニメーション実行手段によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段によるアニメーション、これら二つの前記手段で表示されるもの以外のアニメーション、カウントダウンタイマーのカウントダウンアニメーション、これらそれぞれの「アニメーションを実行して呼び出す」機能が働き、この「アニメーションを実行して呼び出す」機能がアニメーションに始動の命令を出すことで、前記アニメーションの進行を始動することができる。
【０１６０】
また、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされることを起点として、前記基準タイマー（図１の１１８）の時間の進行が始まる。
【０１６１】
つまり、これら二つの進行は、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされることが、その起点となる、という共通点をもっていることになる。そのため、前記の「予め設定した」アニメーションの時間進行と、前記基準タイマー（図１の１１８）の時間進行が一致するようになる。その結果、動画再生プレーヤーの再生の時間進行と、ウェブページ上に表示された要素が移動などの動的な連続アニメーションを行う場合の時間進行が、一致するようになる。
【０１６２】
こうすることで、ユーザー端末（図１の０４０）を利用するユーザーがウェブページを開いたときには、ウェブページに埋め込まれた動画も静止状態で、かつ、前記動画に関連付けられたウェブページ上のアニメーションも静止状態であったにもかかわらず、前記動画再生プレーヤーのスタートボタンが初回クリックないし初回タップされると、前記基準タイマーの時間進行にあわせて前記アニメーションが行われることになる。
【０１６３】
その結果、前記アニメーションについて、前記「動画によって映し出された内容の一部であると視聴者に感じ取らせるために、動画の内容に合わせてこれら内容と連動性をもたせる」という、ことができるようになる。また、複数のアニメーションを実行する場合、前記基準タイマーの時間進行を基準とすることができるため、アニメーション同士の連動性も可能となる。
【０１６４】
また、図１中、符号１１９の動画スペース要素表示後移動アニメーション実行手段は、前記の「予め設定した」アニメーションとして利用するものである。そして前述した動画スペース要素表示後移動アニメーション実行手段は、前記動画再生プレーヤーの枠内に要素を表示させるために、次の四つの特色をもつ。
【０１６５】
まず一つ目の特色は、たとえば次の段落で示すイメージのように、動画を再生させるためのコードに関連付けて、パラメータとなるwmodeが含まれ、その値をtransparentとすることである。
【０１６６】
2016178382.tif 000008
【０１６７】
次に二つ目の特色は、たとえば次の段落で示すイメージのように、前記表示要素にかかるCSSのプロパティにz-indexが含まれ、その値を１以上とすることである。そして三つ目の特色は、前記表示要素にかかるCSSのプロパティにpositionが含まれ、その値をabsoluteもしくはfixedとすることである。ただし、fixedにした場合には、ユーザーがウェブページをスクロールしてしまうと、動画と表示要素との位置関係がずれてしまうことがある。そして四つ目の特色は、前記表示要素にかかるCSSにおいて、前記表示要素の位置を前記動画再生プレーヤーの枠内になるように指定することである。
【０１６８】
2016178382.tif 000009
【０１６９】
こうすることで、前記動画再生プレーヤーの枠内に要素を表示させることができる（図８の２０２、図９の４０２、図１０の４０２）。また、前述した動画スペース要素表示後移動アニメーション実行手段については、以上の四つの特色に加えて、次の二つの特色がある。
【０１７０】
動画スペース要素表示後移動アニメーション実行手段の五つ目の特色は、動画スペース要素表示後移動アニメーション実行手段の名のとおり、以上の四つの特色をもったうえで、要素を表示させた後にその要素を移動させることである。この移動ではJavaScriptやjQuery（図１の１０２）を利用して、たとえば、前記表示要素について移動後の位置をCSSで指定して移動させるか、または、上下左右への移動距離を指定して移動させることになる。そして、この移動の特徴は前記動画再生プレーヤーの枠内から同枠外へと行うことである。
【０１７１】
動画スペース要素表示後移動アニメーション実行手段の六つ目の特色は、本発明の請求項１に記載のとおり、この手段によるアニメーションが動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）から出される命令の対象となっていることである。そして、その結果、前述のとおり、前記アニメーションが前記動画再生プレーヤーで再生される動画の再生開始、再生停止、一時停止、再生再開とタイミングを合わせることが可能となり、これにより前記アニメーションと前記動画の内容に連動性をもたせることが可能となる。
【０１７２】
前述した動画スペース要素表示後移動アニメーション実行手段には、以上の特色がある。
【０１７３】
ここで、たとえば、前記表示要素には.jpgや.pngの拡張子のほか、サッカーボールなどについては、回転している.gifのものを利用するとリアリティがでる（図８の２０２）。そして前記動画再生プレーヤーから飛び出してきたサッカーボールに企業のロゴなどを入れると効果的である。また、前記表示要素が画像の場合に、この画像に文字やハイパーリンクを含ませてコール・トゥ・アクションの効果を高めてもよい。
【０１７４】
一方、前記表示要素がメッセージボード（図９の４０２、図１０の４０２）の場合には、例えば、前記表示要素の全体を画像にするのではなくCSSを利用して表示し、前記メッセージボードの中にテキスト、画像、動画、フォーム、あるいはCSSや画像のボタンを含めてもよい（図９の４０３、同４０４、同４０５）。また、これらにハイパーリンクを含ませてコール・トゥ・アクションの効果を高めてもよい（図９の４０５）。さらに、前記表示要素がメッセージボードのように四角形の場合、前記表示要素自体を動画にしてもよく、この場合、動画再生プレーヤーの中に別の動画再生プレーヤーが表示されることになる。上でイメージを使って示したように、後者の動画再生プレーヤーが前者の動画再生プレーヤーの枠の中から飛び出したり、または回転しながら飛び出したりすると視聴者は驚くことになる。後で示すソースコードで実現できる動画埋め込み型ウェブページでは、動画再生プレーヤーの中に表示されたメッセージボードが指定したタイミングで横回転しながら拡大して飛び出すように設定している。
【０１７５】
また、図１中、符号１２０の動画スペース要素移動後消滅アニメーション実行手段は、前記の「予め設定した」アニメーションとして利用するものである。また、前述した動画スペース要素移動後消滅アニメーション実行手段（図１の１２０）は、前述した動画スペース要素表示後移動アニメーション実行手段で表示させた要素を、同じ動画再生プレーヤーの枠内の所定位置で消滅させるか、前記動画再生プレーヤーの枠外にある表示要素を同枠内の所定位置に移動させて消滅させる時に利用するものである（図１０の５０２及び同５０１）。
【０１７６】
この動画スペース要素移動後消滅アニメーション実行手段にも、前記動画再生プレーヤーの枠内に要素を表示させるために、前述した動画スペース要素表示後移動アニメーション実行手段の説明の箇所で示した「四つの特色」が必要となる。
【０１７７】
この動画スペース要素移動後消滅アニメーション実行手段の五つ目の特色は、この手段の名のとおり、以上の四つの特色をもったうえで、要素を移動させた後にその要素を消滅させることである。この移動が終わり次第、消滅するということではなく、この移動が終わり、その後、停止状態があって消滅してもよい。
【０１７８】
この移動ではJavaScriptやjQuery（図１の１０２）を利用して、たとえば、前記表示要素について移動後の位置をCSSで指定して移動させるか、または、上下左右への移動距離を指定して移動させることになる。そして、この移動の特徴は前記動画再生プレーヤーの枠外から同枠内へと行うことである。
【０１７９】
この動画スペース要素移動後消滅アニメーション実行手段の六つ目の特色は、本発明の請求項１に記載のとおり、この手段によるアニメーションが動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）から出される命令の対象となっていることである。そして、その結果、前述のとおり、前記アニメーションが前記動画再生プレーヤーで再生される動画の再生開始、再生停止、一時停止、再生再開とタイミングを合わせることが可能となり、これにより前記アニメーションと前記動画の内容に連動性をもたせることが可能となる。
【０１８０】
また、図１中、符号１２１の「アニメーション」は、請求項１に記載されたウェブページの動画再生プレーヤーの枠外のみで実行されるアニメーションを指し、前述した動画スペース要素表示後移動アニメーション実行手段によるアニメーション（図１の１１９）と同様に動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）と関係付けられ、前記動画再生プレーヤーの再生と連動性をもつアニメーションを指す。このアニメーションの一例としては、動画埋め込み型ウェブページを開いた時に自動再生されていない前記動画再生プレーヤーで、再生される動画に字幕を付けたい場合、前記動画自体に字幕を付けたりすると、文字が小さくなってしまう場合があるため、前記動画再生プレーヤーの枠外となる枠下で、テキストや画像に文字を入れたものを字幕としてアニメーションするとよい。
【０１８１】
また、図１中、符号１２２のカウントダウンタイマーは、前記「予め設定した」アニメーションと同様に、前述した動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）によって制御されるものでる。このため、前記カウントダウンタイマーは、前記動画再生プレーヤーのスタートボタンを初回クリックないし初回タップした場合、前記基準タイマー（図１の１１８）と時間の進行が一致する。
【０１８２】
また、前記カウントダウンタイマーは、カウントダウン完了時のタイミングで、前述した、動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）が行う処理と同様に、動画スペース要素表示後移動アニメーション実行手段（図１の１１９）によるアニメーション、動画スペース要素移動後消滅アニメーション実行手段（図１の１２０）によるアニメーション、あるいはアニメーション（図１の１２１）に対し命令を出すことができ、動画再生プレーヤー状態別アニメーション起動発令部（図１の１１７）と同様に予め設定したアニメーションを実行させることができる。
【０１８３】
前記カウントダウンタイマーの具体的な一例として、図８の２００のように表示することができる。
【０１８４】
なお、本発明により作成されるウェブページのもととなるデータ（図１の１０２から１０４および同１０７）については、WordPress などのプラグインとして準備し、これらのデータを符号１０１の記憶媒体へアップロードすると便利である。
【０１８５】
ついで、図２中、符号００１のＷｅｂサーバー装置は、本発明によるデータをアップロードする前の、一般的なＷｅｂサーバー装置の形態を表すブロック図で、符号００２の演算部、符号００３の出力部、符号００４の通信部、符号００５の入力部で構成されている。
【０１８６】
ついで、本発明の実施例として、動画埋め込み型ウェブページの作成の流れを分かりやすくするために、Ｗｅｂサーバー装置へアップロードする動画埋め込み型ウェブページのデータの作成方法のステップを、特にマルチデバイスに対応させる方法のステップを、図３のフローチャートを使って、説明する。
【０１８７】
図３中、ステップS１０１では、まず、マルチデバイスへの対応を意識せず、デバイスのスクリーンサイズを一つとして、たとえば、デスクトップ用の前記アニメーションを含む動画埋め込み型ウェブページを作る。もちろん、ここではデスクトップ用のスクリーンサイズを対象とせずタブレット型端末のスクリーンサイズや他のサイズのものを対象とすることもできる。重要なことは、ステップS１０１で、まずはマルチデバイスへの対応を気にせずにウェブページを作ることである。
【０１８８】
次に、図３中、ステップS１０２では、ステップS１０１で作成した前記アニメーションを含む動画埋め込み型ウェブページを（擬似的）レスポンシブ・ウェブデザインに対応させるかどうか決める。
【０１８９】
ここで「擬似的」と付けたのは、前述のとおり、レスポンシブ・ウェブデザインを支える主なコンセプトとして、固定幅のレイアウトとは対照的な流動性と比例性が挙げられる。そのため前記レスポンシブ・ウェブデザインでは幅の値に相対的な単位となるパーセントを利用することが推奨されている。
【０１９０】
だが、しかし、本発明では、前述した各アニメーションをマルチデバイスに対応しやすくするために、HTMLのbodyやwrapperなどの要素を表示するための土台となるものについて、前記「固定幅のレイアウト」を適用することを排除するものではない、としている。その理由は、JavaScriptやjQueryを利用した動的なアニメーションをマルチデバイスに対応させるためには、前記「固定幅のレイアウト」を利用した方が格段に手間を省ける、からである。
【０１９１】
本発明では、bodyやwrapperなどに前記「固定幅のレイアウト」を適用することを排除せず、これを利用するが、このこと以外は、レスポンシブ・ウェブデザインによる作成方法と同じである。そこで、ここでは（擬似的）レスポンシブ・ウェブデザインと呼ぶことにする。
【０１９２】
（擬似的）レスポンシブ・ウェブデザインに対応させない場合には、図３中、ステップS１０７へ進みステップS１０１で作成した前記アニメーションを含む動画埋め込み型ウェブページのデータをＷｅｂサーバーへアップロードする。一方、図３中、ステップS１０１で作成した動画埋め込み型ウェブページを（擬似的）レスポンシブ・ウェブデザインに対応させる場合には、ステップS１０３へ進む。
【０１９３】
図３中、このステップS１０３ではレスポンシブ・ウェブデザインに特有の処理を行う。その処理とは、たとえばHTMLのhead内に次の段落で示すイメージのようなviewportメタタグを入れることである。これは表示領域を設定するためのもので、例えば、スマートフォンではなにも設定しないとデスクトップなどのスクリーンサイズに対応して作成されたウェブページをその大きさのまま全体表示するために、この記述が必要となる。
【０１９４】
2016178382.tif 000010
【０１９５】
次に、図３中、ステップS１０４でも、レスポンシブ・ウェブデザインに特有の処理を行う。その処理とは、すでに作成したウェブページのコンテナ要素、画像、動画について、下のイメージのようなリキッドレイアウトを適用するほか、個々の画像のCSSにもそのサイズを示すプロパティとなるwidthなどの値に％を用いる。
【０１９６】
先ほど、前記「固定幅のレイアウト」を排除せず、これを利用すると説明したが、ウェブページのコンテナ要素、画像、動画については、リキッドレイアウトを適用する。また、これから作成するものにもリキッドレイアウトを適用する。特に、表示要素を動画再生プレーヤーから飛び出す要素とする場合で、かつ、拡大しながら飛び出す場合に、リキッドレイアウトを適用して、拡大しながら飛び出すことで、アニメーションにリアリティを出す。bodyやwrapperなどに前記「固定幅のレイアウト」を適用するのであれば、リキッドレイアウトを適用することは不要に思われるが、飛び出しにリアリティを出すためにも、リキッドレイアウトを適用する。リキッドレイアウトの例として、たとえば、次の段落で示すイメージのようなものがあげられる。
【０１９７】
2016178382.tif 000011
【０１９８】
次に、図３中、ステップS１０５ではデバイスサイズごとに全体的なCSSについて対応する。前記「すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更してウェブページを作成する手法をレスポンシブ・ウェブデザイン」ということに従い、前記「デバイスのスクリーンサイズの分岐点」を設定して、デバイスのスクリーンサイズの範囲ごとにCSSを使用してデザインを適応させていく。
【０１９９】
ここで出来上がったCSSについては、前記のとおり、リンクタグを利用して外部化しても、また、HTMLへ直書してもよい。そして、CSSは、単一のファイルにまとめて書いても、また、上で示したようにデバイスのスクリーンサイズごとに分けて書いてもよい。
【０２００】
次に、図３中、ステップS１０６では前述した各アニメーション用のJavaScriptについて、前記CSSと同様にデバイスサイズごとに対応を行う。これについては図４でフローチャートを使って説明する。
【０２０１】
現在、ウェブページを「マルチデバイス対応」とするためにレスポンシブ・ウェブデザインが世界的に広く採用されるようになってきた。前述のとおり、レスポンシブ・ウェブデザインは、単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更してウェブページを作成する手法であるために、その他の手法でマルチデバイスに対応させる場合により、メリットが大きい。
【０２０２】
が、しかし、レスポンシブ・ウェブデザインは、このステップS１０６の処理を行う必要があることが最大の欠点の一つでもある。そこで本発明では、このステップS１０６の処理の手間を簡素にするために、bodyやwrapperなどに前記「固定幅のレイアウト」を適用することを排除するものではない、としている。
【０２０３】
最後に、図３中、ステップS１０７では前述した各アニメーション用のJavaScriptについて対応が完了したデータを前記Ｗｅｂサーバーへアップロードする。
【０２０４】
ついで、本発明の実施例として、図４では、JavaScriptをマルチデバイスに対応させる方法のステップについて、その流れを分かりやすくするために、フローチャートを用いて説明する。このフローチャートでは、前記「課題を解決するための手段」の箇所で説明した各アニメーションを構成するJavaScriptについて、前記「デバイスのスクリーンサイズの分岐点」に合わせ分岐点を設けている。そして、この分岐点を用いて、前記（擬似的）レスポンシブ・ウェブデザインに対応した作成のステップを説明する。
【０２０５】
まず、図４中、ステップS２０１では、デバイスのスクリーンサイズの幅が1401px以上であるか調べる。デバイスのスクリーンサイズの幅が1401px以上であった場合には、ステップS２０２に進む。そして、デバイスのスクリーン幅が1401px以上のCSSデザインに合わせて、アニメーションを構成するJavaScriptを適応させる。この時、JavaScriptにおいてデバイスのスクリーンサイズの幅単位で条件分岐を行うとよい。この条件分岐を行うことでアニメーションの位置と動きを各CSSデザインに適応させる。一方、デバイスのスクリーンサイズの幅が1401px以上でなかった場合には、次のステップS２０３へ進む。
【０２０６】
次に、図４中、ステップS２０３では、デバイスのスクリーンサイズの幅が1024px以上1400px以下であるか調べる。デバイスのスクリーンサイズの幅が1024px以上1400px以下であった場合には、ステップS２０４に進み、デバイスのスクリーン幅が1024px以上1400px以下のCSSデザインに合わせて、アニメーションを構成するJavaScriptを適応させる。一方、デバイスのスクリーンサイズの幅が1024px以上1400px以下でなかった場合には、次のステップS２０５へ進む。
【０２０７】
最後に、図４中、ステップS２０５とステップS２０５でも、そのスッテプごとにテップS２０３と同様のことを行う。
【０２０８】
次に、図４中、ステップS２０９では、デバイスのスクリーン幅が479px以下のCSSデザインに合わせて、アニメーションを構成するJavaScriptを適応させる。
【０２０９】
以上が図４の説明である。
【０２１０】
ついで、図５では、動画埋め込み型ウェブページの動画と、その動画の上に表示される要素（サッカーボール）の作成ステップについて説明する。ここでは図８で示す、サッカー選手がサッカーボールを蹴って、そのボールが動画から飛び出すように見えるものを説明する。図９のメッセージボードが動画から飛び出すものについても、これと同じステップで作成していく。
【０２１１】
まず、図５中、ステップS３０１では、動画埋め込み型ウェブページの動画再生プレーヤー（図８の３０１）で再生される動画（図８のＡ）を用意する。前記動画の内容は、サッカーボールがないにもかかわらず、サッカーボールを蹴っている様子を撮影したものを用意する。例えば、次の段落で示すイメージのような瞬間のある動画を用意する。
【０２１２】
2016178382.tif 000012
【０２１３】
次に、図５中、ステップS３０２では、ステップS３０１で用意した動画をＷｅｂサーバーへアップロードする。この時、前記Ｗｅｂサーバーは、自前で管理するもののほかレンタルサーバーや動画共有サービスのものでもよい。ここでは前記動画を動画共有サービスが用意しているＷｅｂサーバーへアップロードする。
【０２１４】
次に、図５中、ステップS３０３では、ステップS３０２で動画共有サービスが用意しているＷｅｂサーバーへアップロードした動画の固有のID（Video ID）を把握する。そして次の段落で示すイメージは、前述した動画スペース要素表示後移動アニメーション実行手段（図１の１１９）についての説明でも用いた画像であるが、前記IDについて、下の画像の黒く塗りつぶした箇所にこのIDを入れる。この場合、動画再生プレーヤーに係るコードの中には、前記「四つの特色」の一つ目となる、パラメータ（parm）のウィンドモード（wmode）の値（value）が透明（transparent）となる「wmode=transparent」が入っていることが必要である。たとえば、次の段落で示すイメージでは、動画再生プレーヤーのコードの中に直接加える方法でこれらを記述した。こうすることで、前記動画と重なる表示要素について、CSSのZ-indexが効くようになり、前記動画の表面に要素を表示させる準備ができる。
【０２１５】
2016178382.tif 000013
【０２１６】
上のイメージでは「autoplay=0」になっており、これは前記動画が自動再生されないことを意味する。もし、自動再生した場合には上の「autoplay=0」を「autoplay=1」にするとよい。もちろん、これらをJavaScriptの中で記述してもよい。
【０２１７】
次に、図５中、ステップS３０４では、前記動画の上に表示される要素（表示要素）を準備する。ここで、前記表示要素となる画像には、拡張子が.jpgのものほか、背景色を透明にした.pngのもの、あるいはサッカーボールなどのボールについては回転している.gifのものを利用するとリアリティがでる。もしくは前記表示要素となる画像に動くものを当てたい場合には、背景色が透明で拡張子が.gifのものを利用する。
【０２１８】
たとえば、図１０のように動く人物やアバターを前記表示要素としたい場合に利用する。画像が用意できたら、画像を表示するimgタグを利用して画像をHTML内に組み込む。なお、前述のとおり、回転しているサッカーボールの背景色が透明の.gif拡張子のものを用意した場合には、後のステップS３０７が不要となる。
【０２１９】
次に、図５中、ステップS３０５では、ステップS３０４でHTML内に組み込んだ画像について、これをdivタグなどで囲み、前記タグ内でCSSと関連付けるためにid属性かclass属性を指定する。ここでは一例として次の段落で示すイメージのように設定した。
【０２２０】
2016178382.tif 000014
【０２２１】
次に、図５中、ステップS３０６では、ステップS３０５で設定したサッカーボールを前記動画再生プレーヤー内の任意の位置に表示できるように、上のid属性を使ってCSSで調節し設定する。次の段落で示すイメージに記述されている内容はその一例である。こうすることでtopとmargin-leftの値を変化させ、前記動画再生プレーヤー内の任意の位置で表示できるようにする。
【０２２２】
2016178382.tif 000015
【０２２３】
次に、図５中、ステップS３０７は、ステップS３０４でボールの画像の背景を透明処理していない場合に適用するものである。前記透明処理を行っていない場合には前記動画の上に四角形が表示され、その中にボールが存在するように表示される。このためサッカーボールがその下の動画と一体化しているように見えない。そこでステップS３０７は、前記id属性を使ってCSSでボールの周りの四角形部分を取り除く処理を行う。具体的な一例として次の段落で示すイメージのようにする。なお、下に示すようにサッカーボールの画像については、リキッドレイアウトとして幅（width）をパーセント（%）で表すことにより、徐々に拡大しながら飛び出すようにすることができる。また、この時、幅（width）をパーセント（%）で表す場合に、画像の元のサイズからの初期表示比率を100％より小さくしておくとよい。
【０２２４】
2016178382.tif 000016
【０２２５】
次に、図５中、ステップS３０８では、前記id属性を利用してJavaScriptやjQueryによるアニメーションのコードと前記サッカーボールの画像を関係付け、前記サッカーボールをアニメーションできるようにする。
【０２２６】
次に、図５中、ステップS３０９では、前記動画でサッカーボールを蹴る瞬間、前記基準タイマーをもとにした、前記動画再生プレーヤーに表示される時間について、時間スライダ（図８の３０３）や表示時間をもとにこれを把握する。なぜなら、前述のとおり、本発明では前記基準タイマーの経過時間と、前記動画の表面に表示されるアニメーションの進行時間を同期させることが可能になるからである。
【０２２７】
次に、図５中、ステップS３１０では、前記id属性を利用して、ステップS３０９で把握した時間の前に、サッカーボールが蹴られる位置にサッカーボールを移動させるか、または出現させる。本発明の実施例では、上から落ちてきたサッカーボールが大きくバウンドした後に細かくバウンドして、サッカーボールが蹴られる位置に向かうようにしている。
【０２２８】
最後に、図５中、ステップS３１１では、ステップS３０９で把握した時間に、前記id属性を利用して、前記サッカーボールが動いて飛び出すように、JavaScriptやjQueryを設定する。この飛び出すという移動の方法については前述のとおりである。
【０２２９】
以上が図５の説明である。
【０２３０】
ついで、図６については、本発明の一実施形態の動画スペース要素表示後移動アニメーション実行手段に係る処理ステップを示すフローチャートである。
【０２３１】
まず、図６中、ステップS４０１では、動画再生プレーヤー状態別アニメーション起動発令部からの命令の有無について判断がなされ、この命令があった場合には次のステップS４０２へ進み、この命令がなかった場合には動画再生プレーヤーの枠内で表示要素のアニメーションがなにも起こらない結果となる。
【０２３２】
次に、図６中、ステップS４０２では、前記命令を受け、要素が動画再生プレーヤーで再生される動画の表面に現れる。もしくは、後で示す本発明の一実施形態のソースコードのように、表示要素が移動しながら動画再生プレーヤーで再生される動画の表面に現れる。
【０２３３】
次に、その後、図６中、ステップS４０３では、前記表示要素が動画再生プレーヤーで再生される動画の表面で停止の状態を維持するか否かの判断がなされ、停止の状態を維持する場合には次のステップS４０４へ進み、停止の状態を維持しない場合にはステップS４０５へ進む。
【０２３４】
次に、図６中、ステップS４０４では、前記表示要素が動画再生プレーヤーで再生される動画の表面で停止の状態を維持する処理が行われ、次のステップS４０５へと進む。
【０２３５】
最後に、図６中、ステップS４０５では、前記表示要素が動画再生プレーヤーの枠内から同枠外へと移動する処理が行われる。
【０２３６】
ついで、図７については、本発明の一実施形態の動画スペース要素移動後消滅アニメーション実行手段に係る処理ステップを示すフローチャートである。
【０２３７】
まず、図７中、ステップS５０１では、動画再生プレーヤー状態別アニメーション起動発令部からの命令の有無について判断がなされ、この命令があった場合には次のステップS５０２へ進み、この命令がなかった場合には動画再生プレーヤーの枠内で表示要素のアニメーションがなにも起こらない結果となる。
【０２３８】
次に、図７中、ステップS５０２では、動画再生プレーヤーの枠外に表示される要素が同枠内へ移動する処理が行われる。
【０２３９】
次に、その後、図７中、ステップS５０３では、前記要素が動画再生プレーヤーで再生される動画の表面で停止の状態を維持するか否かの判断がなされ、停止の状態を維持する場合には次のステップS５０４へ進み、停止の状態を維持しない場合にはステップS５０５へ進む。
【０２４０】
次に、図７中、ステップS５０４では、前記要素が動画再生プレーヤーで再生される動画の表面で停止の状態を維持する処理が行われ、次のステップS５０５へと進む。
【０２４１】
最後に、図７中、ステップS５０５では、前記要素が動画再生プレーヤーの枠内で消滅ないしfadeoutする処理が行われる。
【０２４２】
ついで、図８の動画埋め込み型ウェブページの作成方法について、特にそのうちの動画と動画の表面に表示する要素の作り方について、説明する。
【０２４３】
図８中、動画等の作成方法については、図８の符号「Ｂ，２０１」のサッカー選手を、最初から実写にするか、もしくはクロマキーなどを利用してサッカー選手を別に撮影した後にこのサッカー選手だけ抜き出して、その後、抜き出したサッカー選手の動画と背景となる動画を合成させるか、それとも動画ではなくウェブ上のアニメーションとするか、の作成方法がある。
【０２４４】
一方、図８の符号「Ｃ，２０２」のサッカーボールについては、実写で行うか、それとも動画ではなくウェブ上のアニメーションとするかの作成方法がある。実写で行う場合には、後でウェブ上のアニメーションと入れ替える必要がある。
【０２４５】
図８中、サッカーボールのアニメーション要素が、図１の符号１１９となる動画スペース要素出現実行手段を用いて、図８の符号２０２の位置に出現してから符号２０６の位置まで拡大しながら移動することについては、次のようになる。JavaScriptやJQuery（図１の１０２）を利用してサッカーボールを符号２０２の位置に出現させるか、別の位置にあるサッカーボールを符号２０２の位置まで移動させる。そして、同じくJavaScriptやJQuery（図１の１０２）を利用してサッカーボールを同２０２の位置から同２０６の位置へ拡大しながら移動させる。後で示す本発明による実施例のソースコードでは、サッカーボールが上から落ちてきて大きくバウンドした後に、小刻みにバウンドする。このバウンドが終了した瞬間、動画に映し出されるサッカー選手がこのサッカーボールを蹴り、このサッカーボールが同２０２の位置から同２０６の位置へ拡大しながら移動する処理を記載している。
【実施例２】
【０２４６】
ついで、図９の動画埋め込み型ウェブページの作成方法について、特にそのうちの動画と動画の表面に表示する要素の作り方について、説明する。この動画埋め込み型ウェブページの作成方法についても、前記図１から図４までと前記図６および図７については同様に適用する。一方、図５については、その概要を参考にするとよい。
【０２４７】
図９中、符号４０２、４０３については、図８で作成方法を示したサッカーボール同様に画像でもよいが、CSSとテキストで表示することもできる。
【０２４８】
図９の符号４０２のメッセージボードに書かれている内容について、視聴者の関心を引き付けてインパクトを与えながら強調したい場合には、要素表示後移動アニメーション実行手段を利用して同４０２のメッセージボードを同４０３の位置まで拡大させながら、また、回転させながら、飛び出させるとよい。後で示す本発明による実施例のソースコードでは、メッセージボードが回転しながら拡大して飛び出すように設定を行っている。ただし、本発明の出願時点で、一部のブラウザのみ回転ができず、移動しながら拡大するだけである。
【０２４９】
また、図９の符号４０５の申込用のボタンについては、申し込みフォームへのリンクを入れるとよい。あるいは、同４０３のメッセージボードの中にフォームを設けてもよい。もしくは、同４０３のメッセージボードの中に動画を入れてもよい。この場合、動画の中から動画が飛び出すことになる。そして、同４０３のメッセージボード自体を動画としてもよく、この場合にも、動画の中から動画が飛び出すことになる。
【０２５０】
こうすることで、視聴者の注目を集めながら、最も訴求したいことを記載したメッセージボードが拡大することにより、従来の技術（特許文献１）がかかえる前記課題を解決することができる。
【０２５１】
後で示す本発明による実施例のソースコードでは、図９の符号４０３のメッセージボードが一定時間後に消滅するように設定している。こうすることで、視聴者に対し希少性と緊急性を訴求することができる。この場合、図９の符号４０２および同４０３メッセージボードにタイムセールなどのキャンペーンについてのメッセージを記載しておくとクリック率が格段に向上すると見込まれる。また、同様に数量限定のキャンペーンを記載しておくとクリック率が格段に向上すると見込まれる。
【０２５２】
図９の符号Ｄについては、人物の写真やアバターを用意し、この写真やイラストに目や口の位置を設定するだけで音声データに合わせてしゃべらせることができる市販のソフトを利用して、しゃべるというアニメーションを作成して利用してもよい。その後、同アニメーションを図９の符号Ａの動画に重ねて合成するとよい。こうすることで、見た目には、概ね従来の技術（非特許文献１）と同等のことが実現できるうえに、安価に実現することができる。なお、この時、しゃべる音声は前記Ａの動画に含めてもよく、また、音声プレーヤーを別に用意してもよい。
【実施例３】
【０２５３】
ついで、図１０の動画埋め込み型ウェブページの作成方法について、特にそのうちの動画と動画の表面に表示する要素の作り方について、説明する。この動画埋め込み型ウェブページの作成方法についても、前記図１から図４までと前記図６および図７については同様に適用する。一方、図５については、その概要を参考にするとよい。
【０２５４】
図１０中、符号４０２については、図８で作成方法を示したサッカーボール同様に画像でもよいが、CSSとテキストで表示することもできる。
【０２５５】
動画の内容をわかりやすく解説を行うために必要となる図１０の符号５０１のナレーターやアバターについては、それを表示しつつ、かつ、図１０の符号４０２のメッセージボードに書かれた内容を強調するために同メッセージボードを拡大したい場合には、前述した要素表示後移動アニメーション実行手段を用いて、前記５０１の位置にいるナレーターやアバターを同５０２の位置に移動させるとよい。
【０２５６】
また、このことを、前述のとおり、縁なしのflashプレーヤーで再生する動画として、背景が透明になるように市販のソフトで処理して、前記動画再生プレーヤーの中から移動するようにしてもよい。
【０２５７】
こうすることで従来の技術（特許文献１）がかかえる前記課題を解決することができる。
【０２５８】
図１０の符号Ｄについても、図９の符号Ｄと同様に、人物の写真やアバターを用意し、この写真やイラストに目や口の位置を設定するだけで音声データに合わせてしゃべらせることができる市販のソフトを利用して、しゃべるというアニメーションを作成して利用してもよい。その後、同アニメーションを図１０の符号Ａの動画に重ねて合成するとよい。こうすることで、見た目には、概ね従来の技術（非特許文献１）と同等のことが実現できるうえに、安価に実現することができる。なお、この時、しゃべる音声は前記Ａの動画に含めてもよく、また、音声プレーヤーを別に用意してもよい。以上が実施例３についてである。
【０２５９】
ついで、図１１については、本発明による動画埋め込み型ウェブページを作成する際の台本の一例で、動画埋め込み型ウェブページの動画の再生経過時間と前記アニメーションなどとの関係を分かりやすく一覧にしたものである。
【０２６０】
このように、まず動画を用意して、動画の再生経過時間とアニメーションを開始したい時点を把握してから作成すると、本発明による動画埋め込み型ウェブページを作成しやすくなる。
【０２６１】
ついで、図１の符号１０８のデータベースでは、図１２に示すように、たとえば、図９のボタンのリンク先ページへのアクセス数や、アクセス先のページから離脱した数、あるいは、その離脱率が演算され、また、図１３に示すように、リンク先ページの通過数や通過率、さらには、リンク先ページからの遷移先が集計されて、記録される。さらには、同データベースには、図１４に示すように、前記リンク先ページに、たとえば、購入や参加申し込みのページが含まれている場合において、その購買若しくは参加に至った数が集計され、記録される。したがって、前記アクセスデーターから、視聴者ないしウェブページ閲覧者のアクセスの傾向が把握される。
【０２６２】
これによって、視聴者ないしウェブページ閲覧者の興味の傾向等をウェブページに反映させることができ、視聴者ないしウェブページ閲覧者の要求に即した動画ないし動画埋込型ウェブサイトを提供することが可能となる。あるいは、視聴者ないしウェブページ閲覧者の興味を作成者の意図する方向へ誘導する動画ないし動画埋込型ウェブサイトを作成することができる。
【０２６３】
さらには、営業先に対し、予め、このようにして作成された動画埋込型ウェブサイトのＵＲＬを電子メールに添付して送ることにより、効果的に自社の製品をプレゼンテーションすることができ、企業の営業活動が効率化する。
【実施例４】
【０２６４】
前述のとおり、以下に本発明の実施例としてのソースコードを開示する。この実施例では実施例１のサッカーボールと実施例２のメッセージボードの両方を取り入れたものである。
【０２６５】
まず、前記ソースコードを含むファイルの構成から説明する。図１の符号１００のサーバーへアップロードする前のフォルダないしファイルの外観は、次の段落で示すイメージのようになる。
【０２６６】
2016178382.tif 000017
【０２６７】
まず、上のイメージのCSSフォルダの中は次の段落で示すイメージとおりである。このイメージの五つのCSSファイルを代表してstyle-note-pc.CSSのソースコードの内容を後で開示する。この五つのファイルは、上のメディアクエリの箇所で説明した、CSSファイルを外部化してリンクタグをHTMLのhead内に設定したもの、と対応するものである。
【０２６８】
2016178382.tif 000018
【０２６９】
次に、上のimagesフォルダの中は次の段落で示すイメージのとおりである。そのboll.gifは、動画再生プレーヤーの枠内に表示させるもので、後で開示するソースコードでは、立体的なサッカーボールが回転しているものを使用している。ここではサッカーボールの背景は手間を省くために画像として透明処理せず、CSSの円形表示を利用して背景を切り取り、またその背景を透明にすることで、動画の上に円形のままで表示させている。次の段落の「詳細はこちらから」ボタンは一般的な画像のボタンを利用しHTMLでリンクを設定して使用している。同じく次の段落の最後の画像となるtobidashi-1とtobidashi-2については、メッセージボードの構成要素として、動画再生プレーヤーの中から飛び出し、Y軸を中心として回転しながら拡大するようにしている。ただし、本発明の出願時点で、一部のブラウザでは回転は行われず拡大されるだけである。この二つの画像は、同じ画像に、女性が叫んだ内容の文字部分だけを替え、画像にマウスをのせた場合に切り替わって表示するようにしている。また、コール・トゥ・アクションを行うためにこの画像にはリンクを設定している。
【０２７０】
2016178382.tif 000019
【０２７１】
ここで、前記boll.gifに置き換えて、拡張子が.gifで動くアバターやナレーターの画像を用いる場合には、たとえば、次のように行うとよい。拡張子が.gifのこの画像を、一旦、静止画像に分解して背景に透明処理を行い、再び、統合して拡張子が.gifの動く画像として処理すれば、前記動画再生プレーヤーの中で再生される動画に映し出された人物が、前記動画再生プレーヤーの中から飛び出してくるようにすることもできる。また、この場合、拡張子が.gifの画像としてではなく、縁なしのflashプレーヤーで再生する動画として、背景が透明になるように市販のソフトで処理し、そして前記動画再生プレーヤーの中から飛び出すようにしてもよい。
【０２７２】
次に、上のjsフォルダの中は次の段落で示すイメージのとおりである。そのanimation-runner.js、count-down-timer.js、script.js、tobidashi.js、それとyoutube-publisher.jsについては、後でソースコードを開示する。残りのiframe_api.js、jquery.pause.min.js、そしてjquery-1.8.3.min.jsについては、インターネット上に公開されているため、あとの段落でそのリンク先を示す。なおjquery-1.9以降のバージョンを利用した場合、jquery-1.9以降のバージョンは、それより前のjQueryと比べ内容が大きく変更されたために、これを単純に利用しただけでは、飛び出した要素を回転させようとしても回転しないため、注意が必要である。
【０２７３】
2016178382.tif 000020
【０２７４】
次に、前述のとおり、前記iframe_api.js、jquery.pause.min.js、そして前記jquery-1.8.3.min.jsについては、インターネット上に公開されているため、そのリンク先を示す。
【０２７５】
2016178382.tif 000021
【０２７６】
それでは、前述のとおり、本発明の実施例４についてソースコードを開示する。まず、次の段落で示す表１のソースコードは、上のindex.htmlのものである。
【０２７７】
【表１−１】
2016178382.tif 000022
【表１−２】
2016178382.tif 000023
【表１−３】
2016178382.tif 000024
【０２７８】
次の段落で示す表２のソースコードは、上のCSSフォルダのうちstyle-note-pc.cssのものである。CSSフォルダのうち他のものは、このstyle-note-pc.cssの内容から推測できるものであるため省略する。
【０２７９】
【表２−１】
2016178382.tif 000025
【表２−２】
2016178382.tif 000026
【表２−３】
2016178382.tif 000027
【表２−４】
2016178382.tif 000028
【表２−５】
2016178382.tif 000029
【０２８０】
次の段落で示す表３のソースコードは、上のanimation-runner.jsのものである。
【０２８１】
【表３−１】
2016178382.tif 000030
【表３−２】
2016178382.tif 000031
【表３−３】
2016178382.tif 000032
【０２８２】
次の段落で示す表４のソースコードは、上のcount-down-timer.jsのものである。
【０２８３】
【表４−１】
2016178382.tif 000033
【表４−２】
2016178382.tif 000034
【表４−３】
2016178382.tif 000035
【表４−４】
2016178382.tif 000036
【表４−５】
2016178382.tif 000037
【０２８４】
次の段落で示す表５のソースコードは、上のscript.jsのものである。
【０２８５】
【表５−１】
2016178382.tif 000038
【表５−２】
2016178382.tif 000039
【表５−３】
2016178382.tif 000040
【表５−４】
2016178382.tif 000041
【表５−５】
2016178382.tif 000042
【表５−６】
2016178382.tif 000043
【表５−７】
2016178382.tif 000044
【表５−８】
2016178382.tif 000045
【表５−９】
2016178382.tif 000046
【表５−１０】
2016178382.tif 000047
【表５−１１】
2016178382.tif 000048
【表５−１２】
2016178382.tif 000049
【表５−１３】
2016178382.tif 000050
【表５−１４】
2016178382.tif 000051
【表５−１５】
2016178382.tif 000052
【表５−１６】
2016178382.tif 000053
【表５−１７】
2016178382.tif 000054
【表５−１８】
2016178382.tif 000055
【表５−１９】
2016178382.tif 000056
【表５−２０】
2016178382.tif 000057
【表５−２１】
2016178382.tif 000058
【表５−２２】
2016178382.tif 000059
【０２８６】
次の段落で示す表６のソースコードは、上のtobidashi.jsのものである。
【０２８７】
【表６−１】
2016178382.tif 000060
【表６−２】
2016178382.tif 000061
【表６−３】
2016178382.tif 000062
【表６−４】
2016178382.tif 000063
【表６−５】
2016178382.tif 000064
【０２８８】
次の段落で示す表７のソースコードは、上のyoutube-publisher.jsのものである。
【０２８９】
【表７−１】
2016178382.tif 000065
【表７−２】
2016178382.tif 000066
【表７−３】
2016178382.tif 000067
【産業上の利用可能性】
【０２９０】
概ねインターネット上の売上は、アクセス数（ａ）に成約率（ｂ）を乗じて、これに商品やサービスの単価を乗じたものである。本発明による動画埋め込み型ウェブページは、従来技術にはないものを取り入れていることもあり、まず閲覧者を驚かせることができる。そのため話題性がある。その結果、アクセス数（ａ）の増加につながる。また、訴求力や説得力の高い動画の内容とアニメーションを組み合わせてコール・トゥ・アクションを行っているため、ウェブページ上の成約率（ｂ）やコンバージョン率を改善させることができる。そのため、企業や個人事業主が運営するウェブサイトにおいて売上増加が期待できる。また、本発明によって作成されたプレゼンテーション用の動画埋込型ウェブサイト（図８から図１１）のＵＲＬを電子メールに添付して営業先に送ることにより、送信元の会社の営業が効率化できるだけではなく、営業先の担当者が営業マンによる訪問で時間を拘束される時間が減り、社会全般的に企業活動が効率化できる。
【符号の説明】
【０２９１】
００１  Ｗｅｂサーバー装置概略
００２  演算部
００３  出力部
００４  通信部
００５  入力部
００６  記憶部
０１０  アップロード用ローカル端末
０２１  ネットワーク
０２２  ネットワーク
０２３  ネットワーク
０３０  動画配信Ｗｅｂサーバー装置（動画共有サービスを利用する場合など）
０４０  ユーザー端末
１００  Ｗｅｂサーバー装置
１０１  記録媒体
１０２  １０１のうちJavaScriptないしJQuery
１０３  １０１のうちＨＴＭＬ
１０４  １０１のうちCSS
１０５  １０１のうち画像
１０６  １０１のうち動画（動画共有サービスを利用せず動画をアップロード）
１０７  １０１のうちＰＨＰ
１０８  データベース
１０９  CSSスクリーンサイズ条件分岐選択部
１１０  JavaScriptスクリーンサイズ条件分岐選択部
１１１  デバイステーブル
１１２  要求処理部
１１３  デバイスサイズ取得部
１１４  応答処理部
１１５  表示部
１１６  動画再生プレーヤー情報処理部
１１７  動画再生プレーヤー状態別アニメーション起動発令部
１１８  基準タイマー
１１９  動画スペース要素表示後移動アニメーション実行手段
１２０  動画スペース要素移動後消滅アニメーション実行手段
１２１  アニメーション（１１９及び１２０で実行されるもの以外のアニメーション）
１２２  カウントダウンタイマー
２００  カウントダウンタイマー（カウントダウンアニメーションが行われる場所）
２０１  ウェブページ上のアニメーション要素となるアバター
２０２  ウェブページ上のアニメーション要素となるサッカーボール（出現場所）
２０３  ウェブページ上のアニメーション要素となるサッカーボール（移動途中１）
２０４  ウェブページ上のアニメーション要素となるサッカーボール（移動途中２）
２０５  ウェブページ上のアニメーション要素となるサッカーボール（移動途中３）
２０６  ウェブページ上のアニメーション要素となるサッカーボール（最終位置）
３０１  動画再生プレーヤー
３０２  一時停止ボタン
３０３  時間スライダ
４０１  ウェブページ上のアニメーション要素となるナレーターないしアバター
４０２  動画の中に表示されるメッセージボード
４０３  図９の符号４０２の位置から同４０３の位置まで移動してアニメーションを行い、または拡大しながら移動してアニメーションを行い、もしくは拡大しながら回転をして、かつ、移動するというアニメーションを行ったメッセージボード
４０４  メッセージボード内のメッセージ
４０５  お申し込みフォーム等のウェブページへのリンクを含んだお申し込みボタン
５０１  動画再生プレーヤーの枠内に表示される、ウェブページ上のアニメーション要素となるナレーターないしアバター
５０２  動画再生プレーヤーの枠外に表示される、ウェブページ上のアニメーション要素となるナレーターないしアバター
６０１  ウェブページ上における動画再生プレーヤーの再生の経過時間及びアニメーションの開始時間
６０２  ６０１に対応して時系列でアニメーションの要素を指定するためにid属性（ないしclass属性）の要素名を決め、ＨＴＭＬのdivタグに入れたもの
６０３  アニメーション開始時間を示す前記６０１に記載の時間から、アニメーションが消滅するまでの秒数を記載したもの
６０４  アニメーションが出現したあとに移動する場合、移動の方向を記載したもの
６０５  前記６０１のアニメーション開始時間に、どの位置に出現するか概要を記載したもの。また、要素の重なりが多くなった場合に要素の非表示に備え、要素の重なりを表すz-indexについて、ｚを頭に付けて数字で重なり順を記載したもの
６０６  アニメーション要素がすぐ特定できるようにメモ書きしたもの
Ａ  撮影された動画
Ｂ  前記Ａで実際に撮影されたサッカー選手、あるいはクロマキーを利用して前記Ａに後から合成されたサッカー選手。なお、このサッカー選手と同じものを指すが、図８の符号２０１は動画として撮影されたものではなく、ウェブページ上のアニメーション要素となるサッカー選手ないしアバターとなるもの
Ｃ  前記Ａで実際に撮影されたサッカーボールあるいはクロマキーを利用して前記Ａに後から合成されたサッカーボール、もしくはこの両者が途中から入れ替わったもの
Ｄ  前記Ａで実際に撮影されたナレーター、あるいはクロマキーを利用してＡに後から合成されたナレーター
α  動画を埋め込むウェブページ
【図１】
2016178382.tif 000068
【図２】
2016178382.tif 000069
【図３】
2016178382.tif 000070
【図４】
2016178382.tif 000071
【図５】
2016178382.tif 000072
【図６】
2016178382.tif 000073
【図７】
2016178382.tif 000074
【図８】
2016178382.tif 000075
【図９】
2016178382.tif 000076
【図１０】
2016178382.tif 000077
【図１１】
2016178382.tif 000078
【図１２】
2016178382.tif 000079
【図１３】
2016178382.tif 000080
【図１４】
2016178382.tif 000081