ぽんぽこ日記

プログラミング、読書、日々の生活

StoryBoardを使ったBtoBアプリのプロトタイピングのススメ 〜まだエクセル方眼紙で消耗してるの?〜

今日のiOSアプリ開発では、アプリのプロトタイピングを何度も繰り返し、UIの使いやすさを練ってから開発することが一般的です。

スタートアップなんかだと、こうしたプロトタイピングのサイクルを高速で回すために、プロトタイプのデモにはProttInVision、デザインはSketchZeplinで受け渡したりして、企画・デザイナー・エンジニア間のコミュニケーションコストを下げるのはあたりまえのように行われています。

f:id:ponpoko1968:20160521134741j:plain

(Photo by Samuel Mann on Flickr)

しかし、上記のようなモダンなツールが導入出来ない現場のほうがいまだ多数を占めると思います。

とはいえ、プロトタイピングをせずに机上の設計だけで作られたアプリなど、ロクなものにはなりません。

そこで、上記のような態勢がくめない開発案件で、プロトタイピングを開発プロセスに取り入れたい場合は、Storyboardを使ってプロトタイピングをするのも一つの案ではないかと思います。

こんな時にオススメ

  1. ステークホルダーが全員エンジニア
  2. 開発体制にデザイナーがいない
  3. クライアントが外部サービスを使いたがらない

ステークホルダーがほぼ全員エンジニア

SIerが扱う案件ではアプリの配布や運用をいわゆるSEと言われる職種の人が行うため、Xcodeの基本的操作はお任せすることが出来ることが多いです。なので、プロトタイプのソースコードを一式を渡せばステークホルダーへの配布は最終成果物と同様のフローで行ってもらえます。

なお、プロトタイプを最終成果物と同様のフローで配布してみることで、プロジェクトの最後の方で、iOSアプリ開発でありがちなアプリの配布作業で手間取る、といったことを減らせるという隠れたメリットもあります。

デザイナー不在の体制

1.の裏返しの話ですが、Prott,InVsionといったあまたあるプロトタイピング向けサービスは、デザイナーがエンジニアの手を借りずに動きのあるプロトタイプを作成できることが売りなわけですが、そもそもデザイナー不在の案件はエンタープライズ向けの案件では珍しくありません。なので、あまりプロトタイピング向けサービスを使う必然性がないことになります。

クライアントが外部サービスを用いることを好まない

冒頭で上げたようなお客さんについて、これは良くあるケースです。

余談ですが、大きな会社の場合、情報漏洩対策の観点でクラウドサービスを使いたがらないというイメージがありますが、どっちかというと加入に至るプロセス(稟議が面倒「画面設計?そんなもんエクセル方眼紙で十分やろ!」)だったり、加入後のアカウント管理(「○○部が勝手にナントカってサービスに入ってるけど、あれうちの部でも使わせてくれないの?」的な)や、使わなくても定期的に費用が発生することなど、とにかく面倒な事が多いために使わない会社が多いんじゃないでしょうか。

なので、ワンストップ、消耗品的に使えるサービス体系だともっと使ってもらえる気がします。

作り方

Storyboardを使ったプロトタイピングも、前半のプロセスは一般的なプロトタイピングと変わりありません。

ターゲット端末を決めて、紙に書く

ターゲット端末の画面比率を調べ、画面比率とおなじ大きさの長方形に、画面スケッチを描いていきます。

f:id:ponpoko1968:20160521121214j:plain

※写真で使っている用紙のテンプレートは、下記サンプルコードの中にファイル(PowerPoint形式:iPhone 6/6S用)を入れております。適宜サイズを変更して印刷してご利用下さい。

Xcodeに取り込む

各画面をスキャナで取り込み、画像に取り込みます。取り込んだ画像は、プロトタイピング用に作ったXcodeのプロジェクトの.xcassetsファイルに登録します。 f:id:ponpoko1968:20160521133529p:plain

各画面を表すビューにUIImageViewを挿入し、画面いっぱいに張りつくようConstraintを設定します。UIImageViewのimageプロパティに先ほどのスケッチ画像を指定します。 f:id:ponpoko1968:20160521133536p:plain

画面にボタンを配置し、ボタンに他画面へのSegueを設定することで、ほぼノンプログラミングで作ったサンプルがこちらです。

f:id:ponpoko1968:20160521133122g:plain

スクショアニメーションに出てくる、タップ可能な部分をハイライトさせる処理については、記事を改めてご説明したいと思います。

2016-06-02追記)

書きました。

ponpoko1968.hatenablog.com

ソースコードはこちら

github.com

コツと注意点

  • あくまでプロトタイピングなので、Segueは活用しましょう。戻り遷移もUnwind Segueを使えばほとんどノンプログラミングで画面遷移が作れます。
  • デモ・打ち合わせ時には画面スケッチを描いた紙も持って行きましょう。画面遷移の順番など、机の上であれこれ議論するのにとても役立ちます。

メリット

StoryBoardという、すこしトリッキーな手段をつかってでも、このようなタイプの開発で、プロトタイプを作って提示するメリットはあるのでしょうか。

なんと言っても、意外と刺さります

悪評高いエクセル方眼紙を見慣れている、レガシーなお客さんであっても、そういうお客さんであればこそ、まだこんな感じで進めている現場は少ないので、珍しがっていただけますし、こちら側の熱意を感じていただけます。

おわりに

UI設計が不十分なため、使い勝手の悪い業務用アプリが出来てしまうと、そのアプリを毎日使わされる現場の人はフラストレーションがたまって士気も落ちるし、そうして作業効率が下がってしまうことで、その企業の損失につながってしまいます。

本当はUI/UXの専門家が入ってUI設計をするのが理想的かもしれません。しかし、デザイナーと呼ばれる職種の人たちの中でも、業務フローや要件定義を理解し、それを情報設計にまで落とし込んだ上でUIに反映できる人はかなり少ないと思います*1し、それなりの費用がかかります。

なので、我々エンジニアが「越境」してUI設計にも積極的に取り組むことが、顧客に提供する価値を高め、我々自身も成長する一番の早道ではないかと最近思います。

この記事もオススメ

ponpoko1968.hatenablog.com

*1:筆者の経験では、すごく優秀な人はいるにはいます。