Suche senden
Hochladen
Prottとsketchとzeplinのススメ
•
158 gefällt mir
•
36,259 views
Asami Yamamoto
Folgen
ABC2016Springでの講演資料
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 85
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
伝わるスライドデザイン術
伝わるスライドデザイン術
Concent, Inc.
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
「視線」を科学する。 Media pipeを用いた視線計測の手法について-
「視線」を科学する。 Media pipeを用いた視線計測の手法について-
ssuser357a3e1
Empfohlen
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
伝わるスライドデザイン術
伝わるスライドデザイン術
Concent, Inc.
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
「視線」を科学する。 Media pipeを用いた視線計測の手法について-
「視線」を科学する。 Media pipeを用いた視線計測の手法について-
ssuser357a3e1
実務視点のデザイン経営
実務視点のデザイン経営
Concent, Inc.
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
Yoshiki Hayama
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
なぜコンピュータを学ばなければならないのか 21世紀の君主論
なぜコンピュータを学ばなければならないのか 21世紀の君主論
Tokoroten Nakayama
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
創業時の「nanapiのナマ企画書」
創業時の「nanapiのナマ企画書」
Find Job Startup
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
Yoshiki Hayama
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
Dai Murata
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
Masaya Ando
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
これからはじめるサービスデザイン
これからはじめるサービスデザイン
Concent, Inc.
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
つたわるスライド
つたわるスライド
Kazuyoshi Goto
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Tomoyuki Arasuna
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
Koji Ishimoto
Weitere ähnliche Inhalte
Was ist angesagt?
実務視点のデザイン経営
実務視点のデザイン経営
Concent, Inc.
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
Yoshiki Hayama
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
なぜコンピュータを学ばなければならないのか 21世紀の君主論
なぜコンピュータを学ばなければならないのか 21世紀の君主論
Tokoroten Nakayama
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
Yoshiki Hayama
創業時の「nanapiのナマ企画書」
創業時の「nanapiのナマ企画書」
Find Job Startup
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
Yoshiki Hayama
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
Dai Murata
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
Masaya Ando
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
これからはじめるサービスデザイン
これからはじめるサービスデザイン
Concent, Inc.
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
つたわるスライド
つたわるスライド
Kazuyoshi Goto
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
Was ist angesagt?
(20)
実務視点のデザイン経営
実務視点のデザイン経営
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
なぜコンピュータを学ばなければならないのか 21世紀の君主論
なぜコンピュータを学ばなければならないのか 21世紀の君主論
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
創業時の「nanapiのナマ企画書」
創業時の「nanapiのナマ企画書」
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
UXデザインが大事なのはわかるけどエンジニアの私ができることってなんでしょう?
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
これからはじめるサービスデザイン
これからはじめるサービスデザイン
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
つたわるスライド
つたわるスライド
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Andere mochten auch
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Tomoyuki Arasuna
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
Koji Ishimoto
【Exchange Avenue】審査講評抜粋版
【Exchange Avenue】審査講評抜粋版
ridinglads
泥臭い受託開発Dev love関西
泥臭い受託開発Dev love関西
Toshiyuki Ohtomo
漢は黙ってjQuery
漢は黙ってjQuery
Takuma Hanatani
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
2016-10-25 product manager conference 資料
2016-10-25 product manager conference 資料
Takeo Iyo
君にグロースハックはいらない
君にグロースハックはいらない
Takaaki Umada
「クックパッドとZaimのグロースハックについて」
「クックパッドとZaimのグロースハックについて」
Kato Kyosuke
登録数2倍にしてと言われた時の正しい対処法
登録数2倍にしてと言われた時の正しい対処法
Chihiro Kurosawa
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
Find Job Startup
メルカリ_サービス説明資料
メルカリ_サービス説明資料
Find Job Startup
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
Andere mochten auch
(17)
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
Photoshopユーザ歴10年以上の私がSketchに乗り換えるべきかどうかを検証してみた
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
【Exchange Avenue】審査講評抜粋版
【Exchange Avenue】審査講評抜粋版
泥臭い受託開発Dev love関西
泥臭い受託開発Dev love関西
漢は黙ってjQuery
漢は黙ってjQuery
Sketchで変わるワークフロー
Sketchで変わるワークフロー
2016-10-25 product manager conference 資料
2016-10-25 product manager conference 資料
君にグロースハックはいらない
君にグロースハックはいらない
「クックパッドとZaimのグロースハックについて」
「クックパッドとZaimのグロースハックについて」
登録数2倍にしてと言われた時の正しい対処法
登録数2倍にしてと言われた時の正しい対処法
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
確実に良くするUI/UX設計
確実に良くするUI/UX設計
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
メルカリ_サービス説明資料
メルカリ_サービス説明資料
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
Ähnlich wie Prottとsketchとzeplinのススメ
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
Daisuke Maki
エンジニアとデザイナーのあいだ
エンジニアとデザイナーのあいだ
U-dai Yokoyama
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
Prototype in Service Design
Prototype in Service Design
Hiiro Kato
kintone Café 福岡 LT
kintone Café 福岡 LT
Tomoko Miyake
おばかアプリ勉強会資料 シグマコンサルティング
おばかアプリ勉強会資料 シグマコンサルティング
atmarkit
チームにプロトタイピングを導入した話
チームにプロトタイピングを導入した話
ikue hanawa
最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン
Naoki Aoyama
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
DIVE INTO CODE Corp.
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
エピック・ゲームズ・ジャパン Epic Games Japan
enPiT修了生は、大学卒業後の一歩をどう選んだか
enPiT修了生は、大学卒業後の一歩をどう選んだか
Shizuru Kosuge
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
光吉 浜谷
Prott Story ( Prottができるまで )
Prott Story ( Prottができるまで )
Naofumi Tsuchiya
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
ここがスゴい(変だ)よ!Git lab!
ここがスゴい(変だ)よ!Git lab!
Naoharu Sasaki
Electron で作るはじめてのguiアプリ
Electron で作るはじめてのguiアプリ
祐磨 堀
デザイナーがネイティブ実装に関わるメリットとコツ
デザイナーがネイティブ実装に関わるメリットとコツ
Yurie Shiratori
Pythonによるwebアプリケーション入門 - Django編-
Pythonによるwebアプリケーション入門 - Django編-
Hironori Sekine
スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座
HiroyukiHirota
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
Tomoko Nishina
Ähnlich wie Prottとsketchとzeplinのススメ
(20)
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
未踏カンファレンス2012「メルコグループと未踏ソフト」(スポンサーPR枠)<字幕付き>
エンジニアとデザイナーのあいだ
エンジニアとデザイナーのあいだ
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Prototype in Service Design
Prototype in Service Design
kintone Café 福岡 LT
kintone Café 福岡 LT
おばかアプリ勉強会資料 シグマコンサルティング
おばかアプリ勉強会資料 シグマコンサルティング
チームにプロトタイピングを導入した話
チームにプロトタイピングを導入した話
最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
『修羅道』制作事例 モバイルハイエンドグラフィックゲーム実現まで
enPiT修了生は、大学卒業後の一歩をどう選んだか
enPiT修了生は、大学卒業後の一歩をどう選んだか
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
Prott Story ( Prottができるまで )
Prott Story ( Prottができるまで )
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
ここがスゴい(変だ)よ!Git lab!
ここがスゴい(変だ)よ!Git lab!
Electron で作るはじめてのguiアプリ
Electron で作るはじめてのguiアプリ
デザイナーがネイティブ実装に関わるメリットとコツ
デザイナーがネイティブ実装に関わるメリットとコツ
Pythonによるwebアプリケーション入門 - Django編-
Pythonによるwebアプリケーション入門 - Django編-
スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
Prottとsketchとzeplinのススメ
1.
ProttとSketchと Zeplinのススメ 山本麻美
2.
山本麻美 1997年からフリーランス Web制作、ケータイサイト制作など 2010年 Androidの会に行ったことがきっかけでアプリの UIデザインに特化。 2015年 グッドパッチ入社 Prottの2代目デザイナー
3.
2015 こうしたいとおもいはじめる
4.
つまり、こうしたかった 企画 デザイン エンジニア リング 企画 デザイン エンジニア リング
5.
2014年10月 (Prottリリース直後) 某社長 使おうよ! なにこれ すごい!!
6.
超楽しいんですけどー 専門学校、高校の授業で 使おう!
7.
いいですね、これ! 我が社も導入しよう! クライアント先で、Facebookで 必須です!
8.
Prott 1周年記念イベント Active User賞を 授与する わーい!! グッドパッチ 土屋社長
9.
グッドパッチの門を叩いたら Prott 作って! ○♪※△# !!え!! グッドパッチ 土屋社長
10.
2015年12月 グッドパッチ入社 Prottの2代目デザイナーとして働きはじめる
11.
今日のおはなし •Prott : なぜプロトタイピングが必要なのか • Sketch : なぜアプリのデザインにSketchが向いているのか • Zepelin : もうレイアウト指示書を作らなくてよいのです •
おまけ : マテリアルデザインとの向き合い方の一例
12.
Prott なぜプロトタイピングが必要なのか
13.
Webページの場合 情報の閲覧が主な目的
14.
アプリやWebツールの場合 多くのアクションが発生する”ツール”
15.
スワイプ
16.
ドラッグ
17.
ジェスチャ
18.
ワイヤーフレーム+遷移図では、 気づけない伝わらないことが多い!
19.
User Interface システムデバイス人 処理結果を 視覚的に表すのが お役目
20.
Prottにはプロトタイプ(試作品) を作るための機能がたくさんある
21.
Prottを使って 実際に動かしてみて検証する 使いにくいね これじゃ! そうだね 変えよう!
22.
プロトタイピングのメリット • 遷移や、要素の確認ができる ワイヤーフレームを見てもイメージできないクライアントさんだと ちょっと大変だったりする • 常に完成イメージをチーム内で統一できる ワイヤーフレームのでやめてしまわず、ビジュアルデザインに 進んでもProttを使って共有すると尚良し •
早い段階でたくさん失敗する アプリが出来上がってから直すのはとても大変だしコストかかる
23.
プロトタイピングの注意点 • プロトタイプを作ることに夢中になりすぎない 完成させるべきはアプリであって、プロトタイプではない。 少々きたなくてもいいからどんどんさくさくアイデアを共有する。 • プロトタイプと完成品はイコールではないことを 認識する たとえばiOSでは5と6でテキストの表示サイズが違う。 Androidでは画像の処理が遅く思っていた挙動にならない。 •
必要に応じてツールを使い分ける プロトタイプとひとくちに言うが、用途に応じた種類がある
24.
全体を設計する “動き”を設計する Prott Marvel Invision
Flinto Pixate Form
25.
今後登場してくる プロトタイピングツール Adobe comet Silver
26.
ところでプロトタイプは 誰が作るの? 常にデザイナー チームの主軸の人 × ○
27.
アプリで 手書きスケッチをアプリで 撮影取り込み
28.
Webで ワイヤーフレーム作成機能
29.
豊富なUIパーツ
30.
SketchからProttへ直接Export!! Sketchで Prott Sketchプラグイン
31.
誰でも素早くアイデアを共有できる エンジニア とか ディレクター とか デザイナー とか
32.
ちょっとした余談 ダイアログ画面て、 地味にいっぱいあって、 作るのめんどくさいです。 でも、無いと困りますよね。
33.
ここを押す ※画面の画像は、Android L UI Kit Sketch Resource を使っています http://www.sketchappsources.com/free-source/659-android-l-ui-kit-sketch-freebie-resource.html
34.
次に ここを押す
35.
パーツを ドラッグする テキストを 変更する
36.
ぱぱっとダイアログが作れる! ※Sketchでいちいち作らなくてよいかも
37.
当然、iOS用のパーツもあります
38.
がんがんすばやく試せる これならプロトタイプを 作ることが目的みたく ならないね ちゃっちゃか作って どんどん試そう!!
39.
Sketch なぜアプリのデザインに Sketchが向いているのか
40.
StyleとSymbol
41.
UIパーツをコンポーネントとして デザインすることに適している
42.
コンポーネント化しておく!
43.
UIパーツの一括修正
44.
エクスポート
45.
iOS用のassets書き出しがラク ※Android版はZeplinからエクスポートするとラク!
46.
Skechのexport • 複数要素に対する一括スライス設定ができる • 背景(写真や図形など)を含めず、アイコンなど必要 な要素だけを背景透過でexportすることができる •
iOSアプリに必要な等倍、2倍、3倍の3種類の サイズのassetsを一回でexportすることができ、 ファイル名の末尾に”@2x” , “@3x” を自動的 に付与してくれる
47.
exportについての説明動画 https://www.sketchapp.com/learn/
48.
プラグイン
49.
Content generator ダミーの写真やテキストを生成してくれる 人名、長文テキスト、電話番号、住所もある
50.
Prott Sketch plugin Sketchのアートボードを直接Prottへエクスポート
51.
Prott Sketch Plugin Sketch Prott
52.
その他おすすめプラグイン • Sketch measure • CRAFT •
Dynamic Button Sketch App Sources Sketchのプラグインや テンプレート集
53.
Zeplin連携
54.
レイアウト指示書の作成が 不要になるツール Zeplin https://zeplin.io/
55.
テキスト問題解決した!!!
56.
これまでのSketch このへんな余白に 苦しめられ続けてきましたよね
57.
当然Zeplinにそのまま exportされる このへんな余白に 苦しめられ続けてきましたよね
58.
しかたがないので テキスト用のガイドを書いていました
59.
Sketch3.6 ぴ、ぴったりだ!!!
60.
当然Zeplinにそのまま exportされる なくなってる!!!!!
61.
Zeppelin もうレイアウト指示書を 作らなくてよいのです
62.
UIの実装にはこういう情報が必要です
63.
Sketchデータから レイアウト指示書を作成してくれる Zeplin https://zeplin.io/
64.
要素のサイズや位置関係を計算してくれたり
65.
コメントを書き込んだりできる!
66.
Android用プロジェクトは単位がdpに!
67.
解像度を選択できる
68.
Zeplinからassetsのexportができる。 (特にAndroid用assets書き出しが便利)
69.
Color Paletteを作成でき、 Color Resourceのxmlを生成してくれる! for Android
70.
iOS用プロジェクトの場合は Objective-C, Swift用になっている。 for iOS
71.
某エンジニアさん曰く、 「このコードの書き方いまいち」 だそうなので、ご注意ください!
72.
おまけ マテリアルデザインとの 向き合い方の一例
73.
マテリアルデザインを ガイドラインとしてではなく、 フレームワークとして捉える さらには無料の 高機能テンプレートと 捉えてみる
74.
リリースしないとスタートできない サービス 概要 チーム ビルディング リサーチ 資金調達 プロモーション 戦略
プロダクト 制作 etc. 少人数スタートアップでは アプリUIのことばっかり 考えているわけにいかない。
75.
一番大事なのはUIでなく コンテンツの質だ ああ しよう こう しよう そう しよう
76.
77.
ひととおり揃ってる! アイコンもある!! しかも無料だ!!!
78.
マテリアルデザインサイト通りに SketchでUIコンポーネントを作り、
79.
組み合わせてどんどんアプリ作る
80.
小さく産んで UX UI
81.
UX 大きく育てる UX UI こうじゃなくて こうなるとおもうよ! UI
82.
ユーザーテストをしたり、 分析したりして、じっくりUIを考える 更に ああしよう 更に こうしよう 更に そうしよう
83.
無理してゼロからUIデザインを うんうんがんばらなくても ちゃんと一定以上の クオリティを担保できます。 どうぞ安心してコンテンツ磨きに 没頭してください。 と、解釈してみるのはどうでしょうか
84.
• Prott : 動くものを作ってトライエラーをすばやく繰り返す チームメンバーの認識統一 • Sketch : ビジュアルデザインのトライエラーがとても容易 •
Zepelin : もうレイアウト指示書を作らなくてよいのです • Material Design : テンプレートとして捉えてみるとリソース不足を解消できる まとめ
85.
面倒な作業はツールに任せて、 作業 作業 作業 ああ しよう こう しよう そう しよう 試行錯誤する時間を増やそう!
Jetzt herunterladen