Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

フロントエンドからの発想

3,638 views

Published on

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

Published in: Design
  • Be the first to comment

フロントエンドからの発想

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

×