meycoのUX&UIデザイン技術メモ

@meycoがUIデザイナー&アーティストとして仕事する上で、役にたった事をひたすらまとめます。ゲームUI強めです。My portfolio site.: http://meycou.com/ noteで小説や漫画を書いています:https://note.mu/meyco

ゲーム系UIデザイナーの勉強を2年近くやって思った12のこと。

f:id:meyco:20140105153014p:plain

あけましておめでとうございます。 新年になり、すこしゆったりとした時間を過ごす事ができました。せっかくなので、去年からずっと思っていたUIデザイナーについて思った頭の中のことをまとめたいと思います。

WEBのUI設計よりも、明らかにゲームの方が難しい

これは結構何度も言ってますが、ゲームの設計(ゲーミフィケーションのアプリ含む)の方が明らかに「やることが多い」です。 もっとプレイしてもらうには?ゲームが終わったときに、どのような設計になればもう一度やってくれる? チュートリアルは必要?やりこみ要素はどうする?ソーシャルとどうやって連携する?ポイント加算の条件は?アクショナブルフィードバックは?日常で使ってくれるような設計には何が必要?盛り込みすぎではないか? などなど、考えることが多いです。

 

このあたりは、ソーシャルゲームが本当に上手にできてるなーと思っているので、日々勉強しています。 ゲームデザインの話はまた全然別な内容なので、別の機会に書きます。 また、ゲームの設計がWEBに活きることが多いので、個人的にもゲームを作ってみるのはおすすめしています。

ゲーム側もウェブ側もコラボしなければならない時期に来ている。

元々WEB屋なのでわかるのですが、WEB系の人はゲーム系の技術職人に憧れている事が多いです。 そして、ゲーム系の人は、技術的な話になるとどうしても難しい話になってきます。 そもそも、WEBもゲームも結果の出し方が違うので比べるのもおかしな話なのですが、その二つを融合せざるを得ない時期に入っています。それが今流行(ちょい遅いかもしれないけど)のゲーミフィケーションという事になるのかな。

 

WEBのUIデザイナーが今やっている事は、数十年前からゲーム業界では既に行っていた事を、定義しなおしてやっている事が結構多かったりします。 ゲーム業界の人からは、その部分が不思議!という話をよく耳にします。ちゃんと定義して名前付けしただけの話がおおいのでそうなるのでしょうね。 ただ、逆にWebの知識が疎いからもっとたくさんの事を知りたい!とも言われるので、そのあたり上手くコラボレーションしたいというのが今後の目標です。

ほぼケースバイケースなので、ありとあらゆる知識を頭の中に入れておく

ここ最近のWEBやリスト・情報収集系アプリだと、レスポンシブデザインやモバイルファーストの関係で、ある程度構成が決まっていて応用がききやすくなっています。Bootstrapなんかがいい例ですね。ゲームになってくると本当に中身の構成によって種類や作り方、必要なものがガラッと変わってくるので、記事にまとめたいなと思っても、なかなかまとまりません・・・。 なので、日ごろからの情報収集は本当に大切です。

iPhone5Sの16GB買ったんですが、たくさんアプリを見るのと、最近のアプリは余裕で100MBとか行くので、全然足りないです。 プラス、surface Pro 2も買ったんですが、結構いいゲームやアプリが多くて楽しい。アニメーションや、ストラクチャーもOSが変わるとまったく違って新鮮です。Androidは買うか悩み中。

WEBアプリ、ネイティブアプリで出来るUIアニメーションや遷移方法の違いを頭に入れておく

今作っているアプリでは、PC、AndroidiPhoneので使いたいアプリなので、ウェブアプリとして作っています。 ただ、ウェブアプリになるのとアニメーションがjavaScriptになるのですが、データをクラウドからとってきてアニメーションをモバイルでやると、重たいデータの時にアニメーションが遅くなる。 ネイティブだとこんなことないのに!って思うんですが、ネイティブでまた書き直す黒魔術をするぐらいなら、ウェブアプリとして作ったほうがいいんですね。 Objective-CならCocoa Controlsなどである程度UIアニメーションがまとまってるので楽なのだけど(Androidもそういうのあるのかな?)、JavaScriptでさらにデータの重さの制約があると、出来るアニメーションが限られてくるので、なかなか選定に悩みます。 国外向けの仕事だと、こういうことが結構頻繁に起こるので、UIアニメーションに関していろいろ見ておくことをおすすめします。

UIデザインですごくFlashを使う

私の周りのUIデザイナー(国内)が、あまりFlashを使ってない事にびっくりしているんですが、すごくFlashつかいます。上記のUIインタラクションは口頭で説明が無理という事と、ボタンのアニメーションや音が出るタイミング、多くの画面遷移の説明、実際のゲームアニメーションなどを、一気に説明するのには、プログラムが出来ないデザイナーにとって、Flashが超好都合なんです。 アニメーション内に開発者向けメモとか出来るし、ベクターデータをそのまま取り出して実装できるので本当にいいです。 むしろ、

ほかに方法があれば知りたいので、ぜひ教えていただきたく思います。

文字は画像でなるべく作らないようにする

日本向けと国外向けゲームアプリの面白い違いなのですが、日本向けのゲームアプリは圧倒的に画像文字が多いです。日本文化が繁栄されているなぁと思います。 国外向けだと、様々な国に対応しなきゃいけないし、国によって文字の長さが違う(タイ語なんかはすっごい表記が長い!)ので、なるべくデバイスフォントなどで対応するようにしています。中国語は文字が多いのですが、英語だと数字とアルファベットぐらいしかないので、無料フォントが多くて何種類か文字を積めるのはいいですね!

ちなみに、お気に入りはOswaldっていう縦長のフォントです。モバイルみたいな横幅がないデバイスでも、文字の収まりがいいのでオススメ。

英語を読む意志がないと、お話にならない

UI資料や、新しい情報は大体英語なので、読む気がないとそもそも勉強できません。 日本語訳の記事だと、かなり意味が違ったりするので本当に危険だなーと最近思います。(これで何回か困ったことあります) もしも国外と仕事するのであれば、ちゃんと原文読むようにしましょう。グーグル翻訳を使って、そのあとに細かく辞書をひくのでもいいかと。

UIデザインについて理論武装をする

紙デザインやパッケージデザインからデザイン業界に入ったのでわかるのですが、UIデザインは理論と人間工学・心理学の世界です。「なんとなく」「かっこいいから」があまり通用しない。 ブランド(世界観)を崩さず、いかに効率的に、解りやすく情報をユーザーに見せるかが勝負です。 私も今まで勘違いしていたのですが、日本語のUIデザイナーの記事を読むと、「側」というか、外枠飾りだけの事をさしてる事もあるので、ぜんぜん違うよ。って事を言いたい。

デザインのそぎ落としすぎも良くない

「デザインは限界までそぎ落とすもの」という言葉があり、私も少し前まではそう思ってました。 でも、世界観を崩すほどのそぎ落としや、ユーザが何をしていいか解らないほどのそぎ落としはどうかなと思います。windows8をこのあいだ初めて触りましたが、チュートリアルも何もなくて、本当にどうしたらいいか解らなかった・・・

 

フレキシブルでレイヤー階層が無いデザインは理想ですが、アイコンだけの表示も限界があると思ってるし(そもそも何十個もアイコンの意味覚えられない)ある程度は言葉で表現したり、チュートリアルを入れないと危険かなと思います。

サウンド、ラウドネス管理

この間、お友達のSHiNKA (shinka_cb) さんが書いた「ラウドネス管理していますか?」という記事を読んで、はじめてラウドネス管理という言葉を知りました。ラウドネスは音量とはまた違う「人間の主観的なうるささ」の話ですが、詳しくはリンク先へ飛んでください。 騒音というか、UXにおいては音量管理が必要という事には気づいていたけど、どう言えばいいか、どうすれば良いかがまったく解らなかった。でも上記ブログを読んで本当に勉強になりました。

アプリの音量が小さくてデバイス本体の音を大きくしたのに、動画サイトに行って音が大きすぎるっていうのはやっぱり良くないですもん。iPhoneはMAXの音が決められるけど、いちいち変えるのも面倒ですし。

 

次に、サウンドについてですが、サウンドが鳴るタイミングもかなり重要で ボタンを押したときに鳴るようにするとか、どういう音にするとか、ちかちか光るアニメーションにするのかとかいろいろ考えます。 また、去年作ったオクスクロニクルのような音ゲーだと、ボタンとサウンドが同時に鳴るタイプではないけど、押すタイミングを少し早めるようにして、早く音を出すべきだったのかなとかまたいろいろ考えます。 音ゲー系はキー入力が音楽よりも少し早くするように設計されてるのかな。

サウンドの選定が本当にまだ慣れてなくて、あまりカッコいい音とかイメージできないのが、ここ最近のつらいところ。 音のセンス欲しいです。

デバイス本体との連携(バイブレーションなど)

surface Pro2を買っていいなあと思ったのは、画面外にあるMicrosoftマークを押すと、ホーム画面に戻るときにデバイス全体が一瞬振動するんですね。これが結構気持ちよくて、自分でゲームやアプリを作る時にも、この機能を搭載したいと思いました。こういう小さなことでも、結構人間て意識するんです。

シェイプに気を遣う

この間、元ぷ●ぷよ製作チームの一人の方と麻雀飲んだのですが、国外であまりぷ●ぷ●が売れなかったと聞いてショックを受けました。日本だとあんなにロングセラーゲームなのに・・・ なぜかというと、日本人はカラーで見分けるけど、国外の人は、日本人よりも圧倒的に色弱者が多く(そもそも人数が違うのですが)テトリスのような、シェイプで見分けるような設計にしたほうがいいみたいです。

もちろん、日本人がパズル好きな民族っていうのも関係してるのかなとも思っています。確かに国外のゲームは、シェイプがはっきりしたパズルは多いかなと思いました。 パズルゲームに関しては、ちゃんと自分で調べて今後も情報をまとめたいです。

 

 

ずっと頭の中で一部を占領していた感じで、すこし吐き出さないといけないなと思っていたので、かなりスッキリしました。

まるで底なし沼のようなUIデザイナーの世界ですが、好きな人は好きだと思うので、興味があればぜひ勉強してみてください。