「CSS3」タグの記事一覧

HTML5と「ゲーム性」がすべてを変える: ブラウザゲームに学ぶ「インタラクティブ性」と「エンターテイメント性」

By 倉田 幸暢 (Yukinobu Kurata)

 

遊びをせんとや生(うま)れけむ

戲(たはぶ)れせんとや生(むま)れけん

遊ぶ子供の声聞きけば

我が身さへこそ動(ゆる)がるれ

――― 「四句神歌」、『梁塵秘抄』 (*1) (*2)

「遊ぶものは神である。
 
 神のみが、遊ぶことができた。
 
 遊は絶対の自由と、
 ゆたかな創造の世界である。
 
 それは神の世界に外ならない。
 
 この神の世界にかかわるとき、
 人もともに遊ぶことができた。」

――― 白川静、『文字逍遥』 (*3)

「石油は人間の頭のなかで見つかる」

――― ダニエル・ヤーギン、『探求』 (*4)

 

ここでは、下の動画のような、HTML5をつかったブラウザゲームをいくつか紹介しながら、「遊び」、「学び」、「集客・販売」の未来についてお話していきます。

続きを読む

  1. (「遊びをせんとや生(うま)れけむ
      戲(たはぶ)れせんとや生(むま)れけん
      遊ぶ子供の声聞きけば
      我が身さへこそゆるがるれ」
    、編集:西郷信綱、『梁塵秘抄』、ちくま学芸文庫、筑摩書房、2004年、19ページ) [↩ Back]
  2. (「遊びをせんとや生(うま)れけむ、戲(たはぶ)れせんとや生(むま)れけん、遊ぶ子供の聲(こえ)きけば、我が身さへこそ動(ゆる)がるれ。」、校訂:佐佐木信綱、三五九(359)、「雜八十六首」(雑八十六首)、「四句神哥 百七十首」(四句神歌)(しくかみうた)、「梁塵祕抄 卷第二」(梁塵秘抄 巻第二)、『新訂 梁塵秘抄』、岩波文庫 黄 22-1、岩波書店、1941年、66ページ) [↩ Back]
  3. (白川静、「遊字論」、『文字逍遥』、平凡社ライブラリー、平凡社、1994年、10ページ) [↩ Back]
  4. (ダニエル・ヤーギン(Daniel Yergin)、(訳 伏見威蕃)、「結論−"偉大な革命"」、『探求――エネルギーの世紀(下)』、2012年、433ページ) [↩ Back]

YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み (IFrameプレーヤーAPI(JavaScript))

By 倉田 幸暢 (Yukinobu Kurata)

ここでは、「YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を最後まで再生すると、それと同時にリダイレクトで別のページに飛ばされます。(話をわかりやすくするために、動画は50秒ほどの短いものにしています。)

これによって、「動画を最後まで見た人をあらかじめ設定しておいたページに自動的に移動させることができる」という仕組みをつくることができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

動画を最後まで見た後、視聴者の操作を待たずにリダイレクトで自動的に、セールスレターや、オプトインページなどに移動させたいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画の一時停止ができないようにする仕組み (IFrameプレーヤーAPI(JavaScript))

By 倉田 幸暢 (Yukinobu Kurata)

ここでは、「YouTube動画の一時停止ができないようにする」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめると、画面をクリックして一時停止にしようとしても動画を止めることはできません。(コントロールバーは非表示にしているので、一時停止ボタンを押すことはできません。)

これによって、「動画を見はじめたら最後まで見るしかなくなる」という仕組みをつくることができます。ページを再読み込みすれば動画の再生は止まりますが、そうすると、つぎに動画を見るときは、またいちばん最初から見なおさなければならなくなります。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

セールスレターや、オプトインページなどで、途中で動画の再生を止めずに、動画の内容をいっきにすべて見てほしいという場合に、この仕組みをつかうといいでしょう。

誰でもかんたんにつかえるように、設定項目はできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

YouTube動画と連動してあらかじめ設定した時間になると購入ボタンが表示される仕組み (HTML、IFrameプレーヤーAPI(JavaScript)、CSS)

By 倉田 幸暢 (Yukinobu Kurata)

ここでは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みの実例と、その仕組みをカスタマイズしてつかう方法をお話します。

下は、この仕組みの実例です。YouTube動画を再生しはじめてから、一定時間(20秒)が経過すると、動画の下に購入ボタンが表示されるように設定しています。

途中で一時停止すると、カウントダウンタイマーも一時停止します。もう一度再生をはじめると、カウントダウンタイマーも動き出します。これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

下の実例の上部の「HTML」タブを押すと、この仕組みのソースコード(HTML、JavaScript、CSS)を見ることができます。

上の実例の上部のメニューバーのなかのタブやボタンの内容は、つぎのとおりです。
左端のロゴマーク: ソースコードと実行画面を左右に表示。
「Readme」タブ: この仕組みの概要や著作権についての情報。
「HTML」タブ: この仕組みのソースコード(HTML、JavaScript、CSS)。
「Play/Stop」ボタン: ソースコードの実行/停止。
右端の黒いボタン: 全画面表示。

ソースコードのダウンロードは、こちらをクリックGitHubのリポジトリ

動画マーケティングに応用する方法

この仕組みは、「YouTube動画と連動して、あらかじめ設定した時間になると購入ボタンが表示される」という仕組みです。

わかりやすくいうと、「動画の内容をちゃんと見た人だけつぎのステップに進める」という仕組みです。

動画セールスレターや、オプトインページなどでこの仕組みをつかうと、効果的です。

もし、動画の下にはじめから購入ボタンがついていたら、それを見た人は「この動画は売り込みのための動画だ!」とおもって、抵抗感がうまれてしまいます。

これでは、提案を受け入れてもらいにくくなってしまいます。

そうではなく、はじめは購入ボタンを表示させないようにしておいて、抵抗感なく動画を見はじめてもらい、動画のなかで興味を引いてから、頃合いを見計らって購入ボタンを表示する。

こうすれば、抵抗感を引き起こさずに、自然な流れで提案をおこなうことができるので、提案を受け入れてもらえる確率があがります。

その結果として、成約率やオプトイン率が上がるでしょう。

また、このカウントダウンタイマーは、YouTube動画の一時停止/再生と連動して動きます。なので、動画を一時停止するとカウントダウンタイマーも一時停止し、もう一度動画の再生をはじめると、カウントダウンタイマーも動き出します。

これによって、「指定した時間まで動画が再生されたときだけ、購入ボタンを表示させる」という仕組みを実現することができます。

僕が知るかぎり、このような仕組みはこれまで有料のツールでしか実現できませんでした。

それが、今や、完全に無料で誰でも自由につかうことができるようになりました。

科学の勝利ですね(笑)。

あと、誰でもかんたんにつかえるようにするために、設定項目もできるだけわかりやすくしました。

興味があれば、ぜひこの仕組みをつかってみてください。

続きを読む

メルマガ登録
いろんな分野のごちゃまぜメルマガ
PR