KLabGames Creative Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。

KLabGames Creative Blogでは、これまでにもクリエイティブに関する記事を紹介してきましたが、今回、そこに「UI通信」というコーナーを新設していただいたので、月に一回程度、UI/UXについて書いていこうと思います。KLabには様々なプロジェクトがあり、その中で、100名近いUIデザイナーがいます。UI/UXと言っても、仕事の内容は人によって得意分野も異なり、ワイヤーが引けるデザイナー、画面デザインに特化した人、訴求の制作に特化した人、UX寄りの人、様々です。そこで我々が、どんな仕事をしているのかを紹介していけたらと思います。

今回は初回ということなので、まず、どうやったらUI/UXデザイナーになれるのって話をします。紹介が遅れました。UI通信の第一回を担当させていただきます。UI/UXディレクターのCOOMAと申します。

UIデザイナーのお仕事

よくUIって画面のデザインする人でしょ?とかUXって何をする人なの?っていう質問をされます。クリエイターを目指す人は、やはり、広告でドーンと利用されるようなイラストや3Dアーティストになりたいという人が多い。どうしたって、私、ボタンのデザインをしたい!枠をデザインしたりしたい!なんて思わない。UXなんて、なにを作ってるの?思想家?って思ってる人もいたりして。

UIデザイナーやUXデザイナーの人は、もともとは別の職種だった人が多いようです。イラストをしていてUIデザイナーになった人、開発をしていてUXデザイナーになった人。なりたい人が少ない要因は、まずどうやってなるのか?なにをしているのか?これがうまく伝わっていないせいかもしれません。

でも、UIやUXのお仕事は実に奥が深く、ゲーム全体について関われるとも言えます。もし、UIやUXの人たちが、何を考え、どんな仕事しているのか、その現場を、あまり知らない人が見たら、なんて楽しそうなんだろう、憧れちゃう!みたいになるに違いありません。なぜなら、私も憧れちゃった一人だからです。

UIデザイナーになるには?

UIデザイナーは画面の意匠デザインをする人と思っている人が多いようです。しかし、UIデザイナーの中にはデザイン学校に行かなかった人もたくさんいます。webデザインのコーディングをやっていて、そのままUIデザイナーになった人もいます。デザインは他の人にやってもらったらいいからです。それよりも、どんなふうにレイアウトし、情報をどう整理するかの方が大切だったりします。

或いは、文字が大好きでUIデザイナーになった人もいます。フォントについて研究していて、訴求バナーなどを作っているうちに、ロゴ作りの面白さに目覚め、情報をどう伝えるのか興味が出て、そのままUIデザイナーになったケース。ソーシャルゲームの現場では、週に1つのタイトルで多い時には数百枚もの訴求バナーを作ります。そこではロゴなど、情報をどう見せるかで売り上げが変わります。イラストとはまた違う刺激的な面白さがそこにはあります。

UXデザイナーになるには?

UXではさらに、広い視点が必要とされます。すぐにUXデザイナーになるというより、UIデザイナーからUXデザイナーになってゆくケースが多いようです。UIデザイナーはプログラマー、企画の人、あるいはマーケティングの人と広告戦略についてもやりとりすることも多くなります。そのため、ゲームを企画から開発、ユーザーにどのように届けられ、どう売り上がるのかまでを通して考えることができるようになるので、ユーザーがどんなふうに遊ぶのかというところまで意識して、UIを考えることができるようになります。

人によっては、制作進行管理からUXデザイナーになる人もいます。チームをスケジューリングしながら、プロジェクト全体を俯瞰し、チームをドライブし、いかに、制作物のクオリティを上げてゆくかを考えることで、UXの考え方に近づいて行くわけです。

人によって着地の仕方はそれぞれのようです。そして、一口にUIとかUXと言っても、やっていることはその人の得意によって実に様々です。

UXデザイナーになりたかった

私の場合はさらに特殊な例と言えると思います。なぜなら初めから「UXデザイナー」になりたかったからです。40年以上前からです。本当なんです。しかし、当時はUXという言葉すらありませんでした。小学生の文集の夢に「体験を作る人」と書いていたくらいです。

なぜ、そんなことを書いたのか。当時、インベーダーゲームが登場し、ゲームという新しい体験が生まれました。そして、私は販売されたばかりのファミコンを熱烈に所望しました。しかし、ある日家に帰ると、机の上に、巨大なパソコンが置いてありました。そのせいで、ゲームを遊ぶことはできずに、人の遊んでいる姿をゲームセンターで見るか、自分で絵を描いてプログラムして、ゲームを作るしかありませんでした。でも、ひとつ、言えることは、とにかく人が驚いたり、感動したり、楽しそうにしているのを見るのが好きだったのです。当時ゲームを作る人という職業は一般的ではなく、「体験を作る人」と書いたのです。

結局、プログラムか絵かで迷った挙句、芸大に進学しました。しかし、途中で、絵が描きたいわけではなく「楽しい」をやりたいんだ!となり、なぜか「楽しい」という心を分析しようとして、心理学に没頭していってしまいました。その後も「体験を作る」という職業を追い求め、舞台の演出や舞台美術の仕事をしたり、広告のデザイナーをしたり、企画を作ったり、目標はあったのですが、体験そのものを作らせてくれるものがなく、軸を定めきれない状態は続きました。

2003年、DocomoがモバイルでFLASHを採用すると発表し衝撃が走りました。一人で、企画して、開発して、演出もデザインをしてゲームが作れる!これだ!私は全てを投げ捨て、携帯業界に飛び込みました。しかし、それもつかの間、ゲームは巨大化し、一人で作ることができないようになっていきました。チームも3人から、5人、10人、50人、100人。分業化が進んでいってしまいました。

そんな折、海外ではUXという考え方がものつくりの主流になっていました。「体験をデザインする」というこの考え方は、まさに、私の考えてきた、体験そのものをつくるお仕事でした。私はまっさきに手を挙げました。理解はなかなか得られませんでしたが、UX的視点で提案し、UIや企画、あるいは業務フロー改善に反映させていきました。そして、それは、今まで、バラバラに取り組んできた、デザイン、開発、企画、演出、心理学、全ての経験を同時に活かすことができるものだったのです。

そして、いつの間にかUXデザイナーという肩書きをもらえるようになっていました。今でもどうやったらUXデザイナーになれますか?という質問をもらったりします。おそらく、それは人それぞれではないかと思います。UXのセミナーに参加すると、野菜を作っている人が、UXデザイナーと名乗っていたことがありました。本当に奥が深い仕事です。私もいつか、社内で花に水をあげながら、UXをしていると主張する日が来るかもしれません。

現場からお伝えします

そんなわけで、このUI通信では、現場で、UIやUXの人が、実際にどんな問題に直面し、それをどう解決していっているのか、実際の仕事の現場について紹介していこうと思います。一人でも多くの人が、UIやUXの仕事の面白さを感じて、こんな仕事がしたいなと感じてくれたらと思います。

また、同業の人にも、共感していただき、それについて詳しく知りたいということがあれば、お気軽に声をかけていただければと思います。KLabでは社外向けの勉強会なども開催しているので、そこでも取り上げていきたいなと考えています。

はじめに

こんにちは、KLab Sound Teamのはなわんです。

普段はKLab株式会社のサウンドディレクターとして担当タイトルの作編曲、SE制作、実装までサウンド全般を担当したり、他タイトルのサウンド制作、プロモーション関連業務など幅広く活動をしています。
また、ブランディング活動として積極的な対外発信も行っています。

その一環として、今回は表題の通り
にじさんじ所属のバーチャルライバー「樋口楓」さんのライブ
「Kaede Higuchi 1st Live "KANA-DERO"」において、バンドメンバーとして参加する機会がありました!

_____

▲当日のライブ中の写真

◆『バーチャルライバー + 生バンド』

2次元(2.5次元?)+3次元・・・というところで中々イメージがつかないかと思います。
ので、ライブ動画をご覧頂けたらと思います。

この動画のようにセンターに樋口さん、その左右にバンドといったフォーメーションを組み、16曲のセットリストで会場のファンの方々と熱いライブを創り上げました。

このZepp Osaka Baysideという大きな規模で、どのような問題があり、どのような楽器や機材を使って解決しライブを成功させたのかを紹介していきます。

※機材的・技術的でないお話はこちら

①セットリストが様々なジャンルの16曲だった

(解決策)

複数本の楽器とデジタルオーディオプロセッサー+MIDIコントローラーで対応。

大まかな機材

(はなわん)
・Fender Telecaster(SSテレキャスター)
・T's Guitars DST-Classic(HSHストラトシェイプ)
Kemper Profiling Amplifier (マルチオーディオプロセッサー)

(ハヤシ)
・Fender Custom Shop Stratocaster(SSSストラトキャスター)
・Suhr Modern(HSHオリジナルシェイプ)
Fractal Audio Systems Axe-Fx Ⅱ XL+ (マルチオーディオプロセッサー)

◆ギターについて
楽曲によってシングルコイル(S) or ハムバッカーコイル(H)で持ち替えています。

軽い音やエッジの効いた音が欲しい時→シングル
重めの音や厚みが欲しい時→ハム

といったように、楽曲に応じて楽器を持ち替えする事によってオールジャンルに
対応することが出来ました。

※同じアンプ・同じフレーズでもこれだけ変わります。

・シングル(SSテレキャスター)

・ハム(HSHストラト)

また、セトリの楽曲から例を上げると以下のような分け方をしています

ざっくり要件:ドロップDチューニングの重厚なリフ、滑らかな音のオクターブ奏法
→ハムのギターを使用

ざっくり要件:軽めでエッジの効いたカッティング、明るく分離感のあるコード
→シングルのギターを使用

上記楽曲のようにギターをどちらにするか決めやすいものもあれば、決めにくいもの(どちらのギターでも合いそうな曲)もあります。

それらはセトリの流れで決めたり、双方のギターのパートで分けたりしています。

◆マルチオーディオプロセッサーについて

アンプシミュレーター、マルチエフェクター、という単語のほうが聞き馴染みがあるかもしれません。

※Axe-FxとKemperを一括りにしてしまうと違う気がしたのでマルチオーディオプロセッサーと記載しています。(機能的にはアンプシミュレーター+マルチエフェクター的なものです)

・アンプを使う上で我々には選択肢がいくつかありました。

①生アンプのみ
②生アンプ+エフェクター
③生アンプ+マルチオーディオプロセッサー(外音に使用) 等

しかしながら、以下のような様々なメリットを踏まえ③を選択しました。

・壊れにくく長距離移動の現場でも安心
・ライン出力なら予め出音を作り込んで本番を迎えられる
・曲数が多くジャンルが様々なので複数プリセットで管理出来る
・MIDIコントローラーを使うことにより複雑な踏み変えの必要がない
・上記かつ、生アンプを併用することで厚みや音圧感も伝えられる

といったメリットが有るためです。
他にもやり方があるかと思いますが、社内及び個人の機材やレンタルなどの
様々なコストを鑑みて上記に落ち着きました。

Kemper ──────┬ ライン(外音)
  └MIDIコン    └ アンプ(中音)

自分の場合上記のようにシステムを構築しており
並列でKemperから送りそれぞれCabinetのオンオフだけ分け、外と中の出音を管理しています。

※ちなみに自分はやっていませんが、このルーティングを組むと、生のCabinetを通して
マイキングした音とラインの疑似Cabinetをmixして出力する、なんてことも出来ます。

そして、MIDIでの制御ですが、
曲数が多いとどこのスイッチにどこの音が当てられているのか分からなくなりがちなので
曲順番号=Bankという概念で管理しました。
1曲目はBank1、2曲目はBank2…といったように曲ごとに分け、踏み間違えやバンク間違いを事前に防いでいます。

もしバンクをごちゃごちゃに設定していた場合、曲を演奏している最中に間違えると復帰するのが大変なので、意外とこのような部分をしっかり分けて行くことは重要かと思います。

②バンド編成にない楽器やシンセが沢山必要だった

原曲がEDMでシンセたっぷりだったり、ストリングスやトランペットが入っていたり、
ハモリが必要だったり…といったように、バンド隊だけでは補えないパートが多い場合があります。

そのような時、演奏と一緒に流すシーケンス(同期)というものを使用します。

PCから録音されたストリングスやコーラスパート等の音を流し、
ドラマーは流しているテンポに合っているクリックに合わせて叩くことにより
演奏とシーケンスがぴったり合う…という高度な技術ですが、
今回はプロドラマーの樋口幸佑さんの安定した演奏によって、同期を問題なく使用することが出来ました。

③安定した演奏が必要だった

当然ではありますが、今回はプロのバックバンドとして、自分たちだけの趣味のバンドのような『ミスりまくっても大丈夫!』のようなやり方とは違うといった点で、
演奏の品質担保は必要でした。

(荒々しい生っぽい演奏の方が良い場合も勿論ありますが、今回はなるべく綺麗に揃えたいという思いでした)

そこでまずイヤモニ(イヤーモニター)を用意しました。
よくプロのアーティストがライブのとき耳にイヤホンのようなものをつけてるのを見たことがあるかと思うのですが、あれがイヤモニです。

あれは現場でイヤモニで好きな音楽を聞いたりしているわけではありません(笑)
周りの楽器の音だったり、同期の音だったり、自分の音を自分の耳に送って
演奏しやすく(歌いやすく) している、仕組みです。

また、同期を送ると同時に、ドラマー同様にクリック(※メトロノームのようなカウント音)の音も返すことが出来るので
よりリズムを掴みやすく、安定した揃った演奏をしやすくなる、
というのがイヤモニのメリットです。

もし、『リズムが取りにくくて歌いにくい!』とか『全体で自分の音聞こえなくて合わせにくい!』といったお悩みを抱えていたりするバンドマンの方は是非導入を検討してみては如何でしょうか。

※余談ですが、今回自分はShure社のSE215speというイヤホンと同社のパーソナルモニターシステムを使用しました。
音切れもかなり少なく、Zeppクラスのライブハウスでも問題なく使えました。

まとめ

今回、ライブとして大成功だったのではと思っています。

それは、今回書いたような様々な問題に対する解決策を、1つ1つクリアしていった事の積み重なりが生み出したものでもあり、
更にメンバー、スタッフ、ファンの方々などライブに関わるすべての方々のご協力があったからこそ、このような結果として出たのではないでしょうか。

またこのような機会があれば、今回の「もう少しこうすればよかったかな?」といった点を昇華させ、よりワクワクできるモノを作り、よりワクワクできる発信を行い、よりKLabの名前を世界に発信して行ければと思います。

最後までお読み頂き、ありがとうございました。

Twitterも是非フォローお願い致します!

はじめに

お疲れ様です、中根です。
この記事はKLab Creative Advent Calendar 2018の25日目の記事になります。
最終日は、クリエイティブ部門の責任者である中根が普段考えていることを書いて締めたいと思います。

このAdvent Calendarがはじまったきっかけ

このAdvent Calendarは、エンジニアがやってるAdvent Calendarのクリエイティブ版をやってみたいんだけど良いか、というatsushiさんからの相談からはじまりました。
そもそもKLabのクリエイティブが発信できるブログみたいなのもないです、まだ皆に声もかけてないので人数が集まるかどうかも分かりません、それでもやるってアナウンスしても良いか、という話でした。

こういう活動には積極的に協力してくれる人が多いので、人数は集まりそうな印象でしたが、年末に向けて皆忙しい時期なので油断はできません。
ただ、万が一人数が集まらなくて企画倒れになったとしても、そういうトライをしたことがきっと次につながるはず、と思い、やってみなよ〜と言って背中を押しました。

結果、たくさんの人が協力してくれて、こうして最終日を迎えられました。
トライしてくれて本当に良かったなと思います。

最終日はこのトライすること、について書いてみたいと思います。

勝率70%のトライの重要さ

今回の発案をしたとき、atsushiさんは、人が集まらず失敗する確率はゼロではないけれど集められそうな手応えはあるからトライしてみよう、と考えて行動してくれたのだと思います。こういうトライはすごく重要だと思います。

ひとくちにトライといっても、どの程度勝算が感じられるかの程度によって以下 3 つぐらいに分類できます。

  1. 勝算が全く不明なトライ(成功確率不明)
  2. 失敗する可能性はあるけど一定勝算もあるトライ(成功確率70%前後)
  3. 勝算が見えていて失敗がほぼないトライ(成功確率90%以上)

※成功確率の数字は事前の検討でどの程度成功すると確信できるかの肌感覚が理解しやすそうなので記載してますが、数字そのものには深い意味はありません。

atsushi さんのトライはこの 3 つのうちの 2 にあたると思います。
そして、この 2 のトライ(以下、これを勝率70%のトライと呼びます)が人の成長にはとても大事だと思っています。

なぜなら、トライすることによる成功体験を積みやすく、トライする習慣づけによる成長の加速がしやすいからです。
また、失敗したとしても得るものがあるのがこのトライです。
それぞれのトライについて、失敗した時のことを考えてみます。

1のトライは失敗する要素が多すぎるトライと言えるでしょう。
そして、個人的な経験では、1のトライはだいたい失敗します(笑)。
世の中の本当に革新的なことは1のトライから産まれるので、回復不可能な失敗にならない限界ラインを見極めた上で、一定の1のトライをすることは組織の中に必要だったりするのですが、なにぶん基本的に失敗するので、トライによる成功体験、失敗体験の両方がないとつらくて続かないです。
トライの中でも上級編、という感じなので、トライ慣れしてからのほうが良いのでは、と個人的には思います。

一方、 3のトライは失敗する要素が少なすぎるトライと言えるでしょう。
そもそも失敗しないですし、周囲から見てどんなに結果が凄くても、その人からすると新規性がないので、3のトライを繰り返してもあまりその人の成長には寄与しません。

最後に残った2の勝率70%のトライですが、これはほどよく失敗する要素があるトライといえるでしょう。ちょっと背伸びすればできるトライ。
失敗する要素が限定的なため、失敗しても理由が分かることが多いです。
そのため、理由から分かる対策をすれば次の成功につながり、失敗したとしてもその人の成長に寄与します。

勝率70%のトライは人によって違う

あるトライが先程の3つの分類のどれになるかはその人の仕事の力量で変わります。
例えば、今回のAdvent Calendarのメンバ集めは、一スタッフであるatsushiさんからしたら、勝率70%のトライになるのではないかと思います。
一方、私が同じことをやれば勝率90%のトライになるでしょう。

それぞれの人のスキル・経験・ポジション等によって勝率70%のトライの内容は変わりますが、成長するために大事なのはそれぞれの人が自分にとっての勝率70%のトライを続けることだと思います。

自分にとっての勝率70%ですから、今年社会人になった人にも、仕事歴10年以上の人にもそれぞれそういうトライができる箇所があると思います。
当社のクリエイターには、ぜひそういうトライを積極的にやってほしいなと思います。

そして、時々勝率不明なトライをやって失敗してほしいです(笑)。

いつかは自分のトライ=会社のトライに

当社のクリエイターであれば、皆何かしら成長したいという思いは持っていると思います(そういうマインドのある人しか採用してないつもりです!)。

成長するにあたり、いわゆるクリエイターとしての制作スキルを身につけたいのであれば、社内外の他人や組織の持つ知識・ノウハウを吸収すれば一定水準までは成長できると思います。
また、一定水準までは、自分にとっての勝率70%のトライであっても他の人にとっては勝率90%のトライであることも多いため、他の人から教えてもらうことで成長できます。

一方で、一定水準まで成長してしまうと、他の人が考えたものを吸収することでの成長は非常に少なくなるか、望めなくなります。
ここから先の成長は、他にノウハウが無い領域ですから、自分で考えたものを実践して開拓していくしかありません。
この領域になると自分のトライ=会社のトライになります。
技術革新のスピードが速く、知識も陳腐化しやすいこの業界ですから、どんな人も遅かれ早かれこういう状況に遭遇すると思います。

また、当社はまだ発展途上の会社ですから、担当分野によっては比較的社歴が浅いうち、年齢が若いうちにこの状況に遭遇する方もいると思います。
そんな時は、会社で学ぶものがなくなった、とか、自分がこのトライをしていいのだろうか?と考えるのではなく、ここから先は自分で会社の勝率70%のトライを作っていくことが会社と自分の成長につながるのだ、と考えて道を切り開く経験をして欲しいと思います。

たとえ失敗したとしても、トライを賞賛できる会社でありたいなと思います。

おわりに

社外に出すものなのに、結果として社内のクリエイターへのメッセージみたいになってしまいました。
社外の方でこの記事を最後まで読んで頂いた方には、KLabのクリエイティブは挑戦するということについてこういうスタンスでいる会社なんだ、と思ってもらえたら幸いです。

お疲れ様です、TAIGAです。

この記事はKLab Creative Advent Calendar 2018 の 24日目の記事です!

アプリ等の画面をデザイン設計している方へ

毎日デザイン設計をしていて、こう思った事ありませんか?

  • 画面をデザインする以外の資料作成系作業が多くてつらい
  • 画像の管理作業よりデザインクオリティを上げるのにもっと時間を使いたい

今回はそんな方に、設計ツール[Sketch]の機能を通して

時間をもっと効率的かつクリエイティブに使えるようにする方法をご紹介します


Sketchとは?

オランダのBohemian BVが開発する、
アプリやWebのデザインおよびUI設計のためのソフトです

2018年12月現在、MAC OSしかサポートしていません


何が得意?

「シンボル」機能によってより自由に画面を設計しデザインできます

例えば・・・以下の様な事が得意です

  • デザインパーツ素材の使い回し
  • シンボル内の情報の部分的上書き
  • 素材パーツの一元管理
  • 画面の半自動資料化

■ デザインパーツの使い回し

「シンボル機能」が非常に強力です

画面設計で使う実デザインパーツ素材は、アトラスサイズの縮小(端末への負担を下げる目的)の為、素材の1部分を伸ばして使えるようにデザインしますよね?

Sketchなら”どこを伸ばすのか”の設定を覚えたまま素材を使い、画面を設計できます

・素材をシンボルにするとパーツの”スライス設定”を記憶でき、素材とのリンクも保てる

・シンボルを組み合わせて他のシンボルを作る事もできる

■ シンボル内の情報の部分的上書き

「オーバーライド」機能によって細かい表示差分表現なら1シンボルで表現可能です

全シンボルへのリンクを保ったままなので更新が有っても、
使用箇所へ自動的に反映できます

・シンボル内の文字ラベルは全て好きな文字に上書きできる

・シンボル内の”同じサイズ”のシンボルはいつでも他のシンボルに上書きして表示できる

例えば下記画像の様な表現が1つのシンボルの使い回しで用意にできるわけです

※このイメージでは「ボタン1個」と「ボタン2個」を同じサイズのシンボルで用意しておく事で、部分的にシンボル内シンボルを”オーバーライド(切替)”しています

■ 素材パーツの一元管理

「書き出し設定」もとても優秀!

/(スラッシュ)で区切った名前をファイルにつけると、
書き出し時になんとフォルダ分けしてくれます

以下の様なルールでライブラリ内にパーツを管理すれば、必要素材を最新状態で揃えておく事ができ、さらにいつでも画面設計時に呼び出す事ができます

・例えばエンジンがUnityなら素材シンボルをAtlas/○○/なんとか.png 等で命名する

・ライブラリ(素材全部入Sketchファイル)から一気に書き出しする

■ 画面の半自動資料化

Sketchプラグイン「SpecExport」で画面指示書Htmlを一瞬で作れます!

・テキストクリックでスペースの長さ、フォント種類、サイズ等すべて解る

・画像をクリックでその画像のサイズだけでなくシンボル素材の格納場所まで案内可能

実際使ってみたら画面設計が楽になった

資料化や素材管理など単純で時間の掛かっていた手作業が効率化され、
よりクリエイティブなデザインの仕事に時間を使えるようになりました

  • リストのデザインがとても作りやすい
  • あの素材どこだっけ?これバージョン古いよね?がない
  • 開発に画面情報を伝える資料が一瞬で出来上がる

■ リストデザインがとても作りやすい

例えばリストを作るなら、「項目シンボル」を作って中身をオーバーライドするだけ!

■ あの素材どこだっけ?これバージョン古いよね?がない

画面を構成する素材を全て1つのライブラリ(素材を集めたSketchファイル)に集約!

「素材管理がとっても楽・・!」

 

■ 開発に画面情報を伝える資料が一瞬で出来上がる

画面を作ったらSpecExport!それだけで画面指示書の制作終了!

画面要件修正が頻繁に入る場合でも、画面をデザインし直したら資料を書き出すだけなので巻き戻りによる作業の発生コストが段違いに少なくて済みました

 

まとめ

ここまでSketchを通して時間をもっと効率的かつクリエイティブに使えるようにする方法をご紹介しましたが、使ってみたくなったでしょうか?

Sketchは2018年12月現在、Version53でダークモードが搭載され目にも優しくなったり オーバーライドにサムネも表示されるようになる等、より使いやすく進化を続けています


もし気になったら実際に使ってみて、
クリエイティブにより集中できる環境を作っていきましょう

KLab Creative Advent Calendar 2018 の 25日目は、中根良樹さんです。

よろしくお願いします。

はじめに

この記事は KLab Creative Advent Calendar 2018 の 23日目の記事になります。

こんにちは。KLab株式会社クリエイティブ R&DグループのYojiと申します。

2018年7月
弊社クリエイティブ部に新たにクリエイティブR&Dグループが創設されました。

image1

今回は、そんなクリエイティブR&Dグループについて紹介していきたいと思います。

クリエイティブR&Dグループって何?

R&Dって何?あまり聞き慣れない言葉だと思いますが、
R&Dは『Research & Development』の略称で、技術を調査し開発を行う
研究開発の意味合いになります。
一般的には会社の将来的な技術的競争力を高めるための組織
といったイメージではないでしょうか。

今回、KLabに創られたクリエイティブR&Dは、グラフィックスの分野に重きを置いた
研究開発グループで、高品質のグラフィック表現に向けての研究や、
より効率的なワークフローの構築、最新技術トレンドのリサーチ、
社内共通の制作支援基盤の構築・サポートやツール導入検証、マネジメント手法、
さらにはコンセプトアート創出力向上の取り組みといった、
アートワーク全般にわたる幅広い研究開発をおこなっていくグループです。

そんなR&Dグループを、なぜ創設する事になったのか
少しお話させていただければと思います。
モバイルゲーム業界は供給過多のレッドオーシャンと言われて久しく、
新たな局面を迎える過渡期の時代に入っています。
国内の各ゲーム企業から、毎月数多くの新作コンテンツがリリースされ、
さらには中国や韓国の企業からもグローバル展開される形で、
クオリティの高いコンテンツが日本のゲーム市場に次々と配信されるといった、
各社各国のコンテンツがひしめき合う状況となってきました。

数多くのゲームが溢れるストアの中から、ユーザーの皆さんの目にとまり、
「遊んでみようかな!」と選んで貰うには、面白そうとか、
このキャラクターや世界観が好きとか、選ぶ皆さんの琴線に触れるような、
ゲームの魅力という価値がとても重要な要素になってきます。
魅力が薄いありきたりな物だと、ゲームに触れてもらう事も、皆さんの目にとまり
択してもらう事さえできません。

ユーザーの皆さんに選んでもらえる存在になるためには、
KLabのゲームにしかない魅力という価値を持つゲームを創りたい。
その風景で、そのストーリーで、その音楽で、そのキャラクターで、ワクワクしたり、
ドキドキしたり泣いたり笑ったりと、心を動かすようなゲームを創りたい。
そんな感動を伝える魅力という価値を技術やアートの力で創造していく
エンジンとなるため、クリエイティブR&Dグループを創設するに至りました。

クリエイティブR&Dで追求したい事

KLabでは、漫画やアニメを原作にしたゲームからオリジナルのゲームまで、
沢山の魅力的なゲームを配信しています。
(まだ遊んでない方は、こちらアクセスして是非遊んでみて下さい!)
これらのゲームには、新しいゲームシステムがあったり、楽しい音楽だったり、
原作の世界を楽しめたり、オリジナルの世界観であったりと、
それぞれに魅力的な要素があり、ユーザーの皆さんにも
楽しんでもらえているかと思います。

ゲームは、システムやアクションといった「遊び」の要素、
原作物やオリジナル物といった「絵」や「音楽」の要素、
それぞれの要素が色々な形で組み合わされ、
それぞれのゲームの個性や魅力となって作られています。

原作の世界を楽しめるゲームもあれば、弊社KLabオリジナルタイトルで、
開発中の『禍つヴァールハイト』のように、
KLab独自のオリジナリティある世界観を表現したゲームを届けることも、
私達から提案できる一つの形ではないかと思います。

ゲームの魅力を形作る数ある要素の中から、
今回はクリエイティブR&Dだからこそのアプローチとして、
オリジナリティある世界観の価値の追求という部分に焦点をあて、
KLab独自の世界観を届けるという魅力を、より一層強化していきたいとの思いから、
コンセプトアートを創りだす事に力を注ぐ取り組みを始めました。

コンセプトアートへの取り組み

世界観を創りだす根幹となるものはコンセプトの設計ですが、
コンセプトアートはそのコンセプトを表現する手段として、
一番最初に皆さんの目に触れ世界観のイメージを決定づける核となります。
1枚1枚のコンセプトアートという断片が、パズルのようにはまっていき、
大きな一つのゲームの世界観という姿を現していきます。

魅力的な世界観を創るには、コンセプトアートの力がもっとも必要であり、
それぞれの作品の差が個性となりオリジナルの価値が創られる重要な部分でもあります。
これまで弊社内にはコンセプトアートチームやコンセプトアーティストという
明確な専門職はありませんでした。

職種としてはありませんでしたが、弊社には絵の物凄く上手いイラストレーターや
アーティストが多数在籍していますので、より魅力的なコンセプトアートを
生み出せるようにと、希望者を募りコンセプトアーティストの土壌作りの
取り組みを進める事になりました。

実際のプロジェクトでは、予算もあったりスケジュールもあったり、
社内調整もあったりと、様々な制約に左右されるため、
土壌を育てるツールとしてはなかなか機能しづらい側面がありました。
そういった制約に左右されづらく、コンセプトアーティストを育てる
土壌により適した場として、デモ制作のプロジェクトを立ち上げる事になりました。

デモ制作では、コンセプトの案出しから、実際にコンセプトアートを起こすまでを、
メンバーがそれぞれの裁量で自由に関われ、互いにアイディアを出し合ったり、
レビューをしながら、世界観を創りすすめていく場となっていて、
イラストやアニメの背景を描いてるけどコンセプトアートを描いた事が無かった人から、
ゲームのコンセプトアートを描いてきた人、3Dがメインの人まで、
キャラクター、背景の垣根なく自由に取り組み相互成長の良い機会となっています。

コンセプトアートに限らずグラフィック表現技術含めた、
魅力的な新しい世界や価値を創造するという壁は、
とてつもなく高く険しいという事を日々実感しながら試行錯誤を繰り返してます。
一歩一歩積み上げ挑戦を続けていくことが結果に繋がっていくという事を信じ、
クリエイティブR&Dの取り組みを進めていきたいと思います。

近いうちに、何かしらの形で皆さまにお届けしたいと計画していますので、
発表があった際は、あっ!この事を言っていたんだと
思い出していただければ幸いです。

KLabが創る、KLabにしか創れない、魅力的な世界をユーザーの皆様に
届けられる日が来る事を願ってスタッフ一同頑張っていきます。

クリエイティブR&Dコアメンバーの募集します!

少し宣伝。そんなクリエイティブR&Dグループでは現在コアメンバーを募集中です。
これまで何を経験し積み上げてきたかも確かに大事ですが、
これから何をやりたいか・実現したいかのビジョンを持ち、推進していく力を
一番大事にしています。

魅力あるゲーム体験を創りだす事を目標に、一緒に面白い仕事をしていきましょう。

特に以下の職種を積極募集中です!

R&Dグループ/3Dキャラクターアーティスト
R&Dグループ/3D背景アーティスト
R&Dグループ/テクニカルアーティスト
コンセプトアーティスト

その他の職種も絶賛募集中なので、以下のページから是非応募ください。
KLab中途採用ページ

今回はコンセプトアートへの取り組みの話しがメインとなりましたが、
次の機会ではグラフィック表現についての話しも掲載させていただければと思います。

明日のKLab Creative Advent Calendar 2018 の 23日目は、TAIGAさんです。

よろしくお願いします。

はじめに

この記事はKLab Creative Advent Calendar 2018 の 22日目の記事になります。

こんにちは、KLabで3D演出制作全般の業務を担当している、やまパンです。

3D演出といっても世の中にはたくさんの種類の演出が存在しますが、主に数秒程度のカットシーンのエフェクト制作や3Dアクションゲームのエフェクト、またゲーム中で使用する映像制作などに携わっています。

今回は数ある演出の中から、3Dアクションゲームで使用できそうなエフェクトの作例をご紹介致します。

セルルック調の3D雷エフェクトの作り方 ~素材編~

3Dアクションゲームのエフェクトといっても様々な種類の演出が存在します。

炎、水、風などの自然現象を基盤としたエフェクトや、バリア、エネルギー弾、オーラといった普段では目にすることがないような特殊な力を視覚化したものまで…ゲームの種類によって求められる演出は多種多様です。

今回はその中から、「雷」をテーマとしたエフェクトの作例を記載したいと思います。

※ちなみにUnityを使用したスマホアプリゲームをターゲットとした作例になっています。

雷のテクスチャ制作について

雷系のエフェクトはテクスチャのシルエットひとつで、クオリティや求められるゲームのテイストに合う合わないが大きく左右されてしまいます。

特にセルルックのようなアニメ調のテイストに関しては、しっかりとシルエットのメリハリを見せることが見た目の部分で重要なポイントとなります。

1.手書きで雷テクスチャのシルエット(ラフ)を描く

Photoshop、アナログ、手法は何でも良いです。

まずは手でざっくりとだいたいのシルエットを描きます。

自分の中に眠る中二心を全開にして描きましょう。

少しの恥ずかしさも抱いてはダメです。

自分がカッコイイ!!!!と思う雷のシルエットをざくざく描いていきましょう。

この段階で、ループ用のテクスチャになるように画像に調整を入れます。

・Photoshop>フィルター>その他>スクロール。

・水平方向(H)を動かし、絵の切れ目を確認。

・切れ目が自然な形になるようシルエットの形状を整える。

2.手書きしたラフを元に、AfterEffectでパスに起こしていく

上記で作成したラフをAfter Effectsに読み込み、その絵を下敷きにしてシルエットに沿ったパスを切ります。

・512×256のコンポジションを作成。

・平面を作成。

・1で描いた画像を読み込み、パスでトレースする。

この時、細い線・太い線の強弱のめりはりをしっかり付けるよう意識しながらパスを切っていきます。

そうすることで、より見た目が引き締まった雷のシルエットを作成することが可能です。

3.パスのレイヤーに各エフェクトを追加し雷の質感に近づける

AfterEffect搭載の各エフェクトを追加することで、より見た目を雷の質感に近づけていきます。

◆ブラー(方向)

・雷が流れている方向へブラーを流すことにより、テクスチャの質感にリアリティと、アニメーションを付けた際にスピード感が増す。

・画像は横方向へ雷が流れているため、横方向にブラーを流す。

◆塗り

・雷の種類によって色を変更。今回は黄色にする。

◆グロー

・グローの強さは光加減やマップ(背景)の色見に合わせて調整。

最後にテクスチャループの最終確認をして、テクスチャ作業は終了です。

雷のモデル制作について

上から下へ放たれる雷や、地面に停滞する雷などのエフェクトは基本的にモデルとパーティクルの組み合わせで作成されます。(例外もあるかもしれません…!)

今回の作例では上から下へ放たれる雷のパターンを考慮したモデルの作例を記載します。

※上記で作成したテクスチャを元に、雷のモデルを作成していきます。

メッシュの形状で雷の形を表現する

使用するメッシュは板ポリだけ。そう、たったの板ポリだけです…!

雷の元になる板ポリを作成

Mayaにて雷モデルの元になる板ポリを作成します。

・幅の分割数:12

・高さの分割数:2

板ポリのスケールを伸ばし、雷のテクスチャを適用

板ポリのスケールはX値を伸ばします。

※この時、Mayaのライティング設定を「フラットライトを使用」に設定しておくとシャドウの情報が消えるため、見た目がUnity上の見た目と同じになります。

UVを調整する

雷のディティールの密度を上げたい場合はUVのX値を伸ばし、密度を下げ絵を伸ばして見せたい場合はUVのX値を縮めます。

※テクスチャ作成の際に、ループ処理を入れているため絵の繋ぎが自然になります。

板ポリを複製してクロス型にする

板ポリをクロスさせることにより、どの角度から見ても立体的なシルエットが確認できるようになります。

・クロスの後、2枚の板ポリを結合して1メッシュにする

・結合後、頂点の重なりをマージする→メッシュの編集>マージ

板ポリをエッジごとに凸凹させる

テクスチャのシルエットに加え、板ポリの形をポリポリと変えることでよりリアリティのある雷の形状に近づけます。

・エッジを上下左右に折る、サイズを拡大縮小するなど

・ゲームで使用するカメラの位置から見て、モデルのエッジの切れ目などが目立たないように形を調整していく

モデルの形によっては様々な形状の雷を作成することが可能です。

上記画像右側の雷のように、枝分かれした雷を作成したい場合、各メッシュのUVの位置をそれぞれズラすことで雷の形状のランダム性が増します。

↓下記画像の雷も、枝分かれした2本のシルエットが全く同じ形にならないよう、2本のメッシュのUV位置をずらしています。

だんだんそれっぽくなってきました。

仕上げ

天地の頂点に頂点アルファを入れることで、メッシュの切れ目を自然な形に調整します。

この処理を入れておかなければ、雷の「板ポリ感」がユーザーに伝わってしまうため、必ずこの処理は入れるようにしましょう。

おわりに

いかがでしたでしょうか!

今回は素材編ということでテクスチャ制作からモデル制作までの流れを紹介しましたが、機会があれば今回作成した素材を元に、Unityで実際にアニメーションを付ける工程の記事を書きたいと思います。

エフェクトはゲームや映像を盛り上げるためのお化粧であり、花形のお仕事です。

実際の世界には存在しないようなド派手なエフェクトを作成し、それがうまく表現された瞬間の気持ち良さを感じる時こそ、この仕事やってて良かったな~~~!!?!と実感してしまいます。

このブログを読んでくださった方が、少しでもエフェクト制作に興味を抱いて下さるととても嬉しいです。

最後まで読んでいただき、ありがとうございました!