Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kyuchaku hiruta

345 views

Published on

蛭田くん

Published in: Social Media
  • Be the first to comment

  • Be the first to like this

Kyuchaku hiruta

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

×