読者です 読者をやめる 読者になる 読者になる

雀巽の日記帳

雀巽が綴る日常の記録

第57回HTML5とか勉強会 -UI/UX特集- に参加しました!

表題の勉強会に参加してきました!

最初の2つは「チームで作る」とか「組織を作る」とかそういうお話でした。 良い仲間を作るってのは大変だけど大事だなぁというお話です。

最後のカヤックの方のお話では「ペライチサイトの UX」がおもしろかったです。

テーマ

  • チームで作る UI デザイン - Goodpatch, Inc.
  • 0からの UX デザイン - NTT コミュニケーションズ
  • カヤック HTML ファイ部の UI・UX - 面白法人カヤック

チームで作る UI デザイン - Goodpatch, Inc.

チームで UI デザインを行うにあたって、以下の二つを大事にすると良いというのが、多くの手法での共通認識。

  • コラボレーション
  • プロトタイピング

これをチームに入れるための取り組みについて話す。

マシュマロチャレンジ

  • チームビルビルディングの手法
  • TED でも紹介されていた手法

やり方

  1. マスキングテープとパスタを使って、自立式のタワーを作る。
  2. 最後にタワーの1番上にマシュマロを乗せる
  3. 制限時間は18分
  4. 一番高く組めたチームが優勝

基本的に、子供の方がうまくいくことが多い。

大人は議論をしてしまい(誰が主導権を握るかとか)、作り始めに非常に時間がかかる。

子供たちはとにかく触ってみて、パスタを最初に折る。すると、パスタの強度がわかる。 また、隣でやってる様子をみて、パスタの折れない方法を考えたりする。 子供たち小さな失敗を繰り返し、最終的には大人より高いタワーを作ってしまうことが多い。

コラボレーションとプロトタイピング(小さな失敗の繰り返し)の重要性を学ぶことができる。

みんなが参加できる環境づくり

  • チームメンバーがコラボレーションとプロトタイピングの重要を理解したらこれを行う
  • 多くのことを可視化し、意見の出しやすい環境を作ることが重要になる

取り組んでみたこと

  • カスタマージャーニーマップを4コマ漫画で作ってみる
  • 画面はいきなり作らずにまずは言葉だけで整理する
    • UI Flows というのを最初に書いてみると良い
    • ユーザーが見るもの / ユーザーがすること -> ユーザが次に見るもの / ユーザーが次にすること
    • 矢印ではユーザーがどういう行動をとるかを考えて条件分岐する
    • 目的は「要件の可視化」「情報共有」

Prott

  • Gootpatch が開発しているプロトタイピングツール
  • 去年の10月に正式版がリリース
  • Web と iOS に対応 (Android開発臭)
  • 大まかな構成は Rails + AngularJS + MongoDB

特徴

  • 機能よりも使いやすさ重視
  • カジュアルにプロトタイピングが導入可能
  • iPhone の実機でもプロトタイピングを表示可能

まとめ

  • いろんなツールや手法があるけど、まずはやってみることが大事
  • 最初から画面数が多いプロトタイプは大変だが、ガイドラインやランディングページなど簡単なところから導入してみると良い
  • 数枚のページからプロトタイプを作ってみると良い
  • プロトタイプの目的は「フィードバック」をもらうこと
  • UI をチームに共有しやすい環境を作ることが大切

0からの UX デザイン - NTT コミュニケーションズ

UX デザインの重要性を共有するために、UX Design Studio という部署を4年前に立ち上げた。

  1. 0から、UX デザインを学ぶ
  2. 0から、UX デザインの組織を作る

2つの話を準備したが、本日は「0から、UX デザインの組織を作る」について発表する。

はじまり

何か立ち上げようとして、色々悩んでた時に以下の本に出会った。

  • ペルソナ作って、それからどうするの?
  • デザイン思考の道具箱

結果、「人間中心設計・デザイン思考」でやってみようと決意。

転機

  • 社内の UI を改善しよう!というテーマが部課長会的なので決定
  • いきなり、大きな開発や機能検討は一緒にやってくれない
    • 全部準備するので、ちょっとテストさせてください!とアポを取る
    • ユーザビリティテストの様子をビデオに撮って、現実を伝える!

社内の問題

  • 会社にデザイナーの居場所がない
  • 社内でキャリアパスが存在しない
  • みんな辞めていってしまう

新しい職種を作るには「業務」と「制度」を両方揃えないと人は出て行ってしまう。

直近の活動

  • 鶴の一声「全社 UX を向上させない」と凄い人がいった
  • 「UX デザイン = 価値がある」という認識を早期に作る必要がある

まとめ

組織づくりは難しい。色々大事なことがある。

  • 組織 = 仕事 + 制度 + 人
  • 耳を傾けてくれるトップを見つける
  • なかまだいじ!なかまたいせつ!

カヤック HTML ファイ部の UI・UX - 面白法人カヤック

  • 2011/10/04 HTML ファイ部 設立
  • HTML5 (HTML・CSSJavaScript)を扱う専門部署

HTML5 バブルの崩壊

  • HTML5 は Web をアプリにする過程
  • ネイティブアプリでも良いならそれで作れば良い

現在

変わらないこと

  • 最新の技術を駆使した Web サイト実装

変わったこと

  • マークアップに限らないよりハイブリットな知識を持つメンバーが増えている
    • HTML5 を軸に色々なことをする部署になってきている
  • UI/UX に関する考え方を持っていることもより重要になっている

ペライチサイトの UI/UX

  • UI/UX はスマホアプリや Web サービスの印象が強いかもしれない
  • ペライチサイトでは「一度しかこないユーザーをどうやって捕まえるか」が大事
    • つい押したくなるようなボタンを実装する
    • つい何回か動かしたくなるような面白い動作

シェアしたくなる UX

  • シェアしたくなる UX を作るのは非常に大変
    • 新サービスを1つ作るくらいの気持ち
  • その一発でシェアされるくらいの体験を作る
  • 一言でシェアできる体験か、すぐ再現できる体験かも重要
    • 例「トップに戻るって押してみて!」「TOPに戻るがヤバイ」

技術メモ

  • CSS アニメーション
  • 連番 PNG
  • CSS Transition

感想

フロントエンドとか UI/UX とかの話って普段あまり関わっていないのでとても楽しめた。

チームで作る UI デザイン - Goodpatch, Inc.

  • マシュマロチャレンジっぽいことを某U社での新人研修でそういえばやった
  • 新しい何か導入するには「課題として認識させること」や「効果を実感させること」がやっぱり大事

0からの UX デザイン - NTT コミュニケーションズ

  • 大企業の政治……辛い話だった
  • 大企業での政治的問題のクリアを着実に進めてるの超凄い
  • 確実に自分だったら辞めてる(というか辞めた)
  • 組織づくりって重要だけど本当に大変だよね!
  • なかまだいじ!なかまたいせつ!(重要なので2回)

カヤック HTML ファイ部の UI・UX - 面白法人カヤック

  • 当然のことだけど場面によって求められるものは違う
    • そのサイトで求められる UX は何かを考えないといけない
  • 超動く超凄い動くサイト楽しすぎる

フロントエンドの荒野に降り立つ日が迫ってきているな……!