Downloaded 23 times
More Related Content
![[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性](https://cdn.slidesharecdn.com/ss_thumbnails/uxux-211214103138-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CCL web vol.6] 2014年のWebデザイントレンドと 本当に必要とされるデザインと手法](https://cdn.slidesharecdn.com/ss_thumbnails/cclslide20140708-140717040232-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Webサイトのようには作れない！Webアプリ設計の考え方
Webサイトのようには作れない！Webアプリ設計の考え方
- 1. Webサイトの ようには作れない！ Webアプリ設計の 考え方 @girigiribauer
- 2.
- 3. Webアプリは、つくるもの （≒構成物）は同じでも、 つくりかた（≒段取り、設計） は全然ちがった、 という内容について話します
- 4. 自己紹介 • TwitterID: @girigiribauer •名古屋の某Web制作会社で 働いています • いつもぎりぎりで戦ってます （※ブランディング）
- 5. 今日はもう少し細かい自己紹介 • マークアップエンジニアやったり • テクニカルディレクターやったり •大規模なプロジェクトのCMSの設計、 実装したり • Flashクリエイターやったり
- 6.
- 7. Webアプリとは • ここでいうWebアプリは、クライアン トサイド中心に動くWebアプリ •もっと言うとJavaScriptを中心とした Webアプリ • Webサイトと呼ばれる中に、Webアプ リが混在することもある
- 8. お品書き • 前置き（おわり） • 最近のWebサイト制作の潮流、トレンド •要件定義の話 • 設計の話 • まとめ
- 9. 最近のWebサイト制作の 潮流、トレンド • 個人的な感想が主です
- 10.
- 11.
- 12.
- 13. 最近のWebサイト制作の潮流、トレンド （潮流、トレンド） • Webサイトが、単に情報載せるだけの 役割を終えつつある（※もちろんなくな るわけじゃない） • とある機能に特化、例えば体験させる ためのコンテンツとか • Webサイトの中にWebアプリが部分的 にあるとか
- 14. 最近のWebサイト制作の潮流、トレンド （技術面とか） • サーバサイドでページ単位で返すもの を、非同期で必要な部分だけ返す • いわゆるAjax • サーバサイドの負荷をクライアントサ イドに逃がす • ページ単位ではなく機能単位
- 15. 最近のWebサイト制作の潮流、トレンド （デバイスの変化） • スマートフォン、タブレット対応も併せ てしてほしい • Flashでやりましょう、は減っている （激減してるので寂しい） • 必然的に、JavaScriptでやりましょう、 が増えている
- 16. クライアントサイドの Webアプリに集中 潮流、トレンド 技術面とか クライアントサイドの Webアプリ デバイスの変化
- 17.
- 18.
- 19. 需要高いよ！ チャンスだよ！
- 20. お品書き • 前置き（おわり） • 最近のWebサイト制作の潮流、トレンド （おわり） • 要件定義の話 • 設計の話 • まとめ
- 21. 要件定義の話 • 作れる方法が増えてきたことで、 前段をほったらかしにすると あとで痛い目に・・・
- 22. 今までのWebサイト構築のあるある ※弊社とは全く関係のない、 一個人の見解です
- 23. 今までのWebサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director ほほぅ Engineer だいたいのページボリューム と工数算出もして、 情報設計もしてあるから Director ※Twenty Fourより引用
- 24. 今までのWebサイト構築のあるある あと、 デザインよろしくねー Director はいはーい♪ Designer デザインどう？ Director ※Twenty Fourより引用
- 25. 今までのWebサイト構築のあるある はいはーい♪（差し出す） Designer お、いいねー。 じゃあエンジニアくん、 これで進めてね！ Director はーい Engineer ※Twenty Fourより引用
- 26. 今までのWebサイト構築 • 経験があればこの流れでもそれなりに 出来る •構築フローとしては定着してるので、 「ここおかしくない？」って誰もが言 いやすい
- 27. “最近の” Webサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director ほほぅ Engineer 今回はこの地図部分をAjaxでぐりぐりやっ て、モーダルウィンドウでそのまま出した いんだよね。工数算出もして、情報設計も してあるから Director ※Twenty Fourより引用
- 28. “最近の” Webサイト構築のあるある あと、 デザインよろしくねー Director はいはーい♪ Designer ※Twenty Fourより引用
- 29. “最近の” Webサイト構築のあるある はいはーい♪（差し出す） Designer お、いいねー。 じゃあエンジニアくん、 これで進めてね！ Director えっ？えっ？ (内容の割に期間短くない？) Engineer ※Twenty Fourより引用
- 30. “最近の” Webサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director 今回は、いま流行りのパララックスで グィングィンとやっちゃいたいんだよね。 デザインよろしくねー Director はいはーい♪ Designer ※Twenty Fourより引用
- 31. “最近の” Webサイト構築のあるある ※Twenty Fourより引用
- 32. “最近の” Webサイト構築のあるある なんだって・・・？ ※Twenty Fourより引用
- 33. どこに問題があるのか • 普通のWebサイトに慣れてるディレク ターだけでは、要件定義できないかも •そういう人に任せていたら、最後に死 ぬのは自分自身、はりたおしてでも変 な要件がくるのを阻止すべき • 自己防衛、テロを防ぐ
- 34. だからこそ、要件定義の 話をしよう 1. どのタイミングでどのように介入すれ ばいいのか 2. どう動けばいいのか（いわゆるテクニ カルディレクター） 3. 最終的に何が決まればいいのか
- 35. 1. どのタイミングでどのよ うに介入すればいいのか？ • 理想は「どのような機能的な要件があ るか」をディレクターがヒアリング • 機能的要件を技術的要件に変換する • 他タスクで時間がないかもしれないけ ど、要件が確定してしまう前に介入
- 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. 最終的に何が決まればいいのか
- 41. どう動けばいいのか • 火は着火する前に消す • ディレクターが技術的に分からない人 だったとしても、複数の方法のメリッ ト・デメリットまで提示されれば動け る人は多い • 場合によってはプロトタイプ作る（後述）
- 42. 理解ある人と仕事をしよう • 技術的なところは分からないから相談 する、という段取りができる人と仕事 をしよう • できない、わからないということ自体 は悪じゃない • できてない、わかってないという認識 がないことこそが悪
- 43.
- 44. だからこそ、要件定義の 話をしよう 1. どのタイミングでどのように介入すれ ばいいのか 2. どう動けばいいのか（いわゆるテクニ カルディレクター） 3. 最終的に何が決まればいいのか
- 45. 最終的に何が決まればいいのか • 結果的に技術的な要件定義ができてい ればOK •それぞれの方法に対してどれくらいかか るかを目安として共有する、判断材料の 1つ • ディレクターに任せるところは任せる (ディレクターになる必要はない）
- 46. 小まとめ • 技術的にやれる方法が増えてきている（サー バ、クライアント） • 適切に選ぶ、得意じゃないとこはお互い聞け ばいい、選べないやつには選ばせない • ここで適切なチョイスがなされないと、あと でどんだけ頑張ってもいいものは作れない • 自己防衛、テロを防ぐ
- 47. お品書き • 前置き（おわり） • 最近のWebサイト制作の潮流、トレンド （おわり） • 要件定義の話（おわり） • 設計の話 • まとめ
- 48. 設計の話 • ページ単位で進めると、大問題になる 可能性 •Webサイト制作に慣れてる人ほどあり がち • 機能単位のくくりだしが必要
- 49. “最近の” Webサイト構築のあるある CTUのサイト構築の話が あるんだよねー Director 今回は、画面遷移せずに 一連の流れでAjax的にぽちぽち選んでいく コンテンツを作りたいんだよねー デザインよろしくねー Director ちょっとまったー！！ Technical Director ※Twenty Fourより引用
- 50. “最近の” Webサイト構築のあるある もしかして、画面の切り替え ごとにページ数＝画面数で算 出してたりしてないか？ Technical Director ああ、その通りだが 何か問題か？ Director ※Twenty Fourより引用
- 51. ページ(画面)単位ではなく 機能単位のが良い • 実は設計だけじゃなく、要件定義にも 絡んでくる話 • 単独の機能（&UI）をもったひとまとま りを単位で数える • ＋API単位で数える
- 52. 個人的に取り入れてる設計 の手順 ※世間的に名前が合ってるかどうか分からないけど、こう呼んでます 1. プロトタイプ制作 2. インターフェース定義 3. ウィジェット設計
- 53. 1. プロトタイプ制作 ※ホントは要件定義で行う想定ですが、前段に書くとごちゃごちゃするのでこちらで紹介 • 制作時におけるリスクを可能な限り減らす • 想定される機能のみを、検証するために作る • 例）Canvasの画像合成において、どのブラウ ザでどこまでマスク処理できるか試す
- 54. 1. プロトタイプ制作 ※ホントは要件定義で行う想定ですが、前段に書くとごちゃごちゃするのでこちらで紹介 • 汎用的なものほど資産にでき、流用できる • 書籍「テスト駆動JavaScript」にある学習テス トに近い？
- 55.
- 56. 個人的に取り入れてる設計 の手順 ※世間的に名前が合ってるかどうか分からないけど、こう呼んでます 1. プロトタイプ制作 2. インターフェース定義 3. ウィジェット設計
- 57. 2.インターフェース定義 • サーバとクライアント間の通信を定義す る •いわゆるAPI（内部API、公開しない） • データください、データあげますの定義 • 基本的にはJSON
- 58. インターフェース定義の例 例えば、顔と小物と背景のパーツを選んだら、 合成した1枚絵が返ってくるようなもの • リクエストURL （http://domain/api/imagecomposition/） • リクエストパラメータの定義（face, acc, bg） • レスポンス形式を決める
- 59. インターフェース定義の例 リクエスト API名 必須 概要とか パラメータ imagecom 笑い顔、泣き顔、アヘ顔 face ○ position の中から選択する acc ○ ・・・ bg ○ ・・・
- 60. インターフェース定義の例 レスポンスのサンプル（JSON） { "head":{ "success": 1 }, "data": { "image": "/resource/mainimage.png" } }
- 61. インターフェース定義の例 • 仕様として共有できる形にする • 決めておけば、平行して実装できる •仮に自分1人でやるときも、いざという ときお願いできるようにしておく • 切り分けてシンプルにする
- 62. 個人的に取り入れてる設計 の手順 ※世間的に名前が合ってるかどうか分からないけど、こう呼んでます 1. プロトタイプ制作 2. インターフェース定義 3. ウィジェット設計
- 63. 3. ウィジェット設計 ※ここでは機能とビューの1つのまとまりの単位をウィジェットと呼んでます •JavaScriptだけなら、他言語参考にして やればOK • HTMLも含めて考えると、完全に機能と ビューを切り分けられない • 機能とUIのひとまとまりをウィジェッ トとして定義する • ウィジェットは汎用的に作る
- 64. ウィジェット設計の例 A B C こうではなくて・・・
- 65. ウィジェット設計の例 A B C こんなかんじ（機能単位！）
- 66. ウィジェット設計の例 • @takazudo さんの以下の資料がとても 分かりやすい • http://dl.dropbox.com/u/268240/ presentations/jQueryRefactoring/ presentation/index.html • http://dl.dropbox.com/u/268240/ presentations/cssnitelp18jq/index.html#/ • 切り分けてシンプルにする
- 67. 小まとめ • 前段で動いて、要件的なリスクを減らす • シンプルに分けて、実装的なリスクを 減らす • お願いしやすくしておいて、社内リソー ス的なリスクを減らす • 自己防衛、テロを防ぐ
- 68. お品書き • 前置き（おわり） • 最近のWebサイト制作の潮流、トレンド （おわり） • 要件定義の話（おわり） • 設計の話（おわり） • まとめ
- 69. 結局Webサイト構築とWebアプリ構築 の違いとは？ • 結局JavaScriptは使うし、HTML, CSSで書く • Webアプリだからこそ、というよりは、 やれること増えてきてるからアプリも作 れるし、使う技術を適切に選ぶ必要があ る
- 70. 要件定義から • やれる方法が増えているので、適切に 選ぶ •その障害になってるやつはどんな方法 を使っても排除する • 自己防衛、テロを防ぐ
- 71. 設計から • ディレクター、デザイナーの工程を待 たなくてもやれることはたくさんある •何事もシンプルに分けて、リスクを分 散しよう • 自己防衛、テロを防ぐ
- 72. 大まとめ • プロジェクトメンバーに、選択肢が増 えているから、適切に選ぶ必要がある ことを浸透させる • 「段取りや算段立てないで 勝手に進め ちゃうやつは はりたおす！」っていう 段取りTシャツを作るとか
- 73.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n