スマホ向けHTML5ゲームのすべて

山田元康氏:こんにちは。今日は「スマホ向けHTML5ゲームのすべて」ということで、HTML5ゲームとは何か、ご存じの方いらっしゃいますか?

基本的に、App StoreやGoogle Playからダウンロードするゲームのことを「ネイティブアプリ」と呼ぶんですが、それに対してブラウザゲームのことを「HTML5ゲーム」という言い方をしています。

まず簡単に自己紹介をさせていただきます、私は山田元康と申します。もともとは1999年にスパイシーソフトという会社を立ち上げまして、「アプリ☆ゲット」というガラケー向けのポータルサイト・ストアを運営していました。

そこからいろんなことをやってきました。最初に始めたのが「アプリ☆ゲット」なんですが、その次は「SpicyDog Builder」という、簡単に言うとMacromedia Flashみたいなものですね。パソコン上でFlashみたいなかたちでGUIを使ってタイムラインでいろいろ編集してボタンを押すとJavaのアプリができあがる、というものを開発していました。

そのあとは、「アプリ☆ゲット」というアプリのポータルサイトに投稿された個人のゲームを買い取ったり、一緒にジョイントベンチャーを作ったりしながらマネタイズをしていって、タイトルの続編を展開していくビジネスをやっていました。

その時には、『チャリ走』や『糸通し』というゲームが2004〜2005年ぐらいまで人気だったので、それらのタイトルを買い取って、ドコモさんの公式サイトで月額300円の会員サイトを立ち上げました。最盛期は30万人ぐらい有料会員がいたような感じのサービスをやってました。

その後ソーシャルゲームに手を出して1回大やけどをして、億単位の大損をしたことがあるんですけれども、なんかちょっとちゃうなと。いろんなことをやって中小企業になっているけど、もっとスタートアップみたいにリスクをとって大きなところをを目指したいなと思ってまして、新しくLiberappという会社を1年前に立ち上げました。ここは「HTML5のゲームのApp Storeみたいなものを作る」ということを思ってやっています。

HTML5とは何か

まずは「HTML5とは何か? なぜHTMLなのか?」というところをお話ししたいと思います。

あえてゲーム場合にHTML5という言い方をするのは、Google PlayたApp Storeのようなところとは別に、ブラウザ上で自由にゲームを配信しましょうと。当然ブラウザ上でゲームを作る以上はHTMLの技術を使って作らなくてはいけないので、ブラウザ上のゲームのことを「HTML5ゲーム」と呼んでいます。

一応、正確な定義として、これ「エイチティーエムエル・ファイブ」と読むんですけれども、業界読みというか中国風の読み方がありまして、「H5」と書いて「エイチユー」と読みます。

細かいことを飛ばしていくと、HTML5というのは、HTMLの5回目のバージョンアップしたものです。2008年にドラフトが発表されていて、2014年に正式に勧告されているとおり、けっこう前からHTML5という技術はあります。

HTML5自体はなぜ登場したかというと、一番大きな目的はFlashやSilverlightを撲滅することでした。

昔からブラウザとネイティブを組み合わせる技術がありましたが、Adobe FlashだったらAdobeしか触れない規格で、オープンな規格ではないので、そういったところをオープンな規格にしようというのがHTML5の目指しているところです。

もう1つは、人間とコンピュータの両方の可読なフォーマットにしようというのが、HTML5の登場した背景にあると思います。

HTML5の機能

HTML5にはいろんなカテゴリがあって、この黄色いところが主にゲームに関係するところです。

HTML5のカテゴリの1つ目、セマンティックスはほとんどゲームには関係なくて、どちらかというとSEOなどをやっている人たちにとってすごく重要なところです。「構造化マークアップ」のように呼ばれているものがこの分野です。

次に、ゲームにすごく重要なのはオフラインストレージです。Web Storageみたいな、ブラウザ上の中にストレージ領域を持てること。キャッシュとは違ったストレージ領域を持っていて、通信していなくても動的なコンテンツを提供できるような技術。これもゲームにもすごく重要だと思います。

3つ目はあまりゲームには関係ありあせんが、デバイスにアクセスできること。GPSとかマイクとかカメラとか、そういったところにアクセスできる。

もう1つは、オンラインゲームを作るのであればすごく重要なところは、「持続性」と書いてありますが、WebSocketです。通常のHTTP通信の場合だと、1回ごとにセッションを張って通信する形になってしまいますが、オンラインゲームのようにデータがたくさん流れるものだと、WebSocketみたいな技術を使って提供する必要があります。

こちらもゲームには関係ないですが、マルチメディアの技術も必要です。また、3Dやグラフィック、エフェクト関連がHTML5では強化されています。

もう1つ、「パフォーマンスと統合」と書いてありますが、Web Workerと呼ばれている、バックグラウンドで処理ができたり、Push通知がブラウザアプリでも提供できる技術も、ここに含まれています。他には、CSSもHTML5に含まれる技術になります。

HTML5ゲームの概要

ということで「HTML5ゲームって何なの?」という話をしていきます。HTML5の正確な定義とは違って、もうちょっとバズワード的なところで掘り下げていくと、ネイティブのアプリからWebアプリへの再シフトが期待されていると僕は捉えています。「App StoreとかGoogle Playにあるネイティブアプリから、Web、Safari・Chrome上で動くサービスにシフトするんじゃないか」とみんな思っている。

実際、今までも過去にこういうシフトは何回かありました。1回目は1995年頃ですね。WindowsのアプリケーションからWebサービスに徐々に移行していった時期です。ここから5〜10年ぐらいかけて、Windows上のアプリをわざわざダウンロードしてネイティブアプリでいろいろするのではなく、全部Web上で完結する流れになっていきました。

ガラケーの頃も同じようなことがありました。2007年の頃、ガラケーの場合だと「iアプリ」というものがありまして、これはJavaで作ったアプリなんですが、そこから「モバゲー」さんがはしりとなってブラウザゲームにシフトしていった事例があります。

なので、みんなスマホでも同じことが起きるんじゃないかと思っています。ここ最近の話ではなく、実はずっと前からみんなそう思っています。

直近の事例では、2012年9月14日にFacebookのCEOがある展示会で「HTML5に賭けたのは失敗だ」と発言しています。

どういうことかというと、Appleに管理されているApp Storeでアプリを配信していくよりも、HTML5という技術を使ってFacebookのアプリを提供しようと彼らは考えていました。しかし、2012年の時点では諦めて、ネイティブアプリでやっていこうと判断したという事例があります。

HTML5が注目されつつある理由

HTML5は来ると言われてあまり来てないんですが、最近はまたHTML5に対して興味を持っている人が増えてきています。

その理由の1つ目は、プラットフォームが機能不全になっていることです。App StoreとGoogle Playにゲームを出してもなかなか売れない。

5年前は、まぁまぁおもしろいゲームを出せばユーザーがどんどん来てくれて、ビジネスとして成り立っていたんですが、今は普通に、例えばインディーズのクリエイターさんがApp StoreとGoogle Playにゲームを出しても、ほぼゼロに近いダウンロードみたいな状態になってしまっています。

自前でプロモーションしないと、アプリを流通させることができない。それなのに30パーセントもフィーを取られるので、プラットフォームとして壊れているんじゃないかとみんなが思い始めています。

もう1つ、かつては無理だったけれどもリベンジできるのではないかと思うのは、スマートフォンのスペックが劇的に上がってきているからです。2011〜2012年の頃のスマホのスペックと今のスマホのスペックは雲泥の差なので、ブラウザ上でもゲームが動くようになってきました。

さらに、ブラウザ上の技術も進化してきていて、WebGLやService Worker、WebAssemblyという周辺技術も発展し、環境は整ってきています。

さらに今後は5Gという新しい通信規格が登場して、進化していくと言われています。通信回線が5Gになるとレイテンシーも下がってきますし、通信速度が速くなればブラウザ上のゲームでもネイティブアプリと同じように気持ちよく遊べるようになるのではないかという期待もあります。

個人的にはもう1回シフトがあってもいいし、おもしろい可能性があるんじゃないかなと思っています。ブラウザゲームは基本的にSNSと連動していることが多かったんですが、それはリンクというかたちでゲームとゲームの間やゲームとほかのサービスの間で気軽に導線を作れるからです。一方で、ネイティブアプリは基本的にアプリ単位で完結しているので、各サービスの間で連結はありません。

もともとガラケー時代の後半にはSNSとゲームは一体化していましたが、スマホになったことでSNSとゲームが分離しました。ですが、SNSはこの10年間でさらに普及してきているので、もう1回SNSとゲームが統合してもいいんじゃないかと思っています。

さらに、海外の事例では中国のHTML5の市場が盛り上がってきています。

なぜHTML5が期待されているのかをまとめると、1つ目は、とにかく30パーセントの決済手数料が高いということ、規約や審査が理不尽だということ。

これは昔から変わらない話ではありますが、なぜ今までみんな我慢してきたかというと、昔は顧客の誘導力があったからです。だから「お客さんを引っ張ってきてくれるならしょうがないね」と我慢していたんですが、「今は顧客の誘導力もないのになんだろうね」ということでみんな疑問に思っている状況です。

HTML5の時代が来ていない理由

では、なぜHTML5が現実的にはまだ来てないのかというと、ユーザーは「ネイティブアプリで遊ぶ」という体験を知ってしまっていて、ネイティブアプリはスマホのスペックを100パーセントを使い切ることができるので、基本的にはブラウザゲームよりもリッチなものを提供できるはずです。

だとすると、HTML5のゲームを作ったとしてもユーザーに対して新しい遊びの提供ができないのであれば、ユーザーさんにとっては別にブラウザゲームにシフトする必要性はありません。結局、なぜまだHTML5が来てないかというと、HTML5らしい新しい遊びを提供できていない、発明ができていないというところがあるんじゃないのかなと思います。

それ以外にもこのあと新しいマーケティングの方法や新しいマネタイズ方法が発明されなければ、HTML5は産業としては成り立たないのではないかなと思っています。

デモで見るHTML5ゲーム

とはいえ、HTML5を実際に遊んだことがある方いらっしゃるかわからないので、ちょっとデモをしたいと思います。

こちらは、ブラウザ上で動くゲームをそのままiPhoneでキャプチャーしたものです。1つ目はカジュアルなゲームなんですが、弾を撃って玉を消していくゲームですね。これはクリエイターさんがだいたい1週間ぐらいで作ってサクッとリリースした感じのゲームですね。

これはもう少し重たいゲームです。スマートフォンのネイティブアプリやニンテンドー3DSで提供していた弊社の『チャリ走』というゲームをブラウザ上に移植したものです。先ほどのライトな感じとは違って、ニンテンドー3DSぐらいのものであればブラウザでも動くような状況です。

これはUnityさんが出しているHTML5版ゲームを作るためのTinyUnityという機能です。このデモでは、『パズドラ』のようなゲームが提供されています。

本来のUnityとは操作性が違うものの、Unityでゲームを作っているようなイメージでHTML5のゲームを作ることができます。

中国では3Dのゲームが提供されています。これはEgretEngineという中国製のHTML5のゲームエンジンで作られた3Dのゲームです。このようにスマホのブラウザ上で3Dゲームを提供することができます。

このように、主に中国の力が大きいんですが、単純にブラウザのスペックが上がったり技術的な周辺環境が良くなっただけではなく、ゲームエンジンを実際に提供している会社さんが何社か出てきていて、そのワークフロー部分もすごく充実してきている状況です。

現在のゲーム市場

では、スマホ向けのHTML5の市場について見ていきます。まずは全体の話でいきますと、国内のスマホゲーム市場の規模は1兆4,000億円と言われています。

今まではすごい勢いで伸びてきたんですが、最近は鈍化してきていて、7パーセントぐらいしか伸びていません。ほぼ天井まで来てしまったような状況です。

家庭用ゲーム機は、長期的に見ると純減中です。ここ最近は一瞬上がっているんですが、基本的に長期的には減少傾向にあります。ハード含めて4,400億円しか市場がありません。だいたいハードが半分、ソフトが半分みたいな市場です。

それに対してPCのゲームは、これは人によって集計が違うんですけど、700億円ぐらいになります。アーケードゲームは、店舗を含めて6,000億円ぐらいと言われます。

知ってもらいたいのは、ガラケー時代のソーシャルゲームの市場は、だいたい3,000億円ぐらいでした。もう1つ、ガラケー時代の「公式サイト」と呼ばれている月額300円のゲームを中心とした市場は、だいたい800億円ぐらいと言われています。

それに対して、現在HTML5の市場には、現実的にはゲームがない状況です。

モバイル向けゲームの歴史

モバイルゲームが今までどんな流れをたどってきたのかをおさらいします。2001〜2006年までは「公式アプリ期」と僕は名付けています。iモードの月額制サービスを中心に、テトリスやソリティアなど、ミニゲームの月額サイトが人気だった時代です。

それとは別に、2004〜2006年ぐらいは「勝手アプリ期」と呼んでいます。主に個人クリエイターのiアプリ、『糸通し』『チャリ走』など、無料のカジュアルゲームが中高生に大々的に流行しました。市場としてはそれほど大きくなかったんですが、中高生はかなりの割合で遊んでいた時代です。

ただ、このあたりについてはあまり歴史に残っていません。こうしたガラケーの時代のiモードサイトやiアプリのビジネスとかについて、ちゃんとした情報はほとんど残ってなくて、闇の歴史になってしまっている状況です。

そこからモバゲーさんが2007年ぐらいに出てきました。2007〜2009年は、モバゲーを始めとして、SNSと連動して簡単なFlashゲームを配信して、アバターで課金していくというビジネスが始まった時代です。

ここがベースにあり、2010年ぐらいから、「ポチゲー」と呼ばれていた、カードゲームを中心とした、ひたすらボタン連打でクエストを進めるようなゲームが登場したのがこの時期です。ここでいったんソーシャルゲーム市場が3,000億円ぐらいの天井まで伸びました。

その後2010年ごろから始まったのがネイティブアプリ黎明期です。スマホが日本でも発売され、ネイティブアプリが徐々に広がっていきました。この頃は『Temple Run』や『LightBike』など広告モデルのカジュアルゲーム全盛期で、基本的にユーザーはほとんど課金してくれない時代でした。『Angry Birds』もこのタイミングに登場したゲームですが、『Angry Birds』も当初はほとんど広告と小額の課金みたいなかたちで提供されていました。

そこから、2012年から2017年ぐらいに、ソシャゲのノウハウを持ち込んだ、『パズドラ』や『モンスト』のようなガチャでマネタイズするゲームが始まりました。ソシャゲと違うのは、インゲームと呼ばれている部分が単純なボタンの連打ではなくて、もう少しゲーム性があるものになりました。『パズドラ』のようにパズルのようなゲーム性があるものを作ってうまくいった時期です。

この時期が、日本における頂点でした。現在はもう1回変化期を迎えて、「グローバル期」と勝手に呼んでいますが、日本で開発したゲームのほとんどが成功しなくなってきています。とくに日本型のガチャ型ゲームは完全に失速しつつあります。それよりも『PUBG』などの海外タイトルが力を増してきています。

中国のHTML5ゲーム市場

問題は、HTML5の市場が最も大きいのは中国なんですが、中国の場合は2014年に厦門(アモイ)にある4399という会社さんが、スマホのHTML5ゲームのプラットフォームを立ち上げています。これに限らず、HTML5プラットフォームは中国にはたくさんあります。

このプラットフォームは本当にオープンなプラットフォームで、WeChatやQQに連動しているわけではありません。実は以前から、AndroidのアプリをGooglePlayのストアから勝手に抜いてきて、勝手に配信するようなサービスをたくさんやっているプラットフォームでした。そういったプラットフォームが進化して、現在の形になっている感じです。

その後、WeChat上のゲームが広がってきてました。中国の人は、検索エンジンをあまり使わず、すべてWeChatで済ませています。そんな中、WeChat上でHTML5ゲームをする市場が、2016年に184億円だったものが2017年には951億円まで伸びている状況でございます。

なぜ中国ではHTML5の市場が大きいのかというと、WeChatがメインで、なんでもWeChatでやる文化があるというのも要因の1つですが、もう1つはネイティブアプリを配信したり、課金が必要なアプリを配信する場合は、中国では国から営業ライセンスを取らなければいけません。勝手に作って勝手にビジネスをしてはいけないという背景があります。

一方、HTML5に関してはサイト単位でライセンスが付与されます。詳しく言うと、サイトでライセンスを取っていれば、その中にゲームを追加していくこと自体は問題ないので、HTML5でどんどんゲーム作っているという状況です。

WeChatはみなさん知ってると思いますが、LINEのようなメッセンジャーアプリです。ですがLINEよりもぜんぜん先に始まったサービスです。登録されているユーザーがだいたい11億人いて、よく言われるように基本的にWeChatでお金を払ったり、WeChat上でお金を送金することもできます。

中国に行くと、名刺交換するよりもWeChatでQRコード見せてスキャンして終わり、みたいなこともけっこうあります。本当に日本以上に、生活に浸透しています。

もう1つ重要なのが、2016年から「WeChatミニプログラム」というものが始まりました。これはHTML5ゲームなんですけれども、若干WeChat独自のSDKみたいなものが提供されています。ピュアなHTML5じゃできないことや、WeChatの部分と連動したいろんなことができる機能が提供されています。