千メモUIの秘密はしもと ゆうすけ

Chief Product Designer at

目次

• デザインの秘密

• 画像書き出しの秘密

• UI統一の秘密

• アニメーションの秘密

デザインの秘密

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

• UXと検証

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

1.ロゴ• サウザンドメモリーズは世界観をしっかり作り上げたタイトルです。

• 千の武器が人に転生するという物語から、先ずロゴを作成しそこからUIデザインにとりかかりました。

• ロゴが千メモの世界観を象徴するオブジェクトになっています。

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

2.テーマオブジェクト• ロゴが確定した次は、世界観にあったテーマオブジェクトを作成しました。もちろんメインのテーマオブジェクトは武器なのだがそれ以外に世界観を表すオブジェクトを作成しました。

• 世界観の背景が魔法と科学が合わさった世界ということで、魔法の力で機械を動かす、「歯車」をテーマオブジェクトにしました。

• 他にも細かなパーツにはRPG感、魔法をイメージするようなパーツを使った。

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

3.配色• 世界観が未来都市ということでメインカラーにグレーのグラデーションを使い無機質で機械的なイメージだしました

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

ベースカラー

メインカラー

アクセントカラー

サブカラー

サブアクセントカラー

一番良かったのは ロゴ作成ファースト • • • • • • • • •

!• ロゴ作成の時点でしっかり世界観をデザイナーが理解し開発メンバーやプランナーとの方向性の一致することができたこと。

• UIデザイン作成時もロゴから連想してパーツ作成がスムーズになった

• など数多くの利点がありました。

まとめ世界観からデザインを創る

UXと検証

UXと検証

• ワイヤーフレームでのUX検証

• 画面遷移の見える化

ワイヤーフレームでのUX検証

• ペーパープロトタイピングではないが、ワイヤーフレームベースの設計しっかりしてからのUX検証をしました。

• 実際にこの遷移でユーザーの迷いがないか、このボタンの位置で押しやすいか、わかりやすいか検証をしました。

• ルールの統一、予想可能なUI(迷わないIF)を徹底して作った

画面遷移の見える化

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

画像書き出しの秘密

• psdからコードへ(C++)

• jsxの使用による効率化

• pngの軽量化

PSDからコードへ• Photoshopで、各オブジェクトのxy、ヒットエリア、大きさ、image pathなどを全て指定してjsxでc++のコードとして書き出すことをしています。

• これによりデザイナーが思った通りのレイアウトがクライアントに実装されるというメリットと、クライアントエンジニアの工数削減という2つの大きなメリットがあります

PhotoShop画面

jsxの使用による効率化• 主に使用しているJSXの種類

• 文字列をCSVから読み込んで書き出す

• レイヤーカンプをレイヤーカンプ名で書きだす

• アートボードごとにPNGに書き出す(アートボード名)

いろいろなjsxを使用することで、単純作業をなくしています

jsxの使用による効率化

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

jsxの使用による効率化

• いろいろなjsxを使用することで、単純作業をなくしています

PNGの軽量化• Pngyuの使用

• pngquantの技術を使ったGUIツール(複数化)

• 透明度を持ったまま減色できる

• http://nukesaq88.github.io/Pngyu/

• ImageOptim

• 画像の余分なヘッダー情報を削除して軽量してくれる

• http://imageoptim.com/

アニメーションの秘密

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

• SDキャラは全てコマアニメーションでできています。

• 攻撃モーションは基本四コマで構成されています

• エフェクトはFlashで作成した2Dエフェクトをつけています。

• より爽快感(気持ち良い感覚)がでるようにちびキャラの動きアニメーションは工夫をしました。

気持ちよさの追求

• ゲームでは常にアニメーションを動かしNativeらしい動きを実現

• タップエフェクト、マイページ、 ちびキャラ

• 注目して欲しいところをはっきりさせるための工夫

• ボタンアニメーション

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

• 興味がある方は是非ご連絡ください