UI/UX観点で知っておくべきプロトタイピングの極意〜CSS Nite〜
こんにちは。デザイナーの飯山です。日に日に暖かくなり桜もほぼ満開となると花見がしたくなりますね。
先日CSS Nite LP, Disk 33「UI/UX」が開催され、初めてのCSS Niteに参加してきました。今回は、「UI/UX観点で知っておくべきプロトタイピングの極意」と題して講演で印象に残ったフレーズをピックアップしつつお伝えしたいと思います。
セッション概要
UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）をテーマに以下のセッションが行われました。何たる豪華な顔ぶれ...。
- ブリッジビルダー (Bridge Builder)
坂本 貴史 ネットイヤーグループ株式会社 - UIデザインのパターン化と効果的な実践方法
池田 拓司 クックパッド株式会社 - アプリケーションのイディオムデザイン
上野 学 ソシオメディア株式会社 - 人間だからこそできる、気配りデザイン
〜ユーザーの負担を最小限にするインターフェイスとは〜
秋葉 ちひろ 株式会社ツクロア - 実例に学ぶ、"失敗しない"UIデザインのコツ
新免 孝紀 ChatWork株式会社 - ディレクター･デザイナーのためのプロトタイプ制作とシナリオ作り
土屋 尚史 株式会社グッドパッチ - 問題解決のためのプロトタイピング
深津 貴之 THE GUILD Inc. / fladdict
印象に残ったフレーズをピックアップしてみました。
シナップでは坂本さんの著書「IAシンキング Web制作者・担当者のためのIA思考術」を用いて社内勉強会をしていたこともあり、目の前で話を聴けることも楽しみの１つでした。
坂本さんのセッションでは、ユーザーとコンテンツの間などで「お見合い」になりがちなさまざまな間を取り持つ役割があり、その関係性を構築することをコンテンツビルダーと定義し、これらの関係性を元にして話を展開されてました。
「デザインは仮説である。」坂本さんのプロトタイピングの説明の中で心に残ったフレーズです。表層のデザインフェーズから深層の戦略へ向かう逆行程で考えて情報の目的に沿ったデザインをするという話を聴いて、デザインの本質はここにあるのだと感じました。
クックパッドの池田さんのセッションでは、UIデザインのパターン化の話がとても具体的でした。
パターン化のポイントとして「素早くプロトタイピングすること」「メンバー間のコミュニケーションツールになり得ること」などを挙げていて、Android・iOS・Webというプラットフォームごとにガイドラインは異なり、最適なUIも異なるという話はプロタイプ作成時の考え方としてとても勉強になりました。
こうしたことからも、クックパッドデザイン部ではiOS Human guidelineの様なガイドラインは必読だそうです。
チャットワークのデザインリニューアル時の話をされた新免さんは、共感する点が多かったです。
シナップでもチャットワークはコミュニケーションツールとして利用していて、「オンライン・オフライン状態がわかる機能があったらいいのに。」みたいな話も日頃出て来ます。セッションの中ではユーザーからよくある要望として既読判別機能の話がありました。「ビジネスシーンを楽々に」というサービスコンセプトに反して、プレッシャーやストレスを生む原因にもなりかねない点と、追加した機能を後々削除すると不満に繋がりやすいという点から、このような機能の実現は見送られているそうです。
また、UIパーツのガイドライン化の３つのメリットは「一貫性のあるUIデザインの提供・ユーザビリティの向上・開発効率の向上」だという話がありました。その中で「ガイドラインは一度作って終わりではない」というフレーズがあり、坂本さんの「デザインは仮説である」という話との繋がりを感じました。
当日、社員の結婚式終えて駆けつけたというグッドパッチの土屋さんは、プロトタイピングの目的を解説したり、ツールをたくさん紹介されてました。
プロトタイピングの目的
- アイデアを検討するための手段
- ニーズがあるか
- 技術的な要件定義
- 問題点野洗い出し
- ユーザーから適切なフィードバック
- チーム内での共有
また、フェーズごとにプロトタイピングの方法を使い分けましょうという話も印象的でした。サービス設計フェーズではペーパープロトタイピング、要件定義フェーズではワイヤーフレームモック、ビジュアルデザインフェーズではデザインプロトタイプという具合です。
土屋さんが紹介されたプロトタイピングツールの一部はこちら。
- POP https://popapp.in/
紙に書いたペーパープロトタイピング画像に画面遷移のリンクを付けられるiPhoneアプリ。 - Flinto https://www.flinto.com/
モックアップのURLが生成され、iOS上で動作確認ができるツール。 - Invision http://www.invisionapp.com/
画像のドラッグ＆ドロップで簡単にプロトタイプ作成できるツール。 - Prott https://prottapp.com/
グッドパッチ開発のモバイルアプリ向けのラピッドプロトタイピング用ツール。
ユーザーの一番最初の体験を通して優良顧客にさせるプロセス「User Onboarding」の話や、動的なアニメーションのプロトタイプの話なども興味深かったのですが、フラットデザインの一般化もあって改めてインタラクション部分のデザインの重要性を感じました。
トリを飾った深津さんのセッションは、聴く側の視点に立った非常に理解しやすいスライドと話し方でした。
他の講演者に比べると、紙とペンなどをアナログツールを使ったペーパープロトタイピングを推奨されてる印象でした。その理由も深津さんの印象に残ったフレーズが全てを意味してると思います。
他業界で用いられることの多いフィッシュボーン図による問題解決法や、ポストイットを有効活用したペーパープロトタイピングなど、モニター上でのビジュアルデザインプロトタイピングよりも前の段階で効率的な方法を見出だす発想はとても新鮮でした。
モーション系のプロトタイプの作成で最強のツールはkeynoteという話など、すぐにでも実践できるtipsが多く楽しかったです。
まだ間に合う！「UI/UX」再演版が開催予定。
今回の「UI/UX」編は定員240名だったのですが会場は満席状態で、参加希望者多数だったため「UI/UX」再演版が4月26日に開催されます。UIやUX、プロトタイピングなどにご興味の方は是非参加をされてみてはいかがでしょうか。
