Submit Search
Upload
デザイナーとエンジニアが話す、iOSアプリケーション開発
•
68 likes
•
8,746 views
Kenta Ohsugi
Follow
Sumally デザイナー 大杉 健太 / エンジニア 中元寺 武尊 2015/04/14 Apple Store 銀座
Read less
Read more
Design
Report
Share
Report
Share
1 of 105
Download now
Download to read offline
Recommended
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
エンジニアリングするデザイナーが領域を超えて見えたこと
エンジニアリングするデザイナーが領域を超えて見えたこと
Mayumi Narisawa
Prott's design
Prott's design
Yukihiro Kobayashi
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Kazuki Sato
Recommended
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
エンジニアリングするデザイナーが領域を超えて見えたこと
エンジニアリングするデザイナーが領域を超えて見えたこと
Mayumi Narisawa
Prott's design
Prott's design
Yukihiro Kobayashi
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf
theguild
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Xcodeとstoryboardのすごさを思い知る、ソースコードを書かないプログラミング
Kazuki Sato
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
Grenge, Inc.
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会
Shoichi Kakizaki
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Shoya Tsukada
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fumiya Sakai
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
LINE Corporation
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
schoowebcampus
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)
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
Fumiya Sakai
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
Spath School
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
Chihiro Tomita
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
Taketo Sano
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
GTMF2016:株式会社Tooセッション 「CSゲーム開発現場での UXデザイン室の取り組みと UIデザイナーの専門性」by 株式会社カプコン
GTMF2016:株式会社Tooセッション 「CSゲーム開発現場での UXデザイン室の取り組みと UIデザイナーの専門性」by 株式会社カプコン
Game Tools & Middleware Forum
More Related Content
What's hot
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
Grenge, Inc.
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会
Shoichi Kakizaki
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Shoya Tsukada
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fumiya Sakai
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
LINE Corporation
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
takaaya
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
schoowebcampus
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)
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
Fumiya Sakai
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
Spath School
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
Chihiro Tomita
What's hot
(19)
UnityでUI開発を高速化した件
UnityでUI開発を高速化した件
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
UIは「習うより慣れろ」
UIは「習うより慣れろ」
InVision勉強会資料
InVision勉強会資料
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会
「Camelog」Android開発秘話
「Camelog」Android開発秘話
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
企画したUXをプロダクトに反映するディレクション
企画したUXをプロダクトに反映するディレクション
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
モックを作ろう!アプリのための実践系UXデザイン 先生:大塚 晃
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
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
アプリ・サービスのUI/UXのモックアップ(ワイヤフレーム)の簡単な描き方
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
Viewers also liked
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
Taketo Sano
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
GTMF2016:株式会社Tooセッション 「CSゲーム開発現場での UXデザイン室の取り組みと UIデザイナーの専門性」by 株式会社カプコン
GTMF2016:株式会社Tooセッション 「CSゲーム開発現場での UXデザイン室の取り組みと UIデザイナーの専門性」by 株式会社カプコン
Game Tools & Middleware Forum
理想のWEB開発
理想のWEB開発
エンジニア勉強会 エスキュービズム
de:code エスキュービズム勉強会0620
de:code エスキュービズム勉強会0620
エンジニア勉強会 エスキュービズム
Objective-C/Swift コードの共用
Objective-C/Swift コードの共用
Yoichiro Sakurai
第7回 カジュアル Swift 勉強会 @ 青葉台 オープニング #cswift
第7回 カジュアル Swift 勉強会 @ 青葉台 オープニング #cswift
Tomohiro Kumagai
2014年からSwiftを振り返る! #cswift
2014年からSwiftを振り返る! #cswift
Tomohiro Kumagai
ぼくがかんがえたさいきょうのMvc
ぼくがかんがえたさいきょうのMvc
karupanerura
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
Tomoki Hasegawa
はじめてのiOSアプリ開発 ①
はじめてのiOSアプリ開発 ①
Nagamine Hiromasa
エンジニアとデザイナーのあいだ
エンジニアとデザイナーのあいだ
U-dai Yokoyama
㉚Xcodeを覚えよう!簡単なアプリを作ってみよう!
㉚Xcodeを覚えよう!簡単なアプリを作ってみよう!
Nishida Kansuke
iOSアプリ開発 脱初心者に向けて
iOSアプリ開発 脱初心者に向けて
Kosuke Ogawa
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
Shuichi Tsutsumi
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針
Ken Morishita
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
Daisuke Yamashita
QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
gree_tech
Apple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべて
Apple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべて
Masaru Gushiken
㉙iPhoneアプリ開発の基礎知識を覚えよう
㉙iPhoneアプリ開発の基礎知識を覚えよう
Nishida Kansuke
Viewers also liked
(20)
さらに上を目指すための iOS アプリ設計
さらに上を目指すための iOS アプリ設計
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
GTMF2016:株式会社Tooセッション 「CSゲーム開発現場での UXデザイン室の取り組みと UIデザイナーの専門性」by 株式会社カプコン
GTMF2016:株式会社Tooセッション 「CSゲーム開発現場での UXデザイン室の取り組みと UIデザイナーの専門性」by 株式会社カプコン
理想のWEB開発
理想のWEB開発
de:code エスキュービズム勉強会0620
de:code エスキュービズム勉強会0620
Objective-C/Swift コードの共用
Objective-C/Swift コードの共用
第7回 カジュアル Swift 勉強会 @ 青葉台 オープニング #cswift
第7回 カジュアル Swift 勉強会 @ 青葉台 オープニング #cswift
2014年からSwiftを振り返る! #cswift
2014年からSwiftを振り返る! #cswift
ぼくがかんがえたさいきょうのMvc
ぼくがかんがえたさいきょうのMvc
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
オプショナル型。〜なんとなく付ける ! ? 撲滅〜 改訂版
はじめてのiOSアプリ開発 ①
はじめてのiOSアプリ開発 ①
エンジニアとデザイナーのあいだ
エンジニアとデザイナーのあいだ
㉚Xcodeを覚えよう!簡単なアプリを作ってみよう!
㉚Xcodeを覚えよう!簡単なアプリを作ってみよう!
iOSアプリ開発 脱初心者に向けて
iOSアプリ開発 脱初心者に向けて
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
IOS/Androidアプリの3つの大事な設計方針
IOS/Androidアプリの3つの大事な設計方針
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
Apple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべて
Apple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべて
㉙iPhoneアプリ開発の基礎知識を覚えよう
㉙iPhoneアプリ開発の基礎知識を覚えよう
Similar to デザイナーとエンジニアが話す、iOSアプリケーション開発
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
iOS13 SDK による 全機能置き換え Part1
iOS13 SDK による 全機能置き換え Part1
Kaname Noto
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
Editor スクリプティング 入門
Editor スクリプティング 入門
Keigo Ando
建築革命、更に更に進化!便利さ向上【Unity Reflect ver 3.0 】
建築革命、更に更に進化!便利さ向上【Unity Reflect ver 3.0 】
Unity Technologies Japan K.K.
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
Toshiki Iga
20131005 cocoa関西
20131005 cocoa関西
Yosuke Uno
BaseViewControllerは作りたくない
BaseViewControllerは作りたくない
今城 善矩
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
UIViewController in XIB + IBDesignable
UIViewController in XIB + IBDesignable
Fukaya Akifumi
React Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリ
Masayuki Iwai
【Unite 2018 Tokyo】エディター拡張マニアクス2018
【Unite 2018 Tokyo】エディター拡張マニアクス2018
Unity Technologies Japan K.K.
HoloLensハンズオン:Gaze,Tap And Hold編
HoloLensハンズオン:Gaze,Tap And Hold編
Takashi Yoshinaga
Osc2012 appinventor のその後
Osc2012 appinventor のその後
Katsumi Honda
Intalio Object Builder vs Microsoft LightSwitch
Intalio Object Builder vs Microsoft LightSwitch
Daisuke Sugai
iOSハンズオントレーニング Uikit編
iOSハンズオントレーニング Uikit編
聡 大久保
iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)
Fumiya Sakai
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
Similar to デザイナーとエンジニアが話す、iOSアプリケーション開発
(20)
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Css nite(2010.09.23)
Css nite(2010.09.23)
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
iOS13 SDK による 全機能置き換え Part1
iOS13 SDK による 全機能置き換え Part1
UI要素を動的に利用する
UI要素を動的に利用する
Editor スクリプティング 入門
Editor スクリプティング 入門
建築革命、更に更に進化!便利さ向上【Unity Reflect ver 3.0 】
建築革命、更に更に進化!便利さ向上【Unity Reflect ver 3.0 】
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
20131005 cocoa関西
20131005 cocoa関西
BaseViewControllerは作りたくない
BaseViewControllerは作りたくない
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
UIViewController in XIB + IBDesignable
UIViewController in XIB + IBDesignable
React Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリ
【Unite 2018 Tokyo】エディター拡張マニアクス2018
【Unite 2018 Tokyo】エディター拡張マニアクス2018
HoloLensハンズオン:Gaze,Tap And Hold編
HoloLensハンズオン:Gaze,Tap And Hold編
Osc2012 appinventor のその後
Osc2012 appinventor のその後
Intalio Object Builder vs Microsoft LightSwitch
Intalio Object Builder vs Microsoft LightSwitch
iOSハンズオントレーニング Uikit編
iOSハンズオントレーニング Uikit編
iOSのUI構築小技集(小さなとこから始められる編)
iOSのUI構築小技集(小さなとこから始められる編)
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
デザイナーとエンジニアが話す、iOSアプリケーション開発
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
バックエンド エンジニア フロントエンド エンジニア デザイナー
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
実装で使用するもの Xcode AppCode 開発をする ソフト GitHubSketch
66.
1. 構成を考えていく
67.
デザインとパーツの対応付けをしていく
68.
縦方向へ様々な項目をリスト表示する場合は UITableViewを使う UITableView
69.
様々な項目を好きなレイアウトで表示する場合は UICollectionViewを使う UICollectionView
70.
画像表示にはUIImageViewを使う UIImageView
71.
文字表示にはUILabelを使う UILabel
72.
既存のパーツをカスタマイズして自分でパーツを作ることも可能 Custom
73.
UISwitch / UISlider
/ UITextField UIActivityIndicatorView UISegmentControl / UIWebView UIToolBar / UIRefreshControl ... 他にも様々なパーツが用意されている
74.
2. Xcodeを使ってパーツのレイアウトを組む
75.
Auto Layout って何?
76.
デザインの 指示 を解釈していく ・幅
64px ・アスペクト比 1:1 ・上から32pxの間隔 ・全体の中心(横)
77.
アイコンと 中央を揃える(横) 間は6px デザインの 指示 を解釈していく
78.
79.
視覚的にレイアウトを実装できるツールが内蔵されている
80.
81.
3. コードを書く
82.
通信処理 多言語対応(日本語・英語) 画面遷移 アニメーション コードを書く必要のある処理
83.
Swift の登場でよりiOS開発は身近になった delegate.application?(app, willFinishLaunchingWithOptions:options) Swift Objective-C if ([delegate
respondsToSelector: @selector(application:willFinishLaunchingWithOptions:)]) { [delegate application:app willFinishLaunchingWithOptions:options]; }
84.
4. デザインとのズレを修正する
85.
デザインの上にスクリーンショットを重ねる
86.
スクリーンショットの透明度を下げる
87.
拡大して差を測る
88.
5. デザイナーに確認してもらう
89.
1. デザイナーに ブランチ名
を伝える 2. 実際に実機などでチェックしてもらう 3. 修正する デザイン確認の流れ
90.
6. コードレビュー
91.
GitHub上でコードレビューを行う
92.
追加した行は緑 / 削除した行は赤でハイライトされる
93.
各行についてやりとりができる
Download now