作り方の流れとポイント
まずは、アプリを設計する全体の流れと、その中のモックアップの作成手順について焦点を当てて解説します。モックアップがアプリ作成でなぜ必要なのかも確認しましょう。
アプリ設計の流れ
アプリ設計はまず、企画を立てるところから始まります。アプリを使用するユーザー層や、メインとなる機能、規格について確認しましょう。
まずは『スケッチ』から始めます。どんな機能が必要か、どんなデザインにするかといった基本部分を、手書きスケッチなどで決めていきましょう。それらをまとめて、設計図であるワイヤーフレームに落とし込みます。
その後はモックアップの作成に移ります。モックアップは、ビジュアルや機能の見た目を確認するために作ります。モックアップを利用して完成時のイメージを共有しましょう。最後に、機能について確認できる『プロトタイプ』を作成し、問題がなければアプリ本体の作成に入ります。
- スケッチ
- ワイヤーフレームへの落とし込み
- モックアップの作成
- プロトタイプを作成
モックアップ作成の流れ
モックアップの作成は、まずは素材を集めることから始まります。ベースとなるビジュアルと、ボタンやアイコンなどの必要なパーツを揃えていきましょう。
次にベース画像を表示し、その上に用意したパーツをはめ込んでいきます。パーツの大きさや位置を調整し、グラデーションや彩度の調整などを行って全体の雰囲気を整えていきます。
あとは出力して関係者にモックアップを共有すれば作業は完了です。モックアップの時点でデザインが確認できれば、製品版を作ってから大きな修正が入るといったリスクが回避できます。
スマホでの作成ツールiPhone・iPad編
ここからは、モックアップ作成をスマホで行うためのツールをご紹介します。まずは、iPhoneやiPadで利用できるツールから見ていきましょう。
初心者も使いやすいInterface3
インターフェイスが見やすく、直感的に操作することが可能です。必要なパーツをメインのビジュアルに追加していき、後は画面遷移の設定を行えばモックアップの作成は完了となります。作成の手順が非常に簡単なため、初心者でも使いやすいツールです。
アプリは無料でも使えますが、無料の場合は機能制限がかかっているため、すべての機能を利用する場合は有償版へのアップグレードが必要になります。
- アプリ名：Interface3 for iPad
- 価格：無料（有料版あり）
- App Store：ダウンロードページ
紙との連携ができるPOP
『POP』はiPhoneとiPadの両方に対応したアプリです。紙で描いたデザイン画などを利用して直感的な操作ができます。デザイン画は紙に描きたいアナログ派にもおすすめできるツールです。
こちらはiPhoneとiPadの両方に対応しています。
- アプリ名：POP
- 価格：無料
- App Store：ダウンロードページ
様々なシーンで使えるAppCooker
iPad、iPad miniを利用して、iOSアプリのモックアップとプロトタイプが作成できます。単純なデザイン機能だけではなく、画面遷移から画面設計、さらには売上予測を立てる機能もあるため、モックアップの作成以外にもさまざまなシーンで利用できるアプリです。
価格は有料ながらもストアでの評価も高く、ウインドウも見やすいため操作も簡単です。インターフェイスは英語のアプリとなっていますが、操作の様子を動画で閲覧することができるなど、ユーザビリティに優れたツールです。
- アプリ名：AppCooker
- 価格：＄29.99
- App Store：ダウンロードページ
スマホでの作成ツールAndroid編
続いては、Androidでモックアップを作成できるツールをご紹介します。
手書きイメージが取り込めるMarvel
『Marvel』は手書きのイメージを写真で撮影して、ビジュアルデザインとして簡単に取り込むことができます。コードを書く必要もないのでプログラマーではなくても簡単にモックアップが作成できるツールです。
ドロップボックスのアカウントで連携するので、あらかじめアカウントを作成しておきましょう。無料利用なら、プロジェクトを二つまで管理できます。
- アプリ名：Marvel
- 価格：無料
- Google Play：ダウンロードページ
自由度が魅力のAppGyver
『APPGyver』は、非常に自由度の高いツールです。テキストや写真にボタン、パネルなどの多彩なパーツが揃っている他、自分でHTMLを記述することでパーツを付け足すといったカスタマイズも行えます。
自分で作ったアプリをプレビューすることもできます。その際、QRコードを利用して自分以外の人も簡単にプレビューできるので、意見や仕様の確認を取るのに便利です。
有料版を使う場合の費用は応相談となっていて、運営会社に問い合わせる必要があります。
- アプリ名：AppGyver
- 価格：無料（有料版あり）
- Google Play：ダウンロードページ
シンプル操作のprott
ドラッグ＆ドロップで画像をつないでいき、アニメーションを指定するだけという非常にシンプルな操作でモックアップを作ることができます。
作成後はQRコードやSlackなどを使って他の人と共有することも簡単にできるため、出力の手間がかかりません。コメント機能もついていてステータスを管理できるので、その場にいない人からでも意見をもらうことができます。
- アプリ名：prott
- 価格：無料（有料版あり）
- Google Play：ダウンロードページ
まとめ
モックアップは、アプリ制作において完成品のイメージを共有し、後からの大幅な修正や仕様変更などのリスクを回避するためにも必要な設計工程です。
モックアップを作成するにはデザインセンスが必要ですが、作成ツールを使うことで初心者でもクオリティの高いモックアップを作れます。スマホで作成できるツールを導入すれば、外出先やちょっとした閃きがあったときもお手軽にモックアップに落とし込むことが可能です。
紹介したおすすめのツールの中から、自分が使いやすいものを見つけてみてください。
