Upcoming SlideShare
フロントエンドからの発想
- 1. フロントエンドからの発想 伊原 力也 / BA 2016.07.04 @ Yahoo!
- 2. @magi1125 • BA（ビジネス・アーキテクツ） • シニア・インフォメーションアーキテクト • HCD-Net認定 人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • 共著「デザイニングWebアクセシビリティ」 監訳「コーディングWebアクセシビリティ」 • Y!さんとの共催イベントを企画運営
- 3. Y!さんとの共催イベント • アクセシビリティやるぞ！祭り • マルチデバイス時代のWebアクセシビリティ • アクセシビリティやるぞ！夏祭り • 障害者差別解消法施行目前！アクセシビリティ対応 なぜ始める？どう進める？ • 次回も企画進行中（2016年9月頃開催予定）
- 4. アクセシビリティ黒帯
- 5. HTML5黒帯 「フロントエンド方面から刺激を」
- 6. 刺激 is 何 • 喋れそうなネタでBA社内アンケートしてみた • アクセシビリティ／HTML／WAI-ARIA • IA／プロトタイピングツール／ユーザー調査 • キャリアパス（伊原がどうしてこうなった） • 結果、キャリアパスが一番人気でした • 何らか刺激になるといいのですが
- 7. 私のこれまでの歩み
- 8. 1999～2016 Frontend IA/UI UX 2007 20112009 2014
- 9. Frontend系 1999：アルバイトでWeb制作（フルCSS） 2004：いわゆるひとつのHTMLコーダー 2006：スタイルガイド設計・ガイドライン執筆 2008：案件規模拡大＆グローバル化 2011：スマホサイト対応 2014：要件定義、QA（パフォーマンス・アクセシビリティ）
- 10. IA/UI系 1999：いわゆる「ホームページの立ち上げ」 2002：ガラケーの占い・待受サイト 2007：製品プロモーションサイト 2009：企業情報系、公共系、ECサイト 2010：イントラ、シミュレータ、ポイントシステム 2011：グローバル、SNS、マルチデバイス（RWD） 2014：スマホアプリ（ハイブリッド）
- 11. ユーザビリティ/UX系 1999：ヒューリスティック評価 2005：アクセスログ分析 2009：プロトタイピング／ユーザビリティテスト 2010：アンケート 2011：ユーザーインタビュー 2012：ペルソナ／シナリオ 2014：ワークショップ
- 12. フロントエンドからの発想で乗り切る 1. 今っぽいネタや大きそうなネタを察知する 2. とりあえず「やります」と言ってみる 3. 関係しそうな本を読んでみる 4. あとは作りながら考える
- 13. 「作れる」と乗りきれる理由
- 14. 作れる ＝設計意図が見えてくる
- 15. 作れる＝設計意図が見えてくる • スタイルガイド、日々作ってますよね、きっと • つまりUIパーツの種類、実はそれなりに知ってるはず • これらをパーツ単体でなく イディオムのパターン（慣用表現）で見てみる • パターンが理解できると文脈が見えてくる • 文脈の理解によってIA/UIの意図がわかる
- 16. Parts Idiom Context Concept
- 17. 作れる ＝ 意図に対して「なぜ？」が生まれる
- 18. 作れる＝意図に対して「なぜ？」が生まれる • 文脈が理解できると要件やコンセプトが見えてくる • （デザイナー／ディレクター／その他の人々が） なんでこうした？どうしてこうなってる？ • たいがい「5つの『なぜ』」に答えきれない • 自分で調べたくなってくる • ようこそ、UXの世界へ！
- 19. 作れる ＝ 設計したら聞ける・試せる
- 20. 作れる＝設計したら聞ける・試せる • 誰かに頼まずともプロトタイピングできる • プロトタイピングツールも駆使できる • 作れると流れや実現性を検討できる • 作れるとテストができる
- 21. 作れる ＝設計時に細部を見逃さない
- 22. 作れる＝設計時に細部を見逃さない • 実装者は（ツッコむために）UIの細部を知っている • マイクロインタラクションが体験を左右する • 例：スクロールタブ 押したらどうなるの？停止位置は？ループするの？ • 例：アコーディオン 排他にするの？スクロール位置は？内部リンクは？ • 例：フォーム エラー条件は？メッセージは？どこまでフロント？
- 23. 例：スクロールタブ
- 24. 例：アコーディオン
- 25. 例：フォーム
- 26. 「作れる」人が設計しよう
- 27. 作れる＝設計を推進できる • 作れるとプレゼンできる • 作れると主導権が握れる • 作れると結果にコミットできる • 作れると工数が読める ← オマケ
- 28. 「作れる」からこそ思いつく • 「考える→作ってみる」から 「作ってみる → 考える」への転換 • 「頼まれてきちんと作る」から 「自分でとりあえず作ってみた」への転換
- 29. どこからやるの？ • とりあえず誰より先に具現化する • とりあえず他社事例をモノマネしてみる • IA/UI設計の基本は「慣例に沿うこと」
- 30. 副作用：少しずつ作れなくなる
- 31. 副作用：少しずつ作れなくなる • 実感として2014年ぐらいで時が止まってる • CSSのブラウザ実装状況をちゃんと追えてるの？ • JQueryだけ？Reactいじれなくていいの？ • XCode / Android Studioいじれなくていいの？ • WebGLいじれなくていいの？（⇠今日追加した） • プロトタイピングツールで済ましてていいの？ • もうイマドキの「作れる人」ではない。再入門が必要
- 32. Frontend ✕ IA/UX = デザイン
- 33. 刺激、ありましたか？ • どこにステータスを振るか、のイチ例でした • 9月ぐらいにまたY!さんとイベントやります • またそのときに
- 34. ありがとうございました @magi1125
Be the first to comment