紙と鉛筆でペーパープロトタイピングを行うのも良いのですが、意外と準備が大変なのと手際よくやるのはそれなりに経験をつまないと難しいのが現実です。
プロトタイピングなのに時間ばかりかけていては本末転倒です。 ユーザーも手っ取り早く、自分達がイメージしやすい形でプロトタイプを見て進めていきたいはずです。
特に、少し動きのあるサイトを提案する場合などは、簡単なプロトタイプをHTMLとJavaScriptでサクっと作った方がユーザーにも伝えやすく、結果的に効率良く進めることができたりします。
そこで、今回紹介する方法は、実際のコードを見せながらユーザーと共同でプロトタイピングする方法です。
もちろん、ここで言うプロトタイピングは、開発者が一方的に設計のためのプロトタイプを作ることではありません。 ユーザーと共同でプロトタイプを作っていくことで、自分達がモヤモヤとイメージしているものがつなぎ合わされ、最終的に目に見える形に落とし込むことがゴールになります。
共同プロトタイピングでは、下記のポイントが重要です。
- 簡単に環境が作れる
- どこにいてもレビュー修正ができる
- 修正が即座に反映される
これらを実現するためのクラウド上にツールを組み合わせて共同プロトタイピングの環境を作ります。 使うツールは、IDEとして「SourceKit」、ソースコード共有として「Dropbox」です。
この組み合わせが最強なのは、Chromeブラウザさえあれば、どこでも簡単に環境が作れ、レビューと修正がスムーズに行え、無料で使える点です。
それは、実際に共同プロトタイピング環境の構築手順を見ていきましょう。
共同プロトタイピング環境構築の手順
Dropboxアカウントの登録
ここでは、プロトタイピングで利用するためのDropboxアカウントを登録します。 ユーザーと共同で使うために、個人で利用しているものとは別に取得します。
Dropboxのクライアントソフトはインストールしなくてもかまいません。
SourceKitのインストール
「SourceKit」は、ブラウザ上でソースコードの編集が行えるChromeのウェブアプリです。
ChromeウェブストアにアクセスしてSourceKitのインストールを行います。
SourceKitの設定
SourceKitは、Dropboxの中にあるファイルを直接、編集することができます。 SourceKitを起動すると、Dropboxへの接続と認証が行われます。ここで、先程取得したDropboxアカウントでログインして認証を許可します。
Dropboxのフォルダ構成が左側のツリーに表示されます。
ここまでが、環境設定です。 プロジェクトメンバー全員に、SourceKitのインストールと設定を行ってもらいます。
プロジェクトフォルダの作成
ここからは、SourceKit上で作業を行います。
プロジェクトで使用するフォルダを作成します。 ここでは、Publicフォルダの下にプロジェクト名でフォルダを作成します。
右クリックしてメニューから「New Folder」を選びます。
フォルダ名を入力してOKで新しいフォルダが作成されます。
DropboxのPublicフォルダは、作成したファイルにURLが与えられます。 この機能を利用して編集したファイルを即座にブラウザで確認できるようになります。
HTMLファイルの作成
先程作成したプロジェクトフォルダの下にファイルを作成します。 右クリックしてメニューから「New File」を選びます。
ファイル名を入力してOKで新しいファイルが作成されます。 ファイル名の拡張子をきっちり設定してください。
ファイル名をindex.htmlにしたので、編集モードがHTMLになってエディットできるようになっています。
コードを入力して、「Save」ボタンをクリックするとファイルが保存されます。この段階でDropboxのファイルも更新されています。
HTML以外にもCSSやJavaScriptのファイルも同様に作成できます。
SourceKitは、エディタのテーマや行番号表示、折り返しの位置などのオプションも設定できます。
ページの確認
Dropboxにログインして、作成したファイルの公開URLをチェックします。
先程作成したファイルで「Copy public link」をクリックします
公開URLが表示されるので、このURLにブラウザでアクセスします。
作成したHTMLがブラウザで確認できます。
あとは、画像ファイルやjsファイルなどは、必要に応じてDropboxにアップロードしておきます。 パスは相対パスで指定しておくとこれらのファイルを読み込むことも可能です。
最近では、CSS3である程度の装飾は可能ですので、プロトタイプ段階ではあまり画像を使わずに行う方がスムーズに見た目の変更もできると思います。
レビューと修正をユーザーと共同で繰り返す
ある程度、枠組みができたらユーザーに確認してもらいます。 その際に、実際のコードを見せながらレビューすることをお勧めします。
時間がかかる修正でなければその場で変更を加えます。 すると、ユーザーが意図しているものがその場で確認でき、その結果のフィードバックをすぐに得ることができます。
もちろん、大きな修正が必要なものもあります。そういった場合は、コードのコメントにTODOとして追記しておきます。 そうすることで、議事録を確認しなくても後でコードを見るだけで修正箇所や内容が分かります。
こうやってレビューを進めていくと、ユーザーが修正されていくコードを目の当たりにしているので、自分たちでもちょっとした修正ができることが分かったきます。むしろ、修正したい気分になってきます。
例えば、文言修正や、項目の追加などであればユーザー側でもできるでしょう。
今回の共同プロトタイピングの手法であれば、ユーザー側にも修正できる環境を簡単に作ることができます。これが大きなメリットです。
開発者が一方的に作っているのではなく、ユーザーも共同でそのプロジェクトに取り組んでいることがプロトタイピングの中で実感できるはずです。
ユーザーは、コードの細かな部分を理解することはできません。 しかし、コードに少しでも触れることができれば、自分達の想いを表現しようとして、理解できる部分も序所に増えてくるでしょう。 プロジェクトを成功させたい気持ちは開発者もユーザーも同じです。 そのためにも、プロトタイピングの段階で共同で取り組むということが重要ではないかと思います。
もちろん、スパイラルにこれらの手順を回してもうまくいくでしょう。 むしろ流れとしては、短いスパンでこの共同プロトタイピングを行い、アウトプットを積み上げていくのがベストだと思います。
手軽に実践できるので、フィードバックしてもらえるとうれしいです。
【Chromeエクステンションまとめ】 2011年の総決算として、おすすめのChromeエクステンションをまとめてみました。こちらもあわせてチェックしてみてください！ Chromeエクステンション開発者向けベスト20「2011年決定版」本当に使えるものだけを集めました！
【ソースコードをブログで公開している方へ】 ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookやGoogle＋でシェアされた時に目立ちにくくなってしまいます。そんな時は、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」が便利です。 ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」