2016年7月にヤフー株式会社で開催された社内勉強会で使用したスライドです。

1. フロントエンドからの発想
伊原 力也 / BA
2016.07.04 @ Yahoo!

2. @magi1125
• BA（ビジネス・アーキテクツ）
• シニア・インフォメーションアーキテクト
• HCD-Net認定 人間中心設計専門家
• ウェブアクセシビリティ基盤委員会 WG1委員
• 共著「デザイニングWebアクセシビリティ」
監訳「コーディングWebアクセシビリティ」
• Y!さんとの共催イベントを企画運営

4. Y!さんとの共催イベント
• アクセシビリティやるぞ！祭り
• マルチデバイス時代のWebアクセシビリティ
• アクセシビリティやるぞ！夏祭り
• 障害者差別解消法施行目前！アクセシビリティ対応
なぜ始める？どう進める？
• 次回も企画進行中（2016年9月頃開催予定）

5. アクセシビリティ黒帯

6. HTML5黒帯
「フロントエンド方面から刺激を」

7. 刺激 is 何
• 喋れそうなネタでBA社内アンケートしてみた
• アクセシビリティ／HTML／WAI-ARIA
• IA／プロトタイピングツール／ユーザー調査
• キャリアパス（伊原がどうしてこうなった）
• 結果、キャリアパスが一番人気でした
• 何らか刺激になるといいのですが

8. 私のこれまでの歩み

9. 1999～2016
Frontend
IA/UI
UX
2007 20112009 2014

10. Frontend系
1999：アルバイトでWeb制作（フルCSS）
2004：いわゆるひとつのHTMLコーダー
2006：スタイルガイド設計・ガイドライン執筆
2008：案件規模拡大＆グローバル化
2011：スマホサイト対応
2014：要件定義、QA（パフォーマンス・アクセシビリティ）

12. IA/UI系
1999：いわゆる「ホームページの立ち上げ」
2002：ガラケーの占い・待受サイト
2007：製品プロモーションサイト
2009：企業情報系、公共系、ECサイト
2010：イントラ、シミュレータ、ポイントシステム
2011：グローバル、SNS、マルチデバイス（RWD）
2014：スマホアプリ（ハイブリッド）

14. ユーザビリティ/UX系
1999：ヒューリスティック評価
2005：アクセスログ分析
2009：プロトタイピング／ユーザビリティテスト
2010：アンケート
2011：ユーザーインタビュー
2012：ペルソナ／シナリオ
2014：ワークショップ

16. フロントエンドからの発想で乗り切る
1. 今っぽいネタや大きそうなネタを察知する
2. とりあえず「やります」と言ってみる
3. 関係しそうな本を読んでみる
4. あとは作りながら考える

17. 「作れる」と乗りきれる理由

18. 作れる
＝設計意図が見えてくる

19. 作れる＝設計意図が見えてくる
• スタイルガイド、日々作ってますよね、きっと
• つまりUIパーツの種類、実はそれなりに知ってるはず
• これらをパーツ単体でなく
イディオムのパターン（慣用表現）で見てみる
• パターンが理解できると文脈が見えてくる
• 文脈の理解によってIA/UIの意図がわかる

20. Parts
Idiom
Context
Concept

24. 作れる
＝ 意図に対して「なぜ？」が生まれる

25. 作れる＝意図に対して「なぜ？」が生まれる
• 文脈が理解できると要件やコンセプトが見えてくる
• （デザイナー／ディレクター／その他の人々が）
なんでこうした？どうしてこうなってる？
• たいがい「5つの『なぜ』」に答えきれない
• 自分で調べたくなってくる
• ようこそ、UXの世界へ！

28. 作れる
＝ 設計したら聞ける・試せる

29. 作れる＝設計したら聞ける・試せる
• 誰かに頼まずともプロトタイピングできる
• プロトタイピングツールも駆使できる
• 作れると流れや実現性を検討できる
• 作れるとテストができる

33. 作れる
＝設計時に細部を見逃さない

34. 作れる＝設計時に細部を見逃さない
• 実装者は（ツッコむために）UIの細部を知っている
• マイクロインタラクションが体験を左右する
• 例：スクロールタブ
押したらどうなるの？停止位置は？ループするの？
• 例：アコーディオン
排他にするの？スクロール位置は？内部リンクは？
• 例：フォーム
エラー条件は？メッセージは？どこまでフロント？

35. 例：スクロールタブ

36. 例：アコーディオン

37. 例：フォーム

39. 「作れる」人が設計しよう

40. 作れる＝設計を推進できる
• 作れるとプレゼンできる
• 作れると主導権が握れる
• 作れると結果にコミットできる
• 作れると工数が読める ← オマケ

41. 「作れる」からこそ思いつく
• 「考える→作ってみる」から
「作ってみる → 考える」への転換
• 「頼まれてきちんと作る」から
「自分でとりあえず作ってみた」への転換

42. どこからやるの？
• とりあえず誰より先に具現化する
• とりあえず他社事例をモノマネしてみる
• IA/UI設計の基本は「慣例に沿うこと」

45. 副作用：少しずつ作れなくなる

46. 副作用：少しずつ作れなくなる
• 実感として2014年ぐらいで時が止まってる
• CSSのブラウザ実装状況をちゃんと追えてるの？
• JQueryだけ？Reactいじれなくていいの？
• XCode / Android Studioいじれなくていいの？
• WebGLいじれなくていいの？（⇠今日追加した）
• プロトタイピングツールで済ましてていいの？
• もうイマドキの「作れる人」ではない。再入門が必要

47. Frontend ✕ IA/UX
= デザイン

48. 刺激、ありましたか？
• どこにステータスを振るか、のイチ例でした
• 9月ぐらいにまたY!さんとイベントやります
• またそのときに

49. ありがとうございました
@magi1125