Suche senden
Hochladen
企画が考えるスマホUIデザイン
•
398 gefällt mir
•
325,282 views
Katsumi Mizushima
Folgen
Unterhaltung & Humor
Melden
Teilen
Melden
Teilen
1 von 89
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
MMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザイン
Katsumi Mizushima
ゲームデザインを改善/批評するための時間構造モデル「ワンダールクス」
ゲームデザインを改善/批評するための時間構造モデル「ワンダールクス」
Sho Iwamoto
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
Katsutoshi Makino
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめ
Sugimoto Chizuru
MMOGで考えるゲームデザイン
MMOGで考えるゲームデザイン
Katsumi Mizushima
ゲーム企画書の書き方? ~大久保磨編~ ver.1.4.0
ゲーム企画書の書き方? ~大久保磨編~ ver.1.4.0
Osamu Ohkubo
ゲームの仕様書を書こう1 仕様書作成の分業とリストの作成
ゲームの仕様書を書こう1 仕様書作成の分業とリストの作成
Sugimoto Chizuru
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
Osamu Ohkubo
Empfohlen
MMORPGで考えるレベルデザイン
MMORPGで考えるレベルデザイン
Katsumi Mizushima
ゲームデザインを改善/批評するための時間構造モデル「ワンダールクス」
ゲームデザインを改善/批評するための時間構造モデル「ワンダールクス」
Sho Iwamoto
プログラマが欲しい仕様書とは
プログラマが欲しい仕様書とは
Katsutoshi Makino
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめ
Sugimoto Chizuru
MMOGで考えるゲームデザイン
MMOGで考えるゲームデザイン
Katsumi Mizushima
ゲーム企画書の書き方? ~大久保磨編~ ver.1.4.0
ゲーム企画書の書き方? ~大久保磨編~ ver.1.4.0
Osamu Ohkubo
ゲームの仕様書を書こう1 仕様書作成の分業とリストの作成
ゲームの仕様書を書こう1 仕様書作成の分業とリストの作成
Sugimoto Chizuru
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
ゲーム仕様書の書き方 ~大久保磨編~ ver.1.2.0
Osamu Ohkubo
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
小林 信行
ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventur...
ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventur...
小林 信行
ゲームをおもしろくする技術 「ゲームとお笑い」
ゲームをおもしろくする技術 「ゲームとお笑い」
Kouji Ohno
ゲームの仕様書を書こう3 仕様書に記載するデータと画面
ゲームの仕様書を書こう3 仕様書に記載するデータと画面
Sugimoto Chizuru
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話
Unity Technologies Japan K.K.
ゲーム技術の研究所 テーマ「Narrative(ナラティブ)」
ゲーム技術の研究所 テーマ「Narrative(ナラティブ)」
Kouji Ohno
【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン レベルデザインについて
【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン レベルデザインについて
Unity Technologies Japan K.K.
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
historia_Inc
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
Sugimoto Chizuru
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
Kouji Ohno
仕様書作成のポイント_180814
仕様書作成のポイント_180814
Sugimoto Chizuru
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
Haruki Yano
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
Tetsuya Kimura
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
小林 信行
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIと2D/3Dと私 ~2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話~
UIと2D/3Dと私 ~2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話~
masayahamazaki
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
UIデザインの基本
UIデザインの基本
Roy Kim
Weitere ähnliche Inhalte
Was ist angesagt?
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
小林 信行
ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventur...
ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventur...
小林 信行
ゲームをおもしろくする技術 「ゲームとお笑い」
ゲームをおもしろくする技術 「ゲームとお笑い」
Kouji Ohno
ゲームの仕様書を書こう3 仕様書に記載するデータと画面
ゲームの仕様書を書こう3 仕様書に記載するデータと画面
Sugimoto Chizuru
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話
Unity Technologies Japan K.K.
ゲーム技術の研究所 テーマ「Narrative(ナラティブ)」
ゲーム技術の研究所 テーマ「Narrative(ナラティブ)」
Kouji Ohno
【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン レベルデザインについて
【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン レベルデザインについて
Unity Technologies Japan K.K.
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
historia_Inc
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
Sugimoto Chizuru
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
Kouji Ohno
仕様書作成のポイント_180814
仕様書作成のポイント_180814
Sugimoto Chizuru
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
Haruki Yano
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
Tetsuya Kimura
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
小林 信行
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIと2D/3Dと私 ~2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話~
UIと2D/3Dと私 ~2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話~
masayahamazaki
Was ist angesagt?
(20)
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームデザイナーのためのキャラクター表現&コンセプトメイキング:抜粋版
ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventur...
ゲームシナリオ構成論 The Method for the game sinario writings for multi-ending adventur...
ゲームをおもしろくする技術 「ゲームとお笑い」
ゲームをおもしろくする技術 「ゲームとお笑い」
ゲームの仕様書を書こう3 仕様書に記載するデータと画面
ゲームの仕様書を書こう3 仕様書に記載するデータと画面
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
Unityアニメーションシステムの 今と未来の話
Unityアニメーションシステムの 今と未来の話
ゲーム技術の研究所 テーマ「Narrative(ナラティブ)」
ゲーム技術の研究所 テーマ「Narrative(ナラティブ)」
【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン レベルデザインについて
【Unite Tokyo 2018 Training Day】ProBuilderで学ぶレベルデザイン レベルデザインについて
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲーム開発を乗りこなせ! ヒストリア流ゲーム開発マネジメント手法
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
ゲームの仕様書を書こう4 仕様書作成で楽をするconfluenceの活用
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
CEDEC2016 「コントラスト」で考えるゲームデザイン・レベルデザイン
仕様書作成のポイント_180814
仕様書作成のポイント_180814
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
モバイルアプリにおけるアーティストフレンドリーな水面表現戦略
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
Unity道場11 Shader Forge 101 ~ShaderForgeをつかって学ぶシェーダー入門~ 基本操作とよく使われるノード編
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UIと2D/3Dと私 ~2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話~
UIと2D/3Dと私 ~2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話~
Andere mochten auch
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
UIデザインの基本
UIデザインの基本
Roy Kim
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
スマホゲームのUI仕様書
スマホゲームのUI仕様書
Katsumi Mizushima
UXとブランド
UXとブランド
Takehisa Gokaichi
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
Makoto Shimizu
Andere mochten auch
(20)
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
UIデザインの基本
UIデザインの基本
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
確実に良くするUI/UX設計
確実に良くするUI/UX設計
UX / UIデザインって何?
UX / UIデザインって何?
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
UXのためのUIデザイン
UXのためのUIデザイン
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
スマホゲームのUI仕様書
スマホゲームのUI仕様書
UXとブランド
UXとブランド
UIの話は会議室でするな
UIの話は会議室でするな
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
企画が考えるスマホUIデザイン
1.
企画が考える スマホUIのデザイン 水島
克 2012.2.28 Aiming Inc.
2.
昨今のゲームUIの傾向 AAAタイトルのUIの2つの方向性 1 ほとんど見えないほどシンプル化
2 完全に3D空間にUIを埋め込んでしまう 世界観にUIを溶け込ませる工夫
3.
“Dead Space” キャラの背中にライフゲージを
埋め込むびっくりアイデア ほとんどのUIを3D空間の中に構築 “Fall Out 3” プレイヤーキャラの腕についた デバイス(Pip-Boy)をそのままUI化 それ以外のUIは極力シンプルにまとめる
4.
スマートフォンUIの傾向 初期はPCやコンソールゲームのUIを 移し替えたUIがほとんどで使いにくい 最近はスマートフォンに最適化されてきた 使いやすさを優先してiOSの標準UIを 模したものが増加
5.
“Order&Chaos” “WoW”を模したUIで、マップや キャラの顔絵など、てんこ盛り
PCゲームの要素を無理に詰め込んでいて使いにくい “Infinity Blade Cross” メニューバーなどのレイアウトは iOS標準UIを模している システマティックなUIと ゲームの世界観を混ぜたスタイル
6.
ゲームUIは、スムーズなプレイと ゲームの世界観を成立させるための要素 一貫したゲーム体験を
提供する媒介
7.
本日のおはなし 一貫したユーザー体験を生み出すための デザイン上の手法について話します スマートフォンのUIをデザインする上で 考えておきたいことがらについて話します
8.
本日のメニュー Chapter 1
ゲームへの理解を深める Chapter 2 デザインのルールを決める Chapter 3 スマホの特徴を考える
9.
Chapter 1 ゲームへの 理解を深める
10.
一貫性の無いUIの原因 ワークフローの問題 企画者は機能だけを考えて仕様書を書く しかも各企画者が独自のルールで書く
UIデザイナは仕様書のレイアウトが正しい ものとしてデザインを進める
11.
企画者
UIデザイナ プログラマ 仕様書 デザイン 実装
12.
企画者
UIデザイナ プログラマ 仕様書 デザイン 実装 ここに「実装時のイメージ」を 精査するプロセスが欠落
13.
企画者とUIデザイナー間 の議論/検討が必ず必要
14.
1.1 ゲームの構成を
把握しよう
15.
複雑なスマートフォン専用ゲームのUI要素例
ショップ アイテム強化 パラメータ スキル管理 チャット ガチャ スキルツリー アイテム合成 オプション アイテム詳細 ギルド パーティー 掲示板 メール PvP戦歴 クエスト詳細 スキル詳細 フレンドリスト レイド オークション ステータスゲージ クエスト インベントリ 戦闘コマンド クエストボード キャラ管理 エリア詳細 ミニマップ ワールドマップ
16.
UIを破綻させないために UIを端から作り込むと、必ずどこかに 大きな矛盾や破綻が生じる 要素を分類し、構造的に組み立てる必要性 まず最も重要/複雑な部分を作ってから、 その他の要素をそこにあわせるアプローチ
17.
カテゴリを整理して重要/複雑な項目を定める ショップ
アイテム強化 パラメータ パーティー クエストボード インベントリ スキル管理 メール アイテム合成 スキルツリー フレンドリスト オークション アイテム詳細 スキル詳細 チャット クエスト 掲示板 クエスト詳細 レイド キャラ管理 ステータスゲージ PvP戦歴 ギルド オプション 戦闘コマンド ガチャ ミニマップ ワールドマップ エリア詳細
18.
カテゴリを整理して重要/複雑な項目を定める NPC UI
Item Character Community ショップ アイテム強化 パラメータ パーティー クエストボード インベントリ スキル管理 メール アイテム合成 スキルツリー フレンドリスト オークション アイテム詳細 スキル詳細 チャット クエスト 掲示板 System Basic UI クエスト詳細 レイド キャラ管理 ステータスゲージ PvP戦歴 ギルド オプション 戦闘コマンド Map ガチャ ミニマップ ワールドマップ エリア詳細
19.
カテゴリを整理して重要/複雑な項目を定める
NPC UI Item Character Community * ショップ アイテム強化 * パラメータ パーティー クエストボード * インベントリ スキル管理 メール オークション アイテム合成 スキルツリー * フレンドリスト アイテム詳細 スキル詳細 チャット クエスト 掲示板 System Basic UI * * クエスト詳細 レイド キャラ管理 ステータスゲージ PvP戦歴 ギルド オプション 戦闘コマンド Map ガチャ ミニマップ * ワールドマップ エリア詳細
20.
まだ企画書が十分でない場合 企画者と議論しながら固める 企画書に不足があれば作成を求める
21.
1.2 要素の重要度を
決めよう
22.
あるソーシャルゲームのUI仕様書
ホーム画面仕様 ■パラメータ類 Lv99 経験値 999 体力99/99 攻撃99/99 防御99/99 ■ボタン類 ショップ 戦歴 課金ガチャ クエスト 無料ガチャ ヘルプ 進化合成 仲間 パワーアップ合成 欲しいもの 練習対戦 メダル屋 本気対戦 アバターのイラスト お宝 モンスター ■その他 カード図鑑 ※リーダーカードのイラスト アイテム図鑑 1点入ります
23.
そのままレイアウトしてみる
ホーム画面仕様 Lv99 経験値 999 ■パラメータ類 体力99/99 攻撃99/99 Lv99 経験値 999 体力99/99 攻撃99/99 防御99/99 ショップ 防御99/99 課金ガチャ 戦歴 ■ボタン類 無料ガチャ クエスト ショップ 戦歴 進化合成 課金ガチャ クエスト ヘルプ パワーアップ合成 無料ガチャ ヘルプ 仲間 練習対戦 進化合成 仲間 欲しいもの パワーアップ合成 欲しいもの 本気対戦 練習対戦 メダル屋 お宝 メダル屋 本気対戦 アバターのイラスト モンスター お宝 カード図鑑 モンスター ■その他 アイテム図鑑 カード図鑑 ※リーダーカードのイラスト アイテム図鑑 1点入ります
24.
仕様書どおりだし これでバッチリ!
25.
仕様書どおりだし これでバッチリ! …じゃない! 仕様書どおりが正しいわけではない プレイヤーが使いやすいUIが正しい
26.
冷静に振り返ってみる 全てのボタンが同じ大きさで
Lv99 経験値 999 体力99/99 攻撃99/99 どれが重要か分からない ショップ 防御99/99 課金ガチャ 戦歴 無料ガチャ クエスト 進化合成 ヘルプ カードのイラストが小さくて パワーアップ合成 仲間 練習対戦 欲しいもの 本気対戦 見た目が寂しい お宝 メダル屋 モンスター カード図鑑 パラメータこの大きさ必要? アイテム図鑑 今、何の画面か分からない
27.
要素の重要度を把握する 要素の取捨選択をするためには、 ゲームの企画内容を知る必要がある 基本的に何をするゲームなのか? プレイヤーは何に価値を置くのか?
どういう情報が最も重要なのか?
28.
Lv99 経験値 999 体力99/99
攻撃99/99 ショップ 防御99/99 課金ガチャ 戦歴 無料ガチャ クエスト 進化合成 ヘルプ パワーアップ合成 仲間 練習対戦 欲しいもの 本気対戦 お宝 メダル屋 モンスター カード図鑑 アイテム図鑑 仕様書どおり
29.
ホーム
Lv99 経験値 999 自分 仲間 コレクション 体力99/99 攻撃99/99 [!]ホーム画面ではあなたについての情報を 管理することができます。 ショップ 防御99/99 課金ガチャ 戦歴 無料ガチャ クエスト 進化合成 ヘルプ パワーアップ合成 仲間 練習対戦 欲しいもの 本気対戦 お宝 メダル屋 Lv 99 経験値 999 モンスター 体力 99/99 攻撃 99/99 防御 99/99 カード図鑑 アイテム図鑑 ホーム クエスト 対戦 カード ガチャ 仕様書どおり 考えてみた
30.
考えてレイアウトしてみる
ホーム 自分 仲間 コレクション 合成して強いカードを [!]ホーム画面ではあなたについての情報を 管理することができます。 育てるゲーム 日々のクエストでカード入手 Lv 99 経験値 999 体力 99/99 攻撃 99/99 防御 99/99 対戦では合成費用を稼ぐ ホーム クエスト 対戦 カード ガチャ ガチャで課金している
31.
考えてレイアウトしてみる 選択中のカテゴリの見出し
ホーム 自分 仲間 コレクション [!]ホーム画面ではあなたについての情報を 重要度が高い順にタブを並べる 管理することができます。 ヘルプ代わりの説明文 リーダーカードは大きく見やすく! Lv 99 経験値 999 パラメータはスッキリまとめる 体力 99/99 攻撃 99/99 防御 99/99 よく使う項目をメインメニューへ ホーム クエスト 対戦 カード ガチャ ガチャだけは別の文字色で目立たせる
32.
重要度の把握ができれば レイアウトに優先度のメリハリが付けられる よく使う機能は使いやすい場所に配置できる 使いやすいデザインのために
UIデザイナーと企画者が議論し、 ゲームへの理解を深めることが必須
33.
Chapter 2 デザインの ルールを決める
34.
35.
楽天市場で見るデザイン 楽天のサイトは現代版スーパーのチラシ 消費者の目に飛び込ませるためのデザイン
色使いを派手に フォントを多様に とにかくデカく
36.
楽天とブランドの比較 クリスタルガイザーを扱う楽天の小売りと 輸入元の大塚食品のサイトのイメージの比較
37.
強烈に目立たせて商品の印象を焼き付ける →スーパーのチラシのデザイン その商品にまつわる世界観を消費者に提示 →ブランディングのデザイン
38.
強烈に目立たせて商品の印象を焼き付ける →スーパーのチラシのデザイン その商品にまつわる世界観を消費者に提示 →ブランディングのデザイン ゲームUIは後者に近い 世界観を表現するにはルールが必要
39.
2.1 フォント選びを
慎重に
40.
デザインの統一性の問題 スーパーのチラシを作っているわけではない ゲーム内のあらゆるフォントを 意図をもって配置する フォントのルールが必要 フォント選びも世界観作り
41.
フォントの種類 セリフ体とサンセリフ体 /
明朝体とゴシック体 ウロコ セリフ
42.
見出し用と本文用 大きく使う「見出し用」と、その他の場面で 小さく使う「本文用」と考えると分かりやすい セリフ体+サンセリフ体のように 違いが大きいフォントを組み合わせると効果的
43.
“Zen Bound 2”
“木細工を縛っていく”変態っぽい コンセプトの美しいゲーム 前作と同じフォントの使用ルールを維持 見出し=セリフ、その他=サンセリフ というルールでゲーム全篇を統一 ルールはゲーム中の表示系でも同じ
44.
“Puzzle & Dragon”
パズルをすることでモンスターを操り ダンジョンを攻略するパズルRPG 見出し=ポップな文字(くろかね) その他=普通のゴシック(ヒラギノ) というルールでゲーム全篇を統一 見出し文字が読みづらいところも
45.
“Magic & Monster”
モンスターを育ててバトルさせる、 スマホ用ソーシャルRPGゲーム ポップでノリの良いUIデザインは うまく世界観を表現 丸ゴシックをメインで使ってはいるが フォントの使用方法が気まぐれ
46.
ファミリーを知る 特に欧文書体では、ファミリーがあるものは うまく活用することで統一感が出せる 文字を加工で太らせるより ウェイトが太いフォントのほうがキレイ 同じメーカーの明朝とゴシックは プロポーションが近くなじみ易いことが多い
47.
48.
1ゲーム内で使う書体は 3種類でじゅうぶん
49.
2.2 フォント使いを
慎重に
50.
読みやすく組む フォントの装飾が多すぎることで、 ゲーム体験が阻害される場合がある ドロップシャドウ/袋文字/グラデーション
などの装飾は最小限にとどめる 3行以上の長文には装飾しない
51.
用途によって統一する 同じ用途の文字は、同一のフォント、同じ色、 同じ大きさ、同じ装飾、同じ寄せに統一する 同階層のメニュー名の統一
UI名の見出しの統一 ダメージ値などの数値表示の統一
52.
長体/平体は一貫させる 場面によって長体/平体が入り交じらないように コンデンス体、エクステンド体を使うのも良い 和文を長体/平体にするときは 倍率を統一させる スペースに合わせて長体を
X かけるとチープに見える O
53.
字間/行間を調整する 字間や行間の調整にこだわってみる 字間をあける
ゆったりとエレガントなイメージ 字間を詰める フォーマルで実務的なイメージ 微調整でフォントの表情が変わる
54.
同じ書体でも使い方で全然違ってくる
THE NORTH BMW FENDI FACE 貫禄の重み スラリと優雅に ニュートラルな定番感 Microsoft シャープに力強く evian Lufthansa 細身でナチュラル どっしり安心感
55.
2.3 機能から考える
色づかい
56.
色にルールを与える 配色は内容を識別させるための重要な手段 システム的に意味のある要素に色を使う DELETEは赤/CANCELは黒などの用法
属性/レアリティ/敵味方の区分など ボタン階層:メイン/サブカテゴリなど
57.
ゲーム世界は色にあふれている 属性例:火 /
風 / 木 / 水 / 雷 / 土 レアリティ例:N / R / SR / UR / L ゲージ例:HP / MP / EXP 数値系例:回復値 / ダメージ値 スキル系:近物 / 遠物 / 近魔 / 遠魔 クラス系:ヒール / タンク / アタック
58.
無計画にフレームやボタンに色を使うと プレイヤーが混乱する 押せない場所や装飾に強い色を使わない 基本的には彩度の低い色を色数少なく使う
ゲームプレイに本当に必要な 色だけを目立たせる
59.
Chapter 3 スマホの 特徴を考える
60.
スマホのUIの特徴 画面が小さいが解像度が高い フリーフォームなタッチデバイスである スクリーンのデザイン=デバイス
61.
+
= ?
62.
不満は全部UIのせい? テストプレイで多くの不満がUIに集中! (実はゲーム自体が問題の場合も多い) 上手くいっているUIは話題にも上らない (人間ってテキトーなものですよね…)
63.
なぜならスマートフォンのUIは プレイヤーと物理的に直接つながる 重要な要素
ゲーム体験全体を支配するパート
64.
3.1 UIをフローで
考える
65.
マージンとフレーム設計 個別のデザインはよくても、流れで見ると 統一感に欠ける場合が多い マージンやフレームが統一されているだけで ある程度の統一性が担保される
フレームのフォーマットを崩さない
66.
ホーム
ホーム 自分 仲間 コレクション --- --- --- [!]ホーム画面ではあなたについての情報を 管理することができます。 Lv 99 経験値 999 体力 99/99 攻撃 99/99 防御 99/99 ホーム クエスト 対戦 カード ガチャ ホーム クエスト 対戦 カード ガチャ ベースデザイン フレームは維持
67.
ボタン配置のルール 遷移に関するボタンは最大限、共通化する 戻るボタンは必ず同じ位置に
閉じる/戻るボタンは1画面に1個だけ 同様の機能のボタンは同じ位置に
68.
“Angry Birds”
世界的なヒット作もUI遷移的には問題が… 戻る/閉じるボタンが3種類ある上、 それぞれ位置が異なり、プレイヤーを混乱させる 全然違う位置に 左端に戻るボタン 若干右にズレた閉じるボタン ゲームに戻るボタン
69.
“Cut the Rope”
“Angry Birds”と同じく物理演算パズルゲーム 「戻る」の位置が常に同じで迷いにくい ステージセレクト コレクション オプションまでボタンが統一
70.
アニメーションを考える UIのアニメーションで構造を暗示する 画面が左にスクロールして次の画面が登場
階層化していることを示す 小さいウィンドウが出て画面の半分を覆う 一時的なウィンドウであることを示す
71.
3.2 サイズは等倍で
考えよう
72.
解像度の割に小さい! 触るボタンを大きく、見るだけの情報は小さく ボタンは想像以上に大きくないと押せない
見るだけの情報は意外に小さくても読める PCの画面とはかなりのギャップがある
73.
指の可動範囲を考慮する 親指が届きやすいところにUIを配置 両手持ち前提でも片側に操作を集中させる工夫を 片手で タテ持ちの 可動範囲
両手でヨコ持ちの稼働範囲
74.
スマホに転送して確認 大きい画面でデザインするのと、 小さい実機でみるのと、かなりイメージが違う 実際の体験に近いイメージが得られる
画面遷移のイメージをつかみやすい 素材を実装する前に確認する習慣づけを
75.
手書きでレイアウト レイアウトは等倍手描きで考えるのがオススメ ツールでいじってると時間ばかりかかる
速く描けばチーム内でたくさん議論できる 等倍で描くと、画面上のサイズと実際の サイズのギャップが脳内補完できる
76.
手書きのレイアウトの例 ラフでも素早く共有するのが大事
77.
3.3 操作をなるべく
シンプルに
78.
操作はワンタップが基本 視覚的に分かりやすくタップだけで操作可能に スワイプ/ピンチイン/ドラッグなどの
スマートフォン的操作はまだ直感的でない 一度操作を忘れると袋小路に 現時点ではスマートフォン的な操作は 補助的な機能という位置づけ
79.
一覧化 vs 階層化 各要素が1ページで一覧できるのが理想
1ページに収まらない場合に、 スクロール機能、階層化などを検討する 階層化は操作が増えるが、「戻る」などの ページ遷移が明確な場合は分かりやすい 操作の手間より「分かりやすさ」を重視
80.
対話型のUI ページ上のボタンが8個を越えるあたりで 対話型のUIを検討する 選択した対象に対し
実行可能な操作を提示する (iOSで言うAction Sheet) タップ数が増えるので連続する操作には不向き
81.
3.4 アスペクト比を
考慮する
82.
複数のアスペクト比 ポピュラーな端末のアスペクト比を考慮する iPhone4/4S&iPod Touch(第4世代):960 x
640 pixel(3:2) Xperia arc SO-01C:854 × 480 pixel(16:9) iPad&iPad2:1024 × 768 pixel(4:3) GALAXY Tab SC-01C:1024 x 600 pixel(約16:10) メインとなる端末を選定する 単体の普及率で考えるとiPhone
83.
画面の一部を覆うUI ゲージ類やボタン類など
9個のアンカーポイントからの オフセット指定をしておく 左上のアンカー 比が変わっても左上を維持
84.
画面の全体を覆うUI フレームやメニューバーなど端まで覆うもの 縦か横の短いほうに合わせて全体を拡縮
左右が余っても違和感の少ないデザイン 全画面のUI 余り 余り
85.
まとめ
86.
1
ゲームへの理解を深める ゲームの構成を把握する 要素の重要度を決める 2 デザインのルールを決める フォント選びを慎重に フォントは用途別に統一 見出し+本文の組み合わせ 色にルールを与える 1ゲームに3書体で十分 必要な色だけ目立たせる 装飾は最小限に
87.
3
スマホの特徴を考える UIをフローで考える スマホに転送して確認する フォーマットを崩さない 手書きでレイアウトする 遷移ボタンは同じ位置に ワンタップ操作が基本 サイズは等倍で考える 操作の手間より分かりやすさ 指の可動範囲を考慮する アスペクト比を考慮する
88.
ゲームUIは、スムーズなプレイと ゲームの世界観を成立させるための要素 一貫したゲーム体験を
提供する媒介
Jetzt herunterladen