SlideShare une entreprise Scribd logo
1  sur  48
Télécharger pour lire hors ligne
S G E 新 卒 研 修 「 P I V O T 」 を 振 り 返 る
画 面 ”外 ”の デ ザ イ ン
蛭 田 周 平
自己 紹 介
小 学 2 年 ∼ 高 校 3 年 ま で 1 1 年 ラ グ ビ ー 漬 け
多 摩 美 術 大 学 統 合 デ ザ イ ン 学 科 卒 業
C A 1 8 新 卒 U I デ ザ イ ナ ー
鉛 筆 イ ラ スト
「 グ リ メ ロ 」U I デ ザ イ ナ ー
P I V O T っ て?
人 間 の 面 白 い 知 覚 の 話
画 面 ”外 ”の デ ザ イ ン
ま と め
P I V O Tって?
P I V O Tって?
S G E 新 卒 研 修 で 作 っ た ゲ ー ム 。
彰 吾 さ ん「 ゲ ー ム を 通 し て の U X が と て も 良 く で き て る 」
ハイスピード の 爽 快 アクション
な ぜ そ の コ ン セ プ ト に 至 っ た の か
時 間 制 御 に よ る 精 密 操 作
時 間 制 御 に よ っ て 体 験 を 拡 張 し た 事 例
一 発 で や ら れ る シ ュ ー テ ィ ン グ を
時 間 操 作 に よ っ て 遊 び を 拡 張 し た
高速なアクションゲームも
拡張ができないか?
ギャップを気 持ちよくする為
徹 底 的 ”体 感 ”の 速 度 変 化 の 追 求
”体 感 ”
ス ピ ー ド っ て 平 面 じ ゃ 表 現 で き な い し . . .
人 間 の 感 覚 を
フ ル に 活 用 し て 演 出 し た い
人 間 の 面 白 い 知 覚 の 話
A と B が 同 じ 色
真 ん 中 の 黄 緑 は 同 じ 色
何 色 の ド レ ス?
人 が 何 か を 認 識 す る 際
情 報 の 差 分 で 判 断 す る
色 に 限 ら ず 人 は 差 の 認 識 が 強 い
色 に 限 ら ず 人 は 差 の 認 識 が 強 い
差を確 認 できなくなると. , ,
差を確 認 できなくなると. , ,
差を確 認 できなくなると. , ,
変 化した部 分がわからなくなる
差 分 の 感 覚 、イ ロ イ ロ
平 常 に 対 し て の 差 分 が 印 象 に 変 わ る
・ホ ラ ー 映 画 の 怖 さ の 演 出
・高 校 の 通 学 時 間
・自 分 の 家 の に お い
脳 が 変 化 に 敏 感 に で き て い る
い ろ ん な も の が 複 合 的 に 影 響 し て く る
人 間 の 感 覚 は
絶 対 値 で な く相 対 値
時 間 と 差 分 の 設 計 に よって
情 報・体 験 の 強 弱 を 操 作 で き る
ス ピ ー ド を コ ン セ プ ト に 置 く 故 に
時 間と変 化 の デ ザ イン
画 面 ”外”の デ ザ イン
体 験 に 優 先 度 を つ け る 為
時 間 を 項 目 で 区 切って 設 計
瞬 間 を 活 か す 為 に 全 体 を 構 成 し て い く
大 枠: 1 プレ イ の 時 間
間 隔: 画 面 遷 移 サ イク ル
瞬 間: ギャップ の 気 持 ち 良 さ
瞬 間: 変 化 の 気 持 ち 良 さ
一 番 遷 移 コ ン ト ラ スト が 強 く な る 触 っ た 瞬 間 。
P I V O T の 名 称 も こ こ か ら 。
・1 番 印 象 強 く 見 せ た 部 分
・頻 繁 に 見 せ る た め 、強 い だ け で は だ め
・暖 色 と 無 彩 色 を 対 比 さ せ て 双 方 を 引 き 立 て る
・色 彩 に 加 え て 、音 楽 と エ フ ェ クト も 反 応 す る 設 計
・フ ラ ット デ ザ イ ン で あ り な が ら ア ニ メ っ ぽ い 演 出
スピードとスロー の 切り替 わるコントラスト
間 隔: 画 面 遷 移 サ イク ル
反 射 の 度 に 変 化 す る 前 進 色 の 暖 色 と
ス ロ ー モ ー シ ョ ン 時 の モ ノト ー ン の 対 比
ス ロ ー モ ー シ ョ ン 切 り 替 え
ス ロ ー 解 除
連 続 反 射
直 進
・・・
切り替えのためだけに周りを調 整する
大 枠: 1 プレ イ の 時 間
短 時 間 で 気 持 ち よ く 遊 べ る ゲ ー ム で あ る こ と 。
任 天 堂 の よ う な 反 復 し て く レ ベ ル デ ザ イ ン 。
- 1 5 秒     チ ュ ー ト リ ア ル 並 み
1 5 - 4 5 秒     簡 単 な 方 向 転 換
4 5 - 1 2 0 秒    難 し め の 遊 び ( 狙 わ な い と 詰 ま る )
1 2 0 秒        プ レ イ ヤ ー い じ め
2 分 で G A M E O V E R のレべ ルデザイン
ス ロ ーで 集 中
狙 っ て 発 射
反 射・進 行 で 色 彩 変 化
ス ロ ーで 集 中
・・・
ゲ ー ム 開 始
時 間と差 分 の 設 計 によって
ゲーム の全体を通しての
情報・体験設計ができた
ゲ ー ム 全 体 で 一 貫 で き れ ば
良 い U X が 提 供 で きる
まとめ
ま と め
も し く は そ の 前 後 ペ ー ジ く ら い ま で
今 まで 自 分 が U I 設 計 するとき
ペ ージ 単 体 に なりが ち だった
ま と め
た だ U X は 体 験 そ の も の な の で
1画 面 だ け で は 絶 対 完 結し な い
ま と め
画 面 の 外 のことも 考 えら れ ると
より良 い デ ザ イン で きるの で は!?
以 上 に なりま す 。
あ りが と うご ざ い まし た!

Contenu connexe

Tendances

第1回 (白石俊平と) カッコいいやつら
第1回 (白石俊平と) カッコいいやつら第1回 (白石俊平と) カッコいいやつら
第1回 (白石俊平と) カッコいいやつらShumpei Shiraishi
 
Superman
SupermanSuperman
SupermanSolur
 
レース場ゲーム
レース場ゲームレース場ゲーム
レース場ゲームSolur
 
20130323 ジン大 広探ゲーム説明
20130323 ジン大 広探ゲーム説明20130323 ジン大 広探ゲーム説明
20130323 ジン大 広探ゲーム説明Shinya Sato
 

Tendances (8)

クズを自覚する
クズを自覚するクズを自覚する
クズを自覚する
 
第1回 (白石俊平と) カッコいいやつら
第1回 (白石俊平と) カッコいいやつら第1回 (白石俊平と) カッコいいやつら
第1回 (白石俊平と) カッコいいやつら
 
Superman
SupermanSuperman
Superman
 
ゲームと音楽
ゲームと音楽ゲームと音楽
ゲームと音楽
 
広探ゲーム
広探ゲーム広探ゲーム
広探ゲーム
 
0414
04140414
0414
 
レース場ゲーム
レース場ゲームレース場ゲーム
レース場ゲーム
 
20130323 ジン大 広探ゲーム説明
20130323 ジン大 広探ゲーム説明20130323 ジン大 広探ゲーム説明
20130323 ジン大 広探ゲーム説明
 

Kyuchaku hiruta

  • 1. S G E 新 卒 研 修 「 P I V O T 」 を 振 り 返 る 画 面 ”外 ”の デ ザ イ ン
  • 2. 蛭 田 周 平 自己 紹 介 小 学 2 年 ∼ 高 校 3 年 ま で 1 1 年 ラ グ ビ ー 漬 け 多 摩 美 術 大 学 統 合 デ ザ イ ン 学 科 卒 業 C A 1 8 新 卒 U I デ ザ イ ナ ー
  • 3. 鉛 筆 イ ラ スト
  • 4. 「 グ リ メ ロ 」U I デ ザ イ ナ ー
  • 5. P I V O T っ て? 人 間 の 面 白 い 知 覚 の 話 画 面 ”外 ”の デ ザ イ ン ま と め
  • 6. P I V O Tって?
  • 7. P I V O Tって? S G E 新 卒 研 修 で 作 っ た ゲ ー ム 。 彰 吾 さ ん「 ゲ ー ム を 通 し て の U X が と て も 良 く で き て る 」
  • 8. ハイスピード の 爽 快 アクション な ぜ そ の コ ン セ プ ト に 至 っ た の か 時 間 制 御 に よ る 精 密 操 作
  • 9. 時 間 制 御 に よ っ て 体 験 を 拡 張 し た 事 例
  • 10. 一 発 で や ら れ る シ ュ ー テ ィ ン グ を 時 間 操 作 に よ っ て 遊 び を 拡 張 し た
  • 12. ギャップを気 持ちよくする為 徹 底 的 ”体 感 ”の 速 度 変 化 の 追 求
  • 14. ス ピ ー ド っ て 平 面 じ ゃ 表 現 で き な い し . . . 人 間 の 感 覚 を フ ル に 活 用 し て 演 出 し た い
  • 15. 人 間 の 面 白 い 知 覚 の 話
  • 16. A と B が 同 じ 色
  • 17. 真 ん 中 の 黄 緑 は 同 じ 色
  • 18. 何 色 の ド レ ス?
  • 19. 人 が 何 か を 認 識 す る 際 情 報 の 差 分 で 判 断 す る
  • 20. 色 に 限 ら ず 人 は 差 の 認 識 が 強 い
  • 21. 色 に 限 ら ず 人 は 差 の 認 識 が 強 い
  • 24. 差を確 認 できなくなると. , , 変 化した部 分がわからなくなる
  • 25. 差 分 の 感 覚 、イ ロ イ ロ 平 常 に 対 し て の 差 分 が 印 象 に 変 わ る ・ホ ラ ー 映 画 の 怖 さ の 演 出 ・高 校 の 通 学 時 間 ・自 分 の 家 の に お い
  • 26. 脳 が 変 化 に 敏 感 に で き て い る
  • 27. い ろ ん な も の が 複 合 的 に 影 響 し て く る 人 間 の 感 覚 は 絶 対 値 で な く相 対 値
  • 28. 時 間 と 差 分 の 設 計 に よって 情 報・体 験 の 強 弱 を 操 作 で き る ス ピ ー ド を コ ン セ プ ト に 置 く 故 に
  • 29. 時 間と変 化 の デ ザ イン 画 面 ”外”の デ ザ イン
  • 30. 体 験 に 優 先 度 を つ け る 為 時 間 を 項 目 で 区 切って 設 計
  • 31. 瞬 間 を 活 か す 為 に 全 体 を 構 成 し て い く 大 枠: 1 プレ イ の 時 間 間 隔: 画 面 遷 移 サ イク ル 瞬 間: ギャップ の 気 持 ち 良 さ
  • 32. 瞬 間: 変 化 の 気 持 ち 良 さ
  • 33. 一 番 遷 移 コ ン ト ラ スト が 強 く な る 触 っ た 瞬 間 。 P I V O T の 名 称 も こ こ か ら 。
  • 34. ・1 番 印 象 強 く 見 せ た 部 分 ・頻 繁 に 見 せ る た め 、強 い だ け で は だ め ・暖 色 と 無 彩 色 を 対 比 さ せ て 双 方 を 引 き 立 て る ・色 彩 に 加 え て 、音 楽 と エ フ ェ クト も 反 応 す る 設 計 ・フ ラ ット デ ザ イ ン で あ り な が ら ア ニ メ っ ぽ い 演 出 スピードとスロー の 切り替 わるコントラスト
  • 35. 間 隔: 画 面 遷 移 サ イク ル
  • 36. 反 射 の 度 に 変 化 す る 前 進 色 の 暖 色 と ス ロ ー モ ー シ ョ ン 時 の モ ノト ー ン の 対 比
  • 37. ス ロ ー モ ー シ ョ ン 切 り 替 え ス ロ ー 解 除 連 続 反 射 直 進 ・・・ 切り替えのためだけに周りを調 整する
  • 38. 大 枠: 1 プレ イ の 時 間
  • 39. 短 時 間 で 気 持 ち よ く 遊 べ る ゲ ー ム で あ る こ と 。 任 天 堂 の よ う な 反 復 し て く レ ベ ル デ ザ イ ン 。
  • 40. - 1 5 秒     チ ュ ー ト リ ア ル 並 み 1 5 - 4 5 秒     簡 単 な 方 向 転 換 4 5 - 1 2 0 秒    難 し め の 遊 び ( 狙 わ な い と 詰 ま る ) 1 2 0 秒        プ レ イ ヤ ー い じ め 2 分 で G A M E O V E R のレべ ルデザイン
  • 41. ス ロ ーで 集 中 狙 っ て 発 射 反 射・進 行 で 色 彩 変 化 ス ロ ーで 集 中 ・・・ ゲ ー ム 開 始
  • 42. 時 間と差 分 の 設 計 によって ゲーム の全体を通しての 情報・体験設計ができた
  • 43. ゲ ー ム 全 体 で 一 貫 で き れ ば 良 い U X が 提 供 で きる
  • 45. ま と め も し く は そ の 前 後 ペ ー ジ く ら い ま で 今 まで 自 分 が U I 設 計 するとき ペ ージ 単 体 に なりが ち だった
  • 46. ま と め た だ U X は 体 験 そ の も の な の で 1画 面 だ け で は 絶 対 完 結し な い
  • 47. ま と め 画 面 の 外 のことも 考 えら れ ると より良 い デ ザ イン で きるの で は!?
  • 48. 以 上 に なりま す 。 あ りが と うご ざ い まし た!