第57回HTML5とか勉強会 －UI/UX特集－ に参加しました！
表題の勉強会に参加してきました！
最初の2つは「チームで作る」とか「組織を作る」とかそういうお話でした。 良い仲間を作るってのは大変だけど大事だなぁというお話です。
最後のカヤックの方のお話では「ペライチサイトの UX」がおもしろかったです。
テーマ
チームで作る UI デザイン - Goodpatch, Inc.
チームで UI デザインを行うにあたって、以下の二つを大事にすると良いというのが、多くの手法での共通認識。
- コラボレーション
- プロトタイピング
これをチームに入れるための取り組みについて話す。
マシュマロチャレンジ
- チームビルビルディングの手法
- TED でも紹介されていた手法
やり方
- マスキングテープとパスタを使って、自立式のタワーを作る。
- 最後にタワーの1番上にマシュマロを乗せる
- 制限時間は18分
- 一番高く組めたチームが優勝
基本的に、子供の方がうまくいくことが多い。
大人は議論をしてしまい（誰が主導権を握るかとか）、作り始めに非常に時間がかかる。
子供たちはとにかく触ってみて、パスタを最初に折る。すると、パスタの強度がわかる。 また、隣でやってる様子をみて、パスタの折れない方法を考えたりする。 子供たち小さな失敗を繰り返し、最終的には大人より高いタワーを作ってしまうことが多い。
コラボレーションとプロトタイピング（小さな失敗の繰り返し）の重要性を学ぶことができる。
みんなが参加できる環境づくり
- チームメンバーがコラボレーションとプロトタイピングの重要を理解したらこれを行う
- 多くのことを可視化し、意見の出しやすい環境を作ることが重要になる
取り組んでみたこと
- カスタマージャーニーマップを4コマ漫画で作ってみる
- 画面はいきなり作らずにまずは言葉だけで整理する
- UI Flows というのを最初に書いてみると良い
- ユーザーが見るもの / ユーザーがすること -> ユーザが次に見るもの / ユーザーが次にすること
- 矢印ではユーザーがどういう行動をとるかを考えて条件分岐する
- 目的は「要件の可視化」「情報共有」
Prott
- Gootpatch が開発しているプロトタイピングツール
- 去年の10月に正式版がリリース
- Web と iOS に対応 (Android開発臭)
- 大まかな構成は Rails + AngularJS + MongoDB
特徴
- 機能よりも使いやすさ重視
- カジュアルにプロトタイピングが導入可能
- iPhone の実機でもプロトタイピングを表示可能
まとめ
- いろんなツールや手法があるけど、まずはやってみることが大事
- 最初から画面数が多いプロトタイプは大変だが、ガイドラインやランディングページなど簡単なところから導入してみると良い
- 数枚のページからプロトタイプを作ってみると良い
- プロトタイプの目的は「フィードバック」をもらうこと
- UI をチームに共有しやすい環境を作ることが大切
0からの UX デザイン - NTT コミュニケーションズ
UX デザインの重要性を共有するために、UX Design Studio という部署を4年前に立ち上げた。
- 0から、UX デザインを学ぶ
- 0から、UX デザインの組織を作る
2つの話を準備したが、本日は「0から、UX デザインの組織を作る」について発表する。
はじまり
何か立ち上げようとして、色々悩んでた時に以下の本に出会った。
- ペルソナ作って、それからどうするの？
- デザイン思考の道具箱
結果、「人間中心設計・デザイン思考」でやってみようと決意。
転機
- 社内の UI を改善しよう！というテーマが部課長会的なので決定
- いきなり、大きな開発や機能検討は一緒にやってくれない
- 全部準備するので、ちょっとテストさせてください！とアポを取る
- ユーザビリティテストの様子をビデオに撮って、現実を伝える！
社内の問題
- 会社にデザイナーの居場所がない
- 社内でキャリアパスが存在しない
- みんな辞めていってしまう
新しい職種を作るには「業務」と「制度」を両方揃えないと人は出て行ってしまう。
直近の活動
- 鶴の一声「全社 UX を向上させない」と凄い人がいった
- 「UX デザイン = 価値がある」という認識を早期に作る必要がある
まとめ
組織づくりは難しい。色々大事なことがある。
- 組織 = 仕事 + 制度 + 人
- 耳を傾けてくれるトップを見つける
- なかまだいじ！なかまたいせつ！
カヤック HTML ファイ部の UI・UX - 面白法人カヤック
- 2011/10/04 HTML ファイ部 設立
- HTML5 (HTML・CSS・JavaScript)を扱う専門部署
HTML5 バブルの崩壊
- HTML5 は Web をアプリにする過程
- ネイティブアプリでも良いならそれで作れば良い
現在
変わらないこと
- 最新の技術を駆使した Web サイト実装
変わったこと
ペライチサイトの UI/UX
- UI/UX はスマホアプリや Web サービスの印象が強いかもしれない
- ペライチサイトでは「一度しかこないユーザーをどうやって捕まえるか」が大事
- つい押したくなるようなボタンを実装する
- つい何回か動かしたくなるような面白い動作
シェアしたくなる UX
- シェアしたくなる UX を作るのは非常に大変
- 新サービスを1つ作るくらいの気持ち
- その一発でシェアされるくらいの体験を作る
- 一言でシェアできる体験か、すぐ再現できる体験かも重要
- 例「トップに戻るって押してみて！」「TOPに戻るがヤバイ」
技術メモ
感想
フロントエンドとか UI/UX とかの話って普段あまり関わっていないのでとても楽しめた。
チームで作る UI デザイン - Goodpatch, Inc.
- マシュマロチャレンジっぽいことを某U社での新人研修でそういえばやった
- 新しい何か導入するには「課題として認識させること」や「効果を実感させること」がやっぱり大事
0からの UX デザイン - NTT コミュニケーションズ
- 大企業の政治……辛い話だった
- 大企業での政治的問題のクリアを着実に進めてるの超凄い
- 確実に自分だったら辞めてる（というか辞めた）
- 組織づくりって重要だけど本当に大変だよね！
- なかまだいじ！なかまたいせつ！（重要なので2回）
カヤック HTML ファイ部の UI・UX - 面白法人カヤック
- 当然のことだけど場面によって求められるものは違う
- そのサイトで求められる UX は何かを考えないといけない
- 超動く超凄い動くサイト楽しすぎる
フロントエンドの荒野に降り立つ日が迫ってきているな……！
