プロトタイピングから始めよう / 長谷川恭久さん に参加して

9月21日にベースキャンプ名古屋で、長谷川恭久さんの「プロトタイピングから始めよう」というセミナー + ミニワークショップに参加しました。恭久さんの言葉で確かに!と一番納得したのは、紙が最強のツールという訳ではなく、ツールのメリット・デメリットをちゃんと押さえて、目的にあったツールを選択しようという話でした。ついつい紙でなんとかしようとしてしまうので、別の選択しも考えないとと思いました。

紙でスケッチするときは、絵はうまくなくてもいいから丁寧に書くことを意識しています。これは情報デザイン研究室の浅野先生に何度も言われていて、こんなものを作ろうと話をするときにいつも心がけています。

個人的にペーパープロトタイピング的なツールが効果的だなぁと思うことは、やっぱりただ表示するだけのウェブサイトではなくて、フォームなりウェブサービスなり、エンドユーザーが何かアクションを起こすシステムを作るときに、最終的なモノがまだできていない状態でフローが検討できるので便利だなぁと思います。後から考えるとうまく行ったときもあれば、うまくいかず失敗したこともあるのですが。プロトタイプは実は制作者や制作チームが考えられるあらゆるパターンを試して、確固たる自信とゴールを持って最後まで突き進められる地図みたいなともなのかなと思ったりもします。

個人的な課題ですが、そろそろFireworksから離れて、50%ぐらいはブラウザでデザインを作っていくこと(参考:デザインニング・イン・ ブラウザ)もやれるようにしたほうが、スムーズに最終のアウトプットまで持っていけるのではないかなと思ったりもしています。

以下、セミナー中のメモです。恭久さんのスライドシェアにもスライドがあがっています。

メモ

PCサイトでプロトタイプがそこまで必要なかった理由

  • 予測がしやすい利用者環境+ 共有しているノウハウが多い
  • スクリーンサイズが大きい
  • キーボードとマウスによるインプット

わざわざプロトタイプを作ってやるまでもなかった

しかしスマートフォンの登場で変わってきた

  • 利用環境が人によって大幅に違う
  • まだ新しい分野→PhotoshopやFireworksで作っても伝わらない
  • スクリーンが小さい→今まで以上に捨てなければならない、思い切りが必要
  • 指をつかったインタラクション

では、ワイヤーフレームではだめか?

  • Yesであり、No
  • 静的でどう動くかわからない
  • 線ではなく点になりがち→フローがみえない、利用シーンが見えにくい
  • 完成品の設計図と見られることも→ワイヤーフレームに色を付ければOKとみられてしまう(制作者、クライアントともに)

プロトタイピング

  • 見て触れることができる
  • 問題定義や、解決への糸口
  • 全体を見渡して考慮できる
  • デザインプロセスのオープン化

位置づけ

(抽象的) アイデア ↓ 文章 ↓ カンプ/モック ↓ プロトタイプ ↓ ビデオ (具体的)

プロトタイプの代表例

  • プレゼンツール
  • Flash、Flex
  • HTML

ペーパープロトタイピングの目的

1)アイデアの共有 2)簡易ユーザビリティテスト

ペーパープロトタイピングのメリット

  • 様々な人が参加できる
  • 特別な機材がなくても始めることができる
  • 専門知識を必要としない
  • コストがかからない
  • 作った即時に評価ができる
  • 無駄のない資料制作につながる

ペーパープロトタイピングのデメリット

  • インタラクションが分かり難い
  • リモートでの共有ができない
  • ビジュアルの影響を評価できない

デメリット、メリットをきちんと理解して使う。 目的をしっかり持つ。目的にあったツールを選ぶ。

ペーパープロトタイピングのTool

  • 白紙+ テンプレート紙
  • ウィジェット+ マグネット
  • Post-it ノート
  • 鉛筆+ ペン
  • テープ+ のり

注意点

  • 見た目ではなく全体の流れ
  • 取捨選択+ プライオリティを決める
  • UIとコンテンツのバランス
  • タッチとジェスチャーを活用(全部GUIにする必要もない)

一番大事なのは、 + 取捨選択+ プライオリティを決める

捨てる例

AmazonのPCサイトとモバイルサイト

捨てるためには

  • 最も重要なタスクは何かを検討
  • タスクを補助する要素を残す→それ以外は捨てる
  • 利用シナリオを想定
  • 個々の見た目ではなく利用フローを考慮

Amazonを見ると

  • 最も重要なタスク→購入!
  • タスクを補助する要素→カスタムレビュー、検索間違いからか、似たもの
  • 利用シナリオ
  • 利用フローを考慮→Amazonのモバイルは、すぐ買うシナリオを想定している

カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。