はじめに。
昨年末、2020年最後のゆるはち、第26回のレポです。
手始めにちょっとだけ昨年を思い返してみると、それはもうコロナ一色…でもなく、個人的に一番印象に残っていることは2月にメンバー全員で行った熱海での合宿でした。
そこでの話し合いの中で新しいMVV(ミッション・ビジョン・バリュー)が生まれ、新MVVを起点にコーポレートサイトを全面リニューアルして、自社プロダクト Stockr の開発を行い、リリースして今に至ります。
メンバーの大多数がエンジニアだったビルディットも、デザイナーが増えたことでそれぞれの文化が融け合い、組織が変化した一年でした。
それを反映してのことかどうか、2020年最後のゆるはちは「プロトタイプ」についてでした。 当初はデザイン・エンジニアリングの両面でトークがあるといいねと話していましたが、実際はトーク４枠すべてデザイナーさんのトークで埋まりました！ それはそれで、嬉しいです…！
ゆるはちの紹介
ゆるはち.itでは、毎月最終水曜日に月ごとにテーマを決めてゆる〜い雰囲気で勉強会を実施しています。コミュニティとしての在り方を大事にしており、コロナ禍以前は八王子という都心から離れた場所でオフラインで開催していました。昨年の4月からはコミュニティ重視はそのままにオンラインで続けています。 「気楽な雰囲気で、新しいITの話をしたい」とか、「ガッツリした講義のようなイベントはちょっと……」という人にオススメの勉強会です。
毎月登壇者も募集していますし、「次回のテーマはデザインについてが良い！」というような声があれば、沿ったテーマで開催します。タイトルにもある通り、とにかく「ゆるく、気軽に発表できる場をつくろう」というコンセプトです。 ご興味がある方はぜひ参加してみてください。直接声をかけていただいても嬉しいです！
ゆるはち26回「プロトタイプ」レポ
昨今、サービスやアプリの開発において、早い段階で関係者間でのイメージ共有ができたり、リスクを最小限に回避するための手段として、プロトタイピングの重要度が増しています。 また開発チームにとってだけでなく、プロトタイプを用いて十分に検証を重ねられたプロダクトはユーザーにとっても大きな利があることと思います。
そんなプロトタイプは、今やサービス開発のあらゆるフェーズで活用されているようです。 勉強会では、主に以下のような内容の発表がありました。
- そもそもプロトタイプとは。プロトタイプに重要なデザインレイアウトの基本
- 実際の新規事業開発でのプロトタイピングの実践例
- プロトタイピングを使った非同期レビューのプロセス
- 動かしながら検証できるプロトタイプ開発をした話
それではトークごとにご紹介します。 社内メンバーの発表に関しては本人がレポを書きました。
トーク１：プロトタイプに必要なデザインレイアウトの考え方「整」について
弊社メンバーとも顔なじみで、八王子でデザイン制作事業・デザイナー育成事業の会社を経営されていらっしゃるマルチデザイナー 濱野さん。
ゆるはちにも何度もご参加くださっているほか、ご自身でも西東京Web勉強会というイベントを運営されていらっしゃいます。東京工科大学での講師活動もされているだけあって、洗練された内容でした。
本題のトークではまず、プロトタイプを作る意義についてお話がありました。
Webデザインでは、実際に近い大きさで確認できるもののことをプロトタイプと呼びます。プロトタイプをつくることで、顧客に完成イメージを持ってもらい、手戻りやトラブルを減らすことができます。 また、テストユーザーからフィードバックを得ることでサービスの質を高めたり、段階的に仕様を固めて開発できるといったメリットもあります。双方の信頼感やモチベーション維持、コミュニケーションコスト削減のためにも、プロトタイプは有用とのことでした。
つぎに、レイアウトの基本原則「整列」「整理」「整頓」についての解説がありました。
なかでも特に印象深かったのは、人には一瞬で覚えられる数（マジックナンバー）が決まっており、Webデザインでもこれを意識して情報を整理するとよいというお話でした。他にもアイトラッキングの分析から、Webサイトにおける要素の配列は「F型」に整頓するとよいといった話もありました。
スライド自体も「整列」「整理」「整頓」の原則に則ってデザインされており、今すぐ実践したくなる発表でした。
濱野さんが代表をつとめられる株式会社IMAKEさん twitter.com
トーク２：新規事業におけるUIプロトタイピングの実践例
デザイナーの akinen です。 弊社の新規事業 Stockr を例に、UIプロトタイピングの実践例をご紹介しました。
デザイナーの脳内に動作イメージがあったとしても、画面を並べただけでは相手に伝わらないことも多々あります。
そこでStockrの開発では、Figmaでプロトタイプを作成し、URLをSlackに共有して触ってもらうことで、実装前に動作を検証できるようにしています。
発表の後半では、現在リリース済みの「複数選択機能」を例に、Figmaでのプロトタイピングを実演しました。長押しすることで投稿を選択でき、押した順に番号がつくことや、Modalが下から出てくるといったアニメーションを、実際に作成しました。
矢印をドラッグして連結させるだけで、意外と簡単につくれるということがお伝えできたのではないかと思います。
トーク３：プロトタイピングを使った非同期レビューをやってみた結果
おなじみ弊社デザイン顧問のイシジマさんは、ゆるはちがちょうど育児で一番忙しい時間にかかるため、事前に発表を録画してもらい、動画を流す形での発表となりました。
オンラインでのゆるはちでは初めての試みだったので、リアクションのやりとりができない分どうかな…？と思っていましたが、さすがトークのうまさや内容のキレもあって全く遜色ない発表でした。 ゆるはちの新しい可能性を垣間見た気がします。
新しいサービスの開発には必要不可欠なプロトタイプレビュー。良いサービスをつくるには多くの人に何度も触ってもらい検証を繰り返したい……けれども日々だれもが忙しい中で複数人数の時間を何度も拘束するわけにもいかない。
そんな課題に対して、対面ではなく非対面レビューにすれば自動化できる部分が増え、また多くの「調整」という要素が不要になるなど、利点が多い。
とはいえ、対面でやることのメリットもあるので、それぞれの適した使いどころ・難しいところをしっかり理解して、実りあるプロトタイプレビューをやりましょう。
というお話でした。
弊社では最近、Stockrのユーザーインタビューに取り組んでいるので、参考になったメンバーが多かったのではと思います。
トーク４：夫婦で作る、Angularを使ったプロトタイピング
デザイナーの id:uniq です。
こういうアプリほしいね、こういうUIどうなんだろう？というお話は夫婦のなかでよく出てきまして、実際コード書いて検証しちゃおう！というプロトタイピングのお話をしました。
ログインや新規登録など関係ない機能は実装せずに、いち機能だけを実装します。 「考えたことを書く、それが返ってくる、それを利用して書く」といった「動き」の検証プロトタイピングには、簡単にプロジェクト作成ができる Angular などを使う手もありなのではー！というのが伝えられたかと思います。 （また夫婦でモノづくりも楽しいよ〜というのも伝えられたかと思いますｗ）
おわりに。
今回は初めてのご参加者もいらっしゃったのですが、チャット欄の反応や懇親の部でのお話はとても盛況でした。ゆるはち勉強会は、今後も新たな知見をゆるく共有しあえる場として、開催していく予定です。
次回、(もう今週水曜1/27に迫りましたが💦)のテーマは「PHP」 です。
初参加の方も、そうでない方も是非、ゆるくご参加いただければと思います。ご自宅から、軽食やお飲み物を片手にご参加ください。
次回もおたのしみに。
