KLabGames Creative Blog

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

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

こんにちは。クリエイティブ部でUI/UXデザイナーをやっているだいさくです。

UIの高解像度対応やってますか?

今年はiPhoneXSやiPad Proが発売されましたが、スマートフォンも画面サイズが大きくなり、だんだんと画面解像度も高くなってきてますね。

スマートフォンのゲームにおいてもグラフィックのきれいさが重要になってきてますが、ゲームの場合コンテンツ量も多く、なかなかUIを高解像度できれいにするのは難しいものがあるかと思います。

UnityでUIデザインを高解像度対応したい場合、まず考えられるのはUIパーツの画像を大きくすることです。

しかし、低スペック端末でのパフォーマンス維持と両立しなければならなかったりすると、そこまでテクスチャを大きくできないので、UIパーツの画像を大きくするのも慎重にならないといけません。

そこで今回はUnityでUIパーツを大きくしながら素材を軽量化する手法を1つ提案したいと思います。

よくある軽量化手法

まず、デザイナーが画像素材を軽量化する手法として、以下のものがよくあるかと思います。

  • テクスチャフォーマットの圧縮
  • 9パッチ化
  • パーツ反転
  • パーツ縮小

テクスチャフォーマットの圧縮

以前はiPhoneとAndroidの両方で対応している16bit圧縮を使うことが多かったかと思います(最近はちょっと変わってきているかもしれませんが)

16bit圧縮の場合、グラデーションが粗くなってしまうので、パーツ素材にディザをかけるという一手間が必要。

▼参考:OPTPiX Labs Blog『Unityで、もっとキレイな16bitカラーテクスチャを使おう!』

9パッチ化

引き延ばす部分が大きい素材には有効な手法ですが、16bit圧縮を使用している場合、ディザのドットが引き伸ばされてしまうので、相性が悪いという問題があります。

パーツ反転

上下・左右が対象の素材では、分割してUnityで反転して使う方法が有効かと思います。

ただ、反転可能なデザインでないといけないので、使い所は限られるかと思います。

パーツ縮小

あとは、素材自体のサイズを小さくして、Unityで拡大して使うというものですが、背景や模様のように多少ボケてもよい素材では有効かと思います。
これも16bit圧縮を使用している場合、ドットが拡大されてしまうという問題があるので、やはり使い所が限られるかと思います。

今回はこれらの方法を組み合わせつつ、パーツ分割+Unityでの着色を使うことで、さらに軽量化するという手法になります。

やってみる

1)例えば、このようなデザインのウィンドウパーツがあります。




2)単純に9パッチ想定で書き出すとこんな感じになると思います。



3)これを分解して、このようなパーツとして書き出します。

  • ①②Unityでは乗算で着色するのと、アルファも変えられるので、白100%で用意したほうが汎用性が高くなります(白ならディザを気にする必要もないですね)
  • また、左右反転して使う想定にしてますが、1/4にすればさらに小さくなりす。
  • ③シャドウや光沢など、共通の色として使用する部分は1つのパーツにします
  • ④模様などのパーツは拡大してもあまり気にならないので、縮小して書き出します。

4)これを、Unityでこんな感じに着色します。



5)これらを組み合わせることで、素材も小さくなり、サイズ変更も可能+色替えも可能なパーツになります。



6)さらに、グラデーションコンポーネントを導入することで、より複雑なデザインも再現することができます。


メリット・デメリット

メリット

やっていることは単純なことですが、この方法を使うことのメリットとしては、Unityで色を変更できるので、同じデザインでカラーバリエーションがいくつもあるようなUIパーツは素材が1種類のみになり、色違いのパーツを書き出す場合よりもテクスチャのサイズを小さくできるかと思います。
また、Unityでグラデーション着色すれば、拡大してもグラデーションが劣化しないので、高解像度の端末でよりきれいに表示できます。

デメリット

ただ、注意点として以下のようなものがありますので、どの程度まで分割するのかは考慮する必要があるかと思います。

  • パーツを分割することで、素材が増える
  • パーツをUnityで組み合わせるので、基本的にオーバーレイなどの描画モードが使えない
  • 分割が多いとポリゴンとかドローコールが増える
  • 実装の手間が増える

この方法を使うのであれば、UIデザインを作成する時点で分割することを想定しておくと、素材を書き出す時に調整する必要もなくてスムーズかと思います。

また、Unityで素材を組み合わせるので、いろんなところで使用するパーツは共通のPrefabにしておいたほうがまとめて修正できるのでラクというのもあります。

※古いバージョンのUnityだとPrefabのネスト化に問題もあるので、共通化するときは注意

▼参考:テラシュールブログ『【Unity】Nested PrefabやPrefabエディターが追加、新しいPrefabワークフローを触ってみた』

おわりに

もっと大きな目線でUIの高解像度化を考えると、メモリ負荷や解像度設定の変更など、いろいろ検討することがあるかと思いますが、UIの画質を上げるということでは、素材のサイズを大きくするというのがどうしても必要になってくるかと思います。
今後はUIを高解像度化する手法として、素材をベクター化したり、デザイン自体をフラットデザインにするといった流れになってくるのかもしれませんが、いろいろ工夫して頑張っていきたいですね。

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

こんにちわ。UI/UXグループのcoomaです。

UXってなにをするの?っていう質問をよくされます。その度に長くなっちゃうけどってはぐらかしているのですが、この場を借りて、UXの業務について説明しようと思います。

UXは精神論?

UXという言葉がクリエイティブにおいて重要視されるようになってきています。ものつくりの現場では、まるでバズワードみたいに「これからはUXでしょ!」と語り合い、UXチームを組織したりします。

でもフタを開けてみると、なにをしてよいのか分からずチームを解散したり、再結成したり。そんな話しをいくつかの会社できいたことがあります。そのうち、UXは単なる精神論のようにデザイナーの間でウワサされるようになります。

実際、UXの取り組み内容は、各社まちまちのようです。UXセミナーの懇親会などでは、みんな様子を伺っているといった印象です。その姿はさながら、名前をド忘れした知人に出くわして、顔は覚えているんだけど、どこの誰だか分からずにヒヤヒヤしているようです。正解が分からないまま「そうそう、UXっていつもそうだよね」とあわてて話を合わせたり。

確かに、ユーザー体験という言葉は、曖昧で感覚的です。しかし、UXが重要視される背景には心理学などの認知科学の発達が大きく影響しています。「人の購買理由」や、何をしたいという「モチベーション」という目に見えない曖昧な感情が、計測技術の進化により数値化され、分析することが可能になってきたのです。

(画像出典:NedSahin.com 『fMRIの解析画像』)

つまり、UXは今まで聖域と言われてきたクオリティや、デザイナーのセンスといったブラックボックスを解体し、なにが行動を作り出すのかということに体系的に取り組もうとします。

クオリティ神話の崩壊

ハイセンスでオシャレなお店に入りにくいという体験は誰もがしたことがあるんではないでしょうか。この場合、良いデザインだから行動を起こすという訳ではありません。

商品という「もの」があふれた今、良いものをつくれば売れるというクオリティ神話は崩壊しました。わたしたちは自由に商品を選んで買い物を楽しんでいるようで、実は、細かい条件の中から、特定の商品を選ばされています。そこでは「どこで誰がなにをする」というメッセージが鍵になります。

視覚的なデザインはサービスにとって、誰がそのデザインを欲しがるのか、どんな時に、それによってどんな体験するのかを伝える記号でしかありません。ブランドのロゴと同じですね。

認知科学によって、人は本能や、あるいは過去の感情的な記憶により、特定の状況に決められた反応するということがわかりました。環境の要因がトリガーとなって、それに紐づいた感情が引き出されるのです。つまり、どう誘導し、そこで何を体験させるかによって、人の感情を動かすことが可能なのです。

定量化できるもの

UXをわかりにくくしている理由は「UXは単に表面的デザインをつくるものではない」ということだと思います。「じゃあ、何をデザインするんだ?」と言いたくなります。「UXは価値そのものをデザインする」もう曖昧で何がなんだかわかりません。

しかし、UXは曖昧ではありません。先にも書いたように、UXは感覚の数値化、つまり定量化によって発達したものであり、それを抜きに考えることはできません。

UXが目に見えるデザインの改善ではなくユーザー体験の向上、さらに、その矛先がユーザーではなく、それを作るクリエイターの環境改善にまでさかのぼる理由は、「価値をデザイン」するということ、そして、この「定量化」が関係しています。

(画像出典:Relive Volvo's 'Emotion of Design' Google Hangout 『Volvo EEG Test』)

価値を最大に高めたいと言う時、デザインのクオリティを高めるというのがもっともわかりやすい対応だと思います。しかし、たった一箇所のデザインの見た目を改善したところで、複雑な要素の中から、それがユーザーにどんな影響を与えるかを知ることは難しいでしょう。

どの見た目がクオリティに影響を与えるのかを明確にするよりも、確実にクオリティを高くする変数を上げる調整をするというのが、定量的な対応になります。それはどのようなものでしょうか?

クオリティの量=技術×時間

例えば、技術とそれにかけた工数によってクオリティの量が変化するというのはあたりまえの事実です。そこで技術力の向上を行い、潤沢に工数をかけることさえできれば確実にクオリティをあげられるということが言えます。

技術と工数を増やすのであれば、高い技術を持つクリエイターを採用し、アウトプットのハードルをあげることでそれを短期間で達成することができるでしょう。

しかし、時間が経過すると、高い基準や目標を達成できないデザイナーはストレスを貯め始めます。ましてやフル稼働しているような状態では成長もままならず、流動性のなくなった案件ではデザイナーは常に同じ作業を続けることになります。モチベーションを失えば、最悪、リタイヤしてしまうこともあるでしょう。

長期的には外部からのリソースに頼るのはチームを食いつぶす手法と言わざるを得ません。常にリソースを補填する必要がでます。しかし、UXはそこにあるリソースを最適化し、勝手に成長する生きた仕組みを目指します。

UXの事例でよくあるのは、デザイナーが働く上で精神的に良い環境をつくるというものです。この方法ではサービスのクオリティを継続的に上げ続けることができます。ユーザーに対して長期的に安定したクオリティを提供し続けるためには、環境の改善は欠かせません。

現場の硬直化

環境の改善はなにをするものなのか?

クオリティを水とたとえるならば、デザイナーは蛇口です。それぞれ水の勢いや浄水器の能力の違いはあるものの一定の時間に出せる水量は限られています。つまり時間をかければかけるほど、たくさんのクオリティを引き出すことができます。

ゲーム制作のような短時間で大量のアウトプットが必要になる過酷な現場では、常に水を出し続ける必要があり、フィルター交換の時間も、浄水器のアップグレードもできないまま、水は汚れ、あるいは詰まり、浄水器はいつか壊れてしまいます。もしくは水が枯れてしまうことだってあるでしょう。

UXはそこに循環をつくり、水脈そのものの改善をはかろうとします。経済でも良く言われることですが、プロジェクトや会社組織にとって最も問題なのは流動性がなくなることです。情報や人の流動性がなくなることは成長が止まることを意味します。

会社もプロジェクトも長期化すると、最初はうまく行っていた方法が、状況の変化のためにズレが生じます。しかし、古い手法は疑われることないままに負の遺産となり、やがて積み重なり体制は硬直化してしまいます。結果、そのことはダイレクトにユーザーに提供する価値の質に影響を与えるようになります。

流動性を上げる

仕事の上での流動性の大事さを明らかにした、ある実験があります。どのような方法が働く人のモチベーションをあげるのかというのを調べた実験です。その中で最も効果的だったのは「チャレンジ・シーキング」でした。それは職場環境に変化を与え、新しい課題や、仕事を与えるというものです。

(画像出典:ScienceDirect/Journal of Vocational Behavior『Individual job redesign: Job crafting interventions in healthcare』)

これは最近良く言われる「ジョブクラフティング」という、より良い仕事をつくるため手法の一つです。その中でも効果的な以下の手法に絞られ、実験は行われました。

  • デマンド・レデューシング:効率化、不得意な仕事を得意な人に任せること
  • リソース・シーキング:同僚のフィードバック、意見交換
  • チャレンジ・シーキング:仕事の変化、環境の変化、新しい課題

UXでは上記のような環境を実現するために、社内のクリエイティブのルール化を行い共通言語を作り、交流を活性化することで、流動性を高くすることを試みます。一方で、効率化を行い、デザイナーがやるべきではない仕事をなくし、常に新たな価値の創出に専念できる環境を用意することを目指します。

行動をつくる

では実際の現場ではどのようなことをしているのか?というのが一番知りたいところかと思います。あれこれ指示したところで、人はなかなか動いてはくれません。作りたいのは正しい考えではなく行動です。

たとえば、硬直化してしまった体制に対してコミュニケーションをとれ!といっても、反発と疲弊しか生まれないでしょう。そんな時は関係性を変えることです。席替えや、体制変更です。そして、これまでのやり方を疑い、勇気をもってワークフローを変えてしまうのです。そこでは一見、問題が噴出するようにみえます。それはフタをしてくすぶっていた炎に酸素を送り込むようなものです。風通しがよくなることで、問題は見える化し、コミュニケーションが活発化し、変化が生まれます。行動を変えるのなら環境を変えることです。

思考は行動の後付けでしかないことは行動経済学者ダニエル・カーネマンによって証明されています。簡単に言うと気持ちで行動を変えるのは難しいということです。叱咤激励で人が学ぶようになったり、元気になってくれるのであれば話は単純です。勉強が大事だとわかっていながら、一生懸命になれない経験は誰にでもあったと思います。一方でゲームのように楽しかったり、誰かに勝った経験があれば、ほっておいても人は努力をするものです。

(画像出典:Daniel Kahneman著『ファスト&スロー』より)

しかし、モチベーションを奪うのは、とても簡単なのです。否定し続ければ、すぐです。ちょっとした環境の変化でもヤル気がなくなることもあります。環境によってモチベーションを奪わない配慮は組織にとっての重要な課題です。それに加え、モチベーションを育成するための、やりがいを感じてもらう課題設定や、自分が必要とされている実感を持ってもらうための環境作りも有効です。

作り手からユーザーまで

ここまで、どちらかというと「良い組織とは」とか「ユーザーではなくデザイナーのための」みたいな話をしてきました。それってUXなの?と思われたかもしれません。最初に「価値をデザインする」と言いました。UXはアウトプットではなく価値そのものをデザインしようとします。それを最大化するために価値を作り出す源流の正常化を図ることもUXと言えます。

つまり作り手の環境です。まず安定してアウトプットできる環境をつくる。もちろん、ユーザー環境の整備も行います。しかし、やっていることは実は同じです。「いかにモチベーションをあげるのか」です。

価値にフォーカスして考えると、ユーザーの環境と作り手の間に差はありません。すでにある価値の流れを作り手が汲み取り、あるいは流れを強くしてユーザーに届ける、ユーザーがそれを受け取り、その価値をさらに大きくする。それを作り手に返す。循環です。もし、作り手がその価値を理解できず、ただ垂れ流しているだけなら、どうでしょうか?作り手が価値を感じられる状態を作らなければ、循環は生まれないでしょう。

ユーザーと作り手を区別して考える必要はありません。価値を伝えるとは熱量を伝えることと同じです。そして、その熱量で言えば、今後、コンテンツにとって、作り手とユーザーの差はますますなくなっていくでしょう。ユーザーはどんどんクリエイティブになっています。ユーザーが遊び方を作り出したり、商品の価値を高めるようなコンテンツが増えてきました。単なる作り手とユーザーの関係ではなくなっています。

まとめ

UXはこれまで表面的だったデザイン思考を、プロジェクト全体に適応したものと考えることができます。価値を作り出すには、ひとつのセクションを切り離して考えることは難しく、全体の仕組みとして考える必要があります。さらに、価値の所在を探っていくと、作り手からユーザー、ユーザーから作り手の流れとして捉える必要が出てきます。その循環を最大化するにはその垣根を取り外す必要があったのです。UXとは、「循環を正常化するための活動」と言うのがもっともシンプルな言い方ではないかと思います。

はじめに

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

初めまして、こんにちは。クリエイティブ部でイラストの制作をしている、しろと申します。

今回の記事ではお仕事で描いているイラストとは別に、普段趣味で描いているイラストの方のお絵描きのメイキングをしたいと思います。よろしくお願いします。

概要

時間が無いけど一枚絵が描きたいときに、なるべく早く絵を仕上げる時用の描き方を紹介致します。技術的な部分よりも、早く仕上げるための考え方の部分がメインのメイキングになります。

使用ソフト

  • CLIP STUDIO
  • Adobe Photoshop CC
(メインの作業はクリスタ、フォトショは加工で使用します。)

絵を描く前に

何も決めずに描き始めると早く絵を仕上げることが出来ないのでまず何を描くか考えます。

何を描きたくないかも考えます。

描きたいもの

  • 女の子
  • お花

描きたくないもの

  • 複雑な背景

見せ所
描きたいもの、描きたくないものを決めたら絵の見せどころを決めます。
描くべきところを決めておく事で描いてる最中にあれこれ悩む事を防ぎます。

  • 女の子
  • 特に目
  • 次に肌

使いたい色
使用する色を決めます。
沢山の色を使うと完成までに時間がかかるので、メインで使う色を1色、サブで使う色を1色の計2色を決めます。

メイン
サブ

ここまで考えたらラフの作業に入ります。

ラフを描く

ここまで考えたことを元にラフを描いていきます。描きたいもの、見せ所は一番わかりやすく目立つところに配置してなるべく背景を描かなくていいように…

使用したブラシ:にじみ縁水彩、シャーペン

色を置く

キャラクター部分は黒、背景に赤を置いて色の対比でキャラを浮き立たせることにします。

使用したブラシ:鉛筆

陰影を決める

最初に決めた見せ所を見せるための陰影を設定していきます。

見せどころが肌なので、肌に光を当てて浮き上がらせたい、また目も見せどころなので、顔全体に影を落として目を光らせることで視線を集めよう…!

使用したブラシ:鉛筆とエアブラシ

ひたすら描き進める

ここまで出来たら後は完成を目指してひたすら描き進めます。

描き進めるときは暗い所から光の当たっている所を掘り起こしていく感覚で、基本的に明るい部分を描き起こしていきます。

早く仕上げるために一番最初にメインのキャラ部分を集中的に描きます。この際、アウトラインを最初に決めてしまうとより早く仕上げることができます。

使用したブラシ:エアブラシ、シャーペン、にじみ縁水彩

エアブラシとシャーペンでざっくり描いて…

アウトラインを決めたら中身の見せどころを最初に描き起こして…

なんかいい感じに質感を描いて…

レイヤーを全部結合して微調整をしたら大体完成!!

最後の調整

このままだと物足りないのでフォトショに移動して効果をかけたり、コントラストを調整したりしていきます。

今回は逆光のフィルタをかけた後に、色収差の効果をかけました。
もともと使用している色数が少ないので、色収差をかけることで色の幅を出します。

完成したのがこちらです。ラフから完成までかかった時間は8時間程でした。

まとめ

絵を描く前の段階で考えることを済ませておくと、描いている最中に迷わずに描き進められて、結果仕上がるのが早くなるよ、という内容でした。
振り返ってみると当たり前の事なのですが、絵の描き方のうちの一つとして見て頂けると嬉しいです。

最後までお付き合いいただきありがとうございました。

お疲れ様です。2Dイラストチームのtana-Kです。

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

はじめに

KLabのクリエイティブでアドベントカレンダーを作るから執筆して欲しいと言われたのですが、2Dイラストのテクニックってネットでも書籍でもあらゆるものが出尽くしてしまっているので正直何を書いたらいいのか悩みました。
新社会人イラストレーター向けに、たくさんFBを食らった時でもメンタルを保つ方法や、自分がクリスタで使ってる機能の紹介など考えましたがいまいち訴求力に欠ける…。
そこで考えたのが「IPイラストレーターってどんなお仕事?」というテーマです。
KLabの特色といえば他社IPに強いところ。
そのメイン部分を担うIPイラストはどのようにして作られているのか、なかなか知る機会はないかなと思い書いてみることにしました。

だがしかし、私がメインで関わっている某IPの2Dイラストをアドベントカレンダーで使うのはNGということでしたので、技術書典4で私が描かせていただいた同人誌の表紙を使い擬似的にIPイラストレーターの仕事内容を紹介したいと思います。


こいつです。

IPイラストレーターのお仕事とは

基本的な工程は非IPのイラスト業務とほぼ同じですが、各工程で版元チェックが入ります。

絵柄の分析・練習

配属されてすぐに商材として使うものを描くわけではなく、ある程度の練習期間を設けており、KLabではこの工程をキャッチアップと呼んでいます。

キャッチアップの期間は先人たちの築き上げた「絵柄似せマニュアル」を参照しつつ本番と同じ環境で練習していきます。

絵柄似せマニュアルは、原作キャラのボディバランスや顔の比率などを可能な限り数値化することで、主観に頼らず短期間で原作の絵柄を再現できるような資料になっています。

IPイラストレーターって楽しい?

絵を通して表現したいテーマがある、もしくは自分の名前を売りたいという創作意欲の高いタイプの絵描きにとっては正直つらい仕事だと思います。
私は絵を描くという作業そのものと、案件の絵柄に可能な限り近づけつつ魅力を引き出すための技術を勉強したり実験したりするのが好きなので、今の仕事は楽しいし天職であると思っています。

また、様々なジャンルのIPイラストを経験していくことで、突出したオリジナリティは無いがどんなものでもある程度以上のレベルで描ける器用さを得られます。
器用貧乏なんて言葉がありますがなんでも描ける絵描きは流行に左右されないので食いっぱぐれが少ないです。

長々となりましたが、IPイラストレーターという職業に興味が湧いた、または色々な絵柄にチャレンジすることで技術を磨きたいという方は是非ともKLabの門を叩いてみてください。

はじめに

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

 皆様、どうもはじめまして!
 KLab Sound Teamのemanonです。
 まずは軽い自己紹介から…

6年程前に某音楽制作会社からKLab株式会社に転職してまいりまして、現在、主にBGM制作業務を手がけておりますが、SEの制作、WwiseとUnityを併用してのカットシーンへのボイス実装や、弊社で運用中タイトルでの音声周りのデバッグやボイス処理などの作業もサポートしています。

概要

制作面でのTips等は実用的な内容のものが既にweb上(SNS,動画サイト)を探せば幾らでも存在している現状…一体何を書いたら良いのか?

などとモヤモヤしていたら、サウンド部屋の遠くの方(といっても広くはないが)から
「サウンドチームの公式twitterのフォロワー数なかなか増えないなぁ」
という声が聞こえて参りました。

 そもそも…
 今、KLabにサウンドチームがあること自体、
 絶望的なまでに知られてなくねぇか?
 世界人口約73億人に対し、フォロワー数約500…
 これ何%?もう少し何とか出来る余地あるんでない?

↑ 脳内仮想上長

はい。…ということで、脳内仮想上長からの示唆に富むお言葉を真摯に受けとめ、
この機会にKLab Sound Teamについて知って貰うことが、お互い一番幸せなんじゃなかろうか?という考えに至り、また我々が「世界と自分をワクワクさせる」ためにどういった活動を行っているのか?という点について書くことにしました。

ちなみに上記の青太字で記載したものが、弊社のビジョン※1)となっております。

KLab Sound Teamとは?

KLab Sound Teamを一言で説明すれば、
「様々な案件を横断し、サウンド面でサポートするグループ」
様々な音楽人生のバックグランドを持った経験豊か、且つ各々が唯一無二の音楽的特殊能力を持つ極めて個性的なメンバーで構成された弊社クリエイティブ部を代表する異能集団。ゲーム周りの音に関係する業務に留まらず、CMや四半期ごとに催される全社会での音響面でのサポートなども行っております。


ヤーガン族のイラスト窓際族のイラスト中二病のイラスト(女性)人工知能と喧嘩をする人のイラスト驚いて目が飛び出る人のイラスト(女性)
個性豊かなKLab Sound Teamメンバーの例

折角の機会なのでKLab Sound Teamの始まりのお話も少々^^
チームの始まりは今から約6年前に遡る2012年の後半になります。

弊社で初めてサウンドスタッフとして採用されたのがT.M(下の写真中の帽子を被った人)で、年が明けた2013年1月に私が加わり…そこから夏が終わった頃にY.I(写真中の左から二人目の眼鏡をかけた人)が加わりました。そこから年に1~2人程度増員していき、2018年12月現在では10名を超える大所帯となりました。

↓ 2017年に撮影したKLab Sound Team集合写真。

制作業務に関係する話

弊社で開発しているタイトルに関連した制作業務の話でいえば、主な作業は以下のものが挙げられます。

  1. BGM/SEの制作(音の生録音を含む)
  2. ゲーム内でのカットシーンでのMA作業
  3. UnityとWwise/CRI-ADXなどを連携させての音の実装作業
  4. BGMを外注する際のディレクション
  5. リズムゲームの譜面作成
  6. ボイスの整音作業
  7. ボイス収録時のディレクション
  8. ゲームに関係するサウンド面での全面的なディレクション

上記に記載した業務を詳細に語るよりも、実際に制作した成果物を見て頂く・聴いて頂くほうが手っ取り早いだろう…と。成果物の幾つかは公式にwebサイト上で試聴出来ますので、そちらを紹介します!^^
♪BLEACH Brave Souls全世界3000万DL記念、アプリ内BGM無料視聴
ゲーム中の全ての楽曲ではありませんが、代表的な楽曲が試聴可能です!
https://www.bleach-bravesouls.com/index.php?dc_action=contents%2Fbgm_listen

BLEACH Brave Souls(ブレソル)のカッコイイカットシーンは、ブレソル公式Twitterで紹介しているのでこちらを御覧ください。
https://twitter.com/Bleach_BS/

ヘッドホンで音楽を聞く人のイラスト(男性)


制作業務以外の業務。対外的な活動。

制作業務以外にもアレヤコレヤと、以下のような対外活動を積極的に行っております。

SNSの活用

♪KLab Sound Teamの公式Twitter
https://twitter.com/klabsoundteam

サウンドチームの名前が外部に出る際の発表がメインですが… メンバー個人による役立つTipsなどの紹介や日常系脱線話などなど、 チームの雰囲気が感じられるものになっています。

フォローされていない方…
是非ともこの機会に、お気軽にフォロー頂ければ幸いです!^^

ライブ活動

東京ゲームショウ2018にてビジネスデイのみではありましたが、KLab Sound Teamとしてライブ活動を行いました。こちらの模様、公式映像がyoutubeに上がっておりますので、この機会に御視聴をお願いしますm(_ _)m

♪KLabGames放送局+Plus / KLabGamesStation(9/20)【TGS2018】(※2


【インタビュー】KLabGamesのサウンドを一手に担う"KLab Sound Team"…
メンバーが明かしたTGS2018ライブの開催経緯と今後の展望
https://gamebiz.jp/?p=223203

TGSでのライブ後の記念写真

また、以下は来年のお話になりますが、ライブのサポートも致します!^^

樋口楓さん(@HiguchiKaede)出演の1stライブ(※3
「Kaede Higuchi 1st Live “KANA-DERO”」
にて、KLab Sound Teamがバンドでライブをサポート致します!

CEDEC, GTMFへの登壇

CEDEC, GTMFなどの開発者向け技術交流会へもKLab Sound Teamが登壇しております。

【CEDEC 2018】ユーザーに、より質の高いサウンド体験を!
ソーシャルゲームでラウドネスコントロールを実現するためのワークフロー構築と考察】

https://gamebiz.jp/?p=219024

【Game Tools & Middleware Forumで、
当社社員がWwiseを用いたモバイルオンラインゲーム開発について登壇をしました!!】
http://pr.blog.klab.jp/archives/51634342.html

シンプルなプレゼンのスライドのイラスト

新製品発表会にゲストとして登壇

以下の動画はNuendo8の新製品発表会の模様です。

KLab Sound TeamからはC.Sと私の両名が登壇いたしました。
動画の1:16:16あたりからが登壇場面となります。

発表会のイラスト「タイトル文字」

webインタビューに登場

スタインバーグ・ジャパン(※4)のサイト内「SoundRoster」に、KLab Sound Teamと私がインタビューを受けました。

【KLab サウンドチーム インタビュー】
https://japan.steinberg.net/jp/artists/steinberg_stories/klab_soundteam.html

【Sound Roster -Behind the Scene- #6 KLab】

【阿部公弘 (KLab) インタビュー】
https://japan.steinberg.net/jp/artists/steinberg_stories/klab_abe.html

インタビューのイラスト(男性から男の子)

専門学校等での講義

【これからのゲームサウンドを牽引するソフトウェア「Wwise」。その技術をプロから学びました!】
https://www.hal.ac.jp/tokyo/mind/special/1058

【サウンドクリエイターとして活躍する卒業生から学ぶ!人気ゲームアプリ制作の最前線】
https://www.hal.ac.jp/tokyo/mind/special/14893

【先日、専門学校東京ネットウエイブ様にて、KLab Sound Team4名がサウンド特別講義を行いました!】

つらつらと記載したものを見ると…
「対外活動の方が多いんじゃないか?」

対外活動をするにもわけがありまして…

  1. 「ただ物を作っているだけは他所と一緒じゃないか?」という思い。
  2. 内外で弊社サウンドチームのプレゼンス向上のためのプラスαの活動。
  3. 各メンバーの持つスキルならば、制作だけに留まらない活動が出来るハズ…。
  4. 才能あるサウンドクリエイターに来ていただいて、一緒に盛り上げて貰いたい。
  5. KLab Sound Teamを盛り上げることで、延いてはKLabのクリエイティブ全体を盛り上げていきたい。
  6. より「世界と自分をワクワクさせる」ため。

新興の我々がゲームサウンド業界において新たに居場所を作るという意味においても、対外活動は制作業務と同等の重要性があると考えております。

街頭ビジョンのイラスト

これは街頭ビジョン…

KLab Sound Teamのこれから(夢を語ろう!

以下、記載したものは…
全くもって私自身の個人的な願望でございます!
このアドベント・カレンダー企画にサウンドから手を挙げたのは私だけでしたので、
最後の最後だけ私の思いのたけを語らせていただこうと^^

1. ゲームサントラの配信※5

現状、web上での無料公開になっているものがありますが、それとは違うやり方で楽曲を提供してより多くの人に高音質で楽曲を聴いて貰いたい。それをサウンド主導による制作費用回収策としてやれたら、一層面白いことになるんじゃないか?と。

2. 埋蔵曲の再利用※6

既にサービスを終了してしまったゲーム楽曲の再利用を考えてみる。
現在、もう聴くことは出来ませんが、結構良い曲あるんですよ!それらを思い切ってBGM素材として何らかの形で配布するなどして、もう一度世の中に出してあげることで、音楽的な面での価値を再評価して貰いたい。それ以上に我々の楽曲をより多くの人に聴いていただきたいという思いが強い。

3. 制作者名を出す

作曲者だけに限定した話ではなく、効果音の制作者、MA作業を担当した方の名前も可能な限り出せたら最高だと考えています。まず第一に、誰が何を作ったかが明記されているのは、クリエイター本人のモチベーション維持と向上面から見て極めて重要!第二に、一部のゲーム音楽の熱狂的なファンは作家を追いますから、そういったファンを獲得したいならば名前を出すのは必須事項になると考えています。

また「これ誰が手がけた仕事だろう?」とか「KLabはこんな凄いクリエイター抱えているのか?」いう疑問から、「このクリエイターと仕事したい」に発展するケース(※7)もあるハズ。もし、そうなってくれたら会社にとっても大きなプラスになるものだろうし、クリエイター冥利に尽きるものがあると思います。

4. より一層の対外的な活動

まだ活動の幅はホボ国内なので、夢は大きく海外へ!GDCへの登壇!(などなど

明晰夢のイラスト

まとめ

ここまで、KLab Sound Teamのあれやこれやを記載してまいりましたが、こうして見てみると一般的にイメージされているゲームのサウンドチームとは一線を画すような印象を持ったりしませんでしたか?そんな我々が大きく成長していくには、やはり今よりも叱咤激励が必要であると考えております。

現状、Twitterのフォロワー数は多くはありません。しかし、この状況でフォローしていただくことで「初期から応援していたぜ!」と声高に自慢できる可能性が、まだまだ十分に残されているとも言えるのではないでしょうか?

最後になりますが、弊社配信タイトルのユーザーの皆様、そしてゲーム音楽好きな皆様も御一緒に、KLab Sound Teamを盛り上げることに参加して頂ければ幸いでございます。

♪KLab Sound Teamの公式Twitter
https://twitter.com/klabsoundteam



皆様、これからもKLab Sound Teamを何卒宜しくお願い致します。m(_ _)m
集合している人たちのイラスト(子供)

文中の注釈(※)のまとめ

※1:弊社のビジョン
弊社にはKLabビジョン(https://www.klab.com/jp/company/vision/)というものがあります。弊社のロゴマークの由来も記載があるので必見必読!
個人的に感じている点として、社内の空気といいますか…割と自由度高くやれる空気が醸成されているのは、このビジョンのおかげだと感じることが実際多いのです^^

※2:KLabGames放送局+Plus
弊社で毎週水曜20時から放送を行っているゲーム情報配信番組。KLabGames新作ゲームのお知らせや、絶賛配信中のゲームに関する情報や、攻略などの情報をお届けしています。MCには内村史子さん

チャンネルKLabGames
https://www.youtube.com/channel/UC5jKrMQl1H7F3TVXZHnb_eQ

※3:樋口楓さん
ただいま人気沸騰中!にじさんじ所属のバーチャルアイドルです^^

年明け2日にNHK総合で放送される【アニメ「NHKバーチャルのど自慢」】への出場も決定いたしました!

樋口楓さんの公式YouTubeチャンネル
https://www.youtube.com/channel/UCsg-YqdqQ-KFF0LNk23BY4A

※4:スタインバーグ・ジャパン
本社はドイツ。音楽制作をやっている者でスタインバーグの名を知らぬ者はいないだろう?
音楽制作向けのCubase、それにポストプロダクションの機能を強化させたNuendo、波形編集ソフトのWaveLabがSteinbergを代表するソフトウェア。NuendoはWwise(ゲーム開発用インタラクティブオーディオソリューション)との連携が強化され、現在急速にゲームサウンド業界での普及が進んでいる。

※5:ゲームサントラの配信
CDとして在庫を抱えることと販路の問題。CDの海賊版問題やCDからの違法アップロード問題。海外リスナーにも広く聴いて貰いたいことなども考慮すると、現状ではサブスクリプションでの配信が一番現実的な気がしています。

以下、海賊版の事例。
・ゲームミュージックサントラの海賊版が中古市場に出回っているらしい
https://togetter.com/li/1205968

※6:埋蔵曲の再利用
印税収入になるような収益モデル(劇伴のサントラのような)だったら埋蔵されることもないのだろうか?と思う瞬間が正直あります。

※7:「このクリエイターと仕事したい」に発展するケース
私は結構これで人生繋がっているところありますが、一般的にはどうなのでしょうか?

はじめに

お疲れ様です、LEEDHです。
この記事は KLab Creative Advent Calendar 2018 の14日目の記事になります。

今日はPhotoshopブラシにカスタム機能について紹介したいと思います

Photoshopのブラシを確認する方法は「ブラシ断面」で確認方法と「ブラシストローク」で確認方法があります。

ブラシ断面:ブラシを構成する基本形のこと

断面02.jpg

ブラシをドラッグ(drag)せずに垂直に点を取ってみると、そのブラシの断面を見ることができる。簡単に言うと筆をカッターで切った断面のことです。

ブラシストローク:基本的な形の線をひく動き

 

同じ形の断面を持つ筆だとしてもストロークの性質の設定によっては、上図のように全然違う形に変わります。

ここに色の混じり方や、より詳細な設定の調整を加えていくことになります。

カスタムによって表面的な変化を与える最も大きな構成要素は、まさにこの断面の形状変化とストローク時の性質の設定に依存されています。

Photoshopから基本として提供されているブラシの本質的な性質をいじる前に、基本ブラシだけでは限界があることを認識し、十分な時間をかけて、じっくり複数の基本ブラシの性質を把握しておく必要があります。

この中で自分の使用意図に最も近い性質のブラシを見つけてそれをベースにてカスタムをしていくとより自分に合うブラシを作ることができます。

早速Photoshopのブラシカスタムをやってみよう

まずはショットカットキー「F5」でブラシ関連メニューを開いて各メニューの役割について調べてみましょう。

ブラシ設定.jpg

1.ブラシ先端のシェイプ

3

A 直径:ストローク時 直径の幅(ブラシの大きさ)を設定

B 角度、真円率:選択された筆テクスチャのシェイプを変形させる

3

C 硬さ:ストローク時、輪郭に鮮明度を決める。数値を下げるとエアブラシのように輪郭を滑らかにする

3

D 間隔(かんかく):ストローク間隔を数値で設定する。

この間隔が狭くなるほど滑らかなストロークが可能になるが、演算が重いブラシの場合一時的にマシン(パソコン)が遅くなる可能性もあります。

2.シェイプ

コントロール 属性

設定メニューの中にはコントロール属性設定項目がついている場合があります。

3


  • オフ:なんの影響も受けない(マウス入力状態)
ブラシ設定09.jpg

  • フェード:まるでエアブラシを噴射したようにストローク後すぐに消えていく。
    この属性を選択すると隣に数値入力欄が出てきて、噴射の持続程度を決めることができます。
  • 筆圧:圧力感知タイプ。圧力によって太さと濃さが変わります。
  • ペンの傾き:この属性を選択すると傾き感知が可能な入力装置ではペンパブレットを傾けることでストロークに影響します。
  • スタイラスホイール:タブレットとサムホイール使用時設定すると色相情報の位置を追跡することができます。

以上の「シェイプ」カスタムはブラシの形によるストローク形態の細かい調節と連携されています。

基本ブラシを持って来て属性と数値をいじってみながら比べてみると理解しやすいと思います。

3.散布(さんぷ)


  • 散布:ストロークが通った線を中心にどのぐらいブラシを拡散させて分布させるのかを決めるオプション

3


  • 両軸(りょうじく):チェックするとストローク中心を基準に両方面に拡散されながら広がる。
  • 数のジッター:「数」は面積当たりに適用されるブラシの数を決めてくれる。「数のジッター」は数値の不規則性を数値で適用するようにしてくれるオプション。

4.テクスチャー

この項目はブラシのストロークに特定のテクスチャを反映させます。

簡単に考えればキャンバスの紙質感と似たような効果を作ることができるが、表現に限度はある。活用度は非常に制限的。

「B」エリア描画(びょうが)モード以外は非活性化されているが、描点ごとにテクスチャを適用にチェックすると全ての項目が活性化されます。

5.デュアルブラシ

ブラシカスタムにおいては大きい影響を与える部分。

さまざまなブラシの基本になるいろんな筆のテクスチャがインデックスとして登場し、現在のブラシの形(シェイプ)に基づいて、ブラシのテクスチャを追加して重ねて表現してくれます。

描画モードでは、選択したブラシ断面が描画モードの属性を持って追加され。直径、間隔、散布、数はそれぞれの機能をする。難しく説明したが、簡単に言えば2つの断面を合体させて新たなブラシを作ることができます。

6.その他

この項目の機能はシンプル
透明度と流量(りゅうりょう)のジッター(不規則性)を調節。
ブラシを選択したときPhotoshop上部に表示されるプロパティで調整できる。

7.そのほかには

「以下のチェック項目について」

ノイズ:ブラシストロークの外郭を荒くする属性

ウェットエッジ:水彩画タッチのようにストロークの外郭を濃くしてくれる

重ね描き効果:エアブラシの特性を一定部分反映させてくれる

滑らかさ:ストロークの外郭を滑らかにしてくれる属性

テクスチャの保護:名前そのまま、テクスチャを保護する機能

デフォルトブラシより特定質感のブラシで試してみた方がその違いが分かりやすいのでいろいろ試してみましょう。

PhotoShopカスタムブラシ作成

ブラシ断面(パターン)を描いてブラシ登録

自分が描いた絵やパターンをブラシとして登録することもできます。

木や人間のシルエット、雲などよく使うシルエットをブラシに作って使っている人も多いです。


  • 色が白に近いほど透明になっていく。
  • グレイは半透明になる。

完成!

おわりに

ブラシの属性や特徴を理解しておくとより効率よくイメージを作成することができるため、いろいろ試して、失敗して、成功して、自分なりのブラシテクニックを身に着けておきましょう!

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