アプリを開発する際、“事前準備” はどこまで済ませていますか？
パンフレット・冊子や Web サイト・IT システムの作成経験が豊富な場合、社内にはものをつくる際のデザインや品質管理などの「ガイドライン」が定義されている場合もあります。
iPhone/Android アプリに関しても、企画を立てて画面を設計する際に担当者（マネージャやディレクター）がどこまで具体的に完成形をイメージできているかは、コストや品質に大きな影響を与えます。
ただ、アプリの作り方・使われ方は紙媒体や Web とは少し異なるため、アプリならではの一手間を加えることで失敗を防ぎやすくなります。
そこで、今回はまだあまりスマホアプリの経験がないという方向けに、Google などもおすすめしている「ペーパープロトタイピング」という工程をご紹介し、準備を順調に進めるためのお手伝いができればと思います。
アプリ開発で重要なペーパープロトタイプとは（ワイヤーフレームとの目的の違い）
やることは、「紙とペンでアプリの試作品をつくり、実際に操作しながら使いやすさを確認すること」です。「紙（ペーパー）で試作品（プロトタイプ）をつくる」ということなので、言葉の意味はシンプルです。
ポイントは、一枚の紙に静止画を描くだけではなく、ボタンを押した際に出てくる新たなページなどを別の紙で貼り付けるなど、「動くもの」をつくる ことです。
Web サイトを制作または外注するときに “ワイヤーフレーム” をご覧になったことがある方もいらっしゃると思います。ペーパープロトタイプは同様の作業のスマホ版・アプリ版というイメージを持たれることもありますが、意味は異なります。
アプリだからこそ必要な紙工作
ワイヤーフレームは画面上に表示する要素の位置関係や大きさを表現するものですが、ペーパープロトタイピングは、画面の中を整理するだけではなく “実際に使ってみること” が目的です。
アプリにおけるコンバージョン（顧客に起こしてほしいアクション）は、
- 複数のページを遷移しながら
- 申し込み・購買などの行動を起こしてもらうこと
が多くなります。
Web サイトでも問い合わせの獲得を目的とした LP などはありますが、単一のページで完結することが多く、複数のページを読んでもらうメディア型の Web サイトでは「内容が伝わるかどうか」に重きを置く傾向があります。そのため、Web とアプリでは設計時に持つべき感覚が変わってくるのです。
ですので、画面内が整理されていることだけではなく、そのページから先へとスムーズに動作するデザイン（UI/UX）を考えぬく必要があるのです。
理想的なサンプルから学ぶ、ペーパープロトタイピングのやり方
ペーパープロトタイピングの流れや方法については、スマホアプリのプラットフォームである Android を開発している Google も、教材となる動画を公開しています。
画面一つひとつのスケッチ自体は、ワイヤーフレームを作成するときと変わりません。つくったことがない場合、社内に Web ディレクターやデザイナーが在籍していれば、一度協力してもらうことをおすすめします。
参考：HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
一つのポイントは、動画の 3:21 からの部分です。スケッチを “パーツごとに” 分解して作成することで、タップしたときに画面が遷移するだけでなく、隠されていたウィンドウが開いたり、ポップアップが出てくるといった動きまで再現しています。このような動きは文章で指示書をつくっていても伝わりづらいため、開発者に正しく指示を出したい場合は重要です。
そしてもう一つのポイントは、4:23 からの部分です。スケッチと画面をタップする指を静止画で撮影し、紙芝居のように連続で流すことで、まるで本物のアプリを操作しているかのような動画を作成しています。実際に一人のユーザーがアプリを操作している一連の流れを把握できれば、ペーパープロトタイプは成功といえます。
結局、紙でこんな立派なプロトタイプをつくるメリットって？
実際にペーパープロトタイプを作成しようとすると、「アプリを開発する前なのに、こんなに時間と労力をかけて、果たして意味があるの？」と思うかもしれません。
ですが、アプリを開発する前に “検証” ができることは、大きなメリットになるのです。ゲームエンジン「libGDX」を開発した現役プログラマーである Mario Zechner 氏は、著書の中で "The pen is mighter than the code. (ペンはコードより強し)" と記しています。
もし、アプリ開発がある程度進んできたときに「この画面でここをタップしたときにはこっちの画面に行くべきではないか？」「この画面に到達している段階では、この画面を見たくならないか？」といった疑問の声が挙がってきたとしたら、どうなるでしょう。
紙の上の話であれば描き直すだけで済みますが、デザイナーにデザインイメージを制作してもらってから、開発者にプログラムを組んでもらってからになると、修正のためのコストが跳ね上がります。
ITプロジェクトの失敗要因は「仕様の抜け・漏れ・曖昧」
IT開発に関する調査報告を読んでいくと、独立行政法人 情報処理推進機構(IPA) では
- 仕様のミスが後工程で発覚するほどリカバリの負荷が指数的に増加する
- 不具合が少なかったIT開発プロジェクトは上流工程で問題を摘出する比率が高かった
と、開発に着手する前、設計時点で注力することを推奨しています。
参考：独立行政法人 情報処理推進機構(IPA) 調査報告書「ユーザーのための要件定義ガイド」
もちろん、企画・要件定義がうまくできていれば、大きな修正もなくアプリをそのまま公開できます。ですが、まだアプリの企画・デザインおよび開発・ディレクションの経験が浅い場合は、ペーパープロトタイピングをしたほうが最終的なコストは低くなる “確率が高い”、といえます。
仕様の「抜け・漏れ」だけでない「曖昧」とは？
iPhone/Android アプリの開発では、企画を考えているうちに「これもできたほうが便利だ」「競合と差別化するためにはこういう要素も必要では？」「社内の○○部門からはこんな要望が挙がっている」と、MUST の機能だけでなく、BETTER の機能がたくさん入ってくることが多いです。
複数の部門や事業部の要望を吸い上げて、必要な機能をリストアップしていく作業自体はできても、そこから取捨選択していくことが重要になります。
ペーパープロトタイプでこの問題が解決できるとは限りませんが、実際にアプリの中に落とし込んで操作してみると、「この画面にたどり着いた時点では、やることは一つしかないな」「ボタンがたくさんあると、かえって見づらいな」と感じるかもしれません。
もし前後の動作を考慮したユーザーの目線でプロジェクト関係者の意思を統一できるなら、コスト面でも品質面でも大きなメリットがあるといえます。
まとめ：スマホアプリのデザイン・品質を上げるペーパープロトタイピングとは
- 言葉の意味としては「紙でつくったアプリの試作品を実際に操作して確認する」こと
- ワイヤーフレームは「画面のデザイン確認」、ペーパープロトタイプは「動作のデザイン（UI/UX）確認」の目的で作成する
- 机上の議論で増えがちな「優先順位の低い機能（選択肢）」を絞ることで、デザインが洗練される
- ペーパープロトタイプの時点で画面設計のミスをなくせると、最終的な開発コストも抑えられる
アプリ開発は設計〜開発にかかる工数・ベンダーへの外注費用も大きくなるので、プロジェクト途中で仕様の抜け・漏れが出てくる事態はできるだけ避けたいものです。
少なくとも iPhone/Android アプリの経験が浅いうちは、一度試してみるメリットは十分あるといえるでしょう。
- 「ノーコード開発の初期費用の安さは魅力的だが、かゆいところに手が届かないという話を聞く…」
- 「LINE からの PUSH 配信で顧客と継続的に接点は作れているが、費用対効果が見合わなくなってきた」
- 「現状のアプリは新しい機能やデザインを試したくてもカスタムしづらい」
といったお悩みを抱えている企業様に向けて、ローコードでアプリを開発するサービス「PASTA」を展開しています。