Builderをデザイナーさんに触ってもらうにあたってやったことこんにちは、投稿開発部の市川です(@masaichi)主に、クックパッドiOSアプリの投稿周りの機能を担当しています。クックパッドでは大体の場合は、デザイナーにZeplinなどでレイアウトの指示書を貰いエンジニアが実装するという流れで組んでいます。このやり方の場合、終盤の細かなデザインの調整の際に、修正と確認が細かく発生してしまい、デザイナーとエンジニアの時間を細切れに使ってしまう、という問題がありました。Builderで調整をしてもらうトライを行いました。10月頃、iOSアプリに追加した「みんなの投稿」機能を題材に、この過程と効果を紹介します。Builderを触ってもらうことにしたのか「終盤の細かなデザインの調整の際に、修正と確認が細かく発生してしまい、デザイナーとエンジニアの時間を細かく使ってしまう」という問題の解決として、時間を決めてペアプログラミングをする、というのもあります。これも短い時間で集中して対応することが出来るのでうまくワークします。いえ、この手段もエンジニアが実装をしてデザイナーが指示を出し、というやり方になるので、こだわりきれない点もあるのでは・・と考えていました。Builderを覚えたいという話があったため、トライしてみよう、ということになりました。今回対象にした「みんなの投稿」は以下のような画面です。1つのタブの中身はUITableViewを使ったリストで、リスト中の1セルは高さも固定、表示する要素も条件で出たり消えたりしない、という画面設計になっています。Builderを使った最初のトライにはこのようなシンプルな画面が適してると考え、これを選択しました。以下、実際に機能が取り込まれるまでに行ったことを書いていきます。「デザイナーにStoryboardをお任せする技術」に沿った内容となっています。AutoLayoutの事をざっくりと学んでもらいました。iOSアプリケーションの構造を知らずに触っても、何が起こるのか想像がつかず、混乱するだろうと考えたからです。事前に資料を渡し、ホワイトボードで図を交えて教え、ペアプログラミングをして実際に動かしてもらいました。全部を覚えて貰うのは、新しいことが多すぎるので難しいと考えて、これは2回に分けて行いました。それぞれを1時間〜1時間半くらいで2日に分けました。本題に入る前に補足をしますと、座学がたったの2日で合計3時間というのはかなりすんなりと行ったと思っています。普段からCookpad本体のRailsアプリケーションのCSSやHTMLに関しては自ら修正してGitHubでPRを投げており、ターミナルでの作業や開発フローに慣れている。その開発を行う関係で「手元にXcodeなどの必要なツールキットも揃っている」というのがあると思います。ViewControllerとView初回ではViewControllerとViewについて学んでもらいました。大事な点は2つあると考えています。iOSに十分な内容があり、こちらを利用して説明を行いました。具体的にはiOSのアプリケーションは1つの画面に最低でも1つのViewControllerがあり、複数のViewがViewControllerの持つViewの上に配置されることで、画面を構成している、というような内容です。2つめについては、1つめの点を踏まえてペアプログラミングをしながら実際に手を動かして学んでもらいました。Applicationにしています。初期状態で画面遷移があり、1つの画面に最低でも1つのViewControllerというのが動かしながら見せられるためです。AutoLayout次にAutoLayoutについてです。AutoLayoutは制約をViewに与えることでレイアウトを決める、Appleの機構です。ここでの大事な点は以下3点だと考えています。Autolayoutの考え方のページに詳しく書かれています。ホワイトボードで図や式を書きながら、AutoLayoutの制約に基づいたレイアウトの考え方を教えます。「デザイナーにStoryboardをお任せする技術」でもお話がありますが、数式や図を交えて説明をすると、すんなりと腹落ちをしてくれていました。Builder上での制約の設定の仕方です急に粒度の細かな話しになりますが、大事だと考えています。Builder上での制約の設定は結構クセがあって混乱の元になるからです。(例えば、8px空けていたところを12pxにしたいと考えて、pinを選択して12と入れると、同じ属性に対する制約が複数出来てエラーになる、というのはありがちでわかりにくいミスだと思います)ここからは、ペアプログラミングをしながら、実際のツール上で触って設定の仕方を教えています。Builder上で発生するAutoLayoutに関するエラーがどういうケースで発生するのかとその対応について教えました。Builder上の位置がズレているので、制約か配置のどちらかを合わせてあげれば問題ないよ、といった内容です。Builderで制約を設定する過程でどうしてもエラーが発生する事があり、それぞれの対応方法を教えておくと、デザイナーが作業するときに、エラーに悩まされて不安になることがなく、良いと思います。座学が終わったので実装に入ってもらいました。GitHubのissueにどのファイルを編集する必要があるのか書いて受け渡しています。ファイルの受け渡しはFeatureブランチを切っておいて、それをpullしてもらう形です。ファイルの内容の細かなところは口頭やSlackで説明しています。渡したときには画面はこんな状態でした。これをSlackや口頭で相談を受けながら整えていってもらいます。PRを送ってもらう整ったところで、FeatureブランチにPRを投げ貰いました。xibのレビューも含めて行います。misplacedが残っていないか、下位互換を考慮すると厳しいものが入っていないか等。一通りの修正をしてもらい、終わったところで、Featureブランチにマージします。その後、エンジニアがFeatureブランチからmasterにPRを出し他のエンジニアのレビューも受けてmasterにマージしました。今まで終盤で起こりがちだった、「iPhone6では良いのだけど、iPhone5や4sではレイアウトを調整をしたほうが良い」というケースがあります。ここに細かくデザイナーとエンジニアの時間を細かく使ってしまっていました。今回はデザイナー自身がシミュレータで確認をしながら調整をしてくれたので、この問題が解消されました。今回のケースは「iPhone5の場合にサムネイルが大きすぎる」という問題でした。左のレシピ作者のアイコンを少し小さくする等の調整はAutoLayoutの制約を利用して、デザイナーさん自信が調整をしてくれています。セルの高さのみコードで調整しています)BeforeAfter感想と振り返り実施後、KPTを用いて振り返りを行い、以下のことがでてきました。エンジニアエンジニアとしては、まず問題が解決出来たことも良かったと考えいます。自身のAutoLayoutへの知見も深まりました。leadingとleftの違いや、equal以外の関係性の使い所等。コードを書いて解決してしまっていたところを、一緒にAutoLayoutの制約でなんとか出来ないかを考えて解決できたのは、良い経験でした。Builderを触れるようになりました。目的が、リソースがいっぱいいっぱいのエンジニアの細かいデザイン調整の時間を減らすことだったのでそれを達成できたのは大きかったです。エンジニアの席にいって「あと数ptずらしてください...あっやっぱり戻してください...」のような時間がかかるコミュニケーションが無くなり自分自身で調整して、シミュレーターで確認できたのは大きかったです。Builderが使える場面では積極的に触っていこうと思います。課題まだ簡単な画面をトライしただけなので「他の画面ではどうなのか」「結局のところデザイン確認がコードレビューに逆転しただけになってしまっているのでは」など、考えられる課題はたくさんありそうです。Builderを触ってもらうのでなく、エンジニアがSketchを受け取ってレイアウトを調整する取り組みもありそうです。実際にフリルさんでは、その取り組みについて記事が書かれています。Builderへいい感じに取り込んでくれるプラグインも出てきており、試してみたいです。どの手段を取るにせよ、大切なことはエンジニアとデザイナーがお互いを尊重して歩み寄っていく姿勢だと私は考えています。まとめ今回のトライでは、目論見通りエンジニアもデザイナーも双方で細かな調整と確認で時間が取られることがなく、終盤の細かなデザインの修正が行えて良かったのではないかと考えています。アプリを開発をする上での1つの事例として参考になれば幸いです。Builderをデザイナーさんに触ってもらうにあたってやったことTweet関連記事2018-12-10iOSでの読みやすい幅モバイル基盤グループのヴァンサン(@vincentisambart)です。iO...2018-11-15デザインとエンジニアリングをつなげる取り組みこんにちは、Komerco事業部デザイナーの藤井(@kenshir0f)です。...2016-11-02サービス開発におけるアプリデザイナーの役割について投稿開発部デザイナーの辻(@cooktsuji)です。使ったセキュリティログ検索基盤の構築サービス特性にあった検索システムの設計戦略クックパッド採用説明会「クックパッドはサービスの作り手を採用したいんです。/*}*/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。