- 当社の開発プロセスで抜けている点
- 画面モックによるユーザからの仕様引き出し
- なにしろフロントエンド開発に興味がない
- いちおう簡易なワイヤーフレームでユーザに確認は取る
- でも出来た時点で使ってもらうと使い勝手が。。となる
- プロジェクト毎に手探りに行うのではなく手順を定めて開発プロセスに組み込むべき
良記事：ペーパープロトタイピング入門
通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。これは致命的な問題になる。
良記事：ペーパープロトタイピング入門
紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽くスケッチをするだけで、リスクとコストを大幅に節約できるのである。
よくある誤解のひとつが「ペーパープロトとワイヤーフレームは同じモノ」である。だが両者はまったく異なる。
ワイヤーフレームは「画面と要素の関係を列挙した見取り図」である。ワイヤーフレームは開発の設計図ではあるが、制作物の使いやすさは保証しない。使いやすさを検証するには、実装後のテストを待たなければわからない。
一方、ペーパープロトタイピングは、紙面上で実装を行うことである。メディアこそ紙だが、操作可能なデモ／モックアップを作成することだ。設計図ではなく、コンテンツをシミュレートする為ののツールなのである。
- ワイヤーフレームは、画面の関係性を記した見取り図
- ワイヤーフレームでは、使いやすいかどうかは検証できない
- ペーパープロトタイプは、紙で作られた「操作可能」なモック
- ペーパープロトタイピング
- （ツールを使った）プロトタイピング
メリット
- 学習曲線がゼロ
- とにかくフットワークが軽い
- 打ち合わせの場でも修正できる
- 技術のないユーザでも修正できる
デメリット
- Webアプリ（大画面）やコンポーネントが多いアプリでの手書きは手間がかかる
- 最終的にHTMLなどコードに落とす作業が必要
必要な道具
メリット
- 本物のアプリに近いIFが用意できる（ユーザが喜ぶ）
- HTMLやCSSなど画面コードの出力が可能
- 特定の要素を一括更新などの支援が得られる
- 再利用性が高い
デメリット
- 学習曲線が高い（かゆいところに手が届くようなツールは特に）
- ひとつの専門技術としてマスタする必要がある
- 打ち合わせ時にユーザのリクエストに応じて直ぐに変更できるように
- HTML出力がそのまま使えない場合がある
- CSSフレームワークが対応していないなど
必要な道具
- プロトタイピングツール
- 10 Wireframing and Prototyping Tools for 2013
- Mockup Prototyping / Wireframing Utility / App Roundup 2013
Antetype（OSX専用）、Easel（Webサービス）、Jetstrap（Webサービス）あたりが良さげ。
当社におけるプロトタイピングツールの要件
-
Antetype
-
Bootstrap ステンシルがあるが、完全互換ではない
-
Grid など自分で用意する必要がある（ということはたぶん独自CSSを吐く（と思われ））
-
MouseOver/MouseDown/MouseUp/MouseRemoveなど事細かく設定できる（クイックプロト向けではない）
-
Bootstrap 完全互換は Jetstrap か Easel ぐらいしかない？
当社におけるプロトタイピングツールの要件
- Jestrap
- インターフェースも超シンプル！悩むところなし
- ただし各コンポーネントの細かい修正はCSS直で行う
- あとデモだけでフリープランがない
当社におけるプロトタイピングツールの要件
-
Bootstrap完全互換
-
パンくずリストとか、ボタンの無効化表示とか無いものもある
-
Jetstrapよりも細かいCSS設定がGUIから出来る
-
なにしろ Github に買収されたしね
-
サービス継続性に安心感あり
当社におけるプロトタイピングツールの要件
Twitter Bootstrapのジェネレータ「easel」がとても便利Add Star
Jetstrapと比べて、パーツのパラメータを細かく設定でき、かゆいところに手が届く。
作ったパーツをHTML（CSS）で出力してJetstrapのソースエディタに貼り付ける流れがとても快適。
- 各コンポーネントのMarginなど、CSSパラメータを簡易に設定して見た目を修正できる
- CSSが汚染されるが、ページ名.css として別ファイル出力されるので本番では削除／修正すればよい
- プレビューモードが使いやすそう
- 修正したい部分へのコメントと、その対応が管理できる
- レビュアーに依頼しておけば、レビュアーの都合の良いタイミングでプロトを評価可能（最上位プラン）
- 修正とその回答という形で課題に関してコミュニケーションが可能
- Jetstrapと比べて安い
- Easel：$15/month、ページ無制限／プロジェクト無制限
- Jetstrap：$24/month、ページ無制限／プロジェクトx３
- まあバグはちょこちょこある
- 画面を閉じて開くと表示が崩れる場合がある
- マージンなどがずれるが不具合なのか、背景があるのか分からない
- ページの切り替えが出来ない（一旦TOPに戻る必要がある）
- ページのロードが遅い（これが一番イライラする）
- 別ウインドウで複数表示しておけば大丈夫？
- カスタムエレメントの機能不足
- カスタムエレメントを作成できるが編集できない
- NavBarとか変更があったら全て差し替える必要がある
- 名前空間がない（プロジェクト毎に管理できない）
- 月次支払しかない（ディスカウントなし）
- Easelで出来るのは画面遷移のみ
- 状態によって画面表示を切り替える
- （面倒だが）別ページを作成することで対応可能
- 画面イベントのプロトタイプ
- モーダルダイアログやアコーディオン表示はできない