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.
Webアプリのマークアップ、           どうすればいいの?               2013/03/19(火) html5nagoya#213年3月23日土曜日
今日しない話13年3月23日土曜日
今日しない話              • ネイティブアプリから見たWebアプリ               の話13年3月23日土曜日
今日しない話              • ネイティブアプリから見たWebアプリ               の話              • Webアプリの厳密な定義の話13年3月23日土曜日
今日しない話              • ネイティブアプリから見たWebアプリ               の話              • Webアプリの厳密な定義の話              • 聞くだけで簡単に作れるようになる魔  ...
今日はWebサイト中心に               作って来た人向けの話13年3月23日土曜日
今日はWebサイト中心に               作って来た人向けの話              • 最近Webアプリってよく聞くけど作っ               たことない13年3月23日土曜日
今日はWebサイト中心に               作って来た人向けの話              • 最近Webアプリってよく聞くけど作っ               たことない              • JavaScriptとかまだま...
今日はWebサイト中心に               作って来た人向けの話              • 最近Webアプリってよく聞くけど作っ               たことない              • JavaScriptとかまだま...
今日言いたいことは、13年3月23日土曜日
これからのマークアップは13年3月23日土曜日
マークアップエンジニア                  だけでは                なかなかに難しい13年3月23日土曜日
各工程で              常に機能単位で考え、              イメージの共有をし、13年3月23日土曜日
小さく保ちながら              作っていくことが13年3月23日土曜日
(少なくともWebアプリには)              求められるのでは?13年3月23日土曜日
と、思ったので、               考えてみました                    ・・・という話です13年3月23日土曜日
Webアプリのマークアップ、           どうすればいいの?               2013/03/19(火) html5nagoya#213年3月23日土曜日
目次              1. WebサイトとWebアプリの違うところ                 を、色んな切り口で見てみる              2. 協業前提の考え方              3. 押さえたいポイント   ...
目次              1. WebサイトとWebアプリの違うところ                 を、色んな切り口で見てみる              2. 協業前提の考え方              3. 押さえたいポイント   ...
※最初はつまらない話なので                ちょっと我慢してね13年3月23日土曜日
WebサイトとWebアプリの違うとこ               ろを、色んな切り口で見てみる13年3月23日土曜日
最終成果物                              (production)              • 例:Webサイトの中に                  Google Maps API を埋め込む例        ...
最終成果物               (production)13年3月23日土曜日
最終成果物               (production)13年3月23日土曜日
最終成果物                        (production)              • どちらもHTML, CSS, JavaScript中心               に作られている13年3月23日土曜日
最終成果物                        (production)              • どちらもHTML, CSS, JavaScript中心               に作られている              • ...
WebサイトとWebアプリの違うとこ               ろを、色んな切り口で見てみる13年3月23日土曜日
役割              (role)13年3月23日土曜日
役割                         (role)              • Webサイト13年3月23日土曜日
役割                      (role)              • Webサイト               • 情報提供、開示、リアルへの導線、               窓口など13年3月23日土曜日
役割                         (role)              • Webサイト               • 情報提供、開示、リアルへの導線、                  窓口など            ...
役割                      (role)              • Webサイト               • 情報提供、開示、リアルへの導線、               窓口など              •存在し...
役割              (role)13年3月23日土曜日
役割                         (role)              • Webアプリ13年3月23日土曜日
役割                         (role)              • Webアプリ               • 目的に特化13年3月23日土曜日
役割                      (role)              • Webアプリ               • 目的に特化               • (疑似)体験させるコンテンツなど13年3月23日土曜日
役割                      (role)              • Webアプリ               • 目的に特化               • (疑似)体験させるコンテンツなど               ...
役割                      (role)              • Webアプリ               • 目的に特化               • (疑似)体験させるコンテンツなど               ...
役割              (role)13年3月23日土曜日
役割                      (role)              • 求められているものの違い               (どちらも重要)13年3月23日土曜日
役割                      (role)              • 求められているものの違い               (どちらも重要)              • 「これからはWebサイトよりも          ...
役割                           (role)              • 求められているものの違い               (どちらも重要)              • 「これからはWebサイトよりも     ...
WebサイトとWebアプリの違うとこ               ろを、色んな切り口で見てみる13年3月23日土曜日
技術視点              (technology)13年3月23日土曜日
技術視点                     (technology)              • Webサイトが立ち並び始めたころは               Webで出来ることは限られていた13年3月23日土曜日
技術視点                     (technology)              • Webサイトが立ち並び始めたころは               Webで出来ることは限られていた              • ブラウザの...
技術視点                     (technology)              • Webサイトが立ち並び始めたころは               Webで出来ることは限られていた              • ブラウザの...
色んな切り口        最終成果物              • 今までと同じ HTML, CSS, JavaScript        役割              • 目的に特化               →リアクション多くなる、画...
じゃ、いつやるか?13年3月23日土曜日
いやいや、                できるところから              少しずつやりましょうよ...13年3月23日土曜日
目次              1. WebサイトとWebアプリの違うところ                 を、色んな切り口で見てみる              2. 協業前提の考え方              3. 押さえたいポイント   ...
協業前提の考え方              • じゃあ、いつも通り設計、              • デザイン、              • マークアップ...13年3月23日土曜日
協業前提の考え方              • じゃあ、いつも通り設計、              • デザイン、              • マークアップ...                 いつも通りやってたら             ...
協業前提の考え方13年3月23日土曜日
協業前提の考え方              • Webサイトは、制作フローがある程度               決まってたので問題なかった13年3月23日土曜日
協業前提の考え方              • Webサイトは、制作フローがある程度               決まってたので問題なかった              • 出来ること増えたので、Webアプリを               『1人...
協業前提の考え方              • Webサイトは、制作フローがある程度                  決まってたので問題なかった              • 出来ること増えたので、Webアプリを               ...
Webサイト脳を              少し切り替えてみる13年3月23日土曜日
機能単位の考え方13年3月23日土曜日
機能単位の考え方              • まず機能単位で考えるところから13年3月23日土曜日
機能単位の考え方              • まず機能単位で考えるところから              • 各工程において、               要素を小さく切り分ける、小さく保つ13年3月23日土曜日
機能単位の考え方              • まず機能単位で考えるところから              • 各工程において、                  要素を小さく切り分ける、小さく保つ              •   小さく保って...
機能単位の考え方13年3月23日土曜日
機能単位の考え方              • Webサイト構築のスキルがある人が、               Webアプリになると出来なくなるの?13年3月23日土曜日
機能単位の考え方              • Webサイト構築のスキルがある人が、               Webアプリになると出来なくなるの?              • →そんなことない!13年3月23日土曜日
機能単位の考え方              • Webサイト構築のスキルがある人が、               Webアプリになると出来なくなるの?              • →そんなことない!              • 最終的に出来...
機能単位の考え方              • Webサイト構築のスキルがある人が、                  Webアプリになると出来なくなるの?              • →そんなことない!              • 最終的...
機能単位の考え方13年3月23日土曜日
機能単位の考え方              • じゃあ、機能単位で進めていくには               どう考えていけばいいの??13年3月23日土曜日
目次              1. WebサイトとWebアプリの違うところ                 を、色んな切り口で見てみる              2. 協業前提の考え方              3. 押さえたいポイント   ...
目次              1. WebサイトとWebアプリの違うところ                 を、色んな切り口で見てみる              2. 協業前提の考え方              3. 押さえたいポイント(本題...
押さえたいポイント13年3月23日土曜日
押さえたいポイント              1. 用件定義・設計フェーズ13年3月23日土曜日
押さえたいポイント              1. 用件定義・設計フェーズ              2. デザインフェーズ13年3月23日土曜日
押さえたいポイント              1. 用件定義・設計フェーズ              2. デザインフェーズ              3. マークアップフェーズ13年3月23日土曜日
押さえたいポイント              1. 用件定義・設計フェーズ              2. デザインフェーズ              3. マークアップフェーズ              4. フロント側の実装フェーズ    ...
用件定義・設計フェーズ13年3月23日土曜日
用件定義・設計フェーズ              • ページ単位≠機能単位13年3月23日土曜日
用件定義・設計フェーズ              • ページ単位≠機能単位              • 機能単位で考えるくせをつける               (実際に手を動かさない役割の人でも)13年3月23日土曜日
用件定義・設計フェーズ              • ページ単位≠機能単位              • 機能単位で考えるくせをつける                  (実際に手を動かさない役割の人でも)              •   せ...
用件定義・設計フェーズ              • ページ単位≠機能単位              • 機能単位で考えるくせをつける                  (実際に手を動かさない役割の人でも)              •   せ...
用件定義・設計フェーズ13年3月23日土曜日
用件定義・設計フェーズ                極端な例で申し訳ありません・・・13年3月23日土曜日
用件定義・設計フェーズ13年3月23日土曜日
用件定義・設計フェーズ              • JavaScriptとか書かなかったとしても               どんな機能で構成されているか               (大雑把でもいいので)列挙する13年3月23日土曜日
用件定義・設計フェーズ              • JavaScriptとか書かなかったとしても                  どんな機能で構成されているか                  (大雑把でもいいので)列挙する        ...
用件定義・設計フェーズ              • JavaScriptとか書かなかったとしても                  どんな機能で構成されているか                  (大雑把でもいいので)列挙する        ...
デザインフェーズ13年3月23日土曜日
デザインフェーズ              •              Webサイトの              一枚絵の考え方を捨てる13年3月23日土曜日
デザインフェーズ              •   Webサイトの                  一枚絵の考え方を捨てる              •   後のマークアップにダイレクトに響く13年3月23日土曜日
Photoshopの例13年3月23日土曜日
Photoshopの例13年3月23日土曜日
Photoshopの例              • 1枚絵のWebサイトでは、ぶっちゃけ               どの方法を用いても問題なかった13年3月23日土曜日
Photoshopの例              • 1枚絵のWebサイトでは、ぶっちゃけ               どの方法を用いても問題なかった              • ここに、画面内変化が入ってくると               ...
Photoshopの例13年3月23日土曜日
Photoshopの例13年3月23日土曜日
Photoshopの例              • 上に乗ってる丸いオブジェクトが               背景によらず半透明であるべきなら、               一番右はダメ (ifの話)13年3月23日土曜日
Photoshopの例              • 上に乗ってる丸いオブジェクトが               背景によらず半透明であるべきなら、               一番右はダメ (ifの話)13年3月23日土曜日
Photoshopの例              • 上に乗ってる丸いオブジェクトが               背景によらず半透明であるべきなら、               一番右はダメ (ifの話)              • じゃあ、...
Photoshopの例13年3月23日土曜日
Photoshopの例13年3月23日土曜日
Photoshopの例              • 依存関係を無くす13年3月23日土曜日
Photoshopの例              • 依存関係を無くす              • すでに『乗算』というエフェクトを               使っている時点で               下のオブジェクトに依存してる13年...
Photoshopの例              • 依存関係を無くす              • すでに『乗算』というエフェクトを               使っている時点で               下のオブジェクトに依存してる   ...
デザインフェーズ13年3月23日土曜日
デザインフェーズ              • デザイン工程で依存関係だらけだと、               その後のマークアップに相当響く13年3月23日土曜日
デザインフェーズ              • デザイン工程で依存関係だらけだと、               その後のマークアップに相当響く              • だからこそ、イメージの共有が必要13年3月23日土曜日
デザインフェーズ              • デザイン工程で依存関係だらけだと、               その後のマークアップに相当響く              • だからこそ、イメージの共有が必要              • 背景が...
デザインフェーズ              • デザイン工程で依存関係だらけだと、                  その後のマークアップに相当響く              • だからこそ、イメージの共有が必要              • ...
デザインフェーズ13年3月23日土曜日
デザインフェーズ              • Q. どうやってイメージの共有する?13年3月23日土曜日
デザインフェーズ              • Q. どうやってイメージの共有する?              • A. スマホUIなら、ワイヤーフレーム               書きまくるとか13年3月23日土曜日
デザインフェーズ              • Q. どうやってイメージの共有する?              • A. スマホUIなら、ワイヤーフレーム                  書きまくるとか              •   A....
デザインフェーズ              • Q. どうやってイメージの共有する?              • A. スマホUIなら、ワイヤーフレーム                  書きまくるとか              •   A....
マークアップフェーズ13年3月23日土曜日
マークアップフェーズ              • 逆に前工程へ働きかけて、               イメージの共有を図り、依存関係が               ないようにする13年3月23日土曜日
マークアップフェーズ              • 逆に前工程へ働きかけて、               イメージの共有を図り、依存関係が               ないようにする              •ページ単位のマークアッ     ...
ページ単位のスタイル13年3月23日土曜日
ページ単位のスタイル                    ↓              最小単位にバラバラにする13年3月23日土曜日
ページ単位のスタイル                    ↓              最小単位にバラバラにする                  ↓              同じものを共通化13年3月23日土曜日
ページ単位のスタイル                    ↓              最小単位にバラバラにする                    ↓                同じものを共通化                  ↓ ...
マークアップフェーズ13年3月23日土曜日
マークアップフェーズ              • 常日頃から、               『共通部分は?違う部分は?』と               問い続ける13年3月23日土曜日
マークアップフェーズ              • 常日頃から、                  『共通部分は?違う部分は?』と                  問い続ける              •   SassとかLESSとか、   ...
マークアップフェーズ              • 常日頃から、                  『共通部分は?違う部分は?』と                  問い続ける              •   SassとかLESSとか、   ...
マークアップフェーズ              • おまけ1              • CSSのセレクタの最初に必ずIDがつく               のは、ページ単位で考えてる可能性が               ある...かも   ...
マークアップフェーズ              • おまけ2              • CSSのセレクタがずらずら並ぶのは、               要素を小さく保ててないから...かも              •ひょっとして依存して...
目次              1. WebサイトとWebアプリの違うところ                 を、色んな切り口で見てみる              2. 協業前提の考え方              3. 押さえたいポイント   ...
まとめ13年3月23日土曜日
まとめ              • (Webアプリに限らず)               Web制作はこれから複雑化するので、               予め各工程で要素を小さく保つ13年3月23日土曜日
まとめ              • (Webアプリに限らず)                  Web制作はこれから複雑化するので、                  予め各工程で要素を小さく保つ              •   ページ単位...
まとめ              • (Webアプリに限らず)                  Web制作はこれから複雑化するので、                  予め各工程で要素を小さく保つ              •   ページ単位...
今、出来る部分が              そんなに多くなくても13年3月23日土曜日
出来るところを              ちょっとずつ増やしていこう!13年3月23日土曜日
ご清聴ありがとう               ございました!13年3月23日土曜日
Upcoming SlideShare
Loading in …5
×

Webアプリのマークアップ、どうすればいいの?

1,644 views

Published on

発表自体、綺麗にまとまってるわけでは無かったですが、
一応資料アップしておきます。

Published in: Technology
  • Be the first to comment

Webアプリのマークアップ、どうすればいいの?

  1. 1. Webアプリのマークアップ、 どうすればいいの? 2013/03/19(火) html5nagoya#213年3月23日土曜日
  2. 2. 今日しない話13年3月23日土曜日
  3. 3. 今日しない話 • ネイティブアプリから見たWebアプリ の話13年3月23日土曜日
  4. 4. 今日しない話 • ネイティブアプリから見たWebアプリ の話 • Webアプリの厳密な定義の話13年3月23日土曜日
  5. 5. 今日しない話 • ネイティブアプリから見たWebアプリ の話 • Webアプリの厳密な定義の話 • 聞くだけで簡単に作れるようになる魔 法のメソッドの話13年3月23日土曜日
  6. 6. 今日はWebサイト中心に 作って来た人向けの話13年3月23日土曜日
  7. 7. 今日はWebサイト中心に 作って来た人向けの話 • 最近Webアプリってよく聞くけど作っ たことない13年3月23日土曜日
  8. 8. 今日はWebサイト中心に 作って来た人向けの話 • 最近Webアプリってよく聞くけど作っ たことない • JavaScriptとかまだまだ勉強中だし13年3月23日土曜日
  9. 9. 今日はWebサイト中心に 作って来た人向けの話 • 最近Webアプリってよく聞くけど作っ たことない • JavaScriptとかまだまだ勉強中だし • どう考えればいいの? Webサイトと何が違うの?13年3月23日土曜日
  10. 10. 今日言いたいことは、13年3月23日土曜日
  11. 11. これからのマークアップは13年3月23日土曜日
  12. 12. マークアップエンジニア だけでは なかなかに難しい13年3月23日土曜日
  13. 13. 各工程で 常に機能単位で考え、 イメージの共有をし、13年3月23日土曜日
  14. 14. 小さく保ちながら 作っていくことが13年3月23日土曜日
  15. 15. (少なくともWebアプリには) 求められるのでは?13年3月23日土曜日
  16. 16. と、思ったので、 考えてみました       ・・・という話です13年3月23日土曜日
  17. 17. Webアプリのマークアップ、 どうすればいいの? 2013/03/19(火) html5nagoya#213年3月23日土曜日
  18. 18. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ13年3月23日土曜日
  19. 19. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ13年3月23日土曜日
  20. 20. ※最初はつまらない話なので ちょっと我慢してね13年3月23日土曜日
  21. 21. WebサイトとWebアプリの違うとこ ろを、色んな切り口で見てみる13年3月23日土曜日
  22. 22. 最終成果物 (production) • 例:Webサイトの中に Google Maps API を埋め込む例 • http://www.e-quakes.pref.shizuoka.jp/ shiraberu/map/maps.html • Googleのユーザー事例に載っていたの で引用 • http://www.google.co.jp/enterprise/ case_studies/shizuoka.html13年3月23日土曜日
  23. 23. 最終成果物 (production)13年3月23日土曜日
  24. 24. 最終成果物 (production)13年3月23日土曜日
  25. 25. 最終成果物 (production) • どちらもHTML, CSS, JavaScript中心 に作られている13年3月23日土曜日
  26. 26. 最終成果物 (production) • どちらもHTML, CSS, JavaScript中心 に作られている • WebサイトもWebアプリも、構成要素 はほぼ同じ13年3月23日土曜日
  27. 27. WebサイトとWebアプリの違うとこ ろを、色んな切り口で見てみる13年3月23日土曜日
  28. 28. 役割 (role)13年3月23日土曜日
  29. 29. 役割 (role) • Webサイト13年3月23日土曜日
  30. 30. 役割 (role) • Webサイト • 情報提供、開示、リアルへの導線、 窓口など13年3月23日土曜日
  31. 31. 役割 (role) • Webサイト • 情報提供、開示、リアルへの導線、 窓口など • 存在しているのが今やもう当たり前13年3月23日土曜日
  32. 32. 役割 (role) • Webサイト • 情報提供、開示、リアルへの導線、 窓口など •存在しているのが今やもう当たり前 • 情報の網羅性13年3月23日土曜日
  33. 33. 役割 (role)13年3月23日土曜日
  34. 34. 役割 (role) • Webアプリ13年3月23日土曜日
  35. 35. 役割 (role) • Webアプリ • 目的に特化13年3月23日土曜日
  36. 36. 役割 (role) • Webアプリ • 目的に特化 • (疑似)体験させるコンテンツなど13年3月23日土曜日
  37. 37. 役割 (role) • Webアプリ • 目的に特化 • (疑似)体験させるコンテンツなど • インタラクティブ13年3月23日土曜日
  38. 38. 役割 (role) • Webアプリ • 目的に特化 • (疑似)体験させるコンテンツなど • インタラクティブ • やりたいことを実現するために、 リアクションを返してくれる13年3月23日土曜日
  39. 39. 役割 (role)13年3月23日土曜日
  40. 40. 役割 (role) • 求められているものの違い (どちらも重要)13年3月23日土曜日
  41. 41. 役割 (role) • 求められているものの違い (どちらも重要) • 「これからはWebサイトよりも Webアプリだー」という話ではない13年3月23日土曜日
  42. 42. 役割 (role) • 求められているものの違い (どちらも重要) • 「これからはWebサイトよりも Webアプリだー」という話ではない • Webアプリの方は、リアクションを返 す分だけ、画面内の変化が激しい (そうでないものも、もちろんある)13年3月23日土曜日
  43. 43. WebサイトとWebアプリの違うとこ ろを、色んな切り口で見てみる13年3月23日土曜日
  44. 44. 技術視点 (technology)13年3月23日土曜日
  45. 45. 技術視点 (technology) • Webサイトが立ち並び始めたころは Webで出来ることは限られていた13年3月23日土曜日
  46. 46. 技術視点 (technology) • Webサイトが立ち並び始めたころは Webで出来ることは限られていた • ブラウザの進化によって 出来ることが格段に増えた13年3月23日土曜日
  47. 47. 技術視点 (technology) • Webサイトが立ち並び始めたころは Webで出来ることは限られていた • ブラウザの進化によって 出来ることが格段に増えた • (割と良くある話)13年3月23日土曜日
  48. 48. 色んな切り口 最終成果物 • 今までと同じ HTML, CSS, JavaScript 役割 • 目的に特化 →リアクション多くなる、画面内の変化 技術視点 • 現実的にWebアプリ作れるように なりつつある13年3月23日土曜日
  49. 49. じゃ、いつやるか?13年3月23日土曜日
  50. 50. いやいや、 できるところから 少しずつやりましょうよ...13年3月23日土曜日
  51. 51. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ13年3月23日土曜日
  52. 52. 協業前提の考え方 • じゃあ、いつも通り設計、 • デザイン、 • マークアップ...13年3月23日土曜日
  53. 53. 協業前提の考え方 • じゃあ、いつも通り設計、 • デザイン、 • マークアップ... いつも通りやってたら はまっちゃうよ!13年3月23日土曜日
  54. 54. 協業前提の考え方13年3月23日土曜日
  55. 55. 協業前提の考え方 • Webサイトは、制作フローがある程度 決まってたので問題なかった13年3月23日土曜日
  56. 56. 協業前提の考え方 • Webサイトは、制作フローがある程度 決まってたので問題なかった • 出来ること増えたので、Webアプリを 『1人で全部』は難しい場面も 出てくる13年3月23日土曜日
  57. 57. 協業前提の考え方 • Webサイトは、制作フローがある程度 決まってたので問題なかった • 出来ること増えたので、Webアプリを 『1人で全部』は難しい場面も 出てくる • 協業前提で上手くやれる方法を考える13年3月23日土曜日
  58. 58. Webサイト脳を 少し切り替えてみる13年3月23日土曜日
  59. 59. 機能単位の考え方13年3月23日土曜日
  60. 60. 機能単位の考え方 • まず機能単位で考えるところから13年3月23日土曜日
  61. 61. 機能単位の考え方 • まず機能単位で考えるところから • 各工程において、 要素を小さく切り分ける、小さく保つ13年3月23日土曜日
  62. 62. 機能単位の考え方 • まず機能単位で考えるところから • 各工程において、 要素を小さく切り分ける、小さく保つ • 小さく保って依存関係を極力減らす13年3月23日土曜日
  63. 63. 機能単位の考え方13年3月23日土曜日
  64. 64. 機能単位の考え方 • Webサイト構築のスキルがある人が、 Webアプリになると出来なくなるの?13年3月23日土曜日
  65. 65. 機能単位の考え方 • Webサイト構築のスキルがある人が、 Webアプリになると出来なくなるの? • →そんなことない!13年3月23日土曜日
  66. 66. 機能単位の考え方 • Webサイト構築のスキルがある人が、 Webアプリになると出来なくなるの? • →そんなことない! • 最終的に出来るものはざっくり同じな ので、出来るところたくさんある!13年3月23日土曜日
  67. 67. 機能単位の考え方 • Webサイト構築のスキルがある人が、 Webアプリになると出来なくなるの? • →そんなことない! • 最終的に出来るものはざっくり同じな ので、出来るところたくさんある! • 出来ない機能は、出来る人にお願いす る13年3月23日土曜日
  68. 68. 機能単位の考え方13年3月23日土曜日
  69. 69. 機能単位の考え方 • じゃあ、機能単位で進めていくには どう考えていけばいいの??13年3月23日土曜日
  70. 70. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ13年3月23日土曜日
  71. 71. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント(本題) 4. まとめ13年3月23日土曜日
  72. 72. 押さえたいポイント13年3月23日土曜日
  73. 73. 押さえたいポイント 1. 用件定義・設計フェーズ13年3月23日土曜日
  74. 74. 押さえたいポイント 1. 用件定義・設計フェーズ 2. デザインフェーズ13年3月23日土曜日
  75. 75. 押さえたいポイント 1. 用件定義・設計フェーズ 2. デザインフェーズ 3. マークアップフェーズ13年3月23日土曜日
  76. 76. 押さえたいポイント 1. 用件定義・設計フェーズ 2. デザインフェーズ 3. マークアップフェーズ 4. フロント側の実装フェーズ (※今日は触れません)13年3月23日土曜日
  77. 77. 用件定義・設計フェーズ13年3月23日土曜日
  78. 78. 用件定義・設計フェーズ • ページ単位≠機能単位13年3月23日土曜日
  79. 79. 用件定義・設計フェーズ • ページ単位≠機能単位 • 機能単位で考えるくせをつける (実際に手を動かさない役割の人でも)13年3月23日土曜日
  80. 80. 用件定義・設計フェーズ • ページ単位≠機能単位 • 機能単位で考えるくせをつける (実際に手を動かさない役割の人でも) • せめて何で出来てるかくらいは 知っておく13年3月23日土曜日
  81. 81. 用件定義・設計フェーズ • ページ単位≠機能単位 • 機能単位で考えるくせをつける (実際に手を動かさない役割の人でも) • せめて何で出来てるかくらいは 知っておく • 常日頃から、開発者ツールで 調べるくせをつける13年3月23日土曜日
  82. 82. 用件定義・設計フェーズ13年3月23日土曜日
  83. 83. 用件定義・設計フェーズ 極端な例で申し訳ありません・・・13年3月23日土曜日
  84. 84. 用件定義・設計フェーズ13年3月23日土曜日
  85. 85. 用件定義・設計フェーズ • JavaScriptとか書かなかったとしても どんな機能で構成されているか (大雑把でもいいので)列挙する13年3月23日土曜日
  86. 86. 用件定義・設計フェーズ • JavaScriptとか書かなかったとしても どんな機能で構成されているか (大雑把でもいいので)列挙する • 先は長いけど、 まずは機能を知るところから13年3月23日土曜日
  87. 87. 用件定義・設計フェーズ • JavaScriptとか書かなかったとしても どんな機能で構成されているか (大雑把でもいいので)列挙する • 先は長いけど、 まずは機能を知るところから • あとはその道の詳しい人に任せよう13年3月23日土曜日
  88. 88. デザインフェーズ13年3月23日土曜日
  89. 89. デザインフェーズ • Webサイトの 一枚絵の考え方を捨てる13年3月23日土曜日
  90. 90. デザインフェーズ • Webサイトの 一枚絵の考え方を捨てる • 後のマークアップにダイレクトに響く13年3月23日土曜日
  91. 91. Photoshopの例13年3月23日土曜日
  92. 92. Photoshopの例13年3月23日土曜日
  93. 93. Photoshopの例 • 1枚絵のWebサイトでは、ぶっちゃけ どの方法を用いても問題なかった13年3月23日土曜日
  94. 94. Photoshopの例 • 1枚絵のWebサイトでは、ぶっちゃけ どの方法を用いても問題なかった • ここに、画面内変化が入ってくると 話が劇的に変わってくる13年3月23日土曜日
  95. 95. Photoshopの例13年3月23日土曜日
  96. 96. Photoshopの例13年3月23日土曜日
  97. 97. Photoshopの例 • 上に乗ってる丸いオブジェクトが 背景によらず半透明であるべきなら、 一番右はダメ (ifの話)13年3月23日土曜日
  98. 98. Photoshopの例 • 上に乗ってる丸いオブジェクトが 背景によらず半透明であるべきなら、 一番右はダメ (ifの話)13年3月23日土曜日
  99. 99. Photoshopの例 • 上に乗ってる丸いオブジェクトが 背景によらず半透明であるべきなら、 一番右はダメ (ifの話) • じゃあ、左と真ん中ならOK?13年3月23日土曜日
  100. 100. Photoshopの例13年3月23日土曜日
  101. 101. Photoshopの例13年3月23日土曜日
  102. 102. Photoshopの例 • 依存関係を無くす13年3月23日土曜日
  103. 103. Photoshopの例 • 依存関係を無くす • すでに『乗算』というエフェクトを 使っている時点で 下のオブジェクトに依存してる13年3月23日土曜日
  104. 104. Photoshopの例 • 依存関係を無くす • すでに『乗算』というエフェクトを 使っている時点で 下のオブジェクトに依存してる • 別々に変化させる前提なら、 まず『乗算』使ってる真ん中はアウト (ifの話)13年3月23日土曜日
  105. 105. デザインフェーズ13年3月23日土曜日
  106. 106. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く13年3月23日土曜日
  107. 107. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く • だからこそ、イメージの共有が必要13年3月23日土曜日
  108. 108. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く • だからこそ、イメージの共有が必要 • 背景が変化しただけでも これだけバリエーションがある13年3月23日土曜日
  109. 109. デザインフェーズ • デザイン工程で依存関係だらけだと、 その後のマークアップに相当響く • だからこそ、イメージの共有が必要 • 背景が変化しただけでも これだけバリエーションがある • 1枚絵(ページ単位)ではなく、 機能単位で考えて小さく保つ13年3月23日土曜日
  110. 110. デザインフェーズ13年3月23日土曜日
  111. 111. デザインフェーズ • Q. どうやってイメージの共有する?13年3月23日土曜日
  112. 112. デザインフェーズ • Q. どうやってイメージの共有する? • A. スマホUIなら、ワイヤーフレーム 書きまくるとか13年3月23日土曜日
  113. 113. デザインフェーズ • Q. どうやってイメージの共有する? • A. スマホUIなら、ワイヤーフレーム 書きまくるとか • A. アニメーション多いなら、絵コン テ書きまくるとか13年3月23日土曜日
  114. 114. デザインフェーズ • Q. どうやってイメージの共有する? • A. スマホUIなら、ワイヤーフレーム 書きまくるとか • A. アニメーション多いなら、絵コン テ書きまくるとか • 一番共有しやすい方法で!13年3月23日土曜日
  115. 115. マークアップフェーズ13年3月23日土曜日
  116. 116. マークアップフェーズ • 逆に前工程へ働きかけて、 イメージの共有を図り、依存関係が ないようにする13年3月23日土曜日
  117. 117. マークアップフェーズ • 逆に前工程へ働きかけて、 イメージの共有を図り、依存関係が ないようにする •ページ単位のマークアッ プの考え方を捨てる13年3月23日土曜日
  118. 118. ページ単位のスタイル13年3月23日土曜日
  119. 119. ページ単位のスタイル ↓ 最小単位にバラバラにする13年3月23日土曜日
  120. 120. ページ単位のスタイル ↓ 最小単位にバラバラにする ↓ 同じものを共通化13年3月23日土曜日
  121. 121. ページ単位のスタイル ↓ 最小単位にバラバラにする ↓ 同じものを共通化 ↓ 機能単位のスタイル13年3月23日土曜日
  122. 122. マークアップフェーズ13年3月23日土曜日
  123. 123. マークアップフェーズ • 常日頃から、 『共通部分は?違う部分は?』と 問い続ける13年3月23日土曜日
  124. 124. マークアップフェーズ • 常日頃から、 『共通部分は?違う部分は?』と 問い続ける • SassとかLESSとか、 ツール使えば解決する話じゃない13年3月23日土曜日
  125. 125. マークアップフェーズ • 常日頃から、 『共通部分は?違う部分は?』と 問い続ける • SassとかLESSとか、 ツール使えば解決する話じゃない • 逆に、前段上手く出来ていれば 機能単位は、HTML&CSSの1まとまり の単位になる13年3月23日土曜日
  126. 126. マークアップフェーズ • おまけ1 • CSSのセレクタの最初に必ずIDがつく のは、ページ単位で考えてる可能性が ある...かも • バラバラにして共通化してたら、 それはきっとclass名になるはず (csslintではWarning出ます)13年3月23日土曜日
  127. 127. マークアップフェーズ • おまけ2 • CSSのセレクタがずらずら並ぶのは、 要素を小さく保ててないから...かも •ひょっとして依存してる? • 何か複数の要素で構成されてないか 考えてみる、分解してみる13年3月23日土曜日
  128. 128. 目次 1. WebサイトとWebアプリの違うところ を、色んな切り口で見てみる 2. 協業前提の考え方 3. 押さえたいポイント 4. まとめ13年3月23日土曜日
  129. 129. まとめ13年3月23日土曜日
  130. 130. まとめ • (Webアプリに限らず) Web制作はこれから複雑化するので、 予め各工程で要素を小さく保つ13年3月23日土曜日
  131. 131. まとめ • (Webアプリに限らず) Web制作はこれから複雑化するので、 予め各工程で要素を小さく保つ • ページ単位ではなく、機能単位で 考える13年3月23日土曜日
  132. 132. まとめ • (Webアプリに限らず) Web制作はこれから複雑化するので、 予め各工程で要素を小さく保つ • ページ単位ではなく、機能単位で 考える • 依存関係を極力減らすために、 イメージの共有をする13年3月23日土曜日
  133. 133. 今、出来る部分が そんなに多くなくても13年3月23日土曜日
  134. 134. 出来るところを ちょっとずつ増やしていこう!13年3月23日土曜日
  135. 135. ご清聴ありがとう ございました!13年3月23日土曜日

×