KLabGames Creative Blog

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

はじめに

お疲れ様です、中根です。
この記事は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で実際にアニメーションを付ける工程の記事を書きたいと思います。

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

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

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

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

この記事は 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とは、「循環を正常化するための活動」と言うのがもっともシンプルな言い方ではないかと思います。