Suche senden
Hochladen
Sketchで変わるワークフロー
•
431 gefällt mir
•
116,534 views
Asami Yamamoto
Folgen
DevLOVE で話したときの資料です
Weniger lesen
Mehr lesen
Design
Melden
Teilen
Melden
Teilen
1 von 60
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
Empfohlen
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
Prottとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
Asami Yamamoto
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
デザイナーとディレクターのイイ関係の作り方
デザイナーとディレクターのイイ関係の作り方
Take Bo
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Keisuke Tsukayoshi
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
Shizuka Yamada
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
Keisuke Tada
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
UIデザインは誰のもの?
UIデザインは誰のもの?
GMO Pepabo, Inc.
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
Weitere ähnliche Inhalte
Was ist angesagt?
Prottとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
Asami Yamamoto
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Kazuyuki Oikawa
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Miho Yamamori
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
デザイナーとディレクターのイイ関係の作り方
デザイナーとディレクターのイイ関係の作り方
Take Bo
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Keisuke Tsukayoshi
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
Shizuka Yamada
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
Keisuke Tada
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
UIデザインは誰のもの?
UIデザインは誰のもの?
GMO Pepabo, Inc.
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
Was ist angesagt?
(20)
Prottとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
Pixate導入についてのあれこれ
Pixate導入についてのあれこれ
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
Fukui Biz Cafe Side.I #1 「デザイナーのひきだし」
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
デザイナーとディレクターのイイ関係の作り方
デザイナーとディレクターのイイ関係の作り方
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
デザイナーの私と サービスをつくる私
デザイナーの私と サービスをつくる私
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
UIデザインは誰のもの?
UIデザインは誰のもの?
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
デザインのためのデザイン
デザインのためのデザイン
Andere mochten auch
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
akihiro_0228
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
Andere mochten auch
(20)
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
確実に良くするUI/UX設計
確実に良くするUI/UX設計
UX / UIデザインって何?
UX / UIデザインって何?
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Ähnlich wie Sketchで変わるワークフロー
AbemaTV
AbemaTV
Shunsuke Matsumoto
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
Start Sketch.app
Start Sketch.app
Shinichi Kogiso
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
Chihiro Tomita
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Miho Yamamori
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Mori Keita
Story-Assured Design で開発チーム全員でデザインする
Story-Assured Design で開発チーム全員でデザインする
Yusuke Goto
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
Michihiko Nasukawa
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
swwwitch inc.
インフラエンジニアに送るVSCode 入門
インフラエンジニアに送るVSCode 入門
Shinsuke Saito
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
Yasunobu Ikeda
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
Hideki Akiba
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Hideki Akiba
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
anysense_ss
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
Hideki Akiba
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Chihiro Tomita
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
YuzoHirakawa
Ähnlich wie Sketchで変わるワークフロー
(20)
AbemaTV
AbemaTV
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Start Sketch.app
Start Sketch.app
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
Webとスマホとデザインと - 地方から広がるつながるデザイナーのお仕事 -
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ
Story-Assured Design で開発チーム全員でデザインする
Story-Assured Design で開発チーム全員でデザインする
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
アドビの中の人が語るCreative Cloud最新事情と活用術! 〜 ココでしか聞けない「Adobe×山口」レア話 〜
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
インフラエンジニアに送るVSCode 入門
インフラエンジニアに送るVSCode 入門
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5のcanvas2Dアニメーションことはじめ(Webプラットフォーム勉強会 1307)
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?/秋葉秀樹
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Sketchで変わるワークフロー
1.
Sketchで変わる スマートフォンアプリの デザインワークフロー 山本麻美
2.
山本麻美 フリーランスのUIデザイナー 商業高校や専門学校の講師 ←ここのメンバーでもあります。
3.
デザインツール比較 ベクトルイラストレーションを作成するために開発 されている フォトレタッチのために開発されている Webデザインのために開発されている アイコンを描くときは最強。激しく使ってる たまーにしか使わない。 ※CC2015の”デザインスペース”は今後の進化が 若干気になる。exportはSketchにかなわないのでは? Sketchが出る前はこれを使ってた Adobe、 開発終了 宣言
4.
Sketchの登場 スマートフォンアプリの UIデザインのために 開発されている! これはすごい!! よし!
5.
Sketch3のすごいところ Style 塗り色、枠線色やフォント情報を登録して使いまわせる Symbol Styleを含めたUI要素をパーツごとにひとつの塊とし て登録して使いまわせる Sketch Mirror PCでの作業をリアルタイムでiPhoneの画面に 同期できる Export iOSアプリ用の画像パーツ書き出しが神 Plugins 様々なプラグインをインストールして自分仕様の Sketchを作れる Androidアプリ用画像パーツ切り出しのプラグイン がすごい Versionsに対応してるとか、値段が安いとかetc.
6.
style ひとつの図形やテキストの、塗り色、枠線、文字サイズを 登録して使いまわせるよ!
7.
symbol 複数の要素の、色、サイズ、などのかたまりを 登録して使いまわせるよ!
8.
Sketch Mirror PCで作成中の画面をリアルタイムで iPhoneの画面に表示できる!
9.
Export iOSアプリ用画像パーツの書き出しが超カンタン (Adobe製品の比じゃ無いよ)
10.
Plugin export-assets-master 発狂しそうなAndroidアプリ用の画像パーツ書き出しが 一瞬で終わるよ!(涙が出たよ!) ※MDPIのサイズでデザインを作成しておけば、おk
11.
Plugin contents-generator ダミーの写真やテキストを生成してくれるよ! 人名、長文テキスト、電話番号、住所もあるよ! 英語のと日本語のがあるよ!
12.
UIデザインに特化している iPhone画面にリアルタイムで同期できる アプリは完成したらスマートフォンで見る使うわけなので、 デザインの確認もスマートフォンの画面で! 共通のUI要素を使いまわせる修正が簡単 変更が一発で全画面に反映されるので、作業に時間をとられず、 UI設計に集中できる。 画像パーツの書き出しが神すぎる ExportがそもそもiOSアプリの画像パーツを切り出すことを前提に 開発されている。Adobe製品は昔からスライスツールが使いにくい。 ツールの優劣の話じゃなくて、そもそも目的が違うという話です。
13.
アプリ「BizReach」に見る 企画からデザインまでのワークフロー実例 ここでちょっと、 株式会社ビズリーチ マーケティング部 本間裕二さんに聞いてみる!
14.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› アプリをゼロからつくるとき、 SketchとProttがいかに便便利利かの話 ~∼アプリ「BizReach」に⾒見見る 企画からデザインまでのワークフロー実例例~∼
15.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 本間 裕⼆二 2013年年にビズリーチに参画 営業経験後 ・マーケティング部 ・BtoBマーケティング部 ・サービス企画部を兼務し、 2014年年11⽉月〜~現在まで アプリのプロデューサー
16.
Copyright © BizReach,
Inc. All Right Reserved. ‹#›
17.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 転職潜在層をターゲットにしたキャリア形成アプリ ハイクラス⼈人材のキャリア形成アプリ -‐‑‒ BizReach(ビズリーチ)
18.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
19.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
20.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画の⾻骨⼦子を考える。ホワイトボードで。
21.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 「UX」のラフver. を考える まだ、 ホワイトボード
22.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
23.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 議論論議論論議論論議論論 ↓ 「UX」や導線を Excelで作成 議論論:ホワイトボード 清書:Excel
24.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 現状の企画内容をメンバーに共有・・・ みなさん、アプリの⽬目的 とUX、あとコンテンツなど こんな感じっす!どやっ はい∼ん? なんだよこれ、 ぜんぜん 伝わらねぇよ! 開発メンバー
25.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
26.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› イメージを伝え、 Sketchでワイヤーを作成 Prottに落落とし込むの術 オネシャス! OK!さくさくっ!
27.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› Prottをメンバーに配布 ⼿手元で 体験できる! え!ひぃっ!はっ! 触ると言われるより めちゃわかる!!! 開発メンバー
28.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› ワイヤーレベルで 作成したPrott画像数 300〜~400枚! Sketchだから 描けたんだと思う
29.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 余談: ✓ Style ✓ Symbol ✓ Export 3つを理理解しておくと、 Sketchファイルの修正や 簡単なワイヤーの作成が サクサクできやす! ワイヤーレベルまではいける!
30.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
31.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› デザインをSketchで作成し、 ワイヤー版Prottを差し替えまくる
32.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› Prottをメンバーに配布 ⼿手元で 体験できる! おお!ワイヤー レベルの体験が、 デザインでもっと わかりくなってる! 開発メンバー
33.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動
34.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› + レイアウト指⽰示書 導線はProttで。細かいレイアウトは指⽰示書を作成
35.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 企画 ワイヤー デザイン 開発 改善活動 ?
36.
Copyright © BizReach,
Inc. All Right Reserved. ‹#›
37.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› ProttとSketch 俺らも使った 方が効率的だぜ エンジニアがSketchを使えることで、 画像の書き出しやレイアウト作成までが圧倒的に短縮 開発メンバー
38.
Copyright © BizReach,
Inc. All Right Reserved. ‹#› 体験の共有 圧倒的スピード まとめ 初⼼心者であっても、企画→実装のブレがなく 早くアプリを作成でき、学習により改善が⾼高速化。 + メンバーの満⾜足度度も⾼高まる +
39.
モジュール化 しよう! はい! iOSエンジニアの 関根元和さん(@cheebow)と 取り組んだ考え方や 役割分担方法をご紹介。 UIのモジュール化と役割分担 (コンポーネント化)
40.
UIのモジュール化
41.
カードパターン1
42.
カードパターン2
43.
カードごとで 作った場合は… やっぱ、ユーザアイコンは 四角形にしてー! 1枚 2枚 3枚 あ、カードのパターン、 5つ抜けてたわ!
44.
モジュール化しておくと… はい、次! 1回の修正ですべてに反映される
45.
Xcodeでスライスの設定して Githubでpush! 小さく作って 使い回す! ちくちく Xcode上の画像を入れておくところは デザイナーしか触らないという運用ルール
46.
Plugin measure-master エンジニアさんに伝える情報を簡単に書き込んでくれる。 pixelだけじゃなくてdpでの表記も可能!
47.
レイアウト指示書 Google Drive ローカルファイルのやりとりをしない。 いつでも最新情報
48.
ということを 今までやっていたんですが、、、 7月20日の朝、 レイアウト指示書をちくちくと 作成しなくてよい 便利なツールを見つけました!
49.
レイアウト指示書の作成が 不要になるツール Zeplin https://zeplin.io/ ほんとに 昨日 発見しました
50.
SketchからZeplinへ アートボードをExportするだけで…
51.
要素のサイズや位置関係を計算してくれたり
52.
コメントを書き込んだりできる!
53.
Android用プロジェクトは単位がdpに!
54.
Color Paletteを作成でき、 Color Resourceをテキスト生成してくれる! for Android
55.
もちろん、 Objective-C, Swiftにも対応してます。 for iOS
56.
Zeplin https://zeplin.io/
57.
Zeplinについては、 昨日みつけたばっかりで どっぷり使い込んでみていないので、 後日ブログに詳しく書きます。
58.
インタラクションを デザインするツール pixate Form エンジニアさんにインタラクションを伝えられる が!少々使い方が難しい。。。
59.
まとめ 作業ではなく、UI設計に集中しよう 適したツールを使うと作業時間が大幅に短縮でき、 いろんなアイデアを試しやすい。 全体を俯かんしてUIを設計しよう Sketch+Prottを活用すると、アプリ全体を立体的 に設計しやすくなる。 最低限の技術的知識を持とう プログラマとデザイナーはお互いの仕事を知り合おう。 そうすることにより、さらによりよいアプリが生まれると思う。
60.
Sketch3 is amazing!! http://gomaapps.blogspot.jp Sketchでアプリのデザインをするための 考え方やヒントをブログに書いております。 +AsamiYamamoto
Jetzt herunterladen