Soumettre la recherche
Mettre en ligne
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
•
226 j'aime
•
44,289 vues
Mayumi Narisawa
Suivre
非エンジニアリング脳なデザイナーが新規アプリ開発の現場でXcodeを使用することがどのような影響を与えたか。について、自身の経験を元にまとめました。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 46
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
Prott's design
Prott's design
Yukihiro Kobayashi
Prottとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
Asami Yamamoto
Recommandé
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
Prott's design
Prott's design
Yukihiro Kobayashi
Prottとsketchとzeplinのススメ
Prottとsketchとzeplinのススメ
Asami Yamamoto
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
エンジニアリングするデザイナーが領域を超えて見えたこと
エンジニアリングするデザイナーが領域を超えて見えたこと
Mayumi Narisawa
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
UIデザインは誰のもの?
UIデザインは誰のもの?
GMO Pepabo, Inc.
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
メーカー出身のUXデザイナーがIT系に転職して 出会いを求めるのは間違っているだろうか
メーカー出身のUXデザイナーがIT系に転職して 出会いを求めるのは間違っているだろうか
Kula Takahashi
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
UnityTechnologiesJapan002
UX改善に必須だが「大変で実施しづらいユーザテストを「本当に1分」で行うには
UX改善に必須だが「大変で実施しづらいユーザテストを「本当に1分」で行うには
UX MILK
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
IoTとUXデザイン
IoTとUXデザイン
Hiroki Hosaka
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
Fumiya Sakai
PHPでPostgreSQLとPGroongaを使って高速日本語全文検索!
PHPでPostgreSQLとPGroongaを使って高速日本語全文検索!
Kouhei Sutou
Contenu connexe
Tendances
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
エンジニアリングするデザイナーが領域を超えて見えたこと
エンジニアリングするデザイナーが領域を超えて見えたこと
Mayumi Narisawa
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
UIデザインは誰のもの?
UIデザインは誰のもの?
GMO Pepabo, Inc.
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
メーカー出身のUXデザイナーがIT系に転職して 出会いを求めるのは間違っているだろうか
メーカー出身のUXデザイナーがIT系に転職して 出会いを求めるのは間違っているだろうか
Kula Takahashi
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
UnityTechnologiesJapan002
UX改善に必須だが「大変で実施しづらいユーザテストを「本当に1分」で行うには
UX改善に必須だが「大変で実施しづらいユーザテストを「本当に1分」で行うには
UX MILK
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
IoTとUXデザイン
IoTとUXデザイン
Hiroki Hosaka
Tendances
(20)
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
確実に良くするUI/UX設計
確実に良くするUI/UX設計
エンジニアリングするデザイナーが領域を超えて見えたこと
エンジニアリングするデザイナーが領域を超えて見えたこと
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
UIデザインは誰のもの?
UIデザインは誰のもの?
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
メーカー出身のUXデザイナーがIT系に転職して 出会いを求めるのは間違っているだろうか
メーカー出身のUXデザイナーがIT系に転職して 出会いを求めるのは間違っているだろうか
なぜUXをデザインしているのか
なぜUXをデザインしているのか
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
InVision勉強会資料
InVision勉強会資料
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
【Unite 2018 Tokyo】Unityにおける疎結合設計 ~UIへの適用事例から学ぶ、テクニックとメリット~
UX改善に必須だが「大変で実施しづらいユーザテストを「本当に1分」で行うには
UX改善に必須だが「大変で実施しづらいユーザテストを「本当に1分」で行うには
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
IoTとUXデザイン
IoTとUXデザイン
En vedette
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
Fumiya Sakai
PHPでPostgreSQLとPGroongaを使って高速日本語全文検索!
PHPでPostgreSQLとPGroongaを使って高速日本語全文検索!
Kouhei Sutou
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Fumiya Sakai
20151205フルスクラッチcms作成のノウハウ With Laravel
20151205フルスクラッチcms作成のノウハウ With Laravel
Takumi Yoshida
Laravel LT
Laravel LT
Iwama Ryo
Firebaseで驚くほど簡単に作れるリアルタイムイベントドリブンアプリ
Firebaseで驚くほど簡単に作れるリアルタイムイベントドリブンアプリ
Fumihiko Shiroyama
デザインにもこだわったUiの事始め3
デザインにもこだわったUiの事始め3
Fumiya Sakai
Laravel の学び方と得られる学び
Laravel の学び方と得られる学び
Masaru Matsuo
Laravel / Lumen 次の一歩
Laravel / Lumen 次の一歩
Yuuki Takezawa
[Laravel] CRUDアプリから一歩踏み出す3つのアプローチ
[Laravel] CRUDアプリから一歩踏み出す3つのアプローチ
Kazuaki KURIU
Laravelを使ってみた
Laravelを使ってみた
Jaeseop Jeong
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Masashi Shinbara
MySQL・PostgreSQLだけで作る高速でリッチな全文検索システム
MySQL・PostgreSQLだけで作る高速でリッチな全文検索システム
Kouhei Sutou
アプリチームを支えるSlack bot
アプリチームを支えるSlack bot
Kazuaki KURIU
Laravelチュートリアルを作ってみた。
Laravelチュートリアルを作ってみた。
Futoshi Endo
3 tips of Laravel
3 tips of Laravel
Kazuaki KURIU
JavaScriptから利用するFirebase
JavaScriptから利用するFirebase
Takuji Shimokawa
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
Masashi Shinbara
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
Fumiya Sakai
わかってるフレームワーク Laravel
わかってるフレームワーク Laravel
Masashi Shinbara
En vedette
(20)
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
カスタムトランジションやジェスチャーを生かしたUIの実装ポイント
PHPでPostgreSQLとPGroongaを使って高速日本語全文検索!
PHPでPostgreSQLとPGroongaを使って高速日本語全文検索!
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
Firebaseでのファイルアップロード処理と便利ライブラリの紹介
20151205フルスクラッチcms作成のノウハウ With Laravel
20151205フルスクラッチcms作成のノウハウ With Laravel
Laravel LT
Laravel LT
Firebaseで驚くほど簡単に作れるリアルタイムイベントドリブンアプリ
Firebaseで驚くほど簡単に作れるリアルタイムイベントドリブンアプリ
デザインにもこだわったUiの事始め3
デザインにもこだわったUiの事始め3
Laravel の学び方と得られる学び
Laravel の学び方と得られる学び
Laravel / Lumen 次の一歩
Laravel / Lumen 次の一歩
[Laravel] CRUDアプリから一歩踏み出す3つのアプローチ
[Laravel] CRUDアプリから一歩踏み出す3つのアプローチ
Laravelを使ってみた
Laravelを使ってみた
ビルドサーバで使うDocker
ビルドサーバで使うDocker
MySQL・PostgreSQLだけで作る高速でリッチな全文検索システム
MySQL・PostgreSQLだけで作る高速でリッチな全文検索システム
アプリチームを支えるSlack bot
アプリチームを支えるSlack bot
Laravelチュートリアルを作ってみた。
Laravelチュートリアルを作ってみた。
3 tips of Laravel
3 tips of Laravel
JavaScriptから利用するFirebase
JavaScriptから利用するFirebase
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
レイヤードアーキテクチャを意識したPHPアプリケーションの構築
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
指の動きや遷移時等のアニメーションを生かしたUIのサンプル解説
わかってるフレームワーク Laravel
わかってるフレームワーク Laravel
Similaire à デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
アプリ開発におけるテキスト装飾のアイデア集
アプリ開発におけるテキスト装飾のアイデア集
Fumiya Sakai
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
Fumiya Sakai
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
schoowebcampus
iOSアプリで気になった動きや表現を上手にアレンジして活用してみる
iOSアプリで気になった動きや表現を上手にアレンジして活用してみる
Fumiya Sakai
まずはできるところから始める UnitTestとテストができる実装について
まずはできるところから始める UnitTestとテストができる実装について
Fumiya Sakai
Jenkinsを使おうよ
Jenkinsを使おうよ
Yohei Oda
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
『こつこつ』ポートフォリオ用資料.pdf
『こつこつ』ポートフォリオ用資料.pdf
ssuser65f8d8
ポートフォリオ用資料 (1).pdf
ポートフォリオ用資料 (1).pdf
ssuser65f8d8
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
Fumiya Sakai
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
Fumiya Sakai
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
Fumiya Sakai
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
Fumiya Sakai
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
Fumiya Sakai
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
Fumiya Sakai
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
Fumiya Sakai
小さな会社(チーム)で クールなアプリをつくる方法 Gunosy UI Design Study #1
小さな会社(チーム)で クールなアプリをつくる方法 Gunosy UI Design Study #1
佐藤 俊太郎
Similaire à デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
(20)
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
アプリ開発におけるテキスト装飾のアイデア集
アプリ開発におけるテキスト装飾のアイデア集
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
iOSアプリで気になった動きや表現を上手にアレンジして活用してみる
iOSアプリで気になった動きや表現を上手にアレンジして活用してみる
まずはできるところから始める UnitTestとテストができる実装について
まずはできるところから始める UnitTestとテストができる実装について
Jenkinsを使おうよ
Jenkinsを使おうよ
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
『こつこつ』ポートフォリオ用資料.pdf
『こつこつ』ポートフォリオ用資料.pdf
ポートフォリオ用資料 (1).pdf
ポートフォリオ用資料 (1).pdf
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
動画プレイヤーアプリの開発を通じて学んだ機能を実現するための要点解説
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
iOSアプリUIとの触れ合いと歩む僕なりのSwiftの楽しみ方
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
メディアアプリでよく見る無限スクロールするタブの動きへの考察
メディアアプリでよく見る無限スクロールするタブの動きへの考察
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
デザイナー→Webエンジニア→iOSエンジニアと渡り歩いた僕なりのSwiftとの向き合い方と生かす戦略
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
できるだけUI系のライブラリを用いないアニメーションを盛り込んだサンプル実装まとめ(追加版)
小さな会社(チーム)で クールなアプリをつくる方法 Gunosy UI Design Study #1
小さな会社(チーム)で クールなアプリをつくる方法 Gunosy UI Design Study #1
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
1.
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き Mayumi Narisawa
@ DeNA Co.,Ltd.
2.
UI UX Designer 必需品
: sketch3 / photoshop / illustrator aftereffect / prott / pixate / Xcode 最近はじめた : AndroidStudio 主にアプリを作っています(iOS / Android) https://www.behance.net/mayumi_narisawa Mayumi Narisawa
3.
iOS / Android
アプリ全般 https://github.com/mootoh Motohiro Takayama Fei YeTakatomo Okitsu iOS / Android アプリ全般 https://github.com/okitsutakatomo Android & iOSアプリ開発 意見のご協力をいただいたエンジニアの皆様
4.
「デザイナーが実装に参加する時代はもう始まってる」 「現代のデザイナーにはフルスタックが求められてる」 そんなニュースやブログを良く目にするようになりました。
5.
すでにやること いっぱいで勉強の 時間ないし… 無理! まだやらなくても 大丈夫....たぶん それで、いろいろ思っちゃいますよね デザイナーはUXを考える ことに専念すべき どこ目指してるのか わからなくなりそう 怖い
6.
以前の私も「ガイドを引いて渡す」までが仕事だと思ってました
7.
でも今は、 ・自分でmasterから最新版をpullして、 ・XcodeのstoryboadでUIの調整して、 ・必要があればちょこっとコードも書き、 ・エンジニアにPullRequestを送る までが、自分の仕事だと思ってます
8.
なぜ、そうまでするようになったのか?
9.
それは、 「リリースとして出されるものが 自分のアウトプット力とみなされる」 から。 ※ここでのアウトプット力とは、デザイナーが持つ自己都合的なクオリティだけ でなくユーザーへ有意義な製品を提供できているかどうかまでをいいます。
10.
加えて、 「リーンな開発だから細かいところは 時間があればやろう!」 で、デザイナーが涙目になるパターンから 早く抜け出したかったから。
11.
さらに加えて、 「UIの実現をエンジニアに頼むというのは 実は他力本願なのでは?」 と、ふと思ったので。
12.
あと、 「実装するとより現実的なUXを考案できる」 ことにも気付けたから。
13.
心のどこかで自分の仕事はsketchやprottの中で完結 したと思っていないだろうか? 自分への問い
14.
自分への問い リリース時にデザインが思い通りに反映されていないことを、 工数や何かの問題のせいにしていないだろうか?
15.
どれだけ声を大きくしても、 どれだけ想像を豊かにする訓練をしても、 アウトプットの結果はあまり変わらない わたしの気付き
16.
まず「自分の責任範囲はもっと広いのだ」と知ること ではどうするか?
17.
知る→挑戦→効果 私が体験したXcode開発での5つのEpisode
18.
episode1 知る→挑戦 「やりたいことあるなら、自分でやってください。 あなたの使っているデザインツールとstoryboadは よく似ていますよ。」 by
エンジニア …嘘だ!と思いましたが、
19.
まぁまぁ嘘でした。 ≒ ちょっと数字を動かすとエラーになっては落ち込み... storyboadとcodeを繋げている定義をザックリ消すミスをしては落ち込み.... 似ている部分といったら、レイヤー構造のしくみや、 色やフォントの指定の操作方法くらいだった。
20.
イニシャルコストが大きかった 最初に Xcode の操作や
Storyboard の調整方法など を手取り足取り教える必要があり、時間をとられる。 しかし、長い目でみれば必ずや報われるという確信が あったので問題なかった。 最初にXcodeを触るきっかけをくださいました。 当時の私はどうでしたか?
21.
Interfaceを変更したことだけで、アプリの挙動に影 響しちゃうことがあった。 (例えば、outlet削除したなど。) なので、デザイナーのコードレビュー時にはよりチェッ クをするようにしていた(xibファイルの差分など。) Git でコンフリクトする問題 これからファイルをいじることを口頭やチャットで 宣言し、終わるまでは他のメンバーは手を出さない ようなやり方にした。メンバーが多いと作業が止ま り辛そうだけれど少人数チームだと有効。 おそらく、色んなことでフォロー頂いたかと思います…
22.
「エンジニアだってちゃんとデザイン反映したい。 でもやることいっぱいあるんだ。」 episode2 知る→挑戦 → →
23.
アプリ開発中のエンジニアの仕事(の一部) ・これデータ増えたら動作重くなるな。うーん設計見直さないと。 ・タイムライン系のページングって複雑すぎて泣けてくる。 ・これデータ永続化しないとユーザ体験悪いよね。 ・iOS7だけ発生するバグあるんだよなー。困る。 ・3.5インチのレイアウトってもはやAutoLayoutだけで なんとかなる話じゃないよね。個別に対応しないときつい。 ・テーブルビューの高さ可変になるとまじでめんどい。 ・PullToRefreshとか更新差分とかハイライトさせるの地味に大変。 ・APIドキュメント書かないと。 ・インフラ構築してサーバデプロイしないと。負荷対策も。 …etc どうみてもUIまでにたどり着くには無謀な量ですね
24.
文字装飾の実装 すべてのテキストに対して文字装飾(具体的にはカー ニング)を施したいという要望があり、一見簡単そう ではあるがiOSの文字装飾はなかなか骨の折れる作業 で、はっきりいって開発終盤に「いいよーやるよー」 と気楽に言える話ではなかった。 ただ彼女はStoryboardであればエンジニアレベルで活用できるため、 @IBDesignableと@IBInspectableを利用したカスタムコンポーネント をいくつか用意し、Storyboardのみで文字装飾を可能にすることで、エ ンジニア工数を最小限に抑えて実現することができた。 そんな最中、私の知識不足から困らせてしまったこと ありましたよね?
25.
Storyboard (InterfaceBuilder) を操作するだけでは 実現できないことがあった アニメーションや影をつけるところ、コードで色を指 定しているところ、など。コードも多少書けるとのこ とだったので、できそうなところは書いてもらえたの で助かった (色の指定など) 複雑な実装部分は、やはり私一人では不可能でした…
26.
チームで協力。エンジニアもsketchを使い出した episode3 挑戦 →
効果 「ガイドを引くのは大変でしょう。sketchデータを くれれば自分で読んで実装します。」 byエンジニア
27.
sketchのガイド表示方法をシェアすると、 なんとstoryboadと操作方法が同一ということが判明! sketch storyboad いずれもoptionキーとカーソルの動きで表示される
28.
コミュニケーションツールが変わった episode4 挑戦→効果 → 小難しいUI調整についてはXcodeでわかるところまでやって、 GitHubにメッセージを残しておく方法へと変化
29.
GitHubを使ってコミュニケーションがとれるため、 UIの確認や反映コストがほとんどかからない。 またsketch上に最低限どういう情報があればエンジニ アが実装できるかを把握できているため、sketchだけ で実装のためのコミュニケーションが完結できる。 (ガイドやレギュレーションを渡されて実装するより 格段に作業効率が良い) またデザイナーとしてもガイドを作る工数が削減でき ていると思う。 開発上のコミュニケーションの変化はどう感じましたか?
30.
「アニメーションはこうしたい。scaleとalphaと…delayは…、 雛形組んでいただければ、あとは自分で数字調整しまっす!」 episode5 挑戦→効果 https://www.desmos.com/calculator/cahqdxeshd Bezier Curves UI実装するのに一番多かったやりとりです。 このコミュニケーションで「何をどうすんの?」 の部分でお互いのフラストレーションがなくなり ました。 ※左記はその時の事前のアニメーション共有方法
31.
この方法でお互いのコストを大幅に削減できましたよね? アニメーションを実装する際、パラメータをコード上 の変数に変換して、曲線を実現する必要があるのだが、 例えばAfterEffectだと正確な数字(主に制御点)が換 算しずらいので、ベジェ曲線作成ツールを使うことで イメージの共有がしやすかった。 デザイナーは見た目で判断するけど、エンジニアは4 つのパラーメータを見る共通言語的ツールとなった。
32.
結果 開発上でのフラストレーションゼロ 自信をもってリリース
33.
でも、 でも、削り落としたUI調整はもちろんあります
34.
UI調整は一番最後にやるのが効率的。 開発終盤のプライオリティ調整でデザイン反映が 足切り対象になりやすくなっていることに原因がある。 なぜ? ↑ Xcodeを使って一番よかった気付きポイント
35.
「UI調整は一番最後にやるのが効率的」についての認識変化 before after デザイン重要視されてない という思い込み 製品の完全性を求めるには UI調整は最後であるべき
36.
デザイン作業 エンジニア作業 よく思い返してみると、デザイン作業でも同じことしていた UIUX設計 ↓ 議論・修正 ↓ グラフィック調整 機能設計 ↓ バグチェック ↓ UI調整
37.
エンジニアタスク 開発終盤 やることいっぱい 色んなものと戦ってる デザイナータスク 残りのUI実装、ユーザーインプット からの修正、storyboadで調整 自分の 知識・速度では やりきれない部分 ←ここが削り箇所 主に Codeを書かなきゃ 実現できないUI そのなかで、削ぎ落とされるUI調整とは?
38.
・Codeで実装するUIもいずれは自分の手で行えるように ・一見簡単に思えるUI調整でもCodeでなければ 実現しないときもあると予測できるように 今後の課題
39.
改めて、デザイナーがXcode実装に参加してどうでしたか? 以前の問題点: コード変更→ビルド→デバイスにインストール→渡して見 せるという作業は、エンジニアのタスク的にはごく些細な ものだが、ここにかける時間が多く、その間ほかの作業は できない。また、微調整するためにコミュニケーションも 必要なため、さらに開発が遅くなっていた。 変化: デザイナーだけで UI の微調整ができるようになったことで、 別のエンジニアリングタスクに集中することができ、 圧倒的に開発効率が上がった。
40.
エンジニア・デザイナー間工数の均等化とプロダクトの品 質の向上: エンジニアにはエンジニアの優先順位があり、開発後半に なればなるほど目の前の対応に追われ、どうしてもUIの実 装が疎かになりがちになる。 逆にデザイナーは後半稼働が空いてくることが多い。その 時にStoryboardでUIのディティールを調整してもらえるの は非常に助かったし、結果的にプロダクトの品質も向上し た。 改めて、デザイナーがXcode実装に参加してどうでしたか?
41.
改めて、デザイナーがXcode実装に参加してどうでしたか? ・エンジニアのstoryboard作業工数がだいぶ減った ・デザイナーの開発を如何にしやすくさせるために、 エンジニアの実装力も上がってきた ・互いに仕事の仕方への理解が深まった気がする
42.
エンジニアの皆様、ありがとうございました!
43.
ここで私も、正直な感想 AutoLayoutへの理解 storyboadでUIを調整する際はAutoLayoutを理解してい る必要があり、例えば、デザイン時は要素間のマージンを 考えるのですが、storyboad上では親要素から要素それぞ れのマージンが設定されることが多く、そういうプロセス の違いに驚きの連続でした。 AutoLayoutへの理解が深まると、おのずとデザインの設 計方法も変わり、「これどう実装されるのかな?」という 自問自答時間も減り、UI Review時のコミュニケーション もエンジニアにとっては、理解しやすい説明に成長できた ように思います。
44.
・エンジニアの仕事を知る&挑戦することは 必ずアウトプットの向上につながる ・チーム全体の開発コストを大幅に削減できる ・デザイナーのやるべきことはまだ沢山ある デザイナーがXcodeでUI調整をすることについて まとめ
45.
Xcodeはどうやって習得したの?という質問をよくされるのですが、あくまでも私の 場合ですが、「入門編」とラベルが貼られるような書籍は買いましたが、ほとんど読 みませんでした。 最初にエンジニアからXcodeを勧められた時のことです。 「本は読まなくてもよい!Xcodeを触って覚えるのが一番早く習得できるから。」 なので、ひたすらstoryboadの定義設定と向き合い、エンジニアが書いたコードを見 て研究し、必要があれば開発者ブログを検索してコードをコピペして試してみる、の 繰り返しを続けました。 実際、本を読むより早かったと思います。というか、実践でやらなければいけないUI 調整は本に書いてないことばかりだったので…。 良い製品を生み出す為には、今こそデザイナーとエンジニアは互いの垣根を越え、 協力しあうことが求められていると思います。 隣席のメンバーとぜひその1歩踏み出してもらえると幸いです。 あとがき
46.
DeNAはクリエイターが社内で制作した作品を、 個人のPORTFOLIOやSNSに掲載することを尊重する。 より「個」が重視される時代に、一人でも多く「匿名のクリエイター」がいなくなるように。 http://dena.com/jp/recruit/career/portfolio/
Télécharger maintenant