直近で2度ほどLTさせていただく機会に恵まれまして、ここ3年くらいの経験からの、思うところを述べさせていただきました。
今後さらに経験を積んでくことでまた考え方とか変わっていくと思うので、後日の振り返り用としてnoteに書かせていただきます。

（こないだnoteがスライド掲載機能に対応してくれたわけですが... スライドごっそり載せても後でわからなくなりそうなので、一枚ずつ説明添えて書かせてもらいます。）

口頭で述べて15分かかる内容をそのまま書きますので、結構長い記事なります。
ささっと概要知りたい人は貼り付けてあるスライド画像だけ見てください。

デジタルプロダクト開発において、デザインチームと開発（実装）チームが分断されているような状況を想定した内容となっています。デザイナーとエンジニアが1つのチーム内で上手く協業できているような状況に居る方からしたら、「まだそんなこと言ってんの？」と思われるかもしれません。

私はUIデザイナーを称していますが、これまでUIの設計から実装までいろいろやってきたので、デザイナーの割にはコーディングやれる方だと思ってます。

いろいろやってきて、『UIの制作ってこうやったらうまくいくんじゃん？』というのが自分なりに見えて来たので、それを語って、ご覧いただいた方から意見などいただきたいと思っています。

喋ることをざっくり言うと、
「個人的なアプリ開発のなかで、良い具合なUI制作プロセスを実践できた」
「このプロセスが一般的な一般的なデジタルプロダクト開発プロセスの持つ課題を解決できているか、と考察してみた」
「実際にこのプロセスを受託業務で実践してみた」
の3本立てです。

ところで、あらかじめ申しておきますが、このLTの中ではプロトタイピングの話をするのですが、SketchとかXDとかのツールの話はしません。記事タイトルからこの辺の話を期待していた人にはつまらない話かもしれません。

と、ここまで前置きです。

ここから本題です。
まずは、個人的に制作したアプリの紹介をさせてください。

タブレットに手をあてると手形を画面上に描画する、というアプリを作りました。

なんでこんなアプリを作ったか、という話をしますと…。

とある日の友人との会合での雑談レベルの会話が発端です。

小さい子供のいる友人の談なのですが、「子供の成長記録として手形をとっているのだけど、これがすごく大変だ」という話をされていました。
手にインクつけた状態であちこち触ってしまったり、口にいれてしまったり。
お父さんが子供の体を抱えてお母さんが手を色紙に押し当てて… と、なかなか重労働なのだそうです。

で、その友人が「なんでこういうの出来るiPadのアプリないの？出来るはずでしょ？」と言うのですが、まあ、出来るわけねえだろ、と申したわけです。
静電式タッチパネルというのはタッチされた箇所の画面上の座標を取得するものであって、触れたものの形とか大きさとかを検知できるようなものではありませんから。

と、即否定したわけですが、マルチタッチを検知できるタッチパネルなら、タッチ箇所の座標の分布から手の大きさや形を類推して手形を表現できるかもなー、と頭の片隅で思ったわけです。

できるかも、と思ったらやらずにはいられないのがデザイナーの性分というやつで、1時間くらいで超荒いプロトタイプをつくりました。
HTML上にcanvas置いて、JavaScript使ってタッチ位置を取得して、その座標位置周辺を黒く着色するという、それだけのものです。

で、これ、結構なんとかなるんじゃん？と思ってブラウザアプリとして作り始めたわけです。

アプリの目指すところとしては、「手軽に子供の手形をとる」という機能を実現することを目標としてスタートしました。
仕組みとしては、検知されたタッチ座標の分布から指の位置やら手の平の位置やらを類推し、五指と手のひらの画像を表示する、というものです。

単に「手形らしきもの」を表示するだけのプロトタイプは割と簡単にできたのですが、これで幼児の手形をとろうとすると、なかなか上手くいきませんでした。
「手を画面に押し当てて数秒待つ」というだけの操作なのですが、予期しないタイミングや角度で触ったり、バシバシ叩いてしまったり…。

それらを解決するために「手全体で触れるまでは手形を検知させない」という制御や、「ここに手を当ててね」を示すガイド表示をしたり…、いろいろUIをプロトタイプに仕込んでは試すのですが、それでもなかなか思うようにはいきません。

プロトタイプ検証を繰り返していくうちにだんだん上手くいくようになってきたのですが… どうもUIを工夫しても成功率には貢献していないようでした。

なぜ上手くいくようになって来たかというと…

綺麗に手形がとれると、それを見ているお母さんが「わー、やったー！」と喜ぶのですね。
で、子供はそれを学習して、「こうやりゃ喜んでくれんだな」と理解し始めるんですね。

アナログ（インクと色紙）で手形をとる場合だと作業ステップ数が多くて、子供側は「なにをどうすりゃいんだ？」がわからなかったわけですが、「画面に手をあてる」くらいに操作をシンプルにすることで、自分の行動と周囲の反応の因果関係がわかりやすくなったということなのか…？ と推測できます。

と、いろいろ観察したり考えたりしてる中で、このプロダクトを作るにあたっては「楽しい」とか「嬉しい」とかの感性が重要なファクタっぽいな...　というのが見えてきました。

ここまでのプロトタイプ検証を参考に、「手形を取る」という機能実現から、「手形をとることを親子で楽しむ」という体験の実現へと、プロダクトの方向をシフトさせました。

手形の表現を、アナログ感ある可愛らしい表現にしたり、手書きのメッセージを書き込めるようにしたり、複数の手形を重ねられるようにしたり… と、「楽しむ」方向へ振っていきつつ、あまり効果なかったガイド機能なんかは除外していきました。

その後もまあいろいろあったのですが…。どうにかこうにかiOS版、Android版作って、ストア公開に漕ぎ着けました。

（良かったらダウンロードよろしくです！タブレット限定ですが！）

この手形アプリ制作で、プロトタイピングを行うことの大事さを思い切り体感できました。

「手形をとる」という機能にフォーカスしていたのが、「楽しむ」という体験へのフォーカスへとシフトしたあたりなど、印象的なところです。
また、プロトタイプ作ってはこまめに検証することで、作っているものがどんどん良くなっていくのが可視化され、開発作業の推進力が増しました。
そして何より、作ってはユーザの反応をみて成功か失敗か確認する、という作業はとても楽しいです。

ペタログ開発で行なったようなことを業務で行うとしたらどんな形になるか… を考えてみました。

個人開発では私1人（＋ 友人のアシスト）でUIデザインから実装まで行ったわけですが、実際の業務でプロダクト開発に携わる際にはそうもいきません。確実に分業・チームワークが発生します。

そのあたりを加味して図示したのが上のスライドです。

デザインチーム側で「プロトタイプを作っては検証…」 という作業を繰り返し、インタラクションに問題ないと確信できるまで検証をやりきります。
やりきったら、プロトタイプを開発サイド（実装チーム）へと渡します。
開発サイドはプロトタイプが渡ってくるまではバックエンド実装をメインに進め、プロトタイプを受け取った以降はフロントエンド込みのトータルで進めていく、という形です。

ここまで話したところで一つ強調しておきたいのですが、私は「デザイナーもインタラクションを実装できるべきだ」と言いたいわけではないです。

私自身は様々な経緯から実装技術を学び、また実装に関わることが性分に合っていると感じてはいますが、本来デザイナーは五感に訴える体験の実現に注力すべきであり、実装技術の習得や技術情報キャッチアップにエネルギーを注ぎすぎるのは好ましくないです。

デザイナー自身が実装をするのでなく、デザインチーム内にデザイン検証を行うためのエンジニアが居る、という形がベターかなと思っています。

また、インタラクションの検証にあたって、実装は必ずしも必要ではありません。Adobe XDやSketch、Prottといったツールの活用で事足りることは多いですし、ペーパープロトで十分な場合もあります。

と、ここまでで個人制作アプリの話は一旦終わって、次は一般的なUIデザインと実装のプロセスについて考えたいと思います。

（だいぶ長くなってしまったので、記事分けます。）