千メモUiの秘密

100 %
0 %
Information about 千メモUiの秘密
Design

Published on March 7, 2014

Author: aktsk

Source: slideshare.net

Description

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

千メモ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 らしい動きを実現 • • タップエフェクト、マイページ、 ちびキャラ 注目して欲しいところをはっきりさせるための 工夫 • ボタンアニメーション

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

Add a comment

Related presentations

Related pages

サウザンドメモリーズUIの秘密 | Akatsuki ...

千メモuiの秘密.
Read more

デザイン | Akatsuki Hackers Lab ...

コンテンツは以下のようになっています 千メモUIの秘密 デザインの秘密 画像... facebook. google Plus. 2.
Read more