ブログ

スマホアプリ開発に慣れないうちはメリットが大きい!開発前には「ペーパープロトタイプ」を作成しよう

アプリを開発する際、“事前準備” はどこまで済ませていますか?

もしパンフレット・冊子や Web サイトの作成経験がおありなら、ある程度 “チェックリスト” のようなものはお持ちかもしれません。

iPhone/Android アプリに関しても、社内外の開発者と共に企画を立てる際に担当者(マネージャやディレクター)がどこまで具体的に完成形をイメージできているかは、コストや品質に大きな影響を与えます。

そこで、今回はまだあまりスマホアプリの経験がないという方向けに、Google などもおすすめしている「ペーパープロトタイピング」という工程をご紹介し、準備を順調に進めるためのお手伝いができればと思います。

アプリ開発で重要なペーパープロトタイプとは(ワイヤーフレームとの目的の違い)

やることは、「紙とペンでアプリの試作品をつくり、実際に操作しながら使いやすさを確認すること」です。「紙(ペーパー)で試作品(プロトタイプ)をつくる」ということなので、言葉の意味はシンプルです。

「紙でアプリをつくっても、操作できないから意味がないのでは?」とお思いの方もいらっしゃるかもしれません。ですが、紙芝居などの形式を使って、しっかり動くものをつくることがポイントです。

Web サイトを制作または外注するときに “ワイヤーフレーム” をご覧になったことがある方もいらっしゃると思います。ペーパープロトタイプは同様の作業のスマホ版・アプリ版というイメージを持たれることもありますが、意味は異なります。

ワイヤーフレームは画面上に表示する要素の位置関係や大きさを表現するものですが、ペーパープロトタイピングは、画面の中を整理するのではなく “実際に使ってみること” が目的です。

Web サイトは「ページを読んでもらうこと」自体が目的になることもありますが、アプリではその先のアクションが発生するかどうかが重要になります。ですので、画面内が整理されていることだけではなく、そのページから先へとスムーズに動作するデザイン(UI/UX)を考えぬく必要があるのです。

理想的なサンプルから学ぶ、ペーパープロトタイピングのやり方

ペーパープロトタイピングの流れや方法については、スマホアプリのプラットフォームである Android を開発している Google も、教材となる動画を公開しています。

画面一つひとつのスケッチ自体は、ワイヤーフレームを作成するときと変わりません。つくったことがない場合、社内に Web ディレクターやデザイナーが在籍していれば、一度協力してもらうことをおすすめします。

参考:HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

一つのポイントは、動画の 3:21 からの部分です。スケッチを “パーツごとに” 分解して作成することで、タップしたときに画面が遷移するだけでなく、隠されていたウィンドウが開いたり、ポップアップが出てくるといった動きまで再現しています。このような動きは文章で指示書をつくっていても伝わりづらいため、開発者に正しく指示を出したい場合は重要です。

そしてもう一つのポイントは、4:23 からの部分です。スケッチと画面をタップする指を静止画で撮影し、紙芝居のように連続で流すことで、まるで本物のアプリを操作しているかのような動画を作成しています。実際に一人のユーザーがアプリを操作している一連の流れを把握できれば、ペーパープロトタイプは成功といえます。

結局、紙でこんな立派なプロトタイプをつくるメリットって?

実際にペーパープロトタイプを作成しようとすると、「アプリを開発する前なのに、こんなに時間と労力をかけて、果たして意味があるの?」と思うかもしれません。

ですが、アプリを開発する前に “検証” ができることは、大きなメリットになるのです。ゲームエンジン「libGDX」を開発した現役プログラマーである Mario Zechner 氏は、著書の中で “The pen is mighter than the code. (ペンはコードより強し)” と記しています。

もし、アプリが一通りできあがってきたときに「やっぱりこの画面でここをタップしたときにはこっちの画面に行ってほしい」といった修正希望点が出てきたとしたら、どうなるでしょう。

紙の上の話であれば描き直すだけで済みますが、デザイナーにデザインイメージを制作してもらってから、開発者にプログラムを組んでもらってからになると、修正のためのコストが跳ね上がります。

もちろん、企画・要件定義がうまくできていれば、大きな修正もなくアプリをそのまま公開できます。ですが、まだアプリの企画・デザインおよび開発・ディレクションの経験が浅い場合は、ペーパープロトタイピングをしたほうが最終的なコストは低くなる “確率が高い”、といえます。

iPhone/Android アプリの開発では、企画を考えているうちに「こんな機能が必要だ」「これもできたほうが便利だ」「競合と差別化するためにはこういう要素も必要では?」と、MUST の機能だけでなく、BETTER の機能まで入ってきます。

たとえば、買い物途中での離脱を防ぎたい EC アプリで、「どの商品が人気かわかるほうがいい」「商品のレビューもすぐに見られるほうがいい」「最安値や在庫情報なども見せたい」という風に選択肢を増やしたとします。

しかし、実際にアプリの中に落とし込んで操作してみると、「この画面にたどり着いた時点では、やることは一つしかないな」「ボタンがたくさんあると、かえって見づらいな」と感じるかもしれません。前後の動作を考慮したユーザーの目線で優先順位を実感できれば、コスト面でも品質面でも大きなメリットがあるといえます。

まとめ:スマホアプリのデザイン・品質を上げるペーパープロトタイピングとは

  • 言葉の意味としては「紙でつくったアプリの試作品を実際に操作して確認する」こと
  • ワイヤーフレームは「画面のデザイン確認」、ペーパープロトタイプは「動作のデザイン(UI/UX)確認」の目的で作成する
  • 机上の議論で増えがちな「優先順位の低い機能(選択肢)」を絞ることで、デザインが洗練される
  • ペーパープロトタイプの時点でデザインを修正するほうが、最終的な開発コストも抑えられる
  • 少なくとも iPhone/Android アプリの経験が浅いうちは、やるメリットは十分ある

アプリ開発を手がける BackApp では、上記の意味もあって企画段階でのペーパープロトタイピングをおすすめしております。ご不明点などがありましたらぜひ一度お気軽にご相談ください。

BackApp のメルマガを購読しませんか

このような記事を定期的に読みたいと思っていただけましたら、ぜひご登録ください。

月に一度ほど、アプリ開発を検討する際のポイントや運用開始後のお役立ち情報などをお届けします。

必須お名前
必須E-mail

0
  関連記事