advertisement

千メモUiの秘密

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

Published on March 7, 2014

Author: aktsk

Source: slideshare.net

Description

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

千メモ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

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

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

千メモuiの秘密.
Read more

デザイン | Akatsuki Hackers Lab ...

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