デザイナーがStoryboardをかいている話。
日々の仕事でiOSアプリのレイアウト実装をしているデザイナーです。
この記事では、デザイナーがStoryboardをかくようになった経緯やメリット、エンジニアとの協業にまつわる話などを書いていきます。
＊アプリレイアウトを始めたきっかけ
まずは単純にアプリ作るのって楽しそう、仲間に入りたい〜と思っていたことがいちばん初め（且つ大きな）きっかけです。
私がアプリ開発に携わることになった2015～6年当時の主な開発体制はこのような感じでした。
▼（私がアプリ開発に携わり始めた）2015～16年当時の主な開発体制
・デザイナー (Photoshopなどによる)
UIデザイン、画像パーツの作成
・エンジニア (Objective-Cによる)
レイアウト、ロジック実装
でもStoryboardがきたし！(*'▽'*)。
WEBみたいにアプリでもデザイナーが画面を作りたい〜(*'ω'*)
ついにPCもMacになって環境できたし！
・・・とワクワク盛り上がっていました。
ありがたいことにもそれが実現したのは、
まず、なんとなくStoryboard＋Swiftの波がきていたこと。
そして、アプリ開発チームのエンジニアたちもSwift化向けてに勉強しはじめたところで、一緒に学んでいけるタイミングであり「ぜひ一緒にやりましょう！」と快く歓迎してくれた環境だったというのは大きかったと思います。
もしすでに開発が回り始めているタイミングだったらきっと、やはりしばらくはお荷物にならざるを得なく、スムーズなジョインは難しかったかもしれないなぁ、と思うのです。
今振り返ってみると、まったくの未経験から現在進行中の正規プロジェクトにいきなり入れてもらえて作業ができるなんて、ものすごく恵まれていたのでした。
こうして、当時界隈ではまだめずらしかった、iOSアプリUI実装デザイナーが誕生しました！(*'▽'*)
助けてくれたみんな、本当にありがとう〜
次にエンジニアとの協業で必要だった、大切だったな、と感じたことについて挙げていきます。
＊エンジニアとの協業に必要だったこと
・職種の垣根を越えたコミュニケーション
・困ったときにフォローし合える関係（＋それが実現可能な物理的な工数）
・デザイナー自身のつくりたいんだー！というきもち
・職種の垣根を越えたコミュニケーション
エンジニアもデザイナーも「お互い気軽にやりとりができる関係性」にあると、とても捗ります。チーム全体として、意見を言いやすい雰囲気作りが大切です。
エンジニアもデザインについて意見していい。
デザイナーも実装について意見していい。
なんでも、相談し合っていい！
・困ったときにフォローし合える関係
こちらもとても重要です。
実装自体もそうなのですが、Xcodeやらなにやらの環境構築周りについても（特に困ったときに＞＜）助けを求められる環境が必要です。
▼ よくある困りごと😇
まず、すでに動いているプロジェクトを取ってきたとしても、設定をいじらないそのままではXcode上で動かせないこともあったりします。。
▼ それぞれの得意分野😆
・エンジニア → ロジックや開発環境周り
・デザイナー → レイアウトや仕様周り
それぞれの得意分野で、お互いに頼りにできるとすごく捗るようになると思います。
エンジニアさんに対しては、環境設定や実装方法、PRレビューなど、あらゆるシーンでとても頼りにさせてもらっています（╹◡╹）
一方で、デザイナーである自分も役立てるときがあります。
エンジニアが実装段階で仕様書を見ても、あれ？となったとき、設計担当デザイナーの意図をエンジニアにある程度理解しやすく伝えることができます。
また協業することで、レイアウトの組み方についてもロジック実装のしやすさを考慮していくこともできます。
但し、、協業の序盤のうちは、やはりフォローができるだけのスケジュール的な余裕がある程度必要です( ˘ω˘ )
・デザイナー自身のつくりたいんだー！というきもち
これは結構重要でした。
Storyboardでレイアウトを組むだけならば、ある程度どうにか覚えていくことができます。けれども、TableViewを使ったリストを1つ作るにもSimulatorで動かしてみるには多少のSwiftの記述が必要で、WebのStaticなテンプレートをブラウザ確認させるほどには簡単にはいかず、少しだけプログラミング寄りの学習も必要でした。
▼ 振り返ってみて、あってよかったと感じるもの
・「自分がつくりたい！」というモチベーション！（覚悟が決まるｗ）
・それなりの学習コストを支払い続ける覚悟
＊開発チームでデザイナーな自分が目指した姿
Webでテンプレートをつくるように、アプリではStoryboardと簡単なSwiftを使って、動くモックをつくる人になること。
・まずは、画面にコンテンツを配置
Xcode上でViewControllerを配置して、要素の配置はぽこぽこモジュールを置いていけばなんとなくカタチにすることができました。
画像、ラベル、ボタン、検索窓など、画面を構成するコンテンツ要素を惜しみなくどんどん配置していきます。
・その後、Auto Layout設定して優先度を含めてレイアウトを決める
条件によって存在したりしなかったりする要素や、テキストや画像など、幅や高さが可変するような要素も含めて、許容できる制約を考えて入れていきます。
・仕上げに、表示確認ができる程度の簡単なコードもかく
ボタンなどにはタップイベントを用意したり、
可変する要素には、IBOutletをつないだり、ダミーコンテンツを用意したりして実際の画面要素がどんな感じになるのか、イメージが沸くように作りこんでいきます。
そうこうしているうちに、アプリのUI実装楽しい～♪ と少しずつ実装に寄っていって、エンジニアとあーでもない、こーでもないと話し合いを重ねながら作っていく。そうした果てに、なんと作ったレイアウトまでがそのまま世の中に出るのです。本当に最高ですよー(〃ω〃)
ではここで、実際の作業の流れがどうなっているかをご紹介します。
＊UI実装担当としての作業の流れ
・Xcodeで見た目をつくってStoryboardやXib、表示部分のSwiftなど作成
・それらの成果物をPRでエンジニアにお渡し
・エンジニアレビューを通して、開発用branchに直接mergeしてもらう
やっていることは、Webでいうテンプレート作成と同じような立ち位置です。HTML/CSSではなく、Xcodeで作った見た目をエンジニアにお渡しして、ロジック実装に進んでもらっています。
＊デザイナーがレイアウト実装をするメリット
・デザイナー視点でのこだわりも最大限大切にできる
・仕様FIXまで待たずに、レイアウト実装を開始することができる
・(見た目の変更や調整もデザイナー内で対応できるため)ロジック実装完了後でもレイアウト修正を入れることができる
・エンジニアもロジック実装に専念できる
・デザイナー視点でのこだわりを最大限大切にできる
デザイナーがひいた設計に対して、デザイナーが作りこんでいくほうが、なぜそういう仕様にしようと考えたのかが「理解しやすい」「伝わりやすい」「把握しやすい」ため、結果としてデザイナー視点でのこだわりポイントを納得がいくまで突き詰めていくことができます。
エンジニアとデザイナーでは、やはりこだわりポイント（つい気になるポイント、見るところ、視点）が異なるので、デザイナーが作るほうが設計担当デザイナーが考えていることを細部まで実現させやすい部分があります。
・仕様FIXを待たずに、レイアウト実装を開始することができる
もう1つ大きなメリットが、UI設計担当者とはデザイナー同士であるがゆえになんとなく意図を汲むことができるため、完全な仕様FIXまで待たずとも、ある程度レイアウト実装を進めていくことができることです。
それにより、従来よりも デザインフェーズでのスケジュールに柔軟性を持たせることができるようになりました。
・ロジック実装完了後でも、レイアウト修正を入れることができる
こちらも、画像の差し替え、色の変更、モジュールの位置変更や余白をはじめとしたもろもろの微調整をデザイナー側のみで対応できることから得られる大きなメリットです。
設計やビジュアル担当のデザイナーが気になるちょっとしたポイントを（開発フェーズを問わず）いつでも対応することができます。場合によっては、手元の作業を一緒に見せながら微調整を行っていくことも可能です。
設計フェーズの後半～エンジニアのロジック実装終盤まで、細かなデザイン調整に対して長い期間対応することが可能となり、理想のデザインの実現を目指していくことができます。
＊（参考）次の項目などは、ある程度雰囲気で対応できるのもラクチン
・数pxのズレ
・余白の設定
・テキストの改行処理
・高さ可変
・角丸やシャドー
・ある程度ルール化された背景色 など
いかがでしたでしょうか。何かのご参考になれば幸いです(*'▽'*)