サウザンドメモリーズのデザインができるまでの過程、様々なデザインツールによる効率化、軽量化など。デザイナー、エンジニアの方は是非見てください!

1. 千メモUIの秘密
はしもと ゆうすけ
Chief Product Designer at

2. 目次
•
デザインの秘密
•
画像書き出しの秘密
•
UI統一の秘密
•
アニメーションの秘密

3. デザインの秘密
•
世界観からデザインを創る
•
UXと検証

4. 世界観からデザインを創る

5. 世界観からデザインを創る
1.ロゴ
•
サウザンドメモリーズは世界
観をしっかり作り上げたタイ
トルです。
•
千の武器が人に転生するとい
う物語から、先ずロゴを作成
しそこからUIデザインにとり
かかりました。
•
ロゴが千メモの世界観を象徴
するオブジェクトになってい
ます。

6. 世界観からデザインを創る
2.テーマオブジェクト
•
ロゴが確定した次は、世界観にあっ
たテーマオブジェクトを作成しました。
もちろんメインのテーマオブジェクト
は武器なのだがそれ以外に世界観を
表すオブジェクトを作成しました。
•
世界観の背景が魔法と科学が合わさっ
た世界ということで、魔法の力で機械
を動かす、「歯車」をテーマオブジェ
クトにしました。
•
他にも細かなパーツにはRPG感、魔
法をイメージするようなパーツを使っ
た。

7. 世界観からデザインを創る
3.配色
•
世界観が未来都市ということ
でメインカラーにグレーのグ
ラデーションを使い無機質で
機械的なイメージだしました
ベースカラー
メインカラー
サブカラー
アクセントカラー
サブアクセントカラー

8. 世界観からデザインを創る
まとめ
一番良かったのは
•
•
•
•
•
•
•
•
•
ロゴ作成ファースト
!
•
•
•
ロゴ作成の時点でしっかり世界
観をデザイナーが理解し開発メ
ンバーやプランナーとの方向性
の一致することができたこと。
UIデザイン作成時もロゴから連
想してパーツ作成がスムーズに
なった
など数多くの利点がありました。

9. UXと検証

10. UXと検証
•
ワイヤーフレームでのUX検証
•
画面遷移の見える化

11. ワイヤーフレームでのUX検証
•
•
•
ペーパープロトタイピングで
はないが、ワイヤー
フレームベー
スの設計しっかりしてからのUX
検証をしました。
実際にこの遷移でユーザーの
迷いがないか、このボタンの
位置で押しやすいか、わかり
やすいか検証をしました。
ルールの統一、予想可能なUI(迷わないIF)を徹底して作った

12. 画面遷移の見える化
•
画面遷移の見える化をすることによって、プラ
ンナー、エンジニア、デザイナー感のコミュニ
ケーションコストの削減ができ想定した通りの
実装をすることができた。

15. 画像書き出しの秘密
•
psdからコードへ(C++)
•
jsxの使用による効率化
•
pngの軽量化

16. PSDからコードへ
•
Photoshopで、各オブジェクトのxy、ヒットエ
リア、大きさ、image pathなどを全て指定して
jsxでc++のコードとして書き出すことをしてい
ます。
•
これによりデザイナーが思った通りのレイアウ
トがクライアントに実装されるというメリット
と、クライアントエンジニアの工数削減という2
つの大きなメリットがあります

17. PhotoShop画面

18. jsxの使用による効率化
•
主に使用しているJSXの種類
•
文字列をCSVから読み込んで書き出す
•
レイヤーカンプをレイヤーカンプ名で書きだす
•
アートボードごとにPNGに書き出す(アート
ボード名)
いろいろなjsxを使用することで、単純作業をなくしています

19. jsxの使用による効率化
•
他にもPhotoshopのレイヤーカンプを使った機
能、Action, illustratorのシンボルなどを使うこ
とで工数の削減をしています。

20. jsxの使用による効率化
•
いろいろなjsxを使用することで、単純作業をな
くしています

21. PNGの軽量化
•
Pngyuの使用
•
•
透明度を持ったまま減色できる
•
•
pngquantの技術を使ったGUIツール(複数化)
http://nukesaq88.github.io/Pngyu/
ImageOptim
•
画像の余分なヘッダー情報を削除して軽量してくれる
•
http://imageoptim.com/

22. アニメーションの秘密

23. SDキャラのアニメーション

24. •
SDキャラは全てコマアニメーションでできていま
す。
•
攻撃モーションは基本四コマで構成されています
•
エフェクトはFlashで作成した2Dエフェクトをつ
けています。
•
より爽快感(気持ち良い感覚)がでるようにちびキャ
ラの動きアニメーションは工夫をしました。

26. 気持ちよさの追求
•
ゲームでは常にアニメーションを動かしNative
らしい動きを実現
•
•
タップエフェクト、マイページ、 ちびキャラ
注目して欲しいところをはっきりさせるための
工夫
•
ボタンアニメーション

27. まとめ
•
今回は大きなくくりでまとめてしいましたが、
サウザンドメモリーズではたくさんの試みをして
よりユーザーの皆様に楽しんでもらえるように努
力をしたゲームになっております。より皆様に楽
しんでもらえるようデザイン、演出の部分で成長
し頑張って行きたいと思っております。
•
興味がある方は是非ご連絡ください