Kurotei 「完成度の高いスコアボードツールを作りたい。」 | スマブラで作るヒト ver 1.1.0
どうも、fun2smashです。
「クリエイティブでスマブラ観戦を楽しく」をモットーに活動しているスマブラ観戦大好き人間です。
現在任天堂のゲーム「大乱闘スマッシュブラザーズ（通称スマブラ）」を使って、いわゆるesports的な競技として大会が開催される「競技スマブラ」が注目を集めています。
競技スマブラ（esports）は選手・プレイヤーの活躍あってのものなので、基本彼らが主役です。
しかし大会は彼らだけでは成立しません。大会運営・配信の技術スタッフ・映像エディター・撮影スタッフ・デザイナーなど様々なクリエイターが最高の舞台を作るからこそ、プレイヤーもそこで輝きたいと思うのではないでしょうか。
そんなクリエイターの方々にスポットを当て、fun2smash（私）が様々な質問をさせていただき、その内容をまとめたものが「スマブラで作るヒト」です。
アーカイブはマガジンにして随時追加していきますので、よろしければフォローをお願いします。↓
初回は、デザイナーのKuroteiさんにインタビューしました。
Kuroteiさんは書体デザインを中心に活動しており、日本で欧文バリアブルフォントを広めている第一人者の1人かと思っています（バリアブルフォントについてはこちらを参照ください）。
Kuroteiさんは、書体デザイン以外にもマルチに活動されており、その1つにWebサイトも自作されています。
私的な話になりますが、私が元々そのサイトからKuroteiさんを知ったこともあり、今回スマブラという関わりでインタビューできたのも何かのご縁ということで嬉しかったです。
モーションなど含め、ほぼKuroteiさんの手によって作られている。
競技スマブラにおいては、Kutroteiさん主導でBraceBracketを7月末にリリースしました。BraceBracketは、対戦ゲーム用のスコアボードをブラウザ上で誰でもカンタンにつくれるツールです。
前後編の内の前編となるこの記事では、BraceBracketのことを中心に、Kuroteiさんの普段の活動やスマブラのクリエイティブ活動についても伺っています。競技スマブラやesportsに興味がある方、クリエイティブに興味がある方などにお読みいただけると幸いです！
Kuroteiさんについて
- まずKuroteiさんの普段の活動を教えてください。
Kurotei :
主として書体デザインを行いながら、グラフィックデザインやVIデザインの仕事をしています。
自分で色々とやってみたいタチなので、デザインからコーディングまでを含めたWeb制作やVlog制作、最近はBlenderなどにも興味があります。
また、今年の9月から書体デザインを更に深く学ぶためにイギリスへの留学を計画しています。
イヌやオオカミをモチーフとした本文用ヒューマニストサンセリフ。
下：KuroteiさんのYouTubeのVlog。
Vlog用に自身で製作したフォント「Narukami」を使用している。
- Kuroteiさんが思う書体デザインの魅力は何ですか？
Kurotei :
書体デザインの特異なところは、作ったものがツールとして残り続けることだと思います。広告デザインは数週間・数ヶ月間しか掲載されず、ブックデザインも長く残るものもありますが限度があります。
一方で書体はユーザーに使われるものなので、自分が死してもなお作品が残り使われることで、後世に残っていくのが書体デザインのいいところだなと感じます。
現在でも使われる「Trajan」というフォントの基となっている。
Wikipedia参照（パブリックドメイン）
また、グラフィックデザイナーやWebデザイナーがシェフならば、書体デザインは材料を提供する農家のような存在だと思っています。自分が提供した素材をシェフがどのように使ってくれるかを見るのもまた楽しみの1つです。
競技スマブラの大会では「篝火#8」にて僕の書体のNarukamiを動画などでカッコよく使っていただけて嬉しかったです。
様々なクリエイティブにてKuroteiさんが製作していた「Narukami」が使用された。
- 話をスマブラに移しますが、競技スマブラではどのような活動をしていますか？
Kurotei :
最初はソニック使いのKENさんのファンとしてファンアートを描いたり、KENさんのYouTube配信の切り抜きを作ったりしていました。
下：KEN選手のYouTube配信を切り抜いた動画。Kuroteiさんは動画編集やデザインを行った。
そこから今年になり、競技スマブラのクリエイティブ活動をより積極的に始めました。
まず2月にはスコアボードツールのBraceBracketを作り始め、7月に競技スマブラ大会の西武撃のデザインにも関わらせていただくようにもなりました。
Kuroteiさんがクリエイティブ周りを担当した。詳しくは後編に。
BraceBracketについて
- カンタンな概要について教えてください。
Kurotei :
BraceBracketはスマブラをはじめとした対戦ゲームに使えるスコアボード表示ツールです。既存のツールと違いWebベースで動作するのでOSに縛られない、編集画面を共有して別のデバイスやリモートで編集ができる、トーナメント管理ツールと連携して正確なデータを取得できる、インターバルのレイアウトやMC・Top8のレイアウトなども用意している、などの特徴があります。
上のスコアボードから下のプレイヤー画面なども編集できる。
中：右の編集画面を入力するだけでカンタンに画面に反映。
下：トーナメント管理ツール「start.gg」との連携も可能。
リモートで編集できるので、例えば配信を行なっているPCとは別のPCやタブレットでスコアを編集したり、配信を見ているモデレーターの方々がスコアを編集したり、配信者の対決企画などで視聴者が編集をしたり、などといったさまざまな形式で活用できると思います。
これまでの大会は配信団体、配信担当者の方への負担が大きく、現地にいないことには運営に参加しづらいといった部分があったかと思います。
ですが、BraceBracketは共同編集に対応しているので、リモートスタッフといった形で負担を分散させてより持続的に大会の運営と配信を行えるのではないかと考えています。
また、ブラウザだけで手軽に導入できることで身内大会やおふざけ大会などの「大会ごっこ」もたくさん行われたらいいなと考えています。
WEBブラウザ版がリリースした直後にBraceBracketを使用している。
- そもそもかもですが「BraceBracket」の由来は何でしょう？
Kurotei :
Braceは「強固にする、支える」という意味があり、Bracketは「トーナメント」を指しています。
同時にBraceは波括弧={}の名称で、Bracketは角括弧=[]の名称でもあります。記号的に使いやすく、また自分の本職である書体デザインとのつながりを持たせながら、esportsの大会にもつながると同時に、面白味やわかりやすさなどを考慮した結果、BraceBracketになりました。
- BraceBracketを作ろうと思った経緯を教えてください。
Kurotei :
日本の界隈でよく使われているスコアボードツールは、どの大会でもカンタンにスコアボードが導入でき、素晴らしいものだと思いつつも、デザインは共通のフォーマットでした。逆に海外では各大会ごとのデザインにバリエーションがあり、そこに憧れがありました。
そこで、デザインがいくつか選べる、また自分でデザインを変更できるスコアボードツールを作ってみたいと考えていました。
日本は早くから手軽にスコアボードを表示できるシステムが開発された。
また、KENさんのYouTubeメンバーが「スーパーマリオメーカー2」で争うマリメ対抗戦というものがあるのですが、そこでKENさんに負担をかけない形でスコアボードを出せたら面白そうだと思い、リモートで編集できる現在の形になりました。
- BraceBracketの制作期間を教えてください。
Kurotei :
スケジュールとしては、2月の中頃にプロトタイプを制作し、4月にベータ版を公開しました。
ただブラウザで完結させることに関しては、頭の中にはあったものの自分の技術力の不足から諦めていました。
しかし5月にエンジニアのとーふとふさんが声をかけてくださりWeb版の開発に着手、そして先日ようやく発表できました。
とーふとふさんが入ってくださったことにより実現させることができたということで、頭が上がりませんね…。
- Kuroteiさんが、自分の思い描くビジョンをとーふとふさんに伝えるためにどのような形でやりとりしましたか。
Kurotei :
DiscordでBraceBracketのサーバーをたて、そこでアイデアや仕様、実装方法などを話し合い、2週に1回自分ととーふとふさん、セキュリティやデバッグを担当してくださったはえぬきさんと定例でちょっとした通話をしたりしていました。
BraceBracketは共同編集という新しい特徴がありますが、その点で不信感を与えないよう、より「プロダクト」として完成度と信頼度を高くしたい気持ちがあったため、実際のワークフローやデザインに関しても通常の仕事のようなプロセスを踏んでいます。
仕事のようなプロセスを踏むことで完成度が高まった。
デザインはFigmaで2サイズを想定して制作し、その中で実装の場合の挙動などを話し合った後、とーふとふさんに実装していただいています。
実装はNext.jsで行っていて、バグ取りや機能追加などの要件はGitHubのIssueで管理しています。
自分がNext.jsを少し触った経験があったのもあり、全体のインタラクションやトップページ、使い方などのページは僕の方でコードを書いています。結果としてお互いの強みが噛み合ったいい制作ができたと思います。
- BraceBracketは今後アップデートなどの予定はありますか。
Kurotei :
チーム内で追加したい機能はたくさん考えていますが、BraceBracket自体が複雑になり使いづらくならないように慎重に追加していきたいと思っています。
例としては、プレイヤーの方にタブレットを置いてそこからスコアを編集したり、BanPickを行えるようにしてBanPickのレイアウトを表示したり、テロップのレイアウトを表示したり、編集画面からOBSのスイッチングを行えるようにする、3on3用のレイアウトを追加する、などを考えています。
また、西武撃のように大会のデザインを行いつつ、カスタマイズしたBraceBracketを導入していただくような取り組みも積極的に行いたいと考えています。
以上がインタビュー前編となります。
「BraceBracket」のシンプルで使いやすい機能の裏には、書体デザインからインタラクションやコードのスキルなど、Kuroteiさんのマルチな才能が支えていたことがお分かりいただけたかと思います。
後編では、スマブラSP大会の「西武撃」のクリエイティブを担当するにあたっての制作秘話から、競技スマブラのクリエイティブについて伺います。デザイナーがただビジュアルを作るだけでなく、深いところで何をしているのかを少しだけ垣間見ることができるかと思います。
私は普段スマブラ観戦にまつわることで、Twitterに画像を投稿したり、noteに記事を書いたりしております。自己紹介記事を投稿しているので興味がある方はこちらも是非ご覧ください。
この記事が気に入ったらサポートをしてみませんか？