#この記事について
2016年 Schoo Advent Calendar の22日目の記事です。
はじめまして、SchooでデザイナーをしているKといいます。デザイナー業のかたわら二児の父と土日は厨房スタッフ（家庭内）も兼務しています。
今日はSchooのUIを作る上で、すっかり欠かすことのできない存在になった「プロトタイピング」について、わちゃわちゃ書いてみました。
デザイナーの方は「とっくにそんなの知ってるよ」という話が多いと思いますので、どちらかというとノンデザイナーの方に向けて書いています。
#プロトタイピングってなに？
簡単に言うと、製品を仕上げる前の「試作品」をつくる行為を総称してプロトタイピングと呼んでいます。Webとかアプリとかって作りこんでしまうと、修正のコストがバカにならないので、先に試作品を作っておけば、その段階で簡単に修正しながら進められるので、ロスが減りとっても合理的なんです。
一言にプロトタイプといっても色んな種類があるのをご存知でしょうか。
我々WebやUIのデザインに携わる者の文脈でいうと、おおまかに下記のような感じに分けられるようです。
（デザイン思考のカテゴライズではもっと細かく分けられるそうなのですが、ややこしいので割愛します・・・）
- 概念的プロトタイプ（ディレクトリ構成図など情報設計として必要になるやつ）
- インタラクション型プロトタイプ（SketchやinVisionなどのソフトで動きをつけてつくるやつ）
- ペーパープロトタイプ（紙とペンでつくるやつ）
- HTMLプロトタイプ（HTMLやCSS、Javascriptなどを使ってコード上でつくるやつ）
#おすすめはペーパープロトタイピング
見出しにおすすめと書いておきながら、実は僕ペーパープロトタイピングが嫌いなんです。いや、嫌いというか苦手。なんでかっていうと、デザイナーとしてあるまじき事なのかもしれないのですが、字を書く事とハンドライティングの絵がとても苦手なんです（笑）。その代わりIllustratorのベジェとかはすごい得意なのですが・・・
そんなペーパープロト嫌いな僕が、なぜこれを強く薦めるかというのを下にまとめてみました。
#ペーパープロトタイピングの何がいいのか
①ペンと紙さえあればできる
やはり、これが何よりおすすめしたい理由になるのですが、とにかく紙とペンさえあればいつでもどこででも始められること。プロトタイピングはいかに高速に手軽に出来るかが肝だったりするので、どの手法よりも一番手っ取り早くできる点は最強です。
②知識もいらないし、下手か上手いかは関係ない
僕がコンプレックスに感じているように絵が下手だと出来ないんじゃないかとか、専門的な知識が必要なんじゃないかとか、実際のところそのどちらもほとんど必要ありません。プロトタイプは見た目の美しさやデザインメソッドを確認するものではないので。見た目に関しては気になるなら定規とか使ってもいいんですし。多少雑でもいいから形振りかまわずスピーディに書けることが重要だったりします。
③手書きは脳の感性や記憶を司る部分を刺激する（らしい）
例えばパソコンで打った文字ってすぐに忘れちゃいませんか？不思議ですが、実際に手で書いた漢字とか覚えやすかったりしますよね。脳科学的にも手書きの学習効果の高さや脳へ与える刺激は実証されているそうです。
参考：あなどれない「手書き」の学習効果
④だいたいの人が経験者
前述のように僕は子供が二人いまして、ある日、1歳半の次男が塗り絵をしてるのを見て「よく考えてみると、この行為ってプロトタイピングだよな」と、ふと思ったんです。1歳半の子供にとってアンパンマンは別に鼻は赤くなくてもいいし顔色は小麦色じゃなくてもよくて、青く塗るとバイキンマンに見えたり、赤く塗るとドキンちゃんに見えたりと、子供なりの感性の試行錯誤ができる有能なプロトタイピングツールだという事に気付きました。実は僕らは子供の頃から人の似顔絵や東京タワーとか景色の絵を描いたり、パラパラ漫画を作ったり、形は違えど紙を使って色々試作するペーパープロト的な行為はすでに触れあってきているんです。
⑤誰でもできる
上４つの理由でほとんど言っていますが、ペーパープロトタイピングはデザイナーじゃなくても誰でもできます。デザインはデザイナーだけのものではなく、みんなで取り組めるものという概念を共有できる事は何よりも素敵な事かなと思います。簡単なUIなら1歳半の次男では無理でしょうが、4歳の長男なら全然描ける気がします。
#やり方
準備するもの
- ペン
- 紙（A4）
- ハサミ（あれば）
- 付箋（あれば）
スタンダード編
やり方はほんとにシンプル。A4の紙に実現したいと思う画面を絵に起こすだけです。
アプリの場合はスマホのモックアップ的な画像（画面内は白い状態で）を実寸サイズで紙に印刷しておき、その枠組みの中にUIを描いていくとサイズ感が統一され、さらにリアリティも増していい感じになります。
もしハサミがお手元にあれば、つくった紙のUIを［ナビゲーション］や［検索バー］などのパーツごとにはさみで切って分解します。パーツ素材を出来るだけ増やしていくと、その組み合わせだけでUIを自由に設計できるようになります。
一通り画面が完成したら、付箋を貼ってページ番号を振って順番を整理すれば完成です。
他のメンバーがコメントを書く用に、各画面の脇などに付箋を貼っておくと、コミュニケーションが生まれてなお有意義なものになるかと思います。
文章ではなかなか伝わらない部分もあるので、英語ですがGoogleのラピッド（高速）プロトタイピングの動画が素敵だったので良かったら参考にしてみてください。
Rapid Prototyping 1 of 3: Sketching & Paper Prototyping #marketingdigital #entrepreneurs #google https://t.co/20MsDF7NTy
— Beat Digital (@BeatDigitalMkt) 2016年8月12日
応用編
ProttやPOPなどのプロトタイピングアプリを使えば、作ったペーパープロトタイプをスマホで写真を撮ってアプリに取り込むことができ、そのままアプリ上でページ遷移やインタラクションなどを手軽に設定する事ができます。操作方法を覚える必要がありますが、デザイナーじゃない方でも簡単に操作できるようなつくりになっているアプリが多いので、是非遊ぶ感覚で試してみてください。（もちろんinVisionやAdobeXDなどでも写真を取り込む事は可能です）
###Prott
###POP
#デザインを楽しむ
僕はデザインという行為はもっともっと楽しんですべき行為だと思っています。つまんない顔してつくったプロダクトは恐らく、画面の向こう側の使っている人もつまんなそうな顔をしている可能性が高いでしょう。もちろん多くの人は仕事でデザインをすることがほとんどでしょうから、楽しむことよりも優先しなければいけないことがあるのは承知しています。なので、せめて楽しみながら何かをつくれる機会をもう少し設けるべきだと思っています。
このペーパープロトタイピングは職種の垣根を超えて、みんなでワークショップ的に楽しく行う事がかなりの醍醐味で、楽しくデザインを行うためのブレイクスルーのひとつだと思っています。
ちゃんとした会議で言ったら怒られそうなふざけたアイデアとかも、紙の上でとりあえず一回表現してみるのもいいんじゃないでしょうか？少なくとも言葉で伝えるよりも、あなたが思っている事が伝わりやすくなるはずです。
#デザインをより多くの人に
いまSchooでは組織や社会、世界に向けてデザインの楽しさを一緒に伝えてくれる仲間を探しています！デザイン文化自体をプロトタイピングしていきましょう！
5周年でCIも一新！Schooの全てのデザインを担う デザイナー募集
https://www.wantedly.com/projects/70697