ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

紙と鉛筆でアプリ企画をはじめよう。ペーパープロタイピングツール×19選

https://cdn-ak.f.st-hatena.com/images/fotolife/f/fjct/20171017/20171017135005.png

アプリ開発は頭の中で考えているだけではダメです。UXは実際に試していく中でこそ磨かれます。そのためには書き出すのが大事なのですが、専用のツールを使うのは操作を覚えるまで時間がかかってしまうでしょう。

そこでさくっと使えるペーパープロトタイピングツールを紹介します。ツールと言っても実際にはPDFや画像なので、印刷したら後はペン一本でプロトタイプの作成が開始できます!

iPad Mockups

iPadのプロトタイプです。一枚のiPad、下にはメモが書けるようになっています。PDF/JPEGで配布されています。

細かなグリッドが描かれている版も配布されています。

Pad sketch sheets for Web Designers | Sneakpeekit

iPad Idea Sheet

原寸大のシート(横向き)、75%縮小(横向き)、50%縮小(横向き)の計3種類になっています。画面内で縦横8分割しやすいドットも入っていて、かなり使い手を考えられているようです。

三階ラボ | iPad Idea Sheet ver.01

iPhone Wireframe Templates for Sketching

iPhone用、縦向き3つ並んだテンプレートがノートありなしで提供されています。Microsoft Visio向けのテンプレートも配布されているのが特徴です。

iPhone Wireframe Templates for Sketching | Interactive Logic

iPhone Mockups

iPad Mockupsと同じサイトで配布されているiPhone用ペーパープロトタイプです。こちらはノートが2つのタイプ、細かいグリッドがあるかないかのタイプに分かれています。

Mobile sketch sheets for Web Designers | Sneakpeekit

iPhone Application Sketch Template v1.3

シンプルなテンプレートです。グリッドが画像全体についています。JPEG画像で配布されています。

iPhone Application Sketch Template v1.3 | Flickr - Photo Sharing!

iPhone UX Sketch Templates

iPhone×6つ、3つ、縦そして横と様々なパターンでのデザインが描かれています。右側にノートがありますのでメモするのに良さそうです。PDFの他、Photoshop(PSD)、PNG、EPS、Omunigraffle用のファイルで提供されています。

e-venture: iPhone UX Sketch Templates

iPhone Idea Sheet ver.01

iPad Idea Sheetを公開されている三階ラボさんによるiPhone版アイデアシートです。同じ向きでいくつも並んでいるので、一つの画面に対するアイディアを複数パターン並べてみたり、画面遷移を合わせて表現するのにも良さそうですね。

三階ラボ | iPhone Idea Sheet ver.01

iPhone App Wireframe Template

アイコンやアプリケーションバージョンを書き込む欄があるのが特徴的です。紙の向きも縦横両方が提供されています。またiPhoneの色が黒というのも珍しいのではないでしょうか。

full of design - iPhone App Wireframe Template

Windows Phone 7 UX Sketch Templates

ちょっと珍しいWindows Phone 7向けのテンプレートです。Windows Phoneらしく左右の移動操作を意識してテンプレートも左右に伸ばした形になっています。

Windows Phone 7 UX Sketch Templates | MerryCode

iPhone design sketchbook 4 free

キーボードやステータスバー、タブバーの高さも意識したスケッチブックになっているのが特徴です。さらにフローが描ける図や機能リストといったペーパープロトタイプに限らずアプリ開発に役立つツールになっています。

Get homemade iPhone design sketchbook 4 free | iPhone apps by der.heckser

Android™ Wireframe Templates v1.0

Androidに特化したスケッチテンプレートです。Androidらしく横からキーボードがスライドするタイプなど様々な形のデバイスが想定されているのが特徴です。

Android™ Wireframe Templates v1.0.pdf

Smartphone wireframe pages

上にメモ欄があるのが特徴的です。これは同サイトで販売している DIY Wirephone-holder にはめて使うためです。また、POPというプロトタイプ用アプリとの組み合わせも想定されています。

Resources & Tools for Paper Prototyping | Board of Innovation - “We make Corporates innovate Like Startups”

iPhone5 idea Sheet 3pattern

iPhone 5用のスケッチブックです。2×2(横向き)、3×1(縦向き)、4×1(縦向き)の3パターンが提供されています。

iPhone5のワイヤーフレームに使えるアイデアシートをイラレで作りました | ナナメウエblog

iOS7向けiPhoneペーパープロトタイプ用のPDFテンプレート A4サイズ | HugKey.com

縦向き、2つと4つのパターンで提供されています。アプリ名や制作者が入れられたり、薄く補助線が引かれていたりとより実践的なペーパープロトタイピングが実現できるようになっています。特にiOS 7用となっているのが良いですね。

iOS7向けiPhoneペーパープロトタイプ用のPDFテンプレート A4サイズ | HugKey.com

Interface Sketch

多種多様なスケッチが提供されています。iPad/iPad mini/iPhone 4/iPhone 5sといったAppleデバイスに加えてNexus 7、Nexus 10、一般的な7インチ、10インチタブレット、Android、Windows 8 Phoneといったテンプレートになっています。それぞれ向き、個数も多彩です。

Interface Sketch

Mobile Sketching Template

iPhone、iPadの縦、横向きが一つのテンプレートに収まっています。これにより様々な解像度のデバイスでどのように表示するかを一枚に表現できるようになっています。特に縦長に展開されていますのでアプリだけでなくWebサイトにも使えるのがポイントです。

レスポンシブなサイト設計時に役立つモバイル用ペーパープロトタイプのPDFテンプレート | 15NOTE

以下は印刷するタイプではなくスケッチブックとして販売されている商品です。

PixelPads.com

iPhone 5、iPadサイズのノートになっています。枠も入っており、細かいグリッドがあるので細かくデザインすることができます。iPhone 5が8.99ドル、iPadが15.99ドルとなっています。

PixelPads.com - Sketchpads for UX designers and developers.

App Sketchbook

薄く縦向きのiPhoneが3つ並んでいるノートブックです。12ドルで販売されています。iPadも同じく12ドルで、一つ大きく描かれています。

iPhone, iPad and Web Sketchbooks — App Sketchbook

UI Stencils—iPad Sketchbook

iPad/iPhoneが描かれたスケッチブックが16ドルとなっています。水性ペンで描いて消せるボードは27ドルで販売されています。

UI Stencils—iPad Sketchbook

日本でも iPhone型 メモ帳 などで検索すると同じような商品が幾つか出ます。

さいごに

ペーパープロトタイプの利点は印刷しておけば、後は鉛筆だけで想像力を膨らませる点にあります。紙ですし、ラフに書いてみるのに最適です。デバイスの形に枠があるので、その中にいかに情報を入れるかを検討するのも容易です。画面遷移を表現したり、複数のデザインを見比べるのも良いでしょう。

机上でいろいろなアイディアを試したら、次はニフティクラウド mobile backend を使って素早くアプリ開発しましょう!サーバサイドの開発がなくなると、素早いアプリ開発が実現できますよ!

f:id:mbaasblog:20180927104348p:plain