11月19日 Swap Skills free 14 に参加した

日時：2012年11月19日（月）19:00～20:30
会場：DeNA
関連：Swap Skills free 14 UXのための人間中心設計（HCD）

感想など

「UXについてなんとなく理解する」のゴールは達成できた気がします。
なんとなく持っていたイメージがまちがっていることがわかってよかったです。
例えば、UXはユーザビリティやUI方面のことだと思っていたが、それらは一部であってすべてではないこと。
例えば、UXと一言でいっても分野がたくさんありすぎて、一人ですべてやるものでもなさそうなこと。

まずは、今回できそうだと思ったことを、詳しく調べて実践することと、ワークショップを見つけて参加して体験することでしょうか。

本編

- プロフィール
- 本日のゴール
- 人間中心設計とは？
- ユーザーエクスペリエンス（UX）とは
- ISO9241-210について
- UX白書からの視点
- ユーザーエクスペリエンス実現のためのHCDプロセス
- ユーザーエクスペリエンスを学ぶために。
- まとめ

本日のゴール：UXについてなんとなく理解する

ニックネームを使っている理由：肩書き外し

Human Centerd Design は2種類ある
1.ヨーロッパ「人間工学」
2.アメリカ『誰のためのデザイン』

HCDを「人間中心設計」と訳している理由
- 人間
  - ユーザー：利用者・対象者しか含まない
  - 人間：制作側も含む
- 中心
- 設計
  - デザイン：ビジュアルと設計
  - HCDのDesignは設計に近い

ユーザーエクスペリエンスの例
誕生日プレゼントを贈る

誕生日プレゼントを贈る

- 送る人
  - 何を送ろうか悩む
  - よろこんでもらえるか不安
  - よろこんでもらえてハッピー
- 受けとる人
  - うれしい
- その他の人（店の人、商品の企画者など）
  - ハッピー

”UI/UX”には注意
- UI：インタフェース（モノ）
- UX：体験（プロデューサー的）
- UI ≒ UX
- 例えば、求人でそのような記載がされている場合は、実際は片方だけが求められていることがあるの
  - インタフェースのデザインだけが求められていたり
  - プロデューサー的な役割が求められていたり

UXは多くのものを含んでいる

- ユーザビリティ、UI：モノの視点
- ユーザーエクスペリエンスデザイン：コトの視点

ISO9241-210
- 以前
  - ISO13407(JISZ8530)
  - ヨーロッパではこれに合ってないと輸出できなかった

UX白書
- 4つの期間
- 1.うわさ・雑談 → 2.手に入れる → 3.使ってみて → 4.繰り返し（累積）
- 2、3の部分はやっている。1、4の部分はできていないことが多い

ザク豆腐の例
- 1.うわさ・雑談
  - 期待を醸成するような仕掛け
- 2.手に入れる
  - 味は普通
- 3.使ってみて
  - 細かい仕組みづくり
- 4.繰り返し（累積）
  - ザクとうふデザート仕様、鍋用ズゴック豆腐
- 企画した社長はUXは知らない。


インタビュー
- グループインタビュー
- エスノグラフィック（いっしょに体験）
  『暴走族のエスノグラフィー』佐藤郁哉
- ディプス（なぜを繰返す）

アンケート
- よくない手法
- 項目にないものは取得できない
- 自分の行為を言語化することが難しい

- ラダディング、KA法、ペルソナ、シナリオ法

- プロトタイピング
- アクティングアウト（寸劇）
- ストーリボード

- ヒューリスティック評価


自分の仕事の中でできることからやる
- 会議のまとめをやるとき。。。
  - ポストイットを整理
- 今までアンケートをとっていた。。。
  - かわりにインタビューを実施する
- いきなり作業していた。。。
  - まず、ペーパープロトタイピング、ラフから始める
- まずは練習しよう。。。
  - ワークショップに参加する

UXの参考
- Amazon
- Apple（ガイドラインが決まっているので、統一されている）
- Hot Pepper Beauty
- EM ZERO

ディスカッション

- 実業務に取り入れるには？
  - できることをやる
  - 外部講師

- クライアントと共通認識をもつには？
  - 時間が経つのを待つ（クライアント側にブームが訪れるのを待つ）
  - Webの情報設計のブームは、おくれてクライアント側に訪れた

- ベストプラクティス？
  -

- UXの勉強方法？
  - 「本を読む」はおすすめしない
  - 1.ワークショップでやる
  - 2.本を読む
  - 3.ワークショップでやる
  - 4.（1-2の繰り返し）

その他

今回が初のヒカリエだったので、会場の行きかたに若干とまどいましたが、無事に参加できてよかった。

11月15日 UIにもこだわりたいWeb開発者のためのデザインメソッドに参加した

日時：2012年11月15日（木）19:00～21:00
会場：パソナグループ 本部 8F イベントホール
関連：Find your Ability ! forデベロッパ #7 UIにもこだわりたいWeb開発者のためのデザインメソッド

感想など

本編とキャリアビジョンの2部構成でしたが、どちらもよい勉強になりました。

[本編]
BootstrapやjQuery Mobileの使用前後の画面例とコードが提示されて、スタイリッシュで時間をかけないというのはわかりやすくてよかったです。
ただ、元々のデザイン（内容やボタンの配置）がまずいと、それらを使用しても使いづらいので、「目新しくないよくある」デザインにするために参考にした情報や気をつけたことなどを、質問すればよかったなと思いました。

[キャリアビジョン]
仕事のこだわりやダメパターンなど私には耳が痛い話が多かったですが、なるほどと思うことが多くてよかったです。
「自分の仕事の価値を理解して、他人に説明できる」は重要だと思いました。自分の仕事の価値を知らないと、ただやるだけでモチベーションや効率が低いだろうし、価値が低い仕事をずっとやりつづけることもありえる。また、他人に説明できないと、たとえ価値が高い仕事をしても、全く評価されないことになって残念だし、続かないなと思いました。
特にデザイナーみたいに、エンジニアもポートフォリオを持ち歩くはなるほど思いつつ、デザイナーのポートフォリオって具体的にどんなものか知らなかったり。
また、これを書いていて、ポートフォリオの話は、技術ブログやGitHubアカウントに履歴書や職歴などを記載してアップすることと同意義なのか、別のイメージなのかが気になったりしました。

まずは、写経するなりして簡単なものをBootstrapやjQuery Mobileを使ってつくってみようかと思います。

本編

クレック株式会社の崎川さんの発表。
WebとスマホアプリのUIデザインについて、「docci」というアプリ開発での経験を交えて話をされました。
「docci」では、PhoneGap + jQuery Mobile で開発したそうです。


エンジニアにデザイン力は必要か？
- Yes であり No である（場合による）

エンジニアによるデザインの必要性
- コンシューマー向けの凝ったデザイン
　- (No) デザイナーに任せるべき
- 運営向けの管理画面、プロトタイプ、テスト画面
　- (Yes) デザイナーに任せる程のコストがかけられないが、重要な画面は、エンジニアでもデザインすることが必要
　　- 管理画面：
　　　- ヒューマンエラーの軽減のため
　　　- 作業効率の向上のため
　　- プロトタイプ：
　　　- 提案時に、見た目で損をしないため
　　- テスト画面：
　　　- 可読性の向上のため

どんなデザインをすべきか？
1.スタイリッシュ
　- 目新しくない見慣れたものであること
2.時間がかからない
　- デザインよりも、もっと時間をかける場所が他にある（コーディングとか）

スタイリッシュで時間がかからないデザインをする
- Web
　- Bootstrap
　- （簡単なサンプルの例をいくつか挙げて説明がありました）
- スマホ
　- jQuery Mobile
　- （簡単なサンプルの例をいくつか挙げて説明がありました）

便利なサービス
- codiqa
　モックアップをブラウザ上でさくっと作れるサービス
- StyleBootstrap
- lavishbootstrap
　Twitter Bootstrapのデザインを簡単に変更出来るWebサービス

ユーザーへのテストがデザインが決まらないとできないというのは残念
jQuery Mobileなどを使って、そこそこのデザインでテストを進める

開発での苦労
- jQuery Mobileとデザイナーが作成したcssが衝突
　- 一箇所を修正すると別の箇所のレイアウトがくずれるということが何度も発生
　- デザイナーがjQuery Mobileに詳しくなかった
　- 準備や打ち合わせ次第
- jQuery Mobileを使うと他のフレームワークへの移行が難しい
　- jQuery Mobile用のDOMを作成してしまう


質疑：Bootstrap、jQuery Mobile以外に比較検討したものはあるか？
- Bootstrap以外は考えられなかった。
（補足：検討したものはあったが、他は足りない機能が多かった）
- jQuery Mobile以外にSencha、Zeptoを検討した。
　- Sencha：機能不足だった
　- Zepto：即席性が低かった
- 全体のバランスがよかったのが、BootstrapとjQuery Mobileだった。
- 社内にjQuery Mobileに詳しい人がいたのも理由の1つ

質疑：デザイナーとの作業はプロセスは？
- ページのモックをパワーポイントで作成し、APIの仕様を用意して打ち合わせた
- デザイナーからあがってきたものを社内でユーザーテストを繰り返した
- ユーザーテストで出た問題をデザイナーとすりあわせて修正していった

質疑：テストに使用した端末は
- 主に社内で社員が所有する端末でテストした。
- 外部のテスト会社で10機種の端末でテストした。
　- 10万程度かかった
- Androidでのテストは、同一端末でもアップデートの適用有無のバージョン違いで挙動がかわることがある。

キャリアビジョン

株式会社ネットプライスドットコムの今井さんの発表。
経歴・経験と仕事のこだわりや採用で重視している点などを話されました。
自分が「エンジニアであるか？」について、振り返って考えた内容でした。


僕はエンジニアか？

エンジニアもポートフォリオを持ち歩く
- 過去のお仕事
- 運営しているサイト
- エンジニアブログ
- GitHubのコード

仕事でのこだわり
- 会社の向かうべき方向に先回り
- 効率的に「無駄なこと」をする
- 自分の仕事の価値を理解して、他人に説明できる
- アイデアは話す。そして形にする
　- 自分の考えたことは他人も考えているから
　- 背水の陣。言ったからにはやる

エンジニアにしかできないこと
- CREATION
　新しい価値を具体的に見える形にすること
- ACCELERATE
　加速させること、拡大させること
- LEVERAGE
　ひと一人の力をはるかに凌ぐ仕事をできるようにさせる

ダメパターン
- 「知っている」だけ
　- 経験ではない
- 「使ったことある」だけ
　- なんのためにつかったのか
　- つかってどんな価値を得たのか
- やりたいけどやってない
　- 技術に対して興味が薄い
　- 実行力がない

エンジニアの道具
- システム設計ができる
- コーディングできる、コードが読める
- サーバーが管理できる
- etc

- 道具をさびつかせないようにする
- さびついた道具しか持っていない人と働きたいか？
- 道具をなんのために使うのか？
- 道具を使って何ができるのか？

その他

パソナさんでやっているということもあって、本編以外にキャリアビジョンという2部構成でした。

本編は、崎川さんが主で発表・質疑応答して、今井さんが補足説明をするような感じでした。
また、iPhoneアプリの申請を行ったときの苦労話もありましたが、メモしていないので、記載できませんでした。

キャリアビジョンは、スライドの流れがはやくて、メモをとるのが難しかったのです。気になったものだけをなんとかメモした感じでした。