コミュニケーションって難しいよね… だからゲームを開発しました

こんにちは、デザイナーの馬場です。

わたしたちがはたらいている株式会社ビズリーチは、自社のインターネットサービスをほとんどすべて内製して運営している事業会社です。どんなプロダクトを作るか？どんな改善をするか？を、デザイナー同士はもちろん、職種の垣根をこえて、自分たちで毎日考え、議論しています。そのため、コミュニケーションは必要不可欠で、重要なものです。

円滑なコミュニケーションのために、チームビルディングの取り組みをする機会もあるかと思います。しかし、例えば、人といっしょにごはんを食べに行ったり呑みに行ったりすることが、億劫なことがあるのも事実です。私たちのチームでは、コミュニケーションを促進するために、定時後に時間をとって定期的にデザイナーが集まっています。食事を頼んだりおしゃべりしたりして、おおむね楽しく過ごしていましたが、なんとなく、必要以上に気を遣い合うような雰囲気があり、いまひとつしっくりきていませんでした。

それでは、どうすればより仲良く、より楽しくコミュニケーションできるのでしょうか。小学生のときは、テレビゲームがあれば何も気にしなくてもみんなで盛り上がれたのに。

どうしたらいいかなぁ

“小学生のときは、テレビゲームがあれば何も気にしなくてもみんなで盛り上がれたのに。”

この気持ちは今でもそう大きく変わっていないはず。つまり、みんなでいっしょにゲームをしたらチームで打ち解けられて、コミュニケーションもしやすくなりそうです。

しかし、会社にわざわざPolybiusなどのゲーム筐体を持ってくるのは面倒ですし、得意・不得意が顕著にあらわれるようなものだと、すべての人が平等に楽しめないかもしれません。それでは「何も気にせずみんなで盛り上がる」という目的に反しています。

なので、だれもがすぐにルールを理解できて、その場で盛り上がれる、最先端のゲームを自分たちでつくることを思い立ちました。

２種類のゲームをつくった

こんなことを考えていた矢先、私と同じくコミュニケーションに苦手意識のある、デザイナーの仲間を見つけました。彼女もこの取り組みに賛同してくれて、それぞれにゲームをつくりはじめました。

最初に彼女が作ってくれたのが、「いらすとや４コマ」です。「いらすとや」のなかから４種類の画像がランダムな順番で表示され、それをひとコマ目からアフレコし、起承転結を作っていく遊びです。「結」を担当する人の責任が重大ですね。

カードをひっくり返すインタラクションをCSSのtranslate3dを使ってこだわったところなどが、デザイナーっぽい工夫です。

いらすとや４コマをやってるところ

つぎの週には、私が「陣地しりとり」というゲームをつくりました。

仕事中になんとなくしりとりをしていたことから着想しました。しりとりで使った言葉に含まれる文字をひとりずつマークしていき、いちばん多く自分の色で塗った人が勝ちというゲームです。通常のしりとりとは異なり、過去に出た言葉を言ってもよいが、それだとすでに陣地がとられているので点数が増えない、というのが特徴です。

意外と「え」とか「は」とか普通そうな文字が出てこない

実装に関する工夫は、２つあります。
１つ目は、ひらがなの一覧を以下のようにインスタンス化したこと。

// Flexboxで右上から左下に並べていったときに50音表がきれいにできるように間に全角スペースを挿入.
protected chars = 'あいうえおぁぃぅぇぉかきくけこがぎぐげごさしすせそざじずぜぞたちつてと　　っ　　だぢづでどなにぬねのはひふへほばびぶべぼぱぴぷぺぽまみむめもや　ゆ　よゃ　ゅ　ょらりるれろわーん'.split('');

また、しりとりの判定は以下のようにしました。

private isShiritoriContinues(previousWord: string, currentWord: string): boolean {
  if (!previousWord || !currentWord) return false;
  if (currentWord.slice(-1) === 'ん') return false;
  if (currentWord.slice(-1) === 'ー' && currentWord.slice(-2).slice(0, 1) === 'ー') return false;
  const exp = currentWord.slice(0, 1);
  switch (previousWord.slice(-1)) {
    case 'ぁ': return exp === 'あ';
    case 'ぃ': return exp === 'い';
    case 'ぅ': return exp === 'う';
    case 'ぇ': return exp === 'え';
    case 'ぉ': return exp === 'お';
    case 'っ': return exp === 'つ';
    case 'ゃ': return exp === 'や';
    case 'ゅ': return exp === 'ゆ';
    case 'ょ': return exp === 'よ';
    case 'ー': return exp === previousWord.slice(-2).slice(0, 1);
    default: break;
  }
  return exp === beforeWord.slice(-1);
}

作ったゲームは、冒頭に書いたチームのデザイナーが交流する時間に、みんなで遊びました。遊んでみた感想をチームメンバーに聞いてみました。

遊びからはじまるコミュニケーションによって、仕事でのチームプレイが促進される雰囲気が醸成できていると感じています。

ゲームの完成度が異様に高いので、単純に勉強になる部分もありますね。不具合が発生したら、その場で直しはじめてライブコーディングが見られたり、 UIに対してツッコミを入れたり。デザインに対する考え方を感じられる点でも、良いチームビルディングになっていると思います。

また、実装が得意でないデザイナーも、ボードゲームを持ち込んだり、新しいサービスを使って料理を頼んだり、珍しいメニューを買ってきたり。単純に話をするだけでなく、交流会というひとつのコトに向き合って、全員がお互いを楽しませようと、それぞれできることに取り組む雰囲気ができてきたのは素敵だなと思います。

仕事でも、自由な発想でサービスに対して提案をしたり、ノベルティを作ってみたり、好きなことをしてみようという空気感は徐々に強くなっていると思います。

おわりに

わたしたちのチームは、ものを作ることがとにかく好きで、ずっとコトに向き合ってしまうメンバーが少なくありません。今回はそれを逆手に取り、みんなでオリジナルなものをつくって、みんなでやってたのしむことに取り組んでみました。

企業さま向けのサービスを作っていると自分たちがユーザーになる機会が少ないため、こうしてすぐに仲間にフィードバックをもらってプロダクトの課題や改善方法を考えられるのも新鮮でした。

これからも、私たちらしいやり方で、新しいはたらきかたを試していきたいと思います。