ゲーム会社のゲームじゃないところのデザインの話
Happy Elementsカカリアスタジオ アドベントカレンダー2019 の24日目の記事です。
はじめまして。
Happy Elements カカリアスタジオの 『デザイン戦略室』 という、今年1月末に発足したチームに所属している、グラフィックデザイナーです。
この記事では、ゲーム制作会社 Happy Elements カカリアスタジオ における 「ゲームじゃないところ」 のデザインを担当する 『デザイン戦略室』 という部署についてお話ししたいと思います😊
（話が長いタイプの人間なので適度にかいつまんで御覧ください🙇♀️）
カカリアスタジオの「ゲームじゃないところ」のデザインを担当する『デザイン戦略室』とは
アドベントカレンダーの2日目の記事 「ハピエレ(カカリアスタジオ)の目指す理想とゲーム開発現場の3つの特徴」 で触れられている通り、カカリアスタジオでは各ゲームタイトル毎にチームが分かれており、それぞれ独自の文化・方針・テンションでもって、各チームが最高と考えるゲーム制作に日夜励んでいます。
それぞれのチームがゲーム制作のプロ集団ですが、ゲーム以外の部分――例えばゲームの公式サイトやコラボイベント等の特設webページ、コミケやAGFのグッズ制作などなど――まで手が回らないこともしばしば。
また、カカリアスタジオの企業サイトや外部媒体に掲載する求人広告など、コーポレート関係のデザインなどについては、各ゲームタイトル所属のデザイナーさんに担当して頂くのは、ﾁｮｯﾄﾁｶﾞｳ…となりますよね。
そこで生まれたのが、カカリアスタジオの「ゲームじゃないところ」のデザインを一手に担当する部署『デザイン戦略室』でした。
具体的にはこういう案件を担当します
- 各ゲームタイトルにおけるイベントやキャンペーン等の特設webページ・サイト制作
- 一部タイトルの公式サイトの制作・更新
- カカリアスタジオ公式広報「カカリアンズ」関連の画像や配布物の制作
- 外部媒体に掲載する求人広告や、ポスター等の印刷物作成・お手伝い
- コミケやAGF等で販売/配布されるグッズの一部についてデザインや入稿データ作成、サイトや紙媒体に掲載する商材イメージ画像作成
などなど、を担当しています。
デザインなんでも屋さんですね。
実際の仕事を一部ご紹介
私自身は主にwebサイトの制作（デザインからコーディングまで）を担当していますので、過去1年の制作サイトの中からいくつか、裏話も交えつつご紹介したいと思います✍
メルクストーリアコンサート2019
1月末のメルスト5周年に合わせて公開された、メルクストーリアコンサート2019の特設ページを制作しました。
（ 5周年特設ページ も合わせて制作担当しています）
イラストレーターさんとのやりとり
パンフレットの表紙用に描き下ろされたイラストを「こういう感じで使いたいので、重なってる部分も全部描いてもらえませんか…！」とイラストレーターさんにお願いし、キャラクターをそれぞれ単体で使えるよう描き込んで頂きました。
背景の草原も、パンフレットでは地平線が弧を描いているのですが、サイト用に真っ直ぐな地面も描き下ろして頂いています。
社内で一緒に働いているからこそおねだりできる……ありがたいことです🙏
ライティングも一部やらせてもらったり
また、デザインとコーディングの他「ご挨拶」やページ末尾のメッセージのライティングも一部提案させて頂きました。（書き上げたあと、チームのライターさんに確認頂いています）
「こういうサイトを作って欲しい」とオーダーを受けて作り上げるだけでなく、 「こういうサイトにしたいな」を提案できる ところが、インハウスデザイナーの醍醐味だなあと常々思っています。
ラスピリ3周年
どのゲームタイトルも、周年のお祝いが近づくと特設webページが大量に増えます……
メルストは1月なので離れているんですが、あんスタとラスピリはとってもご近所さんなので、4〜5月が繁忙期になるわけですね。
この頃は制作に手が回せるのが私1人だけだったので、以下4ページはほぼ同時進行で制作を進めていました。
- ▶ ラスピリ3周年特設ページ
- ▶ ラスピリ第3回人気総選挙特設ページ ※投票中画面と結果発表画面
- ▶ ラスピリ3周年記念イラストコンテスト特設ページ ※募集画面と結果発表画面
- ▶ ラスピリ×スイパラさんコラボ特設ページ
デザインは盛ったままコーディング工数を削るという荒業を使っていますね……
イラストコンテストのページ では、第1回・第2回の新ユニットデザイン部門を受賞され、ラスピリに実装されたユニットを使用させて頂いています。
目指せ！アーデちゃんとレベッカちゃんに続く3人目！という気持ちでした。
スイパラさんとのコラボ特設ページ は、普段なかなかできない「かわいい」に振り切ったデザインができたので大変楽しかったです😊
（しかしネロさんの耳が画面から飛び出まくって大変でした）
あんスタ！ここすきメーカー
あんスタ4周年を記念したキャンペーン「ここすきメーカー」のデザインを担当しました。
チームからの依頼と制作の流れ
- こういうものが作りたいという大まかなコンセプトと、どういった機能を持たせたいかのざっくりとした仕様が簡単なイメージ画像付きで届きます。
- Adobe XD を利用して画面の遷移などが確認できるようにし、それを元にチーム及びシステム周りの実装担当の方と一緒に機能の過不足や、技術的に可能かどうか、また工数の確認をします。
- 細かい部分のデザインを詰める、こういう素材を使えるようにしましょう！などなどチームに提案しデコ素材を頂いたり作成したり、難しいプログラムが関わらない静的な部分のコーディング…などなどの実制作を行います。
- 今回TOPページはプログラムが関係しないため最後に着手しています。どのくらいデコレーションできるのか分かりやすいように作例を置くことを提案し、機能面が概ね実装完了してからいろんな方に制作をお願いしました。
3より2が大切
「デザイン」と一言でいうと、上記の3にあたる「見た目」を整えるお仕事と捉えられがちですが、こういった遊んで楽しんでいただくコンテンツにおいては、2の 「使いやすさ」のデザインが一番重要なポイントになります。
（楽しんで仕事をしたいのでサンプル画像は推しアイドルのイラストを使用させていただきます。たいへんお顔が素晴らしい。ところで全世界の fineP のみなさん、生きてますか…私は推しの光を浴びすぎて灰です…）
たとえば
たとえば、ベースのイラストに対してデコレーションする画面で「青い矢印を画面内に追加したい」となったとき、以下の通りに操作することが想定されます。
- 下部メニューから「アイテム追加」ボタンを選択
- 「色を変えられるデコ」タブを選択し、その中からアイテムを選択
- 色を自由に変えて配置
この操作を実現するのに、以下のように色々な動き・見せ方の想定が必要になります。
-
下部メニューから「アイテム追加」ボタンを選択
- ボタンが押されたら、アイテムの一覧を表示します
- 「貼るだけデコ」と「色を変えられるデコ」があり、それらがタブで切り替えられることを表示します
- 「貼るだけデコ」は数が多いので、目的に合ったアイテムを探しやすいよう、カテゴリに分けて表示します
- 各カテゴリ内にどんなアイテムがあるのか、また現在どのカテゴリを見ているのかを明示します
- また、アイテムの中に想像していた通りの素材がなかった場合、元の画面に戻れるように「✗」ボタンを配置します
-
「色を変えられるデコ」タブを選択し、その中からアイテムを選択
- アイテムの「プレビュー」と「色を選択するパレット」と「追加ボタン」を表示します
- 現在どの色を選択しているのかを明示します
- 別のアイテムに変えたいときのために、パレット表示に対しても「✗」ボタンを配置します
などなど……
機能面が関わってくるため、これらを「仕様書」にする必要があるのですが、 どういった動きにしたいのかをすり合わせたり見落としを防ぐためにも、XDでの流れの確認がとても重要になります。
操作している人の「予想している動き」に寄り添うことに重点を置いて、 できるだけストレスなく遊んでいただくことが、一番根本的で大切な「デザイン」だと考えます。
エリオスR公式サイト
ここまでの制作の中で一番の難産がエリオスRの公式サイトかもしれません……
この規模のサイトを制作するのは初めてだったことと、制作開始時点ではまだエリオスRのアプリ自体のデザインも制作がはじまったばかりでありイメージが固まりきっていない中で着手したことなどが難しいポイントだったのですが、何より一番苦労したのは「Nuxt.js を使用して実装したから」でした……
職能的にはグラフィックデザイナーという立場ですが、webサイト制作に関わるフロントエンド周りの新しい （Nuxt は特に新しいというわけでもないですが……） 技術に挑戦する機会も多々あります。
とはいえデザイナーの記事なのでデザインの話を
サイトデザインを進めるにあたり、一番最初にキャラクター一覧ページに着手しました。
サイトの全体のイメージやデザインの方向性を決めるにあたって、情報量が多いこと、TOPページやNEWSページと比べて世界観を表現しやすく、チームとのイメージの相違がないかを確認するのに適していたことから、このページを選んでいます。
キャラクター一覧とキャラクター個別のページでイメージを固めてから、その他のページを進めつつ、ティザーページを作りつつ…という、慌ただしい夏コミ前の1ヶ月になりました。
エリオスR公式サイトについては、未開放のページもまだまだありますので、今後の情報追加にご期待ください😊
2020年のリリースが待ち遠しいですね！
アンサンブルスクエア合同求人
新章『あんさんぶるスターズ！！』の事前登録キャンペーン のひとつとして 11/15 に公開されました🎉
あんさんぶるスターズ！！は事前登録キャンペーンを実施中ですので、ぜひ登録よろしくお願い致します😊
チームから依頼が来たときは、リリース時とやや異なる見せ方でした
新章で事務所へ所属する世界観をアピールすべく、ユーザーのみなさんへ 「各事務所からの採用オファーを出すパロディサイトを作りたい」 という企画ですが、当初チームから頂いた内容では「ハピナビ」という多数企業の求人を扱う求人情報サイトの特設ページという立て付けでした。
ヒアリングする中で 「これはアンサンブルスクエアが合同で求人を出している方がわかりやすい（し、事務所感のあるかっこいい見た目のサイトにできる）のでは？」 と提案させて頂いて今のかたちに落ち着きました。
企画内容を変えるにはプレゼンが要る
チームから届いた案を変更するなんて大それたことをする際には、 提案した内容の方がより良いことをアピールするためにプレゼンが必要となります。
完成形をイメージしやすいよう、大まかなデザインイメージの提示と一緒に全体のテキストライティング（TOPページの一番上のキャッチコピーから、企業の求人詳細、オファーメッセージの内容など）も行いました。
世界観と食い違っていないかの確認はして頂きましたが、ほぼほぼそのまま使用されています。
※もちろん、事務所・ユニットの説明文や各アイドルからのコメントは、チームのライターさんが手がけられているのでご安心ください
Happy Elements カカリアスタジオ でも求人募集をしております
本求人サイトは『あんさんぶるスターズ！！』事前登録キャンペーンのパロディページです。実際にアンサンブルスクエアで求人活動を行っているわけではないことをご了承ください。
なお「あんスタ」をはじめとしたアプリゲームを開発している Happy Elements カカリアスタジオ では随時一緒に働くスタッフを募集しております ので、ぜひご応募ください😊
そろそろまとめ
カカリアスタジオのビジョンは、 「熱狂的に愛されるコンテンツをつくる」 こと。
『デザイン戦略室』では、その生み出された 熱狂を加速させること 、を使命としています。
素敵なコンテンツの生まれる場所を一番近くで見守りながら、その素敵なコンテンツがみなさんの手に届くためのお手伝いをする。
そういった形で関わりたいという方もぜひ一度、カカリアスタジオの採用特設サイト をご覧ください。
明日でアドベントカレンダーも最後！
長らくお付き合い頂いた Happy Elementsカカリアスタジオ Advent Calendar 2019 も明日で最後となりました…！
どうぞ最後まで楽しんでください😊
余談ですが、12/24の日が暮れたらクリスマスだってご存知ですか？
というわけで、日が暮れてからご覧になっている方にはメリークリスマス！🎄✨
素敵なクリスマスをお過ごしください〜！