GameWith Engineering Blog

GameWith のエンジニア、デザイナーが技術について日々発信していきます。

Laravel JP Conferenceで登壇してきました #GameWith #TechWith #laraveljpcon

はじめに

こんにちは。GameWithのエンジニアのtiwuです。

先日行われたLaravel JP Conferenceで登壇してきました。

Laravel JP Conference

conference2019.laravel.jp

Laravel JP Conferenceは2019年2月16日に開催されたPHPのフレームワークであるLaravelをメインテーマとした技術カンファレンスです。

「Laravel JP」を冠したイベントは日本で初開催とのこと。

f:id:tiwu_gamewith:20190218104444j:plain

Laravel JP ConferenceとGameWith

弊社は、「GOLD Sponsor」と「DRINK Sponsor」をさせていただきました。

f:id:tiwu_gamewith:20190218104752j:plain

当日はこのような可愛いGameWithオリジナルデザインのお水を提供させていただき、見事360本完売いたしました!ありがとうございました!

登壇

今回、「リリース直前にLumenからLaravelに移行した話」というタイトルで登壇させていただきました。

fortee.jp

聞きに来てくださった方々本当にありがとうございました!

f:id:tiwu_gamewith:20190218105350j:plain

下記が登壇時に使用した資料です。

speakerdeck.com

今回、Lumenを取り上げた発表は自分だけでしたが、会場の方に聞いてみると多くの方がLumenを使っていました。

登壇はとても緊張してしまい、ノンストップで喋り続けた結果早めに終わってしまいました・・・。

感想

最初から最後まで盛り上がっていて、暖かく楽しいカンファレンスでした。

ランチセッションでお弁当が出てきたタイミングに、ハッシュタグのランキングが一瞬1位になったり、LTのドラの音で毎回盛り上がったり、懇親会もとても楽しかったです。

実行委員会の皆様、並びに登壇者の皆様、ご来場頂いた皆様、本当にありがとうございました。

さいごに

GameWithでは登壇したいメンバーの後押しもしてくれるので、登壇に積極的に参加したい人も働きやすい環境です。興味のある方は是非、話を聞きに来てみてください!

www.wantedly.com

また、2/28(木)にもくもく会を開催します。テーマは「フロントエンド」ですので、興味のある方は是非お越しください!

gamewith.connpass.com

MangaWithを構成する技術要素 #GameWith #TechWith

こんにちは。GameWithのエンジニアのtiwuです。

今回は12月にリリースをしたMangaWithを構成する技術要素について紹介したいと思います!

MangaWithについて

MangaWithは2018年12月にリリースをしたスマホ向けWEBマンガサービスです。

f:id:tiwu_gamewith:20190205112645p:plain

MangaWithの詳細については、当社HP(https://gamewith.co.jp/2104)をご参照ください。

MangaWithを構成する技術要素

言語

まずは利用している言語から紹介したいと思います。

  • PHP
  • HTML
  • CSS
  • JavaScript

PHP

フレームワークは開発当初はLumenを利用していましたが、途中からLaravelに移行しました。

PHPは7.2、Laravelは5.7を利用しています。

移行の経緯はLaravel JP Conferenceで、「リリース直前にLumenからLaravelに移行した話」というタイトル登壇をするので見に来てください!

HTML

テンプレートエンジンとしてBladeを利用しています。

CSS

SCSSで記述しています。

Lintツールとしてstylelintを利用し、設計はFLCSSを採用しました。

JavaScript

特にフレームワーク等は利用しておらず、ES6 + webpack + Babelという構成です。

Ajaxにaxiosを、バナーのスライドにswiperを利用しています。

LintツールとしてESLintを利用して、テストはJestを利用しています。

開発環境

  • GitHub
  • docker
  • docker-compose
  • CircleCI
  • Codecov
  • SpeedCurve

GitHubへのpushをトリガーにLintやテストが実行されるようになっています。

カバレッジは Codecovで管理し、PHPUnitのテストは95%以上をキープしています。

速度の計測にSpeedCurveを利用しています(速度改善は別の記事にしたいと思います)

f:id:tiwu_gamewith:20190205184310p:plain

インフラ

MangaWithはGoogle Cloud Platformを利用しています。

  • Kubernetes Engine
  • Cloud Storage
  • Cloud Memorystore
  • Cloud SQL
  • Container Registry
  • Cloud Build
  • Cloud IAM
  • Stackdriver Monitoring
  • Stackdriver Logging
  • BigQuery
  • Elastic App Search

Kubernetes Engine

PHPとNginxでPODを分けた構成にしていますが、これは本当に負荷の高いサービス単位でスケールさせるために工夫をした点になります。

f:id:tiwu_gamewith:20190205123245p:plain

Cloud Storage

画像データ等は Cloud Storageに格納して、CDN経由で配信しています。

Cloud Memorystore

Redisの環境として利用しています。

Cloud SQL

データベースの環境として利用しています。

Container Registry

DockerイメージはContainer Registryに保存しています。

Cloud Build

CDとして利用しています。

GitHubのMergeをフックに、Dockerイメージのビルドやデータベースのマイグレーション、Kubernetes Engineへのリリースが実行されます。

f:id:tiwu_gamewith:20190205143807p:plain

Cloud IAM

権限の管理に利用しています。

Stackdriver Monitoring, Stackdriver Logging

ログの管理に利用しています。

BigQuery

Stackdriver Loggingのログを保存しています。

Elastic App Search

マンガの検索にElastic App Searchを利用しています。

最後に

いかがでしたでしょうか?MangaWithはかなりシンプルな構成になっていると思います。

MangaWithはまだリリースしたばかりですが、更に良いサービスになるよう精一杯取り組んでいきますので宜しくおねがいします!

GameWithは、ゲームが大好きで、新しい技術をどんどん使っていきたいという方を大募集中! Wantedly でもよいので是非お気軽にお声がけください!

www.wantedly.com

PHPカンファレンス 2018で大好評だったグッズはどのようにして生まれたか #GameWith #TechWith #phpcon2018 #novecon

初めまして、GameWithのデザイナーNです。

今回は、先月行われたPHPカンファレンス 2018で大好評だったグッズの制作秘話をお話したいと思います。

PHPカンファレンス 2018

PHPカンファレンス 2018は2018年12月15日(土)に大田区産業プラザ PiOで開催されました。

当日はガチャガチャを用意し、ガチャで出たレア度に応じてノベルティグッズを配布する、といったGameWithらしさを合わせたことでかなり盛り上がりました!

f:id:tiwu_gamewith:20190130112629j:plain

f:id:tiwu_gamewith:20190130112656j:plain

PHPカンファレンス 2018で配布したノベルティグッズの紹介

今回全ノベルティグッズにすっぴんちゃん(GameWith非公式キャラクター)を採用することで、統一を持たせました。

カンファレンス用のチラシ

f:id:tiwu_gamewith:20190130113539j:plain

GameWithで利用している技術等が書かれた採用用のチラシです。

文言や利用している言語など、エンジニアチームと共に作りました。

ガチャガチャ

f:id:tiwu_gamewith:20190130112602j:plain

カレンダー(New!)

f:id:tiwu_gamewith:20190130111952j:plain

200個用意しました。

バラエティに富んだすっぴんちゃんを表紙にして、賑やかで楽しそうな印象をもたせるカレンダーにしました。

卓上なのでデスクに置いて見たときに、癒やされるようなデザインにしました。

ホッカイロ(New!)

f:id:tiwu_gamewith:20190130112005j:plain

こちらも、200個用意しました。

ホッカイロに入っているチラシなので、できるだけ手元に残したくなるような心が温まる可愛いデザインにしました。

ノート(New!)

f:id:tiwu_gamewith:20190130112020p:plain

こちらも、200個用意しました。

中綴じのノートなので、安っぽく見えず、落ち着きのある高級感あふれるデザインにしました。

ノートは小さいサイズではなく、実際に業務等で使われることを考え大きめのA4を採用しました。

モバイルバッテリー

f:id:tiwu_gamewith:20181019144151j:plain

こちらは、300個程度用意しました。

スタッフ用グッズ

パーカー(New!)

プリントより刺繍のほうが可愛いのではと考え、白地のパーカーの胸元にコーポレートロゴをワンポイントでいれました。

ノベルティ・グッズ制作の流れ

11月上旬

11月上旬にエンジニアチームからデザインチームにノベルティグッズ制作の依頼が来ました。

GameWithのノベルティグッズはモバイルバッテリーとステッカーしかなく、PHPカンファレンスで新たにノベルティをグッズ配布したいという思いがありました。

今回は、自分がメイン業務と兼務しながら担当をすることになりました。

11月中旬

スタッフ着用のオリジナルパーカーの作成も、ノベルティグッズと同時に依頼をされていたため、先にパーカーのデザインから始めました。

また、当日配布するチラシのデザインもこの期間に行いました。

11月下旬

ノベルティグッズを制作するにあたり、エンジニアチームからいくつか案が出ていましたが(マグカップ、ボールペン、クリアファイル、スマホスタンドなど)、予算(約15万円)が決まっており、予算内で実用的且つ、GameWithらしさもあるノベルティを提供するために、エンジニアチームと何回も打ち合わせを行い、制作するノベルティグッズを決めました。

まずPHPカンファレンスが12月に開催されるため、実用的で単価が安いホッカイロを提案し、採用しました。

次に名刺サイズの卓上カレンダーはデスクに置いても邪魔にならず実用的で、単価も安いため採用しました。

最後にノートですが、最初はスケッチブックをノベルティとして配布を考えていましたが、PHPカンファレンスまでに納期が間に合わず、泣く泣く断念することに・・・。

そこでスケッチブックの代わりにノートをノベルティグッズとして配布することしました。

12月上旬

決定したノベルティグッズのデザインをし、発注をしました。

しかし、発注中にホッカイロの納期がPHPカンファレンス後になってしまうことが発覚!

一縷の望みをかけて、ホッカイロ業者に電話をし、なんとかPHPカンファレンスの2日前に納品していただけるよう調整を行いました!

ただ、GameWithからPHPカンファレンスの会場に発送する日には間に合わなかったので、人力で会場に運びました!笑

最後に

実は、デザイナーチームが出来たのはここ最近です。まだまだチームになって日が浅いですが、お互いに個人のアイデアや感性を尊重して働いています!是非興味を持って頂けた方は一緒に働きましょう!Wantedly でもよいので是非お気軽にお声がけください!

www.wantedly.com

PHPカンファレンス仙台 2019 にスピーカーとして登壇してきました #GameWith #TechWith

みなさん、 Hello World! めもりー (@m3m0r7) です 2019年の1/26(土)にPHPカンファレンス仙台のスピーカーとして登壇してきました。

前日入り

前日入りするため、午前中はオフィスに出て3つほどのタスクをこなし、オフィスを出発して仙台へ向かいました。 そして仙台へ到着。報連相は大事なので報告しました。

f:id:m3m0r7:20190128124857j:plain

Slackに「さすが」という謎のリアクションが…😂

ちなみに仙台駅内では牛タン通りやすし通りなるものがありました。

f:id:m3m0r7:20190128125116j:plain

全店舗制覇したいという葛藤の中、体力が限界だったということもあり、ホテルにチェックインしました。

f:id:m3m0r7:20190128125226j:plain

ホテルが綺麗すぎて、ホテルすごいって気持ちになりました。

仙台名物の牛タン

そのあとは、仙台名物の牛タン屋で牛タンを食べました🐮 おいしい! (食レポは苦手なので雰囲気だけでお願いします)

f:id:m3m0r7:20190128125543j:plain

牛タンを食べたあとに気づいたのですが、実はランチマップなるものが公開されていたようです。

登壇当日

そして、1/26当日、仙台は降雪してました。

f:id:m3m0r7:20190128130521j:plain

あいにく、PCを入れるためのカバンを持っていかなかったので積雪している中、キャリーケースを引きずり会場へ。

f:id:m3m0r7:20190128130646j:plain

登壇者受付を済ませて、登壇者控室でスライドの typo がないかとか、喋る内容を頭の中でまとめたりとかしていました。

f:id:m3m0r7:20190128130924j:plain

あまり強調はしない感じで、ネームホルダーをぶら下げ、15:15からの「開発期間2ヶ月でElasticsearchをプロダクトに使ってリリースした話」をお話させていただきました。

f:id:m3m0r7:20190128131224j:plain

聞きに来てくださった方々本当にありがとうございました ✨

どうやら部屋が満席だったようで、申し訳なかったです…!

下記が登壇時に使用した資料です。 speakerdeck.com

ちなみに、以前 Tech Blog で下記のことを書いたのが触りの話だったので、実際にどんな開発体制で、どういうツールをどのように使ったのかをメインにお話させていただきました。

tech.gamewith.co.jp

感想

緊張するというか、時間どおりに終わるかどうかのほうが懸念だったのですが、なんとか時間どおりに終わり安堵しました。 そのあとに、懇親会へ参加し多くの方々とお話できたり、発表だけではなくとても有意義な時間を過ごせたので、とてもとても濃い1日になりました。 実行委員会の皆様、並びに登壇者の皆様、ご来場頂いた皆様、本当にありがとうございました。

余談

以前PHPでJavaのバイトコードを読んでみたという話を当日に「PHPでファミコンエミュレータを作る」という内容で発表されていた長谷川さんにお話したところ、下記のようにツイートしてくださっていたので、機会があればお話するかもしれません😉

最後に

いかがでしたでしょうか?GameWith では登壇したいメンバーの後押しもしてくれるので、登壇に興味のあるかたは是非お話を聞きに来てみてください 👍

www.wantedly.com

GameWithに雪とすっぴんちゃんが降るまでの意思決定のスピード。そして、おみくじへ・・・ #GameWith #TechWith

GameWithのエンジニアのtiwuです。

今回はクリスマスに雪が降る企画がリリースされた経緯と、正月キャンペーンの経緯を書きたいと思います!

クリスマス

実は去年の12/24,25にGameWithのトップページに雪とすっぴんちゃん(GameWith公式キャラクター)が降っていたのをみなさんご存知でしょうか?

f:id:tiwu_gamewith:20190117103408p:plain

この雪が降る企画は僕のSlackの何気ない一言から始まりました。

f:id:tiwu_gamewith:20190109110825p:plain

この投稿からわずか30分後、開発環境での実装が完了!

f:id:tiwu_gamewith:20190109110950p:plain

そして最初の投稿から7時間後に、本番リリースのOKが出ました!

f:id:tiwu_gamewith:20190109130024p:plain

盛り上がるSlack

f:id:tiwu_gamewith:20190109130637p:plain

f:id:tiwu_gamewith:20190109112739p:plain

f:id:tiwu_gamewith:20190109112801p:plain

f:id:tiwu_gamewith:20190109112817p:plain

そして雪すっぴんちゃん爆誕。

f:id:tiwu_gamewith:20190109130729p:plain

このように、エンジニア内で盛り上がるだけで終わらせず、ゲーム攻略チームやゲームレビューチームと連携し、わずか1日で意思決定されクリスマスにリリースできました!

素晴らしいスピード感だと思います!

お正月

みなさん、1/6(日) 23:59まで開催してた「おみくじ引いてお年玉ゲット!キャンペーン」は参加されたでしょうか?

このキャンペーンも何気ない会話から始まりました。

f:id:tiwu_gamewith:20190109130827p:plain

実は、3年前におみくじ機能は実装されていて、

f:id:tiwu_gamewith:20190109120330p:plain

terunumaさんの圧倒的スピードや、

f:id:tiwu_gamewith:20190109130910p:plain

FukiさんのGameWithならではのGIF作成や

f:id:tiwu_gamewith:20190109130952p:plain

ただおみくじ企画を復活させるだけでなく、キャンペーンを発案した企画サイドなど

GameWithのチーム力でキャンペーンを開始することができました!

キャンペーンは終わってしまいましたが、おみくじはこちらからひけるので、是非運試しをしてみてください!

最後に

GameWithの組織の雰囲気が少しでも伝わったら幸いです!

GameWithは、ゲームが大好きで、新しい技術をどんどん使っていきたいという方を大募集中! Wantedly でもよいので是非お気軽にお声がけください!

www.wantedly.com

GameWith新規事業への挑戦事例_攻略メディアの場合(2018年)

SEO狙いのタイトルでこんにちは。GameWith執行役員の阿部です。

現在、GameWithでは様々な事業を仕込んでおり、 僕は主にメディア周りを担当することが多いです。
その中で、2018年注力していた事業について、 どのように事業開発をし、どのような結果を得たのか共有しようと思います。

これから新規事業を作る、社内外の方の参考になれば幸いです。

攻略メディアが新たに注力した2つの事業

1.ゲーム攻略の短尺動画

1つ目はゲーム攻略の短尺動画です。
市場トレンドとしてアクションゲーム(荒野行動やフォートナイト)が流行る中で、どうしても攻略サイト「GameWith」(以下、「GameWith」)のような文字主体のメディアは相性が悪いです。

また市場にはYouTuberによるエンタメ寄りのゲーム実況動画はあるのですが、攻略情報を伝えることをメインとした短尺動画はプレイヤーのいない領域でした。
今回はこちらの事業内容について書こうと思います。

2.ゲーム攻略メディアの海外展開

2つ目はゲーム攻略メディアの海外展開です。 こちらの需要はGoogleトレンドなどで確認できていたので、 採算の合うオペレーションを組めるかどうかの挑戦でした。12月7日のプレスリリースで出した通り、一定の成果が出ています。
こちらについても、エモエピソード満載なのでまた別の機会に書こうと思っています。

gamewith.co.jp

短尺動画プロダクトでの挑戦!

どんなプロダクトを作ったのか?

ゲーム攻略を文字ではなく、短尺動画で解説したアプリです。
「いずれゲーム攻略は文字でなく、動画で見る世界が来る。」 という流れを想定し、 「Mipple」というアプリをリリースしました。

f:id:gamewith-tech:20181217191116p:plain
Mipple

当初の戦略は?(2017年12月頃)

このようなリーンキャンバスを想定していました。

f:id:gamewith-tech:20181217191051p:plain
リーンキャンバス
(モザイクばかりでごめんなさい)

キャンバスの詳細は割愛しますが、この他に「市場規模はあるか」、「このタイミングでやるべきか」という点にも着目し、問題定義をしました。
まず、市場の大きさは既存メディアの「GameWith」自体が証明していたので、市場規模はあるという結論になりました。(打倒「GameWith」と社内でも言っていました)
さらに、動画広告市場の急激な伸び(特にインフィード広告の盛り上がり)もあったので、「今、このプロダクトを作るべきだ!」という流れになりました。

webtan.impress.co.jp

戦略を考える中で、特に重要な仮説は「チャネル」と「提供価値」に位置づけをしていました。

「チャネル」と「提供価値」を検証しよう!(2018年1月頃)

そもそもなぜチャネルが重要?

「GameWith」に集まっているトラフィックから誘導することも可能ですが、 それでは「GameWith」の規模が成長の上限となってしまいます。

そもそも、メインのターゲットとして考えていた、アクションゲームのユーザーは攻略需要がほぼなく、検索をしないため、「GameWith」に訪れているユーザーはごく一部に限定されてしまいます。
なので「GameWith」とは別に、独自のチャネルハックは必ず見つけようと考えていました。

とても普通のアイディアだけど、勝算ありでは!?

チャネルハックの手段としては、ゲーム内からの導線をもらうなども考えましたが、 初期ユーザーの獲得は結局自前でやらないと、そもそもの交渉権がありません。
なので、まずはSNSでの拡散に注力しようと考えました。

SNSで動画付きの投稿をすると通常よりもエンゲージメントが高く、拡散されやすい。 という特性を活かして、ここをハックできないかと考えました。

特にTwitterを活用して、ゲーム専用のサブアカウントを作る文化があり、その層にうまくバイラルすることでアプリDL数が伸びると想定していました。

既に自社でも各ゲーム攻略のSNSアカウントがあり、そこそこフォロワーがついていました。フォロワーの増やし方についてもノウハウがあったので、バイラルの起点は作れるという予想でした。

検証にプロダクトはいらない

チャネルと提供価値の検証はプロダクトなしで進めました。
Twitterアカウントを作成し、攻略短尺動画を投稿してみました。ここで検証したかったのは、「①どれくらいのユーザーにリーチができるか②どういったコンテンツがエンゲージメント高いのか③動画1本あたりの作成コスト④ゲームのアプデから投稿までの時間がどのくらいか」でした。
それがこちらのアカウント。

twitter.com

最初は動画編集者もいないので、デザイナーに無理を言って動画を作ってもらっていました。
自社リソースを使い、且つ低コストで検証できたのでこの点はよかったと思います。

初投稿が5万再生以上!!

初めて投稿した短尺動画は、社内で保有する別アカウントからのRTでブーストがかかり、5万再生以上されました。
もしアプリDLリンクをつけたら、1%のユーザーがDLするとして、1投稿で500DL。
1日10投稿する体制を作ったら、1日5,000DLをSNSで獲得できる、
と、夢を見させていただきました\(^o^)/

その後も継続して動画投稿をした結果、想定以上にSNSで動画再生されることがわかり「チャネルはこれでいける!」と考え本格的にアプリを作る判断をしました。

競合優位性は想定通り!しかし難易度が高い(2018年3月頃)

競合優位性は即時性

攻略メディアを5年運用して一番重要だと感じていたのは「情報の即時性」でした。
攻略情報の需要はゲームのアプデや発売された瞬間がピークで、2週間ほどで消えてゆきます。そのためGameWithではゲームのアプデ10分後には情報が出せるオペレーションを組んでいます。

媒体が文字から動画に変わったとしてもこの点が一番重要だと考えていました。
つまり、ゲームアプデの30分後には動画を出せる体制を作ることを目標とし、そのため動画素材の撮影、動画編集は内製化する必要がありました。

例:↓こういった動画はアプデの瞬間が一番需要あります

動画素材の撮影は、既に社内に攻略メディアを運用している部があるので、そちらから提供してもらうことでコストをかけず、なおかつスピードを出すことができます。

短尺動画のプロダクトが世の中にたくさん出ているのに、広告単価の高いゲーム領域の短尺動画プロダクトがないのは、この作成コストの面が大きいのではと考えています。

動画制作オペレーションの構築に時間がかかる(2018年4-9月頃)

動画編集スタッフを採用し、社内で動画作成のフローを組んだのですが、なかなか"アプデ後30分以内に投稿する"フローが組めませんでした。正直何に時間がかかっているかも、最初わからない状態でした。
そこで動画制作のフローをカンバンで管理し、ボトルネックを特定し、、、と、この話は長くなりそうなので割愛します。製造業のお話ですが以下の本が参考になります。

ザ・ゴール ― 企業の究極の目的とは何か

ザ・ゴール ― 企業の究極の目的とは何か

結果、当初は動画編集1名で2日に1本しか動画投稿できていませんでしたが、1日4本且つアプデ後30分以内の投稿が可能となりました。投稿本数の最大化をしつつも、どんな動画がウケるのかを常に考え、検証サイクルを回していました。

爆速アプリ開発!(2018年8月〜)

MVP中のMVP

優秀なエンジニアが入社してくれたおかげで、β版のアプリはなんと1ヶ月で完成しました。正直、想定外の完成スピードでした。
スピード優先だったため、拡張性を捨てた作りになっているのですが、この判断は正解だったと思います。(詳しくはこちら↓)

tech.gamewith.co.jp

アプリを出すことで特に検証したかったのはADNWによるマネタイズの可能性でした。
攻略記事よりも攻略動画のほうが作成コストがかかるので、どれだけ記事よりも収益性が高いかの検証が必須でした。

アプリで検証したかったマネタイズの方向性

マネタイズの方向性は大きくADNWか純広告の2パターンあります。SNS上にADNWの動画広告を差し込むことはできないので、ADNWでマネタイズするならアプリに注力となります。
純広告の場合、アプリ内での再生回数にこだわる必要はなく、全SNSアカウント+アプリでの再生回数で値付けされます。(いわゆる分散型メディア的な立ち回り)

価格相場は1再生10円?動画メディアC Channel、KURASHIRU、DELISH KITCHEN広告比較 | The Startup

最終的にはどちらもやるべきですが、スタートアップの初期段階なので、まずはどちらのほうが可能性が広がるかを検証してみようと思いました。そのためにもβ版のアプリを出して、動画広告のeCPMがどのくらいの数値になるのか検証しました。

結論、ADNW動画広告のeCPMはとても良かったです。ここは想定以上に良い結果でした。

UXに一番重要な要素は

アプリを出してからいろいろな改修を重ねてみたのですが、結局ユーザー体験に一番影響を与えている要素は、デザインや機能ではなく投稿される動画の質、本数、即時性でした。

当たり前ですが、コンテンツ量が少ないアプリを開くはずもありませんでした。
ということで、再度動画の質、本数、即時性の最適化に注力することにしました。

改善、改善、で見落としていたもの(2018年9〜12月)

アプリを出して気づいた課題

ほとんどの仮説を外すことなく、ここまで進めて来ることができました。またアプリやコンテンツの質は、改善することでしっかり成果が出ていました。しかしアプリには想定と違っていた大きな課題が2つありました。

1つ目はSNSでの集客が思ったよりもできていないことでした。アプリを作る前にTwitter投稿でバイラルの検証をおこなっていたので、仮説通りのインプレッションは確保できていました。しかしツイートからのDL数(CVR)が極端に低かったのです。CVRまで事前に検証すべきだったという反省点がありました。

理由は考えれば当たり前ですが、わざわざアプリをDLしなくてもTwitterで流れてくる動画でユーザーが満足してしまうからです。

しかし、ツイートからのCVRは最適化できると思い、様々な検証を行いました。Twitterに投稿する動画は最初の数秒だけにする、ツイートの文言を最適化する、そもそも別のSNSを試すなど、、、また、アプリユーザーの獲得を諦め、分散型メディア化するという方向性も考えました。

もっとクリティカルな課題

上で述べた課題はいわゆる「チャネル」の課題です。他の方法を探せばもしかしたら、別の最適解が見つかったかもしれません。現にTikTok経由でのアプリDLがめちゃくちゃ発生したなど、細かいチャネルハックの話はあったりします。

ですが、それよりも大きな課題がありました。それは「ゲーム攻略は動画で見たほうがわかりやすい」という仮説が間違っていたことです。正確には「ゲーム攻略は動画で見たほうがわかりやすい場合もある」だという考え方に変化しました。

一部の需要しか満たせていなかった

例えば、スマブラをプレイしていて「プリンの即死コンボの手順を知りたい」と思った時には、動画で見たほうがわかりやすいです。しかし「隠しキャラ解放のやり方を知りたい」と思った時には、動画で見るよりも文字や画像で見たほうがわかりやすいです。

とても当たり前のことを言っているように思えますが、僕は後者の場合においても動画で解説したほうがわかりやすいし、それが当たり前になる未来がくると考えていました。

しかし、動画投稿を繰り返し、ユーザーの反応を見るうちに、反応が良い動画、悪い動画の違いがわかってきました。問題なのは文字媒体のメディアにおいて人気のコンテンツなのに、動画にすると人気が出ないコンテンツがあったことです。つまり動画が最適な媒体ではない場合があるということです。

最適なUXは?

作り手側の「動画広告でマネタイズしたい」という思惑を除いて、単純にUXを考えた場合、「動画で見たいコンテンツは動画で見れるし、文字で見たいコンテンツは文字で見れる」というプロダクトが最適だと考えました。

その場合、短尺動画単体のアプリとするのではなく、GameWithアプリの機能としてマージするのが最適だという判断をしました。「GameWith」アプリには文字情報での攻略もありますし、さらに動画情報での攻略を強化したら最高!という考えです。

もちろんUIの複雑化などデメリットはありますが、「ゲーム攻略を知りたければ、(動画、文字問わず)このアプリ見ればOK」という世界観を実現する近道だと考えました。
この結論を出したのが11月末でした。

※まだマージはできていません

ざっくり仮説と検証の結果

超ざっくり振り返ると以下のような結果です。

  • 顧客   →◯ PvPゲームユーザーはやっぱり増えている。
  • 課題   →× 動画で見たいもの、見なくて良いものがある
  • 価値提案 →◯ アプデ後30分以内の動画はやはり需要高い。即時性は重要。
  • チャネル →× TwitterからのDL率は低い。別のチャネルハック必要。
  • マネタイズ→◯ 動画広告のeCPMは想定以上に高い
  • 優位性  →◯ 即時性を出すためには、素材提供するチームが社内に必要。専属での採用はコストが重い

これらを検証するプロセスはもっと高速化できなかったのか?という反省はたくさんあります。特に「知ってる人に聞いたほうが早い」は、もっと意識すべきでした。たくさんのアドバイスをくれた皆様本当にありがとうございます。

副次的に良かったこと

「GameWith」アプリと別のリリースフローだったので、ABテストをばんばん回すことができました。そのため、「GameWith」アプリにマージした際に、最初から最適なUIで実装することが可能になります。
また動画広告のeCPMが高いことがわかったので、マージする優先度判断に役立ちました。(コスパが合うか判断しやすい)

素晴らしい仲間と学び

以上が今年の軌跡です。
感情面を抜きにして書いたので、とてもドライな文章になってしまいましたが、実際ここには書ききれない無数の施策があり、プロダクトの数値に一喜一憂する素晴らしいメンバーいます。

メンバーのキャリアストレッチ

このプロジェクトに参加したメンバーは全員急激なキャリアストレッチをしました。
デザイナーがディレクターを行い、エンジニアは自分の領域でない開発を行い、動画編集者は企画を行い、とてつもない負荷だったと思います。それでも、全員とてつもなく成長したと思います。きれい事ではなく、本当にそれぞれが人生の資産になったと思っています。

今後の予定

短尺動画単体のアプリはクローズしますが、短尺動画としてのチームは継続し、GameWithアプリから最高の攻略動画をユーザーに届ける予定です!ユーザーの需要に対して、網羅的に応えられるアプリを目指します!

さらに、動画投稿本数、質、アプリプロモーションも加速させ、攻略動画においても圧倒的No1のポジションを取ろうと思います。

新規事業を生み出すGameWith

GameWithではこれ以外にも、たくさんの新規事業を仕込んでいます。
収益は安定しつつ、会社としては挑戦していく、とても良い環境だと思います。もしゲーム領域に関する新規事業のアイディアがあればDMください。一緒に作りましょう!もしくは自身のキャリアを極限まで広げたい方お待ちしております!(僕もキャリアのスタートはデザイナーからでした)

最後に、このプロジェクトに関わった全てのみなさん。ありがとう。
心から感謝してます、愛してます。

twitter.com

LINE Messaging APIでモンストのマルチ募集が捗るチャットボットを作ってみた #GameWith #TechWith

f:id:gwchai:20181206165111p:plain

GameWith Advent Calendar 2018 9日目担当のiOSアプリエンジニアの chuymaster です。

先日、LINE DEVELOPER DAY 2018に参加してきて、クロージングセッションでの「今日のカンファレンスで聞いた内容で何かを作って欲しい」というメッセージを真に受けて、勢いでチャットボットを作った話を共有したいと思います。

サービスの背景

GameWithが取り扱っているゲーム攻略情報の中で、「モンスト」ことモンスターストライクが非常に人気で、多くのユーザーに見ていただいています。

f:id:gwchai:20181205165616p:plain
モンスト攻略

モンストには、「マルチプレイ」というモードがあって、最大4人で集まってゲームをするとクエストがクリアしやすくなったり、報酬がたくさんもらえたりします。

GameWithアプリでは、プレイヤーが集まりやすいように、「自動マルチ募集掲示板」機能を提供しています。クリアしたいクエストに、欲しい条件のプレイヤーに一緒にマルチしてもらえる掲示板です。

f:id:gwchai:20181205170741p:plain:w300
GameWithアプリ「自動マルチ募集掲示板」

GameWithユーザーが抱える課題

さて、そんな便利なマルチ自動掲示板ですが、実は一つ手間があります。

それは、募集のとき、募集メッセージをLINEからコピペする必要があることです。

f:id:gwchai:20181205172636p:plain:w300
マルチ募集画面

募集する手順は

  1. モンストでクリアしたいクエストのLINEでのマルチ募集を選ぶ
  2. LINEで友達を探す
  3. 友達に募集メッセージを送る(LINEチャットボットに送ることが多いらしいです)
  4. 送ったメッセージをコピーする
  5. GameWithアプリの募集画面を開く
  6. メッセージをペーストする
  7. 条件を決めて募集を始める

・・・長い!

募集メッセージを保存しておいたり、LINEを経由しない裏技的なことをしてマルチ募集の手間を減らすこともできますが、 公式の手順で、自然な流れで、「本当の友達とマルチする」みたいに募集したいというユーザーが多いはずです。

f:id:gwchai:20181205180859p:plain:w300
私はLINEデリマをいつもマルチに誘っていますw

そこで、LINEを通すことは仕方ないのなら、その後の手間をなくそう!という発想が、今回のチャットボットを作成する経緯になります。

どんなチャットボット?

「マルチ募集をワンタップでできる」チャットボットです。

このチャットボットにマルチ募集メッセージを送ると、GameWithアプリで募集するURLを返信してくれます。

そのURLをタップするだけでGameWithアプリで募集の必要な項目を埋めてくれて、コピペ要らずに募集開始ができるようになります。

f:id:gwchai:20181205184026p:plain:w300
マルチ募集お手伝いチャットボット(画面は開発中のものです)

デモ動画

さっそくデモ動画を見ましょう!

f:id:gwchai:20181206130223g:plain
チャットボットでマルチ募集

ポチポチタップするだけで募集ができて、サクサク感が伝わるんじゃないかと思います!

それでは、実装の説明をしていきます。

チャットボットの準備

まずは、公式のチャットボットサンプルでのセットアップです。 私はPythonが少し書けるので、Pythonのサンプルを選び、こちらの記事を参考に開発を始めました。

qiita.com

LINE@のアカウント作成、Herokuの環境作成は上記の記事で詳しく説明しているので割愛します。

ただし、記事で紹介された flask-echo というオウム返しするだけのサンプルを使うと、 LINEのチャットボットは何ができるかイマイチわからないので、flask-kitchensink (https://github.com/line/line-bot-sdk-python/tree/master/examples/flask-kitchensink)を使いました。

f:id:gwchai:20181205170713p:plain:w300
flask-kitchensinkボット

実装

ボット返信の大まかな流れは

  1. 送信者から受け取った、マルチ募集メッセージをサーバーに一時的に保存する
  2. メッセージファイルのURLを、GameWithアプリで処理するURLスキーマ gamewith:// のパラメータにくっつける
  3. 送信者に返信する

パラメータを受け取った後の処理はアプリ側の責任になります。

  1. URLスキーマを解析する
  2. メッセージファイルのデータを取得する
  3. 取得したデータを文字列に変換する
  4. マルチ募集画面を開いて、文字列を入力ボックスにセットする

アプリ側の実装は詳細を割愛します。以下、サーバー側の実装を説明します。

1. 送信者から受け取ったメッセージをサーバーに一時的に保存する

嬉しいことに、flask-kitchensink のサンプルでは既に画像を一時的に保存する処理が実装されているので、それを活用します。

もらったテキストをファイルに保存して、URLを返すメソッドを作りました。

def write_message_to_file(text):
    ext = 'txt'
    with tempfile.NamedTemporaryFile(dir=static_tmp_path, prefix=ext + '-', delete=False) as tf:
        tf.write(text.encode())
        tempfile_path = tf.name

    dist_path = tempfile_path + '.' + ext
    dist_name = os.path.basename(dist_path)
    os.rename(tempfile_path, dist_path)

    message_url = (request.host_url + os.path.join('static', 'tmp', dist_name)).replace("\\","/")
    return message_url

2. 保存したファイルのURLを、GameWithアプリで処理するURLスキーマ gamewith:// のパラメータにくっつけて返信する

ここは単純に文字列を結合するだけです。URLスキーマと処理するパラメータは予めアプリ側と合意を得る必要があります。

def get_monst_reply_message(message_url):
    message = "このURLをタップして、GameWithアプリですぐマルチ募集を始めよう!(*'▽')\n"
    gamewith_app_prefix = "gamewith://line?message_url="
    return message + gamewith_app_prefix + message_url

3. 送信者に返信する

linebotのSDKを使って返信します。サンプルからコピペするだけで良いです。

def handle_text_message(event):
    #-------
    # サンプル中略
    #-------
    elif "https://static.monster-strike.com/line" in text:
        message_url = write_message_to_file(text)
        reply = get_monst_reply_message(message_url)
        line_bot_api.reply_message(
            event.reply_token,
            TextSendMessage(text=reply)
        )

今後の課題

価値の検証

ユーザーが使って本当に喜ぶかどうかを検証する必要があります。まず社内の攻略チームの方々にお願いして、使ってフィードバックをもらおうと考えています。

全体的なユーザーフローの設計

チャットボット自体は便利ですが、歓迎メッセージや使い方の説明をちゃんと案内してあげないとユーザーが離脱してしまいます。 価値検証できたら、ユーザーフローやサポートを含めた設計をします。

本番稼働に向けた開発

まだプロトタイプ段階なので、Herokuの無料プランでチャットボットを稼働させていますが、 本番稼働に向けて、安全性・安定性・メンテナンス性を考慮した開発が必要になります。 この辺りのサーバーサイド開発はほぼ経験がないので、他のサーバーエンジニアからいろいろ学ぼうと考えています。

最後に

私はiOSアプリエンジニアですが、今回はサーバーのコーディング、社内でまだ使ったことのないLINE Messaging APIという未知の領域に挑戦しました。 GameWithは、会社のミッションである「ゲームをより楽しめる世界を創る」ことに繋がる挑戦を積極的に応援しているからこそ、実施できたと思います。

そんなGameWithは、ゲームが大好きで、新しい技術をどんどん使っていきたいという方を大募集中! Wantedly でもよいので是非お気軽にお声がけください!

www.wantedly.com