実践イカパケット解析のスライドテーマ

Mzyy94
Misc
07 Dec, 2015

この記事はSplatoon Advent Calendarの8日目の記事です。

こんにちは、ウデマエA+のボーイです。昨日のmzsmさんの記事末尾にこんなことが書いてありました。

明日のSplatoon Advent Calendarは、Wii Uを柚子胡椒まみれにして故障させてしまうという不運にもめげずにイカパケット解析をした話をみっきー氏が書いてくれるようです。

大変にハードルを上げるバトンタッチを受けて少々困惑気味です。というのも、イカパケット解析の話をするという内容で~~煽りイカ~~紹介していただいたのですが、いろいろあって今回イカパケット解析の話は出てこないからです。期待していたみなさま、ごめんなさい。

実践イカパケット解析が何かわからない方々へ、詳しくはイカのスライドをご覧になってください。

実践イカパケット解析 from Yuki Mizuno

このスライドを公開したところ、各所にていろいろな反響がありました。技術的な批評がたくさんあるなか、非技術的な反応もありました。その中でも多かったのがイカのような反応です。

恐ろしくスライドのデザインクオリティが高いw

このスライドテンプレートほしい。

是非ともこの期待に応えたいと思ったので、Splatoonっぽいスライドテーマを作成し、公開しました。

Splatoonっぽいスライドテーマ

イカのリポジトリにて公開しています。

mzyy94/Slidoon

主にOS XでKeynoteを使ってスライドを作っているため、Advent Calendar 8日目までにはKeynote向けのテーマしか作成できていませんが、みなさんの反応によってはPowerPoint用のものも作成しようかと思っております。

Slidoonテーマの作成について

「スライドテーマ公開しました。」だけではAdvent Calendarの記事としてあまりにも内容が無さすぎるため、Splatoonっぽいスライドテーマ作成についていろいろと述べていきいます。

Splatoonっぽい色

背景色

Splatoonはあの鮮やかなインクの色が楽しさを引き立てている重要な役割を担っています。だからと言って、スライド全体をSplatoonのゲームパッケージのようなオレンジと青のようなビビッドな色で染めるのも聴講者の目を痛める原因となるだけなので、落ち着いた色をベースに使う必要があります。どこかにSplatoonっぽいけど落ち着いた色を使って見せるよい参考資料はないかと探していたところ、任天堂のSplatoon公式サイトに行き当たりました。

Splatoon（スプラトゥーン） | ナワバリバトル

トップページはパッケージと同じオレンジと青の鮮やかな色使いで注目させるようになっていましたが、説明の多いナワバリバトルの紹介ページでは、グレーの落ち着いた背景を用いていました。一目見て、彩度の高い色を使っているわけではないのに、ものすごくSplatoonをイメージするのにしっくりくると感じました。それもそのはず、インクを塗る前のステージの地面は大抵暗い色であるからです(マヒマヒを除く)。

これは使えるぞ！と思い、カラーピッカーを取り出し、採色しました。 RGBで、ベースのグレーは #2A2A2A、水玉模様のグレーは #212121であることがわかりました。

手作業で楕円の図形を追加してはサイズを調整し、カラーを #212121 にすることでなんとか背景を作り上げることができました。一見スライドの背景は一枚のイラストに見えますが、実はグループ化した楕円の集まりなんです。

楕円の集まり

インクの色

ベースが落ち着いた色であるからには、強調すべきところに鮮やかインクカラーを用いたいところです。そして、どんな色が使われているか知るるために、実際のゲーム画面から採色してみたいと思いました。そんなときに役立ったのが、一昨日のSplatoon Advent Calendarの記事で紹介のあった、stat.inkです。 Splatoonの戦績を集計するのに加えて、最終結果の画面のキャプチャ画像も一緒に登録できているため、自分の結果をひとつずつチェックしがてらカラーピッカー片手に色を集めていきます。随分とたくさんの色があつまったのですが、Keynoteのカラーテーマの登録数はベース6色バリエーション4パターンの24色を登録するようにできていたので、似た色を排除、足りないバリエーションの色を自分で考えて24色揃えました。また、グラデーションも扱えるようになっていたので、24色からハイカラになるようなグラデーションの組み合わせを6種作成しました。

カラーテーマ

どうやってカラーテーマの色を変更するのかがわからず長い時間躓いていましたが、現在の塗りつぶしの部分から下のカラーパレットにドラッグアンドドロップすると変えることができました。

イラスト

イカのイラスト

Splatoon = イカなので、スライドに刺激を加えるためにイカのイラストが使いたい欲がでてきました。しかしながらデザインセンスが皆無なため、最初に作成したイラストは散々な出来でした。（Slidoonのika4フォルダに†闇†が潜んでる)

ひとまず公式サイトなどで大体のイカの形を把握し、デザインセンスがなくても誤魔化せるようベクター形式で作成することにしました。といってもドローイングソフトウェアを持っていなかったので、Autodesk Graphicを購入しました(3,600円)。

高価なソフトウェアを買ったおかげか、いくらかましなイラストができたので、実践イカパケット解析のスライドに散りばめる形で利用しました。使いたい人がいるかどうかはわかりませんが、Slidoonのsquid8フォルダにPNG画像があります。

インクの飛び散り

インクの飛び散りイラストは絶対にどこかで使いたい！と思っていたのでスライド作成に必須のイラストでした。実践イカパケット解析のスライドの箇条書き部分に登場しています。

デザインセンスがないため最初はCCライセンスのものを探してきて利用していたのですが、せっかくテーマを作成するのだからライセンスが混ざるのは管理しにくいと思ったので、この記事を執筆開始する前に3時間かけて自作しました。 3時間かけて出来上がったのがイカのイラストです。

3時間の成果

「は？こんなイラスト作るのに3時間もかかったの？」　とお思いもしれませんが、すいません、デザインセンスが皆無なのでほんとに3時間かかりました。

出来上がったこのインク飛び散りイラストは、Slidoonの箇条書き部分に適用しています。

Finishの帯

実践イカパケット解析の発表の際は、最後のスライドを説明し終えたらゲームさながらの左右からFinish帯が張られるアニメーションで終了する凝ったギミックを導入していました。このFinishのイラストも作成したものです。といっても「Finish!」の文字デザインまで含めてではなく、文字はProject Paintballのフォントを利用しました。

プロジェクト・ペイントボールスプラトゥーン風アルファベットフォント

この利用規約にもあるように、Inkscapeでの描き起しであるものの、Project Paintballのフォントは任天堂の著作物のコピーに該当する可能性があるため、非営利目的のライセンスとなっており、同フォントを利用して作成したFinishの帯に関しても非営利での利用を強制させられます。なのでSlidoonのライセンスもCC BY-NC-SA 4.0になっていますが、このバナーを削除いただければCC BY-SA 4.0としてお使いいただけます。

フォント

実践イカパケット解析のスライドでは英数字記号のフォントにProject Paintball、ひらがなとかたかなにイカモドキ、漢字にNoto Sans CJK JPの極太字を利用しています。ライセンスの都合でこれらのフォントを同梱できないため、SlidoonではフォントをNoto Sans CJK JPを導入してある環境向けにテーマのベースフォントを指定しています。

実際に実践イカパケット解析のスライドもNoto Sans CJK JPをベースとしたフォントテーマで文字を入力し、ひらがなかたかなの部分を手動でイカモドキに変更、英数字記号を手動でProject Paintballに変更する形で作成してきました。そのため、文字にこだわる方はそのようにして作成していただくか、Fontforge等で上記3フォントを合成したフォントを用いるなりで対処してください。

また、Splatoonで実際に使われているフォントは取扱説明書によると、フォントワークス株式会社のフォントを利用しているようで、探してみたところロウディEBを利用しているようでした。

ロウディ EB | キャッチ | 書体を選ぶ | FONTWORKS