SlideShare a Scribd company logo
1 of 16
WebにおけるUI設計
前提編
制作チームの主な成果物と役割
と
制作チームにおけるUIの代表的な立ち位置
制作チームの主な成果物や役割
企画
機能ツリー
遷移図
ワイヤーフレーム
アセット
モック
コーデッドプロトタイプ
実機確認
リリース
ロジック
DB設計
フロントエンドバックエンド
制作チームの主な成果物や役割
企画
機能ツリー
遷移図
ワイヤーフレーム
フロントエンド
アセット
モック
コーデッドプロトタイプ
実機確認
リリース
バックエンド
ロジック
DB設計
ユーザニーズ、ゲームの目的、コンテンツ要求
機能要求
インフォメーション・アーキテクチャ、ナビゲーション・デザイン
インフォメーション・デザイン、インタフェース・デザイン
視覚的デザイン、インタラクション・デザイン
制作チームにおけるUIの代表的な立ち位置
企画
機能ツリー
遷移図
ワイヤーフレーム
モック
実機確認
リリース
アセット
コーデッドプロトタイプ
ロジック
DB設計
フロントエンドバックエンド
ユーザニーズ、ゲームの目的、コンテンツ要求
機能要求
インフォメーション・アーキテクチャ、ナビゲーション・デザイン
インフォメーション・デザイン、インタフェース・デザイン
視覚的デザイン、インタラクション・デザイン
制作チームの成果物や役割の説明
制作チームの主な成果物や役割
企画
機能ツリー
遷移図
ワイヤーフレーム
アセット
モック
コーデッドプロトタイプ
実機確認
リリース
ロジック
DB設計
フロントエンドバックエンド
ゲームモデル
要件定義
世界観
予算
企画
機能ツリー
遷移図
ワイヤーフレーム
実機確認
リリース
コーデッドプロトタイプ
ロジック
DB設計 アセット
モック
制作チームの主な成果物や役割
フロントエンドバックエンド
ゲームやツールに必要な機能を洗い出し、整理し
、体系化されたリスト
企画
機能ツリー
遷移図
ワイヤーフレーム
実機確認
リリース
コーデッドプロトタイプ
ロジック
DB設計 アセット
モック
制作チームの主な成果物や役割
フロントエンドバックエンド
作成された機能ツリーに基づき、実際に用意され
る画面(エラー画面を含む)を整理して、要件定
義に含まれる想定するコンテキストにそって作成
された遷移図
企画
機能ツリー
遷移図
ワイヤーフレーム
実機確認
リリース
コーデッドプロトタイプ
ロジック
DB設計 アセット
モック
制作チームの主な成果物や役割
フロントエンドバックエンド
遷移図を構成する各画面において、必要となる情
報あるいは機能を整理して、どのように配置する
かを検討したうえで作成されたワイヤーフレーム
企画
機能ツリー
遷移図
ワイヤーフレーム
実機確認
リリース
コーデッドプロトタイプ
ロジック
DB設計 アセット
モック
制作チームの主な成果物や役割
フロントエンドバックエンド
作成されたワイヤーフレームを、企画段階で定義
された世界観を載せて作成されたグラフィック
企画
機能ツリー
遷移図
ワイヤーフレーム
モック
実機確認
リリース
DB設計
ロジック
アセット
コーデッドプロトタイプ
制作チームの主な成果物や役割
フロントエンドバックエンド
作成されたグラフィックを実際の画面で描画され
るよう実装しつつ、ユーザーが気持よく利用でき
るパフォーマンスを担保した実装画面(UI)
企画
機能ツリー
遷移図
ワイヤーフレーム
モック
実機確認
リリース
DB設計
ロジック
アセット
コーデッドプロトタイプ
制作チームの主な成果物や役割
フロントエンドバックエンド
ゲームで必要となる情報を整理し、新規に作成あ
るいは更新できる状態になったmodel
企画
機能ツリー
遷移図
ワイヤーフレーム
モック
実機確認
リリース
DB設計
ロジック
アセット
コーデッドプロトタイプ
制作チームの主な成果物や役割
フロントエンドバックエンド
ユーザーの状態に応じて画面の出し分けやデータ
の取捨選択を行うcontroller
企画
機能ツリー
遷移図
ワイヤーフレーム
実機確認
リリース
DB設計
ロジック
コーデッドプロトタイプ
アセット
モック
制作チームの主な成果物や役割
フロントエンドバックエンド
インプリメンテーション
実際に動作するプロダクト
企画
機能ツリー
遷移図
ワイヤーフレーム
実機確認
リリース
DB設計
ロジック
コーデッドプロトタイプ
アセット
モック
制作チームの主な成果物や役割
フロントエンドバックエンド

More Related Content

What's hot

UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」Kazuki Yamashita
 
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4Yu Morita
 
IoTとUXデザイン
IoTとUXデザインIoTとUXデザイン
IoTとUXデザインHiroki Hosaka
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?Masaya Ando
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Roy Kim
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ力也 伊原
 
UXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUpUXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUpKazuki Yamashita
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方Satoru MURAKOSHI
 
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Chihiro Tomita
 
なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)Naoki Hashimoto
 
年末調整の情報設計
年末調整の情報設計年末調整の情報設計
年末調整の情報設計力也 伊原
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意Yasuhisa Hasegawa
 
フォトグラファーのためのUXデザイン
フォトグラファーのためのUXデザインフォトグラファーのためのUXデザイン
フォトグラファーのためのUXデザインYoichi Shirasawa
 
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態力也 伊原
 
働き方のプロトタイピング
働き方のプロトタイピング働き方のプロトタイピング
働き方のプロトタイピング力也 伊原
 
Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...
Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...
Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...Yoshiki Hayama
 

What's hot (18)

Bridge UXからUIへ
Bridge UXからUIへBridge UXからUIへ
Bridge UXからUIへ
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
 
おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4おかんでもわかるUXデザイン Ver.0.4
おかんでもわかるUXデザイン Ver.0.4
 
IoTとUXデザイン
IoTとUXデザインIoTとUXデザイン
IoTとUXデザイン
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
 
プロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディプロトタイピングツール投入のケーススタディ
プロトタイピングツール投入のケーススタディ
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
UXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUpUXデザインの前にすること - UX CatchUp
UXデザインの前にすること - UX CatchUp
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
 
なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)なぜなに?ユーザエクスペリエンスマップ(概要編)
なぜなに?ユーザエクスペリエンスマップ(概要編)
 
年末調整の情報設計
年末調整の情報設計年末調整の情報設計
年末調整の情報設計
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
フォトグラファーのためのUXデザイン
フォトグラファーのためのUXデザインフォトグラファーのためのUXデザイン
フォトグラファーのためのUXデザイン
 
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
 
働き方のプロトタイピング
働き方のプロトタイピング働き方のプロトタイピング
働き方のプロトタイピング
 
Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...
Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...
Waston が拓く UX の新しい地平 〜 UX デザイナーが IBM Waston を使ってみた 〜:2017年4月22日 AI eats UX me...
 

Similar to WebにおけるUI設計 前提編

WebにおけるUI設計 実践編
WebにおけるUI設計 実践編WebにおけるUI設計 実践編
WebにおけるUI設計 実践編shinya tayama
 
Lead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX DesignLead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX DesignTakashi Sakamoto
 
Find Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorFind Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorNobuya Sato
 
Uiセミナー2014 07-01
Uiセミナー2014 07-01Uiセミナー2014 07-01
Uiセミナー2014 07-01Yusuke Kuroda
 
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXWEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXHiromitsu Miyanishi
 
実演・開発の進め方
実演・開発の進め方実演・開発の進め方
実演・開発の進め方TechGardenSchool
 
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、  アジャイル開発に  挑みたい!(希望)【DevLOVE甲子園2014】デザイナーも、  アジャイル開発に  挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)Chihiro Tomita
 
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"Takashi Sakamoto
 
IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)Nobuya Sato
 
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザインUX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザインTakashi Sakamoto
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-Mizushima Kazuhiro
 
20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術康平 秋山
 
中・大規模サイト作成業務フロー
中・大規模サイト作成業務フロー中・大規模サイト作成業務フロー
中・大規模サイト作成業務フローsenakamura
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道Hideki Akiba
 
Sinap Talk Project Design "IA" 20080902
Sinap Talk Project Design "IA" 20080902Sinap Talk Project Design "IA" 20080902
Sinap Talk Project Design "IA" 20080902Takashi Sakamoto
 
RDRA DDD Agile
RDRA DDD AgileRDRA DDD Agile
RDRA DDD Agile増田 亨
 
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLTUXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLTKeisuke Miyajima
 
LightSwitchからUXを見てみる
LightSwitchからUXを見てみるLightSwitchからUXを見てみる
LightSwitchからUXを見てみるYoshitaka Seo
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてlychee .
 

Similar to WebにおけるUI設計 前提編 (20)

WebにおけるUI設計 実践編
WebにおけるUI設計 実践編WebにおけるUI設計 実践編
WebにおけるUI設計 実践編
 
Lead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX DesignLead the webmasters to future with "IA Thinking" for UX Design
Lead the webmasters to future with "IA Thinking" for UX Design
 
Find Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorFind Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web Creator
 
Web
WebWeb
Web
 
Uiセミナー2014 07-01
Uiセミナー2014 07-01Uiセミナー2014 07-01
Uiセミナー2014 07-01
 
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXWEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUX
 
実演・開発の進め方
実演・開発の進め方実演・開発の進め方
実演・開発の進め方
 
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、  アジャイル開発に  挑みたい!(希望)【DevLOVE甲子園2014】デザイナーも、  アジャイル開発に  挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
 
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
 
IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)
 
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザインUX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
 
20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術
 
中・大規模サイト作成業務フロー
中・大規模サイト作成業務フロー中・大規模サイト作成業務フロー
中・大規模サイト作成業務フロー
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 
Sinap Talk Project Design "IA" 20080902
Sinap Talk Project Design "IA" 20080902Sinap Talk Project Design "IA" 20080902
Sinap Talk Project Design "IA" 20080902
 
RDRA DDD Agile
RDRA DDD AgileRDRA DDD Agile
RDRA DDD Agile
 
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLTUXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
UXを視野に入れたUIリニューアルのプロセス_ペーパープロトタイピングについてのLT
 
LightSwitchからUXを見てみる
LightSwitchからUXを見てみるLightSwitchからUXを見てみる
LightSwitchからUXを見てみる
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
 

WebにおけるUI設計 前提編

Editor's Notes

  1. https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89 フロントエンド(英: front-end)とバックエンド(英: back-end)は、プロセスの最初と最後の工程を指す一般的用語である。 フロントエンドは各種入力をユーザーから収集し、バックエンドが使える仕様に合うようにそれを加工する。 フロントエンドとバックエンドの結合部はインタフェースと呼ばれる。
  2. 参考:http://www.idia.jp/report/5s-for-user-experience/
  3. 参考:http://www.idia.jp/report/5s-for-user-experience/