拡張性を持たせるUI設計のはなし
スマホゲームの新規プロジェクトを２タイトルほど担当して思ったことは、
事前にある程度、追加機能を想定した設計をしておくのが大事だということ。
例えば、
・なるべく過度な装飾を避け、空白スペースを画面内にいくつか持たせておく
→意味の少ない要素はなるべく置かない。
・少し広めの 文字上限仕様以上の余白を儲けたボタンデザインにする
・少し広めの( ry
スマホゲームの場合だとコンシューマーゲームと違って、
リリース後も追加機能などが実装されるので そう言った
「拡張性を持たせたUI設計」が大切だなといつもゲーム運用に入って思い知らされます。
また、UIグラフィックパーツは
なるべく少ない流用できるパーツで、かつ統一性とルール性が明白にしておくのが 以後の運用で余計な時間を使わないことになるのでとても大事。。
ボタンごとの画像が色々種類違っていたり、
独自のアイコンやテーブルなどは その時は豪華に見えて良いんだけど、
やっぱり余計なリソースを割いてしまったり管理が大変になったりするのであまりおすすめはできない・・・。
またUI設計の場合は、画面の色彩設計なども深く関わるので
統一性という意味でも、様々な色を使うのはあまり自分はやらないです。
（もちろん、ターゲットユーザー層によってその辺の色彩設計などは変わってきますが）
自分がUI/UXの設計をするときにいつもイメージしているのは、
家を建てる というイメージ。
どんな人がどんな家を好み、色、質感、利便性、実用性、こだわりポイントなどなど。
拡張性うんぬんは 最初に家の設計を組むときにさらに、今後増築することも踏まえて設計を行うというイメージですね。
よく追加仕様などが発生した場合、
「そういう想定で設計してないから工数がかかるッ・・・！」
「初期設計時点でそれを想定しておくのと、完成された家を無理やり増築するのとでは雲泥の差があるッ・・・！」というような話をデザイナー間ですることが多いです。
ましてやそのへんの時期になってくるとメンバーも入れ替わりが起きたり。
想定していないデザイン設計を、さらに他の方が担当すると、
全体のデザインやルールが少しずつ崩れていくわけですね・・・。
画面の優先度や色数なども、レギュレーションとして軸を決めて置かないと
情報の氾濫とルールの崩壊などが起きていく感じです。
画面にボタンや要素を増やす ということになった場合、
やはり優先度的に既存で存在している低い他の要素は閉まったり削っていくべきだと思います。
１画面に要素が増え続けると、情報量が多くなっていき
最終的には情報が氾濫した画面ができてしまう。
そこをうまく話し合い、説得して、情報量の適正化を行なっていくのが正しい判断かなと日々思います。
【書籍感想】世界一速く結果を出す人は、なぜ、メールを使わないのか グーグルの個人・チームで成果を上げる方法
よかったこと３行まとめ
・今この瞬間に集中する 余計なことに頭のリソースを使わない
・10%アップではなく、10倍を目指す
・複数のコミュニティに顔を出す
（今知っている人 く 新しい人 代わり映えしない人 く 変化する人）
タイトルが、すごいこう、宣伝を煽るような
感じで最初は敬遠してたのですが、読んで見たらとても面白かったです。
ピョートルさんの文章がとても読みやすく、人柄の良さを文章から感じ取れるような気がしました。
本書をきっかけに、私もSNSや周囲でなるべく複数の
別ジャンルや別職種の方とのつながりを持とうと、少しずつ行動に影響が出てきました。
昨今、自分の専門性を持つことが大切だと思ってきました。
ですが同時に、同じコミュニティだけに属して情報交換や交流をすることが危険だなと感じています。
これからの時代はまさに多様性の時代。
自分の専門分野外からも積極的に、知識や見識を広げていかなくては行けないと感じます。自分の領域を少しでも広げることで 可能性を広げるというイメージでしょうか。
本書でも明記していた通り、
あらゆるところで仕事のつながりが発生する可能性があると思います。人のつながりこそが、価値の産む仕事を創出しているのかもしれません。
直感って大事だよね
直観（ちょっかん、Intuition）とは、知識の持ち主が熟知している知の領域で持つ、推論など論理操作を差し挾まない直接的かつ即時的な認識の形式である。
また直観は、合理的かつ分析的な思考の結果に概念化された知識の実体が論理的に介在する（すなわち思考や、概念という仲介物が知識の持ち主と対象の間に論理的に置かれる）ようなすべての知識の形式、とは異なっている。
直観は本能とは異なっている。本能は必ずしも経験的な要素を必要としない。直観的な基礎による見解を持つ人間は、その見解に至った理由を即座に完全には説明できないかもしれない。しかしながら、人間は時間をかければ、その直観が有効である理由をより組織化して説明するべく論理の繋がりを構築することで、直観を合理的に説明できることもある。
付け加えるならば直観を前提として具体的な問題を正しく説明したり解決に導くためには多くの経験と知識、理解が必要でもある。
wikiより一部抜粋
*******************************************************
以前から、直感の重要性を実感することが多かったです。
よく偉人の名言などにも、自分の直感に素直に従うことの大切さを見かけますね。
直感とは本能とは異なり、
「こういう場合はこうした方が良い」と今までの経験や知識から導き出される
一番初めの回答のように感じます。
そしてそのスピードは他のどの判断方法よりも早く、高い正解率を誇っているようにも思います。
直感が全て正しいとは思いませんが、とかくスピードを求められるシーンでは
直感は実に有効であり理にかなっているのではないでしょうか。
ファーストチェス理論というものがあります。
「5秒で考えた手」と「30分かけて考えた手」は、実際のところ86％が同じ手である。
上記は直感の優れた点が実証された理論のようにも思います。
チェスの世界でこのような数字が出たのは驚異的ですね。
短い会議の中で、最初の方ででる結論は、
30分後終了時に同じ結論で決まるのがほとんどなのかもしれません。
そう考えると、もう少し設定時間を短くして効率化を測ることが可能ですね。
直感をUIの設計に役立てることはできないだろうかと考えていますが、
少ない画面数であれば おおよそ直感通りの設計になることが多いですね。
ゲームやサービス全体の設計となると 相応の時間がかかってしまってます。
しかし、ペーパープロトタイピングで全体設計した後、
清書して納品した時 それを見比べた見た時に ほとんど同じでびっくりしたことがあります。
だいたいこんな感じだろうな というラフ案は進行する上でも非常に重要だということですね。もっとうまく直感を活用できないか今後、試してみようかと思います。
【書籍感想】神・時間術
今回は本のご紹介です。
Amazon.co.jp： 神・時間術 eBook: 樺沢紫苑: Kindleストア
よかったこと３行まとめ
・朝（起床後２〜３時間）に集中タスクを持ってくること
非集中タスク（メール・チャット・会議など）は午後にもってくること
・睡眠でその日の疲れを取ること
・運動は脳の落ちたパフォーマンスをリセットしてくれる
後輩から紹介された本なのですが、
最近脳の仕組みなどに興味があって読んでみました。
これを機に 朝に、
UIの設計、大事な資料の文章作成、読書、バグの対応 など集中力を要することを持ってくるようにしてみました。すると、効率が上がってることが実感できました。
メールやチャットでの情報は重要なもの以外は、
昼以降の脳のパフォーマンスが下がってきたなと感じた頃にやるようにしました。
思えば、仕事でのチャット・メール・雑談 といったものが去年よりすごく多くなったこともあり 手と頭を働かせて集中するタスクのパフォーマンスが落ちてるなと感じることがこの半年でとても多かったのです。
特にUI設計では、
夜残業して１〜２時間悩んで行なっていたことが、朝に１０分や２０分で考えがまとまり完了することがこれまでなんどもありました。
朝は脳が睡眠でリフレッシュされ、高いパフォーマンスを出すことのできる時間のようです。
（この文章も、出勤前の朝に今ちょうど書いていますw）
最近Unityでの開発も、休日朝にやるようにシフトし
進捗が上がってきました。今週末に記事として紹介したいと思います。
2017_半年 進捗報告
あっという間に前回書いてから半年が経ってしまいました。
なのでこの半年の記録やあれこれ役に立ちそうなことを書きます。
■半年の進捗
1.UnityでUI配置習得率 ：20% まだまだ...
2.Unityパーティクル習得率：30% アグニフレア様の手裏剣道場に参加しました。
3.AfterEffects習得率 ：20% まだまだ...
4.LIVE2Dの習得率 ：70% 社内勉強会で基本は習得しました。
5.ゲームタクト（コンサート）2017参加＋Unite2017参加しました。
6.社内デザイナーでUIデザインのレビューを統計してきて、
市場アプリUIデザインの採点平均値がある程度分かるようになった。
（100点満点中いくつか、など）
半年経った現在の進捗は上記のような感じです。
収穫が大きいと言えば、6番目の統計データを用いた採点平均値かなと思います。
これで市場のデザインがどのくらいの評価を出せるのか、ある程度分析できるようになったと思いました。
UIデザインの質≠ゲームの評価 ですが、
市場ランキング上位のゲームは、大体が高品質なUIデザイン評価が多かったです。
現在のソシャゲ市場ですと ゲームのシナリオも重視されてきてるような気がします。
■使ってきて、とても便利だと思ったもの
1.AdobeCreativeCloudライブラリ
チームで使ってとても使い勝手がよかった。
全体の生産性が10%ほどはアップしたと思う。
よく使うカラーやレイヤー効果、スマートオブジェクトをチームでリアルタイム同期できるのがとても素晴らしい。
2.AdobeExperienceDesign
前回の記事からさらに進化してきたAdobeXD。ベジ絵作成機能やレイヤ機能も入り、
Sketchよりこちらの方が優秀になりつつあります。驚くほど軽く、かつリアルタイムでデバイスプレビュー確認ができるのが本当に効率的。
別段紹介するまでもないかな・・という機能ですが 仕事でよく使うので、
色々と資料だけでなくリアルタイム共有などでも使いやすい 素晴らしい機能でお世話になっています。
さらにもっと効率よく仕事が進められるツールあればぜひ教えてもらいたいです！
また、ブログのタイトルをUI/UXと絞ってきましたが、
自分の興味のあるものを詰め込みたいので タイトル変えていこうかなと思う。
2016年まとめと2017年抱負
2016年、UIに関しての活動記録を残しておこうと思います。
************************************************************
2016年から、AdobeXDを導入してみてました。
普段の業務でも使ってますが、異常に使いやすい。軽い。無料。
詳しく書いた記事はこちら↑
2016年振り返り。
■３月社内ハッカソン テーマは箱庭 チームは６チームほど
：デザイナー・システムエンジニアが組むという内容。今回で２回目。
→優勝した。
守秘義務によりサンプル画面はお見せできません…。
内容は、ランブルシティ
みたいに俯瞰で都市を見て とあるバンドマン達を探してスカウトしていくというもの。スカウトしたバンドマン達でバンドを結成し、他のバンド達と勝負して、負かしてさらにキャラをあつめていくというもの。
これが結構楽しげなゲームでした。
UIの画面も今回は横画面で初めてでしたが、割と完成度高めのものになりました。
スカウトしたバンドマンには親密度があり、仲良くなるに従って、メールアドレス・電話などを教えてもらって こちらに電話がかかってきたりする。
普通にやりたいと思ったゲームでした。
電話がかかってくる画面とか作るのが楽しかった。
しかも実際に操作して、街を歩きまわれるまでエンジニアの人が作ってくれた。
すごかった。自販機とかタップして音楽流したりした。
：テーマは「誰でもできる」
Unityで３度目くらいの開発。楽しかったけど惨敗。。
筋トレを誰とでもできて、継続できて筋肉もつくという楽しげなアプリ。
毎日どこかで筋トレをする時間帯のアラームを作り、その時にみんなで筋トレ開始しないと連帯責任で自分の醜態（筋トレする前の写真）が晒されてしまうというもの。
マイナスな理由からの動機づけだったので、ちょっと不評だった。
サンプル画面が見つからず、とりあえず後で画像載せますね・・・。
みんな参加者の人たちが頭柔らかく、すごく良いアイディアばかりの回だった。
自分がいかに小さい井の中で生きていたのか思い知った日。
世の中すごい人たちがたくさんいますね。天下一武闘会みたいな場所でした。
来年も行こうと思っています。
■６月
：社内ハッカソン テーマはVR チームは６チームほど
デザイナー・システムエンジニアが組むという内容。今回で３回目くらい。
→また優勝してしまう：弊社のとあるプロジェクトを用いた画面を作成した。
個人的にも普通にやってみたい企画内容で、ポケモンGOみたいに歩いて、とある
キャラクターを集めていって部屋にお招きするという内容でした。
VR用のデザインを初めてすることができたので、結構勉強になった。
Unityも久々に触ったので、結構楽しかったです。プレゼン資料もよかった。
■8月
：弊社グループ ゲーム画面作成大会 テーマはシュミレーションRPG
.hack/GUっぽいの作るけど惨敗・・・。
実力不足を感じた。しかし収穫は大きかった。
割と自分にとってはかなり楽しげな画面にできたなとは思っていた。
肝心のキャラ動かす画面が、
ちょっと操作性や楽しげなようにできなかったと反省。 やはりゲームは難しい。
■１０月
：自分のサイトを久々に作りたいと思ってAdobeXDで設計してみる。
XDが見ない間に色々アップデートしてたので、慣れるという意味で勉強。
今回はwebデザインをいじって、自分用サイトを作っていました。
SiteDesignTest（←一応さっと見れる程度のラフデザイン）
いけにえと雪のセツナが好きだったのでそれっぽい素材で作成して見ました。
（あれこれ問題ある場合は上記削除します）
あくまでテストです。ここに自分の描いた絵などを載せたりしたいなと思っていました。あとサイトにゆき降らせたりしたかったです。まだ勉強中。
■１２月
：タイムプロジェクト始動。
→Sketchで初の設計を試みる。
「時間」を操作するというテーマのゲーム。
実は前から時間をテーマにした作品を作りたいとずっと思ってました。
とある方々とチームを組み、現在その辺をちょくちょく水面下で作ってます。
SketchはUIのパーツや画面作成に最も特化したツールだなと再認識。
とあるデザイナーの方が使っていて、
全体に浸透させようとしてたのでそれが気になっていたのでやってみました。
************************************************************
2016年は色々ツールを触った気がします。
・AdobeXD
・Prott
・Invision
・Sketch
・Unity（まだまだ経験浅い…）
・sparkgear（エフェクトツール）
・LIVE2d（まだ勉強中）
正直言いますと、Prottは最初は良かったんですが 色々ダメでした。
画面数が増えると一気に重くなる。そしてUI画面の一覧性が悪い。
そしてすごく営業が来た。。
少ない画面数のプロジェクトなら良いと思います。
その点、Invisonは素晴らしかった。
一覧性は悪いのですが、動作の軽さという点では抜きん出てるサービスでした。
去年触って一番感動したのが、AdobeXDです。
このツールがあるだけで相当効率も上がるし応用も効きそうです。しかも無料。。
AdobeXDとSketchがあればUIはほぼ文句なしですね。
webデザインもできるし、何かのプレゼン資料を作るでも役立ちそう。
■2017年抱負。
自分はUI/UXだけでなく、アニメーションも興味あるのでアニメーションツールも
現在勉強しています。LIVE2Dは正直微妙なツール（工数かかる＋コスト高い）ので
アレなんですが後世のために今年初めは勉強します。
そのあとはSpineや、そしてメインとなるのはUnityの勉強の年になりそうです。
前から仕事でエフェクトや簡単なアニメーションは作ってましたが、さらに
一歩凝ったものを作れるようになりたいと思っています。
また、
2017年は自分でこういったブログや作品等で情報発信もしていきたいと思ってます。
サイト作るのもそうだし、講習会ももうちょい行きたいです。
あれもこれもやってしまってますが、
割と広く浅くするタイプなので、性に合ってると思ってます。
（実は仕事でマネジメント向いてると言われてるので、その辺の勉強もしちゃってます…）
もともとグラフィッカーで絵描いてたので、イラストもそろそろまた始めて行きたいですね。絵描くのはかなり遠ざかってたので、自分で動かせるゲームとか作れたらいいです。
漫画描いてたので、漫画描いて動かしたりとか動画作ったりしたいなー。
2017年のテーマは「新世界」
また様々な新しい世界を拡大して行きたいです！
注目している話題についてまとめ
①VR(Virtual Reality),AR(Augmented Reality:拡張現実）
ソードアートオンライン好きですが、
作中の2015年にはナーヴギアが発売してSAO事件が起きていますよね。
あと10年の間に神経接続も現実になりそうな気がします。
ARのほうはまだあまり話題にならなかったりしますね。
実はこちらのほうも個人的に注目しています。
②AI( Artificial Intelligence:人工知能）
AIは様々な分野に関わることが多いように思います。
もしAIがどんどん進化していけば、仕事もどんどんなくなる気がします。
技術的特異点 名前がかっこいい。。
③プロジェクションマッピング（舞台演出）
なんじゃコレーーー！！！
— 西脇資哲（waki） (@waki) 2016年10月21日
すげぇーーーぇーぇ！！！
プロジェクションマッピングとセンシングの頂点！！！
ーDynamic projection mapping onto deforming non-rigid surface pic.twitter.com/2SEyji00aV
もはやここまでくると拡張現実ですね。
薄い透明の膜やガラスに映像を映す技術も、進化し、
2017年かそこらには透明ガラスTVが発売されるらしいです。
④ロボット、3DCG、義肢技術
ざまざまな技術が発達する中でも、ロボット分野での発展もすごい。
今後は実はメカデザイナーの需要が高いのでは・・・？と個人的に思ってます。
3DCGでも人間と見分けがつかないほどの、精密なモデルが作られたり、、
もはやバーチャルとリアルの境目がどんどんあいまいになっていく昨今。
バーチャルもリアルも、技術が発展してさらにできることが増えていっている気がします。ここ数年で話題になることは、自分たちが子供のころみてたSF映画でよく出てきたもので、もはや夢ではなく起こりうる現実だと思い知らされます。
義肢の技術の発展もものすごいです。
神経接続といったまさに未来的なものは驚愕ですね。
**************************************************************
自分が技術系で興味あるものを一度ざっとまとめたかったので、
書いてみました。
こういったことにもっと関わってみたいもんです…＼(＾o＾)／
AdobeXDが使いやすい
初投稿はこれにします。
AdobeXDがすごく使いやすい。
①ペーパープロトタイピング（やっぱり最初はこれが最強）
→prottさんのノート使ってます。会社に備品おいてもらえました。
↓
②AdobeXDで設計
↓
③清書
の流れが個人的に良いです。
①はいつでもどこでも高速でできるので、そこで全体の思想と設計をまとめ、
②でそれをさらに可視化して どんなアプリになるのかのイメージがつきます。
どこが分かりづらい、統一がとれてない のに気づくのもこの②行程。
②で少し時間をかけて設計し、行けそうな全体図になったら
③へ行くと考えもまとまってるので、細かなパーツのデザインもしやすいです。
利点
1.デザインとプロトタイピングを行き来しながら制作できる
2.コピー＆ペーストがしやすい（パーツの位置を取りやすい）
3.余計なガイドやUIがないので、直感的に操作できて早い
4,ソフトそのものが非常に軽くてサクサク動く（重要）
5.軽いのでいつでも全体をみて、どの画面がおかしいのかを理解できる。
6.現在の画面をサクッとリンクつくってメンバー共有できる。
あとはその作成したXDのデータを、みんなでいじって直して行けたりしたら
良さそうだなーとか思います。
パーツにも動きを付けれたりしたらさらに素敵ですね。
