More Related Content
Similar to Webサイトのようには作れない！Webアプリ設計の考え方
Similar to Webサイトのようには作れない！Webアプリ設計の考え方 (20)
More from girigiribauer (9)
Webサイトのようには作れない！Webアプリ設計の考え方
- 13. 最近のWebサイト制作の潮流、トレンド
（潮流、トレンド）
• Webサイトが、単に情報載せるだけの
役割を終えつつある（※もちろんなくな
るわけじゃない）
• とある機能に特化、例えば体験させる
ためのコンテンツとか
• Webサイトの中にWebアプリが部分的
にあるとか
- 14. 最近のWebサイト制作の潮流、トレンド
（技術面とか）
• サーバサイドでページ単位で返すもの
を、非同期で必要な部分だけ返す
• いわゆるAjax
• サーバサイドの負荷をクライアントサ
イドに逃がす
• ページ単位ではなく機能単位
- 15. 最近のWebサイト制作の潮流、トレンド
（デバイスの変化）
• スマートフォン、タブレット対応も併せ
てしてほしい
• Flashでやりましょう、は減っている
（激減してるので寂しい）
• 必然的に、JavaScriptでやりましょう、
が増えている
- 16. クライアントサイドの
Webアプリに集中
潮流、トレンド
技術面とか クライアントサイドの
Webアプリ
デバイスの変化
- 23. 今までのWebサイト構築のあるある
CTUのサイト構築の話が
あるんだよねー
Director
ほほぅ
Engineer
だいたいのページボリューム
と工数算出もして、
情報設計もしてあるから
Director
※Twenty Fourより引用
- 24. 今までのWebサイト構築のあるある
あと、
デザインよろしくねー
Director
はいはーい♪
Designer
デザインどう？
Director
※Twenty Fourより引用
- 25. 今までのWebサイト構築のあるある
はいはーい♪（差し出す）
Designer
お、いいねー。
じゃあエンジニアくん、
これで進めてね！
Director
はーい
Engineer
※Twenty Fourより引用
- 27. “最近の” Webサイト構築のあるある
CTUのサイト構築の話が
あるんだよねー
Director
ほほぅ
Engineer
今回はこの地図部分をAjaxでぐりぐりやっ
て、モーダルウィンドウでそのまま出した
いんだよね。工数算出もして、情報設計も
してあるから
Director
※Twenty Fourより引用
- 29. “最近の” Webサイト構築のあるある
はいはーい♪（差し出す）
Designer
お、いいねー。
じゃあエンジニアくん、
これで進めてね！
Director
えっ？えっ？
(内容の割に期間短くない？)
Engineer
※Twenty Fourより引用
- 30. “最近の” Webサイト構築のあるある
CTUのサイト構築の話が
あるんだよねー
Director
今回は、いま流行りのパララックスで
グィングィンとやっちゃいたいんだよね。
デザインよろしくねー
Director
はいはーい♪
Designer
※Twenty Fourより引用
- 34. だからこそ、要件定義の
話をしよう
1. どのタイミングでどのように介入すれ
ばいいのか
2. どう動けばいいのか（いわゆるテクニ
カルディレクター）
3. 最終的に何が決まればいいのか
- 36. 機能的要件を技術的要件に変換する
（1/4）
商品パーツをいくつか選ぶと、組み合わせた画像を
そのまま表示する（よくある着せ替え系）
• サーバサイドで画像合成する
• クライアントサイド、Flashで画像合成する
• クライアントサイド、Canvasで画像合成する
• あるいはそれらを組み合わせる
- 37. 機能的要件を技術的要件に変換する
（2/4）
他の要件を洗い出す
• まだまだIE6, 7とか削れない、シェア多い
• iPadはどうしても入れたい
• サーバは貧弱
• 費用は○○まででおさめたい（無茶ぶり・・）
- 38. 機能的要件を技術的要件に変換する
（3/4）
組み合わせて絞り込む
• サーバサイドで画像合成する
→ 貧弱なのでアクセス数や組み合わせ数次第では無理
• クライアントサイド、Flashで画像合成する
→ iPadに対応できない
• クライアントサイド、Canvasで画像合成する
→ IE6∼8に対応できない
• あるいはそれらを組み合わせる
→ 当確？（※お高くなりますよ？）
- 39. 機能的要件を技術的要件に変換する
（4/4）
• ここまでやって、ディレクターとメ
リット・デメリット含めて共有する
• あとはどこを妥協するかの話し合い
（費用、対応デバイスなど）
- 40. だからこそ、要件定義の
話をしよう
1. どのタイミングでどのように介入すれ
ばいいのか
2. どう動けばいいのか（いわゆるテクニ
カルディレクター）
3. 最終的に何が決まればいいのか
- 44. だからこそ、要件定義の
話をしよう
1. どのタイミングでどのように介入すれ
ばいいのか
2. どう動けばいいのか（いわゆるテクニ
カルディレクター）
3. 最終的に何が決まればいいのか
- 46. 小まとめ
• 技術的にやれる方法が増えてきている（サー
バ、クライアント）
• 適切に選ぶ、得意じゃないとこはお互い聞け
ばいい、選べないやつには選ばせない
• ここで適切なチョイスがなされないと、あと
でどんだけ頑張ってもいいものは作れない
• 自己防衛、テロを防ぐ
- 49. “最近の” Webサイト構築のあるある
CTUのサイト構築の話が
あるんだよねー
Director
今回は、画面遷移せずに
一連の流れでAjax的にぽちぽち選んでいく
コンテンツを作りたいんだよねー
デザインよろしくねー
Director
ちょっとまったー！！
Technical
Director ※Twenty Fourより引用
- 50. “最近の” Webサイト構築のあるある
もしかして、画面の切り替え
ごとにページ数＝画面数で算
出してたりしてないか？
Technical
Director
ああ、その通りだが
何か問題か？
Director
※Twenty Fourより引用
- 51. ページ(画面)単位ではなく
機能単位のが良い
• 実は設計だけじゃなく、要件定義にも
絡んでくる話
• 単独の機能（&UI）をもったひとまとま
りを単位で数える
• ＋API単位で数える
- 52. 個人的に取り入れてる設計
の手順
※世間的に名前が合ってるかどうか分からないけど、こう呼んでます
1. プロトタイプ制作
2. インターフェース定義
3. ウィジェット設計
- 56. 個人的に取り入れてる設計
の手順
※世間的に名前が合ってるかどうか分からないけど、こう呼んでます
1. プロトタイプ制作
2. インターフェース定義
3. ウィジェット設計
- 59. インターフェース定義の例
リクエスト
API名 必須 概要とか
パラメータ
imagecom 笑い顔、泣き顔、アヘ顔
face ○
position の中から選択する
acc ○ ・・・
bg ○ ・・・
- 62. 個人的に取り入れてる設計
の手順
※世間的に名前が合ってるかどうか分からないけど、こう呼んでます
1. プロトタイプ制作
2. インターフェース定義
3. ウィジェット設計
- 66. ウィジェット設計の例
• @takazudo さんの以下の資料がとても
分かりやすい
• http://dl.dropbox.com/u/268240/
presentations/jQueryRefactoring/
presentation/index.html
• http://dl.dropbox.com/u/268240/
presentations/cssnitelp18jq/index.html#/
• 切り分けてシンプルにする
- 69. 結局Webサイト構築とWebアプリ構築
の違いとは？
• 結局JavaScriptは使うし、HTML, CSSで書く
• Webアプリだからこそ、というよりは、
やれること増えてきてるからアプリも作
れるし、使う技術を適切に選ぶ必要があ
る
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
