ワイヤーフレームをつくるとき、ひとりでPCに向かってツールを使って黙々と手を動かす、今まではそんな制作スタイルが主流でした。しかし、今新しい手法に注目が集まっています。それが「ペーパープロトタイピング」。PCを使わず、紙とはさみ、テープなどと手を使って作る方法です。ペーパープロトタイプが活躍するタイミングは、デザイン開始前のWebサイトのレイアウトを決める段階。画面構成、メニューやボタンの配置など頭の中のイメージをすばやく具現化・共有したいときに有効な手段です。

11月9日に開催されたOpenCU烏丸「Web制作の新スタイトル・ペーパープロトタイピングを学ぶ」のテーマは「PCサイトに合わせたスマートフォンサイトをつくる」。スマホを触りながらイメージをスピーディに具現化していくペーパープロトタイピングワークショップの様子をフォトレポートします。

「Learn」「Make」「Share」で考えるペーパープロトタイピング

今回のワークショップは「Learn」「Make」「Share」の3つのプログラム構成。4つのチームに別れ自己紹介から始まりました。プログラマーや学生、デザイナー、ディレクター、Web担など様々な人が参加、みな注目のペーパープロトタイピングを経験できるチャンスとあって、メモを片手に真剣な目つきです。

①Learn:リファラーサイトを模写して気づきを得る

一つ目のワークは秀逸なスマホサイトStarbucks Coffeeを模写することから始まりました。ワイヤーフレーム模写とは講師入谷がloftwork.jpのコラムでも紹介しているように、様々なサイトの型を学ぶ事ができるディレクターやデザイナーにオススメしたいワイヤーフレームの勉強法です。

それぞれ描いたものをチームメンバーで見せ合いながら、PCからスマホサイトへ移行した事で追加されたモノと捨てられたモノなど、模写して得られた気づきをブレストし、スマートフォンサイトの型を学びます。

②Make:DESIGNEAST03をペーパープロトでスマホ化する

二つ目のワークはいよいよペーパープロトタイピングの実践。お題は関西最大のアートイベント「DESIGNEAST03」。情報量が多く画像や動画も多いサイトはスマホ化するとどうなるのか、プリントアウトされたTOPページとプログラムページを切り貼りしながら、スマホサイトに掲載する情報をチームでアイデアを出し合いながら進めます。

先に必要な要素をポストイットで書き出して並べるチームや、ターゲットを定義しそれに合わせて情報を精査するチーム、スマホ独特のタップやスライドの動きを、紙を重ねて表現するチームなど見た目も進め方もバラバラです。40分間、あーでもないこーでもないとペーパープロトタイピングの醍醐味である書いては消し、切っては貼りを繰り返し、完成系を目指します。

③Share：各チームの発表。2.5次元ペーパプロトが誕生！？

40分間のワークの後、各チーム完成したペーパープロトタイプの発表です。他のチームからは質問や意見などが積極的に飛び出し、ディスカッションは大盛り上がり。アコーディオンメニューを蛇腹型に立体的につくる2.5次元ペーパープロタイプも登場しました。

4チームの発表後、最後に講師入谷よりスマホデザイン的な着眼点とワークプロセス的な着眼点について講評がありました。その中で特に印象に残ったのは「スピード感」と「きれいにつくろうとしないこと」。紙だから何度も試行錯誤を繰り返す事が出来ます。ペーパープロトタイピングは、時間短縮、イメージの可視化、スムーズな共有など、Web制作をスムーズに進めるメリットがたくさんあります。

参加者からは「手動だから抜け漏れや意思の齟齬を解消できる、手戻りが減りそう」「複数人で考えると刺激がもらえてとても楽しかった」「あっという間の２時間でした！ペーパープロトタイピングの大切さを実感できた」など嬉しい感想もいただきました。これからのWeb制作、ペーパープロトタイピングが欠かせなくなりそうだと感じた２時間でした。

開催概要

開催日：　2012年11月9日（金）　19:00 – 21:00　（18:30開場）
場所：　COCON KARASUMA4F ロフトワーク烏丸 map
参加定員：　20人
参加資格：　特になし
主催：　ロフトワーク烏丸
講師：入谷 聡（ロフトワークディレクター）

●フォトアルバム（Flickr)

●参加者ノート

▲図解できれいにまとめていただきました。クリックで拡大します。

●参加者レポート

ペーパープロトタイピングを学ぶ＠LOFTWORK　(ロッケンロール的　目指せ！Mdes or MBA奮闘記)