デザイナー向けのアプリ開発ハンズオンやってみて良かったこと、苦労したこと

2022年7月27日 17:11

Zaim で開発部署のマネージャーをしております高山です。開発は iOS が専門です。最近は個人的に Flutter の勉強に精を出しています。Flutter 楽しい！

✝

さてさて。先日、デザイナーさんが用意したシンプルなアプリっぽいデザインを、そのデザイナーさん本人が Xcode の Storyboard などのツールを使って画面デザインを実装してみる、というハンズオン会を実施しました。なかなか盛り上がりましたし、なにより今後の業務に活かせそうな感触がありましたので、今回はその話をさせてもらいます。

デザイナーがアプリ開発の勉強をするのってどう？

ある日、デザイナーさんからこんな話を受けました。

アプリ開発の触りだけでも学んでみたいのだけど、どうしたらいいでしょうか。デザイナーがもう少し開発面の勉強をしたら、エンジニアの負担も減ってコミュニケーションもスムーズになるのではないかという気持ちがあります。どういう方法で勉強したらいいのか。そもそもこうした勉強は必要なのか、相談に乗って欲しいです。

なる…ほど…？！

詳しく聞いてみると、OS の用意しているコンポーネントをもっと理解すれば、開発者とのコミュニケーションでも具体的な話ができるようになったり、実際にアプリエンジニアが使っているツールを触れば、もっと的確に支持が出せるようになったりと、そういった効果がないかを期待している様子でした。

Zaim ではすでにエンジニアとデザイナーが協力してペアプロのように共同開発する「UI 改善会」という取り組みがあります。UI 改善会でも似たような効果を期待しており、それだと不足しているのか気になりましたが、聞いてみると UI 改善会では実際にデザイン作業で手を動かしている時間も多いとのことで、開発の理解というほどには及ばないようでした。

今回は「より能動的に学んでいきたい」という意気込みを感じましたので「やってあげたい！」と心を動かされました。と言っても効果があるのかよくわからないという不安もあるので、工数はあまりかけずにやってみることに。実験がてら「アプリ開発ハンズオン」ということで、話の流れでデザイナーさんが用意したシンプルなデザインを元に、実際に手を動かして実装してみる、という会を実施することになりました。

しっかりとした準備が必要だ

今回は iOS の開発環境を使ってやるということになっているので、iOS のテンプレートを使った雰囲気のデザインとして以下のデザインを作ってきてくれました。

開発経験者ならすぐわかるでしょうが、一見してすんなりいかなそうな雰囲気をビシバシ感じます。「日記」は TableView でいけるかな…どうだろ…微妙…。マイページって Storyboard だけでやるのは困難なのでは…コードが結構必要か？！など、さまざまな考えが頭をよぎります。いったん自分自身でやってみないと話にならなそうなので、試行錯誤しつつ触ってみることにします。

結果わかったのは

土台となる TabBarController や空の NavigationController などを含めた Storyboard ファイルをあらかじめくつか用意しておいて、1画面ずつ順次進めていくのがよさそう
Storyboard 上のプレビューだけだとまったく要件が満たせないので、シミュレータを動かす必要がある
ある程度プログラムを書いておいて、実際に触ってもらえると楽しそう

と言ったところです。それぞれについて簡単に補足します。

プロジェクト上に土台となるファイルを用意しておく

なにもないまっさらな状態で始めると、自分で UITabBarController や UINavigationController から置いていかないといけません。それはそれで間違いなく勉強にはなるのですが、それぞれの ViewController の親子関係を構築したり、initialViewController を指定したりと言ったことは今回の目的から考えると省略しても良さそうだったので、こうした本質とは無関係そうな部分は開発側で用意しました。

シミュレータを併用する必要がある

最初にこの話を聞いたときは、Xcode 上のプレビュー表示のみで UIKit を触ってあれこれやってもらおうなどと考えていました。シミュレータで毎回ビルドするのは時間もかかりそうだし、手軽に触れたほうが気持ちも楽かなと。ところが、でき上がってきたデザインはそういったカジュアルなやり方では実現できそうもありませんので、早々に諦めてシミュレータを使うことにしました。

結果的には心配していた速度的な問題はなく、実際にアプリとして動かすという貴重な体験ができたので、シミュレータを使って良かったです。

プログラムも書いちゃった

いわゆるデータリストを表示するタイプのデザインが含まれています。デザインモックを作るくらいなら固定のデータをそのまま配置する方法がありますが、せっかくシミュレータを動かすわけだし「デザインしたレイアウトに自動でデータをはめ込む」パターンの体験を提供できたら面白そうだなと思い、コードも用意しました。なによりちょっとした驚きもあるでしょうし、全然本筋とは関係ないけどワクワクします。

今回は UICollectionViewController を継承したクラスの中でコードを書きました。UICollectionViewCell の中に UILabel をいくつか配置して連番で tag を付けておく想定で準備しておきます。一般的にはカスタムクラスを作って IBOutlet で紐付けしますが、ハンズオン会を考えると操作が煩雑かなと思ったので、見た目ですぐわかる tag を採用しました。

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
  if(indexPath.section == 0) {
    return collectionView.dequeueReusableCell(withReuseIdentifier: "topic", for: indexPath)
  } else {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "list", for: indexPath)
    let title = cell.contentView.viewWithTag(1) as? UILabel
    let subtitle = cell.contentView.viewWithTag(2) as? UILabel
    let date = cell.contentView.viewWithTag(3) as? UILabel
    title?.text = self.listDate[indexPath.row][0]
    subtitle?.text = self.listDate[indexPath.row][1]
    date?.text = self.listDate[indexPath.row][2]
    return cell
  }
}

このままのコードを動かすと、セル内にレイアウトが存在しない状態だとクラッシュしてしまうので、念の為 boolean のフラグを用意しておき numberOfItemsInSection は 0 を返すようにしておきます。当日、レイアウトが完成したタイミングでフラグを変更し、実際にプログラム内に用意しているデータを使って表示するというような工夫もしました。

var useListDate = false
override func numberOfSections(in collectionView: UICollectionView) -> Int {
  if !useListDate { return 0 }
  return 2
}

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
  if !useListDate { return 0 }
  return self.listDate.count
}

リモート環境でのハンズオンに oVice は便利だった

Xcode のダウンロード・インストールは馬鹿みたいに時間がかかることがあるので、ハンズオン会をやる前日くらいまでにはインストールして一回起動しておいてもらいます。当日じゃ絶対間に合わないのでここは大事なポイントです。

Zaim ではオープンスペース的な場所でしゃべる場合には oVice を活用しています。ハンズオン会の話をしていたときに、何人か「興味がある／見学くらいはしたい」という話があったので、気軽に覗き見できるようにしました。

oVice の別の利点としては「複数人で画面共有をしながら進行しやすい」ということがあるかなと思っています。他の人から共有された画面は、閲覧側で好きな位置やサイズに変更できるので、それぞれのメンバーがどういった画面操作をしているのか・つまずいていないか、俯瞰的に眺めることができて効率的に感じます。

ハンズオン会自体は、事前準備を完璧にしたプロジェクトファイルを渡し、「デザインをいじってビルド実行して確認」というプロセスを何度も繰り返しながら、UIKit の使い方、画像の置き方、属性の変更方法などを学んでいきました。

基本的なテーブルビューのデザイン方法に加えて、角丸（layer.cornerRadius）や罫線（UIView に背景色をつけた）といったちょっと工夫がいるデザインの反映方法なども含めて説明できたので良かったです。

ハンズオン会実施にあたって、苦労したポイント2つ

全体的には楽しく進められたかなと思うのですが、リモートならではの苦労がありました。

1つ目は、ディスプレイサイズの問題です。Xcode 上での操作はかなり難易度が高いため、「oVice で画面共有されている画面」と「自分が触っている Xcode の画面」を頻繁に見比べないといけないのですが、小さいディスプレイを使っている場合はこのウィンドウの切り替えが煩雑になってしまったようです。

個人的には大きなディスプレイを使っていたので気づきませんでしたが、1画面でやっている人が戸惑っていたことに、なかなか気づけなかったのは失敗だったなと感じました。

2つ目は、ハンズオンを進める中で参加者側の環境で意図してなかったビルドエラーが発生してしまったことです。結果的には制約の付け方に問題があったことが起因のエラーでしたが、リモートだと画面操作ができないので、あちこちクリックさせながら探さないといけなくてお互い大変でした。

実際のアプリ開発のプロジェクトを見る目が養われた

ハンズオン会の最後に、実際の Zaim iOS 版で使っているプロジェクトを見ました。Storyboard もふんだんに利用しているので、普段どんな環境で開発をしているのか、よりリアルに感じられたようです。

Zaim では、画像や配色は Asset Catalog の機能を使って一元管理しています。こうしたファイルを見た時には「色の変更くらいならデザイナーでも作業できそう」と力強い言葉をいただきました。先日大量に色を更新したことがあり、そのときの作業に思いを馳せていたようです。開発者だと、仮に間違った色を設定していても気づきにくいので、専門の人が作業してくれるのは心強いですね。

参加者の声

やはり気になるのは、実際に参加したデザイナーさんにとって有益だったかどうか、です。

感想

事前準備をしてくれていたので当日がスムーズでした
一つの画面をレイアウトするだけでも時間がかかり大変さが分かりました。四角を角丸にするだけでも一苦労でした
エンジニアへの感謝の気持ちが高まりました

学んだこと

ひとつひとつのパーツは Objects から始まることを学びました。Objects には HIG で見たコンポーネントが揃っており、どのコンポーネントが元になったパーツなのか意識してデザインできると良さそうだなと思います。
Web のコーディングとの考え方の違いを理解できました
今後デザインする際には、Objects にデータが入った時にどう伸び縮みするパーツなのかまで考えたり、最小端末のデザインも用意したりしようと思いました
前よりは実装するのが大変そうかどうか想像できそうです。デザイン時にエンジニアに相談しようと思います！

最後に

という形で、好評だったようでありがたいです。開発者とデザイナーの距離がより縮まったようにも感じられますね！Zaim の人は自分の職能以外の知識であっても貪欲に吸収していきたいという人が多く、なんでも学びに変えていこうという姿勢は気持ちが良いです。

サービス開発の横断的な知識や技術を伸ばしていきたいひと、ハンズオンのことをもっと詳しく聞いてみたい人、よければ話しを聞きにきてください。

この記事が気に入ったらサポートをしてみませんか？