SlideShare a Scribd company logo
1 of 76
タイムラインには、コンテンツと投稿したユーザーのアイコンがセットに
なったカードのような UI が縦に並んでいます。そこにあるユーザーアイ
コンをタップすると、シュッとユーザーアイコンがアニメーションして、
拡大した状態でプロフィール画面が表示されます。
画面遷移 情報構成 見た目 アニメーション
なぜいま
Webサイトやアプリで必要なの?
マウス+キーボード コントローラー ジェスチャー+タッチ ジェスチャー+タッチ
一箇所固定
集中力は高め
ゆったり
リラックス
移動中
やや集中している程度
移動中
ゆったり
中解像度
大きい
近い
高解像度
大きい
遠い
高解像度
小さい
近い
高解像度
中くらい
近い
インプット
姿勢
ディスプレイ
パソコン テレビ スマホ タブレット
ハードウェア    OS・バージョン   利用するアプリ
利用頻度や場所   アクセスの仕方    経験・知識
誰もがマウスとキーボード使って操作をする
絵を見れば、だいたいその通りにレンダリングされる
誰もがだいたい同じスクリーンで観覧している
どのような操作ができるかも比較的予測がしやすい
ジェスチャーやタッチの感覚が異なる
アプリ、Web、OS、ハードウェア
レスポンシブWebデザインの知識差
見ただけで操作や動きの判断が難しい
レイアウト
タイポグラフィ
色
トーン&マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性
情報の優先度は
いかがでしょうか?
ちょっと
ロゴ小さくない?
レイアウト
タイポグラフィ
色
トーン&マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性
レイアウト
タイポグラフィ
色
トーン&マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性
ワイヤーフレーム
レイアウト
タイポグラフィ
色
トーン&マナー
情報の優先度 情報構造
操作性 感触
導線 一貫性
後戻りのリスク
一度に解決するのは困難
ワイヤーフレーム
情報設計・優先度
ムードボード
トーン&マナー
スタイルガイド
ビジュアルの一貫性
見た目だけでは判断できない
デザインの課題を分解する
後戻りのコストを減らす
見た目だけでは判断できない
デザインの課題を分解する
後戻りのコストを減らす
で、いつ作るんですか?
で、いつ作るんですか?必要であればいつでも作る
で、そんなに作る意味あるの?
で、そんなに作る意味あるの?作る目的を明確にする
探索 見た目
実装
探索
早期にフィードバックを得るため
アイデアの方向性を示す
ペーパープロトタイプ
テンプレート
見た目
具体的な使用感や見た目の検証
使用者との関わりを考える
スタイルガイド
画面遷移
モックアップ
アニメーション
実装
コスト・パフォーマンスの検証
完成品に近い使用感を再現
HTMLフレームワーク
CMS
ある画面遷移 フォーム要素
タイポグラフィ
ビジュアル言語
コンテンツパターン
作りすぎて消耗しそう
作りすぎて消耗しそう作るのに時間をかけない
作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ
作りすぎて消耗しそう作るのに時間をかけない早く作る手段を選ぶ
早く作れる方法 伝わりやすさ
アイデア共有?
リモートで共有?
作り込み 方向性を共有
・こんなに時間かけたのに
・だったら早く言ってよ
・自分が否定されたみたい
・ここに気付いていなかった
・やり直しがしやすい
・少しずつ進めて確かめよう
でも、⃝⃝では早く作れない
でも、⃝⃝では早く作れない作る道具は柔軟に変える
オールインワンのパーフェクトツールは存在しない
CSS/SVG
CSS/SVG
CSS/SVG Keynote
CSS/SVG Keynote Principle
CSS/SVG Keynote Principle
CSS/SVG Keynote Principle inVision
CSS/SVG Keynote Principle inVision
CSS/SVG Keynote Principle inVision After Effects
CSS/SVG Keynote Principle inVision After Effects
CSS/SVG Keynote Principle inVision After Effects
Webブラウザで検証 スピード・共有重視 実機でのテスト含 画面遷移 UI要素の動き
目的は何か? 誰と共有するか?
作る道具は柔軟に変える
作る目的を明確にする
作るのに時間をかけない
必要であればいつでも作る
デザインプロセスのオープン化
mail@yasuhisa.com
@yhassy

More Related Content

What's hot

ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
Takehisa Gokaichi
 
テックヒルズ
テックヒルズテックヒルズ
テックヒルズ
tomo tsubota
 
ゲームに学ぶUXデザイン
ゲームに学ぶUXデザインゲームに学ぶUXデザイン
ゲームに学ぶUXデザイン
Akihiro Moriyama
 

What's hot (19)

スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
 
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
 
"UI Patterns for Smartphone" HCD-Net SD #6
"UI Patterns for Smartphone" HCD-Net SD #6"UI Patterns for Smartphone" HCD-Net SD #6
"UI Patterns for Smartphone" HCD-Net SD #6
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
 
テックヒルズ
テックヒルズテックヒルズ
テックヒルズ
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
 
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
ゲームに学ぶUXデザイン
ゲームに学ぶUXデザインゲームに学ぶUXデザイン
ゲームに学ぶUXデザイン
 
Prott's design
Prott's designPrott's design
Prott's design
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンドネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒントWebデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
 
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
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」
 

More from Yasuhisa Hasegawa

More from Yasuhisa Hasegawa (20)

作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
 
SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作SVGをつかったプロトタイプ制作
SVGをつかったプロトタイプ制作
 
データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法データと上手に付き合ってデザインする方法
データと上手に付き合ってデザインする方法
 
再入門ペーパープロトタイピング
再入門ペーパープロトタイピング再入門ペーパープロトタイピング
再入門ペーパープロトタイピング
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
 
Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法Webのスーパーヒーローになる方法
Webのスーパーヒーローになる方法
 
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
 
デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ デザインから取り組むWebアクセシビリティ
デザインから取り組むWebアクセシビリティ
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
 
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
 
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来
 
ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術
 

あたかもプロのようにプロトタイプを活用する方法