Collabo Tips（コラボチップス） #2 での発表資料になります。 デザイナーからエンジニアになった際に、デザイナーをしていた時に心がけていたことや自分の失敗談や体験を踏まえて、アプリを作成する上でデザイナーとエンジニアがどのように関わり合い、一緒につくっていけばよいかという自分なりの考えをまとめてみました。 また、僕自身がプライベートや業務で、両方の職位を経て、心がけていることに関しても触れています。ほんの少しでもご参考になればうれしく思います。

1. デザイナーだった記憶を忘れないために
自分なりに気をつけていること
Collabo Tips（コラボチップス） #2 @株式会社FiNC
2016/10/05 Fumiya Sakai

2. 自己紹介と簡単な経歴など
✦ 今までの仕事履歴（本業）
石川県金沢市生まれ
本業はサーバーサイドのプログラマ ※Rails＆PHP使い
26歳〜32歳： Webプログラマ（PHP & Rubyがキャリア長い）
23歳〜25歳： Webデザイナー兼ディレクター
チャンスがあればiOSアプリ開発も絶賛やってみたい！
趣味：シルバーアクセサリー集め・スイーツ作り・アプリ開発
女子向け・グルメ・エンタメ関連のお仕事が多い
Qiita : http://qiita.com/fumiyasac@github
Github : https://github.com/fumiyasac
✦ 酒井文也（さかい ふみや）
東京（大塚）住まいの32歳
こんな格好を普段からしているので
遊び人に見られますがエンジニアです。
文系卒に思われますが
実は数学科で理系卒です。
めっちゃお酒好きそうに見えますが
ビール苦手でお酒も超弱いです。
今でもたまにUIまわりとか触りたく
なることがあったりなかったり
今年の4月からフリーランスです。
（割とお堅い感じの会社にいます）
最近のはまっている食べ物は
カボチャと担々麺と甘栗です。
最近はSwift以外ではRailsやLaravel・CakePHP・Node.jsなんかも

3. これまでに作ったもの（ネイティブアプリ）
① 簡易家計簿アプリ「Coffre」
② ゲームアプリ「10秒虫食い算」
・カレンダーを自作しています
・シンプルなお小遣い帳感覚で支出管理できます
・全問正解者ほとんどいません…
・不定期ですがコラムも書いています
・サーバーサイドはRuby on Railsを使用
http://www.coffre.me/
・デザインにもこだわってみました（特にグラフ）
・実はちょっとバグがあります。
・問題は今後追加予定（現在110問収録）
個人的にはなりますが、他にもアプリ・Webサービスなど開発中です（2016年も宜しくお願いします）
・サイト等は次回のアップデートで公開予定
http://blog.just1factory.net/services/284
・若干の中毒性を含みます

4. 人生で初めてiOSのライブラリを作りました
日本の祝祭日を計算で出してくれる
・カレンダーアプリ等での活用を想定
・シルバーウィーク・ゴールデンウィークも対応
・ハッピーマンデー法の施行も対応
・春分の日・秋分の日にも対応
・過去の祝祭日もおおむね考慮はしている
構想や基本実装は僕ですが、他に3名のContributorのお力添えがあり実運用できるレベルになりました！
職人の手作業で計算しております！ ＆ 現在XCode8とSwift2.3/3.0には誠意対応中です(><)
・HTTP(HTTPS)通信は不要
★CalculateCalendarLogic ver0.0.2
【だが本業は今もサーバーサイドです】PHP(メインのframeworkはSymfony) & Ruby(Sinatraに近いもの?)
・Github: https://github.com/fumiyasac/handMadeCalendarAdvance
・実装解説: http://qiita.com/fumiyasac@github/items/33bfc07ad36dfffcdf8f
・Github: https://github.com/fumiyasac/handMadeCalendarOfSwift
手動での導入も可能！＆日本語README完備！

5. ✦ 自分のアプリ開発はデザイナー＆エンジニアを経験できる良い機会
自分のアプリを作成する際はデザイン込みで
役割は分かれているけど良い物を作りたい気持ちは同じ。
両方の工程を経験することは労力もかかるし正直面倒だけどお互いの仕事を知るキッカケの第1歩の始まり。
★関わるツールや技術はこんな感じ
・できる限り自分の持てる技術や知識をできるだけ動員してみる
【お互いの言い分や楽しみやつらみを体験してみる】
ある程度の規模でしっかりとしたアプリを作成するために必要そうな（使いそうな）ものが沢山ある
Designerの何気ない1パーツのこだわりもEngineerの何気ない1行のコードも心を砕いて作られているもの！
デザイン
アプリ
サーバーサイド
データベース
インフラ
管理やドキュメント
実務においても
・特に人手が足りない
・兼務のタスクが多い

6. ✦ デザイナー ⇒ エンジニアへジョブチェンジした際の自分の体験
出会った頃の記憶は時と共に忘れるもの
以前はその立場にいたはずなのに自分の作業や職位に目が行きすぎるあまりに考慮や配慮を忘れてしまった。
★昔に培ったものを忘れがち。でもそんなのはもったいない。
★自分の中でもこういうことが起こってしまった…
・デザイナーをしていた時
10年後には
いたわり合いを忘れて
ああ俺はなんてことを…
・エンジニアになってデザインが絡む部分が出てきた時
今の自分の役割にとらわれすぎてしまった
・デザイン適用のしにくい実装やモック作成
・無理や負担になってしまう指示
・雑になりがちなフィードバック
のはずだったのに…
⇒ 考慮や配慮が足らなくなる傾向になってしまった。
⇒ コンテやデザイン等で組み込む作業の配慮はしていた。
お互いのことをいたわり合う感
※例はイメージです
（お察し下さい）

7. ✦ 僕の考えは「Storyboard」と「InterfaceBuilder」だと思います
デザイナーとエンジニアの交差点
まずはXCodeでStoryboardとInterfaceBuilderを色々と触ってみてどんなパーツを使うのかを見てみよう！
★UIを知るためにどんなパーツがあるのかを知るきっかけを作る場所
配置や画面遷移・重なり・レイアウトをGUIで設定する場所
UIに関するパーツ一式が置いてある場所
デザイナーとエンジニアがiOSアプリ開発で最初に出会う場所

8. ✦ この部分はどの部品を使って再現できるかを考えてみる
パーツに分解をして考えてみる
UIKitについてある程度理解しておく＆どんなことができるかを知るだけでデザインのヒントになる事が多い
★アプリ例：Creema
ページのスワイプに連動して
コンテンツがスライド
Navigation
Controller
(Push Segue)
メニューボタン
押下で表示
ハンバーガーメニューを
押すと隠れていたメニューを表示
UINavigationController?
UICollectionView?
UIScrollView?
UIScrollView?
+
ContainerView?
UICollectionViewCell?
UITabBar?
詳細ページのコンテンツが
横にスライドして表示される
UITableView?
ContainerView
を2段重ねにする?
UITableViewCell?

9. ✦ AutoLayoutの概念はWebのCSSにも少し似ている（と個人的に思う）
似た性質を持ったものに置き換えて考える
僕の場合になりますがAutoLayoutはCSSと似ているかもと思うことで壁を破ることができたので参考までに。
★XCodeでのAutoLayoutの設定画面
幅や高さ・比率の制約
この部分については
CSSのmargin設定に似ている
複数のUI部品間の制約
あるUI部品とそれを保持
する親View間の制約
普段使い慣れているもの（デザイナーの場合はCSS）に置き換える
【理解を助ける上でのポイント】
→ 触ってみながら違いを感じることで理解をするプラクティスがGood

10. ✦ 使う人が気持ち良いと思うところを見極めて使用する
アニメーションやライブラリのさじ加減
アニメーションやライブラリはUIを彩るアクセントになるけれど多用のし過ぎはUIを下品にする原因にも。
★ついついたくさん入れたがるけど、UXを損なわないように
★インタラクティブ過ぎになりがち（6~7割くらいでいい）
・調子にのって様々なアニメーションやイベントを駆使した動きを入れるUIを作ってみた
さじ加減を忘れて
しまうと
「唐揚げ大バカ盛り」
⇒ 下品な動きになった！使いづらい！など綺麗なはずなのに大不評のマサカリが…
「丁度いい感じの唐揚げ」
アニメーションやレイアウト・画面の動き等に関しては他のよさげなアプリのものに倣ってみる
【自分流の選定ポイント】
※例はイメージです
（再度お察し下さい）
ライブラリはDemoプロジェクトを見てStoryboardとの相性を確かめる

11. ✦ 気になる＆普段使っているアプリのUIパーツをイメージしてみる
取り組み1:気になるアプリUIを見つけて使う
女性向けのアプリは機能はもちろんデザインやUIにも工夫をしている場合が多いのでアプリを定期的に見る。
それぞれのアプリの画面をUIKitのパーツに分けて考えてみると面白い
★ちなみに僕は「女子力の高いデザイン」のアプリが好きです
朝時間.jp ヒトサラ PATRA LUMINE TRILL

12. ✦ 画面遷移や配置をコンテにまとめて実装イメージを整理をする
取り組み2:作成前のコンテ書きとノート
普段のうちからノートや用紙などに綺麗に自分の設計や事後ドキュメントの目次をまとめておく習慣を！
手書きはアナログ感満載ですがカジュアルに書けるので侮れない
★まずは「いきなり作り始めない」で「後で見直して加える」ことを前提に

13. ✦ 丁寧にUIまわりを解説する習慣をつけるための練習
取り組み3:説明を言葉とサンプルで残す
UI実装系の記事は説明が多くなるので、言葉だけではなく図解やサンプルで伝わるような配慮と心遣いを。
シンプルな機能の組み合わせであっても実践を想定した設計を
★UIまわりを自分の言葉と図解やサンプルと併せて説明する
・SwiftでContainerViewとStoryboardをフル活用して複雑なUIを実現する際の実装ポイントまとめ
http://qiita.com/fumiyasac@github/items/17cbcffd90deee2cff43
UIまわりの記事の際には特にコードの解説＆図解やキャプチャを交えて
・Swiftで便利なライブラリやUIパーツに工夫を凝らしてUIを彩るサンプル例（ライブラリ選定とベース作成）
http://qiita.com/fumiyasac@github/items/96a588c4f7bfc901f729
・UIとは直接関係がない機能についても画面のデザインはできるだけ整えるようにする
→ 記事を読む方が実装イメージをつかみやすいような配慮をできるだけする
・架空でも構わないので「○○なアプリ」というコンセプトをサンプルに
→ こんなアプリという想定をつけると自分も実装が楽しくなる
・iPhoneアプリでUIを作るためのTipsとContainerView・UIPageViewControllerを使ったサンプル紹介
http://qiita.com/fumiyasac@github/items/1244abc8e3286c47ef50

14. ✦ お互いの役割を理解した上で歩み寄って作業をするとGood!
今回のまとめ
ご清聴ありがとうございました！またこのような機会があった際には是非ともよろしくお願い致します！
★個人的に実務で気をつけているところ
こうしたほうがいいかもというアドバイスの際には「UIやコードの具体的な実例や実装方法」も添えて
★今やアプリの構成も単一の技術だけでは成立しない
コミュニケーションもお互いの技術を知ることで円滑にそして気持ち良く進めることができる
★UIを設計する練習や説明を丁寧にまとめるように日頃から取り組む
デザインの参考例のインプットやノートや設計コンテの整理・実装を自分の言葉でまとめてみる
★自分ルール (今回は守れなくって大変失礼しました)
【良いアウトプットのために】
発表・登壇時はこの中のいずれか2つを
絶対に準備するルールを設けています！