狠狠撸

狠狠撸Share a Scribd company logo

千メモ鲍颈の秘密

?
?
aktsk
aktsk

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

1 of 27
Downloaded 49 times
千メモUIの秘密 はしもと ゆうすけ Chief Product Designer at
目次 ? デザインの秘密 ? 画像書き出しの秘密 ? UI統一の秘密 ? アニメーションの秘密
デザインの秘密 ? 世界観からデザインを创る ? 鲍齿と検証
世界観からデザインを创る
世界観からデザインを创る 1.ロゴ ? サウザンドメモリーズは世界 観をしっかり作り上げたタイ トルです。 ? 千の武器が人に転生するとい う物語から、先ずロゴを作成 しそこからUIデザインにとり かかりました。 ? ロゴが千メモの世界観を象徴 するオブジェクトになってい ます。
世界観からデザインを创る 2.テーマオブジェクト ? ロゴが確定した次は、世界観にあっ たテーマオブジェクトを作成しました。 もちろんメインのテーマオブジェクト は武器なのだがそれ以外に世界観を 表すオブジェクトを作成しました。 ? 世界観の背景が魔法と科学が合わさっ た世界ということで、魔法の力で機械 を動かす、「歯車」をテーマオブジェ クトにしました。 ? 他にも細かなパーツにはRPG感、魔 法をイメージするようなパーツを使っ た。
世界観からデザインを创る 3.配色 ? 世界観が未来都市ということ でメインカラーにグレーのグ ラデーションを使い無機質で 機械的なイメージだしました ベースカラー メインカラー サブカラー アクセントカラー サブアクセントカラー
世界観からデザインを创る まとめ 一番良かったのは ? ? ? ? ? ? ? ? ? ロゴ作成ファースト ! ? ? ? ロゴ作成の時点でしっかり世界 観をデザイナーが理解し開発メ ンバーやプランナーとの方向性 の一致することができたこと。 UIデザイン作成時もロゴから連 想してパーツ作成がスムーズに なった など数多くの利点がありました。
鲍齿と検証
鲍齿と検証 ? ワイヤーフレームでのUX検証 ? 画面遷移の見える化
ワイヤーフレームでのUX検証 ? ? ? ペーパープロトタイピングで はないが、ワイヤー フレームベー スの設計しっかりしてからのUX 検証をしました。 実際にこの遷移でユーザーの 迷いがないか、このボタンの 位置で押しやすいか、わかり やすいか検証をしました。 ルールの統一、予想可能なUI(迷わないIF)を徹底して作った
画面遷移の見える化 ? 画面遷移の見える化をすることによって、プラ ンナー、エンジニア、デザイナー感のコミュニ ケーションコストの削減ができ想定した通りの 実装をすることができた。
千メモ鲍颈の秘密
千メモ鲍颈の秘密
画像書き出しの秘密 ? psdからコードへ(C++) ? jsxの使用による効率化 ? pngの軽量化
PSDからコードへ ? Photoshopで、各オブジェクトのxy、ヒットエ リア、大きさ、image pathなどを全て指定して jsxでc++のコードとして書き出すことをしてい ます。 ? これによりデザイナーが思った通りのレイアウ トがクライアントに実装されるというメリット と、クライアントエンジニアの工数削減という2 つの大きなメリットがあります
笔丑辞迟辞厂丑辞辫画面
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キャラは全てコマアニメーションでできていま す。 ? 攻撃モーションは基本四コマで構成されています ? エフェクトはFlashで作成した2Dエフェクトをつ けています。 ? より爽快感(気持ち良い感覚)がでるようにちびキャ ラの動きアニメーションは工夫をしました。
千メモ鲍颈の秘密
気持ちよさの追求 ? ゲームでは常にアニメーションを動かしNative らしい動きを実現 ? ? タップエフェクト、マイページ、 ちびキャラ 注目して欲しいところをはっきりさせるための 工夫 ? ボタンアニメーション
まとめ ? 今回は大きなくくりでまとめてしいましたが、 サウザンドメモリーズではたくさんの試みをして よりユーザーの皆様に楽しんでもらえるように努 力をしたゲームになっております。より皆様に楽 しんでもらえるようデザイン、演出の部分で成長 し頑張って行きたいと思っております。 ? 興味がある方は是非ご連絡ください

More Related Content

千メモ鲍颈の秘密