こんにちは、クトゥルフWEBダイス管理人のいのりです！

最近Amazon Kindleで電子書籍のセールがあり、面白そうな本をいくつか購入してみたのですが、その中でとくに面白かったのが『ＵＳＪを劇的に変えた、たった１つの考え方　成功を引き寄せるマーケティング入門』という本でした。

マーケティングの基本の考え方である「マーケティング思考」は、全ての仕事の成功確率をグンと上げる

……というこの本のコンセプトに惹かれ、しがないWEBデザイナーの私ですが、興味を持って購入しました。
WEBデザイナーですので、SEO対策をはじめとしたWEBマーケティングは独学でちょっとだけ齧ったことがあるのですが、本当に目からウロコが落ちる思考方法がギッシリ！！

この本を読みながら思ったのは、「そういえば、私もクトゥルフWEBダイスを立ち上げるにあたって、自分なりにWEBマーケティングっぽいことをやってコンセプトの策定やデザインの決定をやったよなあ……」ということでした。
マーケティング思考を忘れてしまわないうちに、クトゥルフWEBダイスを立ち上げる時に自分で色々と考えたことをまとめておきたい！と思い、ブログに書くことにしました。

おかげさまで月間50万PVを達成した「クトゥルフWEBダイス」が、どのようにコンセプトを策定し、どのようにデザイン・開発を行ったかをまとめます。

……そんな方の参考になればうれしいです！！

クトゥルフWEBダイスのコンセプトデザイン

【目次】

「クトゥルフWEBダイス」を立ち上げようと思った切欠

私がこのツールを作ろうと思ったのは５年前。最初の切欠は、「仕事でjavascriptsを使う必要があるから、勉強ついでに、何か役立ちそうなWEBツールを作ってみたい」でした。
当時WEBデザイナーを目指していた私は、HTMLとCSSは使えたのですが、jsなどのプログラミングの方は素人の域でした。
ただ普通にjsやjQueryの勉強するだけでは面白くないので、自分でも普段使いできるようなツールを作ってみたいなと思ったのです。

jsで何かしたい、とは思ったのですが、私のjsの腕前は初歩中の初歩です。
「３日くらいjsを勉強した」程度の初心者技術で作れるツールを検討することにしました。

jsを勉強していて、初歩中の初歩として出てくるプログラムが「ランダム関数」でした。
数字や任意の文字を、ランダムに取り出して表示する……。
これを見て、ハッと思い当たったのがダイスでした。

「クトゥルフ神話TRPGで、キャラメイクがめっちゃ面倒だった！」

当時私がハマっていたクトゥルフ神話TRPGというゲームでは、キャラクターを作成するために、ダイスを何回も何回も投げたり、出た出目を足し算したり掛け算したりする必要があります。
初心者がたくさんいる卓では、キーパーが一人ひとりに「このパラメーターは、この出目とこの出目を足して２で割って！」と説明しながら作るので、初心者が混乱してしまうと、キーパーが何回も同じ説明を繰り返す必要があって、キャラクターのパラメーターを作るだけでも３～４時間かかってしまったりと、結構面倒くさかったんですね。

そこで、jsを使い、ダイスの出目からパラメーターを自動算出するツールを作ってはどうか？
と思いつきました。

競合となるツールの調査

WEBツールを作るにあたって、まずは「パクリになったら良くない」と思い、ダイスやTRPGを扱う競合サイトを調査しました。

①WEB上のオンセッションツールはある（どどんとふ様）

サーバを借りて、ダイスを共有し、WEB上でTRPGを楽しめる有名オンセッションツール様です。
超便利な定番ツールですが、ネットに不慣れな人にはちょっと敷居が高いイメージがありました。

②WEBで振れるサイコロツールはある

数字を入力し、クリックすると任意の出目を表示するタイプのサイト様は結構ありました。
ただし「フォームに数字を入力すると、数字がポンと表示されるだけ」だったりと、
デザインに凝って作られているサイトは少ない印象でした。

③ダイスアプリやダイスソフトはある

スマホやPCにインストールして使うソフトやアプリには、グラフィカルな見た目のものもありました。
しかし、インストールの手間や、アプリ容量の増加がネックになる場合もありそうでした。

コンセプトの策定、ターゲティング

これらの競合調査によって、私はまず、以下のようなツールを作りたいと考えました。

 
①むずかしくない。初めて見た人でもワンクリックで使える簡単（シンプル）なツールにする。
②グラフィカルにする。ダイスを回す感覚を視覚・聴覚で再現する。
③ダウンロードしないで済む、スマホとPC両用のレスポンシブWEBサイトにする。
 

TRPGのユーザーが欲しいダイスツールとは、何でしょうか？
WEB上のダイスツールと、アナログダイスの違いは何でしょうか？
アナログダイスには、ダイスを回すときのワクワク感、重み、音、大事な局面での神頼み感があります。一方で、たくさんの種類を揃えるにはお金がかかる、無くしやすい、出た出目の計算が面倒という弱みもあります。
javascriptsで作るダイスには、リアル感には欠けるものの、ダイスの出目の計算が自動でできる、無料であり、オンラインであればどこでも使えるという強みがあります。

TRPGのプレイヤーは、ダイスを回した結果の数字が欲しいのではありません。
ダイスを回すときのワクワクや、神頼みをして回したダイスによって生まれる感動こそが、TRPGの醍醐味であり、プレイヤーの欲しいものだと思うのです。

この、アナログダイスとWEBダイスのいいところ取りをしたダイスを作ろう、と思いました。
アナログダイスを回す時のワクワク感を持ちながら、簡単な操作（クリック）をするだけで、難しくて面倒くさいパラメーターの計算を自動で行ってくれるツール。
初心者でも、ワンクリックで簡単にキャラクターのパラメーターを作ることが出来るようになれば、クトゥルフ神話TRPGに友達を誘うハードルも下がるはずです。ダイスを持っていない友人でも、WEBダイスがあれば気軽に誘いやすくなる。ひいては、クトゥルフ神話TRPGの人口も増え、一緒に遊べる友人が増えるかもしれない！！

 
これで、作りたいダイスの方向性は決まってきました。
上記のように私がぼんやりと策定していたコンセプトを、『ＵＳＪを劇的に変えた、たった１つの考え方　成功を引き寄せるマーケティング入門』を参考に、戦略として分かりやすくまとめてみたものがこちらになります。

 
【クトゥルフWEBダイスのコンセプト】
目的　⇒ クトゥルフ神話TRPGの敷居を下げ、TRPGの人口を増やす
戦略　⇒ クトゥルフ神話TRPGの初心者に使ってもらう
戦術　⇒ ワンクリックで誰でも簡単に使える、アナログダイスのワクワク感を持った自動計算WEBダイスツールを作る
 

月間１万人目標だったのが、今や50万PV……。めっちゃ増えたな～！
TRPG人口の増加に、少なからず寄与できたのでは？と、ひっそりと自負しております。

デザインの策定

コンセプトで掲げた「ワンクリックで誰でも簡単に使える、アナログダイスのワクワク感を持った自動計算WEBダイスツール」を実現するために、まずはデザインを策定しました。

①「ワンクリック、簡単」⇒シンプルなデザインに

一目でどこを押せばいいか分かるように、シンプルで使いやすいデザインにしたいと思いました。
⇒当時、WEB開発で流行っていたCSSフレームワーク「Twitter Bootstap」を導入することにしました。
当時はBootStrap2までしかなかったので2で作りましたが、今は4まで出ているようですね。

②「シンプルで分かりやすい」ダイスのデザイン

Bootstrapのシンプルさにあうように、ダイスのデザインも「シンプルで分かりやすい」ものにしたいと思いました。
サイコロの目がくるくると回る動作は、ワクワク感を取り入れるために絶対に入れたい。
また、目が止まった時にパッと分かりやすいように、６面ダイスは１～６の出目の色を変えたい。親しみやすい可愛さもほしい。
⇒ちょうど当時好きだった「忍たま」の学年カラーが６色であり、色合いも派手になりすぎず可愛かったので採用しました。また、１の目には手裏剣のモチーフを取り入れて、いい感じに可愛くなったと思います。

10面ダイスは、この６面ダイスにあうように太線・太くて丸い文字でデザインしました。

③ダイス音

アナログダイスのわくわく感を出すためには、絶対にダイス音は鳴らしたいと思いました。
もちろん、音が不要な場合はオンオフ出来るようにします。

ダイス音は、ニコニコ動画の投稿素材サイト「ニコニ・コモンズ」で半日ほどダイスを音を聴き比べまくって選びました。
採用したのは、耳に馴染みが良く、人気も高かったこちらのダイス音です。
http://commons.nicovideo.jp/material/nc42340

開発にかかわるデザイン

デザインの基礎が固まったところで、ツールの開発に関わる細部のデザインを行っていきました。

①ワンクリックでできる挙動にする

・「回す」ことだけをするサイトにする。
・余計な機能は一切付けず、ダイスを回すための「ボタン」だけを目立たせる。
・利用者は「クリック」以外の動作はしなくて済むようにする。

……上記のことを考え、回したいダイスや押すべきボタンの位置、出目（画像）と合計値を、誰が見てもパッと見分けのつくようなデザインにしました。
また、スマホからも使えるように、レスポンシブを意識して、ダイスの種類ごとにブロックに分け、見やすさを心がけました。

②キャラシートを表にまとめ、見やすくする

クトゥルフ神話TRPGのルールブックでは、キャラクターを作るためのルールが複数ページにわたって文章で記載されており、「このパラメーターを出す為には何のダイスを振り、何を足したり掛けたりすればいいのか」が一目では分かりづらくなっていました。
そこでまず、ダイスを振るべきパラメーターと、振らずに別のパラメーターから算出する能力値を分け、表にまとめることにしました。

ダイスを振るべきパラメーターを左の表にまとめ、「ここだけボタンを押せばいい」ことが一目で分かるように設計しました。
どのパラメーターがどのパラメーターから算出されているかも表に記載することで、右側の表のパラメーターを振り直したいときに、どのダイスを回せばいいかを一目で分かるようにしてあります。

はじめはパラメーターひとつひとつのダイスを祈るように振るのがTRPGの醍醐味だと思っていたので「一括で振る」ボタンは無かったのですが、後ほどコメントで「ワンクリックで全パラメーターを算出できるようにしてほしい」というご要望を沢山いただき、「一括で振る」ボタンも付けました。

 
このように、とにかく「分かりやすく！」「簡単に！」「動作はクリックだけ！」にこだわって、デザイン設計を行いました。
また、男女関係なく利用してもらいたかったので、可愛くしすぎないようにしました。
シンプルに作ったおかげで、制作から５年（公開からは２年半）経った今でも、古臭さのない飽きのこないデザインに仕上がったと思います。

SEOに有利なサイト名の命名

ツールを作ってから２年後に、仕事でwordpressの勉強が必要になったため、練習がてら、このツールをwordpress化してWEBサイトとして公開することになりました。
そこで１番力を入れたのが、「SEOに有利なサイト名をつける」ことです。

サイト名に、検索エンジンで上位に上がりやすいワードを入れておくと、SEO内部対策がしやすくなります。
そこで、私の作った「クトゥルフ神話TRPG用のダイスツール」が最も検索されやすいキーワードを探す為に、キーワード検索数・競合数の調査ツールやツイッターの検索を使って調査を行いました。

私が使っていたのは「ferret plus」のキーワード調査ツールだったのですが、現在はサービス終了しているようです。
代わりにaramakijake.jp(http://aramakijake.jp/)などでキーワードの検索数予測が出来るようです！

キーワード予測ツールやツイッター検索で調べたところ、

上記のことが分かりました。

 
そこで、サイト名を「クトゥルフWEBダイス」にすることにしてみました。
まずは「クトゥルフ」や「クトゥルフ　ダイス」といったクトゥルフとの複合キーワードで順位を上げ、ツール自体や「WEBダイス」という名称が浸透した暁には、「WEBダイス」での検索が主流になってもサイトタイトルの力で検索上位に引っかかるように、と考えたからです。
（当時はネット上のダイスツールのことを「ネットダイス」や「ダイスツール」と呼ぶ人の数もかなりいたのですが、今では「WEBダイス」という言葉が定着しているように思います）

サイトを公開してみて、これまで勉強してきたSEO対策を徐々につぎ込んで、実際に効果があるSEO対策を学んでいこう……
と思っていたのですが、２か月くらいで「クトゥルフWEBダイス」で検索１位に、３か月ほどで「WEBダイス」で１位になっていたので、SEO対策で何より大事なのは最初のサイトタイトル決めだ！！ということがハッキリ分かりました。
サイト名に含まれないワードで検索順位を上げる大変さと比べると、競合のないワードをサイト名にして検索１位を取ることがいかに容易か……。
雲泥の差なので、サイト名は慎重に決めましょう！！

 
このように、javascriptsを３日間勉強した程度のスキルでも、
きちんと事前調査をしてコンセプトを策定し、コンセプトに沿ったサイト設計・デザインがしっかり出来れば、月間50万PVのWEBツールを作ることが出来るんだな～と思いました！

 
コンセプト策定の際には本当に多くのWEBマーケティングサイト様やキーワード・コンテンツ策定ツールを参考にいたしましたが、それらのノウハウの根幹となる、１番大切なマーケティングの基礎が詰められた本が、冒頭で紹介させていただいた『ＵＳＪを劇的に変えた、たった１つの考え方　成功を引き寄せるマーケティング入門』でした。
こんな大事なことが１冊にまとまっているなんて……！　ととにかく目からウロコでした。サイトを立ち上げる前に出会いたかった！笑

WEBサービスをはじめ、自分で何かを作りたいと思った時、本当に役に立つと思いますので、ぜひ一度読んでみて下さい！！

また、このブログがWEBツールを作ったり、デザインをする方の一助となれれば幸いです！