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.
ニコニコ超デザインMetro  死闘編VoQnドワンゴ  ニコニコ事業部第三企画開発部  研究開発セクション                     口頭で説明していた事や,LTで話                     しそびれた事などをこ...
VoQn  -‐‑‒  あんただれ ドワンゴ  で  デザイン/UX/UI  研究 デザイナー? エンジニア? プログラマー?
VoQn  -‐‑‒  あんただれ ドワンゴ  で  デザイン/UX/UI  研究 デザイナー? エンジニア? プログラマー?デザイナーです (たぶん)
VoQn  -‐‑‒  あんただれ ニコニコ静画(電⼦子書籍)  2010/9  -‐‑‒  2011/11                             プロジェクト発足時から,プロ                         ...
VoQn  -‐‑‒  あんただれ Web  フロントエンド基礎技術  2011/12  -‐‑‒ Haskell  で超効率率率が良良くなる何か いつかオープンソースになるとよいですね
春の嵐嵐
春の嵐嵐上司  あらき  からペライチの紙を渡される(WDD)
春の嵐嵐上司  あらき  からペライチの紙を渡される(WDD)VoQn「へー  Win8 Metro アプリですかー,  誰がやるんすかねー(他人事)」
春の嵐嵐上司  あらき  からペライチの紙を渡される(WDD)VoQn「へー  Win8 Metro アプリですかー,  誰がやるんすかねー(他人事)」あらき「ぼーくんが      デザインやるんだよ」
春の嵐嵐
春の嵐嵐VoQn「へー(動揺)」
春の嵐嵐VoQn「へー(動揺)」あらき「今月末までに」
春の嵐嵐VoQn「へー(動揺)」あらき「今月末までに」VoQn「超クールだねー」
春の嵐嵐  VoQn「へー(動揺)」  あらき「今月末までに」  VoQn「超クールだねー」Windows  Developer  Days  (24/25⽇日)までにニコニコ動画の  Metro  デザインをやることに
春の嵐嵐実装は  @koizuka  がやると聞いて安⼼心coji「とにかくカッコいい    デザインで」coji「来週までラフ,再来週まで    ブラッシュアップ,んで提出」
春の嵐嵐
春の嵐嵐とりあえずその時点は  ゆっくり としたプランを    koizukaさんと練った
春の嵐嵐とりあえずその時点は  ゆっくり としたプランを    koizukaさんと練った⼀一週間でkoizuka  さんにプロトを組めるようにラフをアップ
春の嵐嵐とりあえずその時点は  ゆっくり としたプランを    koizukaさんと練った⼀一週間でkoizuka  さんにプロトを組めるようにラフをアップ⼆二週間⽬目に仕上げて提出
春の嵐嵐
春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,
春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,    水曜日の朝までにアプリのスクリーンショット送って」
春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,    水曜日の朝までにアプリのスクリーンショット送って」この⽇日は⾦金金曜⽇日
春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,    水曜日の朝までにアプリのスクリーンショット送って」この⽇日は⾦金金曜⽇日メールが来たのは18時
春の嵐嵐       先方が受取って確認するまでのラ       グを考えると,火曜日中に送信す       る必要がありました.
春の嵐嵐「…営業時間換算で      16時間切切ってるけど…」                 先方が受取って確認するまでのラ                 グを考えると,火曜日中に送信す                 る必要がありました.
春の嵐嵐「…営業時間換算で      16時間切切ってるけど…」「…今から100時間で      なんとかするか」                 先方が受取って確認するまでのラ                 グを考えると,火曜日中に送信す ...
スケジュール                              6          7  8    9           10     11   12       13      14 15   16    17    18   1...
スケジュール                              6          7デザインラフ  8    9           10     11   12       13      14 15   16    17    ...
スケジュール                              6          7デザインラフ           デザイン修正  8    9           10     11   12       13      14 ...
スケジュール                              6          7デザインラフ           デザイン修正  8    9           10     11   12       13      14実...
スケジュール                              6          7デザインラフ           デザイン修正  8    9           10     11   12       13      14実...
Inkscape
GUI  パーツ(4稿⽬目)          最終的なデモまでに4回ほど全面的に作り直          しをしています.          InkScape で svg を作り,透過png に書き          出し,各パーツを xam...
ランディング(7稿⽬目)       ランディングはデモの簡易化と,実装の工       数を考慮してダミーの画像のみ用意してい       ます.ただ,見えるものなので実際の利便       性を意識して7回ほど作り直しました
ランディング(7稿⽬目)
ランディング(7稿⽬目)<?xml version="1.0" encoding="UTF-8"standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rd...
プレーヤー(3稿⽬目)    デモ提出直前までプレーヤーはこのようなデザインでした.下部に    あるアプリバーは端末下端からスワイプで呼び出し.コメント入力    は画面をタップして起動する,というアイデアを採用していました
やっぱり SVG はエディタで手打ちだな!   xml や html を手打ちでやった方が丁寧にデザインしやすいと考える   原理主義者以外にはオススメしません.ふつうに Photoshop か   illustrator 使えばいいと思う
XAML  の悲劇            正確には 現状ある svg -> xaml の            xslt はあくまで xaml で表現され            たグラフィックファイルを書き出            すものであり...
XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」                            正確には 現状ある svg -> xaml...
XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」えっ                            正確には 現状ある svg -> xa...
XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」えっSVG  の変換  XSLTSilverLight  XAML  だった      正確には ...
XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」えっSVG  の変換  XSLTSilverLight  XAML  だった      正確には ...
どうしよう・・・
メモ帳ほんとに メモ帳で xaml を編集して koizuka さんとファイル共有してやりとりしていました
Internet  Explorer  9※  IE9  は  xaml  をレンダリングできる
やっぱり XAML はエディタで手打ちだな!    正しいデザインフローは,プロジェクトを git なりで共有して.    Visual Studio 11 のデザイナー機能を使って デザイン作業しコ    ミットするのが良いと思います
プレーヤー(5稿⽬目)     デモ直前になってデザインの再考をせまられて用意したもの     10分かそこいらでやらないといけなかったような思い出
2  weeks,  Result
2  weeks,  Result カラーマネジメント  (明るめ  /  暗め)
2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案)
2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案)
2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案) アプリのナビゲーションビュー  (4案)
2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案) アプリのナビゲーションビュー  (4案) プレーヤーのデザイン  (5案)
2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案) アプリのナビゲーションビュー  (4案) プレーヤーのデザイン  (5案) GUIパーツ⾒...
オチ  -‐‑‒  WDD  その後       川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと       おりに言ってました
オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」        川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと        おりに言ってました
オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 VoQn「よかったー,川上さんに   仕事してないって思われてたから」        川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと      ...
オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 VoQn「よかったー,川上さんに   仕事してないって思われてたから」 川上会⻑⾧長「えっ,これが (入社してから) はじめてした仕事でしょ?」       ...
オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 VoQn「よかったー,川上さんに   仕事してないって思われてたから」 川上会⻑⾧長「えっ,これが (入社してから) はじめてした仕事でしょ?」 VoQn「え...
ありがとうございましたもっとマシな発表とNicoNicoMetro(仮)の続報は                       これではあまりにも情報に有用                       性ないので,Metro 考察編に      ...
Upcoming SlideShare
Loading in …5
×

ニコニコ超デザイン-Metro死闘編-

31,390 views

Published on

2012/04/29 幕張メッセにて行われた ニコニコ超会議 超エンジニアミーティング の LT 枠で発表したスライドです.
不本意なことに企画のトリになってしまったので,肩の力を抜いて笑って終わりにしようという方向性に走ったので,あまり有用なキーノートではありません

ブログのエントリーにも書いた
http://voqn.blogspot.jp/2012/05/blog-post.html

Published in: Design
  • Be the first to comment

ニコニコ超デザイン-Metro死闘編-

  1. 1. ニコニコ超デザインMetro  死闘編VoQnドワンゴ  ニコニコ事業部第三企画開発部  研究開発セクション 口頭で説明していた事や,LTで話 しそびれた事などをここに書き足 してあります
  2. 2. VoQn  -‐‑‒  あんただれ ドワンゴ  で  デザイン/UX/UI  研究 デザイナー? エンジニア? プログラマー?
  3. 3. VoQn  -‐‑‒  あんただれ ドワンゴ  で  デザイン/UX/UI  研究 デザイナー? エンジニア? プログラマー?デザイナーです (たぶん)
  4. 4. VoQn  -‐‑‒  あんただれ ニコニコ静画(電⼦子書籍)  2010/9  -‐‑‒  2011/11 プロジェクト発足時から,プロ モーション,コンセプトワーク,デ ザイン,フロントエンドの実装を担 当しました
  5. 5. VoQn  -‐‑‒  あんただれ Web  フロントエンド基礎技術  2011/12  -‐‑‒ Haskell  で超効率率率が良良くなる何か いつかオープンソースになるとよいですね
  6. 6. 春の嵐嵐
  7. 7. 春の嵐嵐上司  あらき  からペライチの紙を渡される(WDD)
  8. 8. 春の嵐嵐上司  あらき  からペライチの紙を渡される(WDD)VoQn「へー Win8 Metro アプリですかー, 誰がやるんすかねー(他人事)」
  9. 9. 春の嵐嵐上司  あらき  からペライチの紙を渡される(WDD)VoQn「へー Win8 Metro アプリですかー, 誰がやるんすかねー(他人事)」あらき「ぼーくんが      デザインやるんだよ」
  10. 10. 春の嵐嵐
  11. 11. 春の嵐嵐VoQn「へー(動揺)」
  12. 12. 春の嵐嵐VoQn「へー(動揺)」あらき「今月末までに」
  13. 13. 春の嵐嵐VoQn「へー(動揺)」あらき「今月末までに」VoQn「超クールだねー」
  14. 14. 春の嵐嵐 VoQn「へー(動揺)」 あらき「今月末までに」 VoQn「超クールだねー」Windows  Developer  Days  (24/25⽇日)までにニコニコ動画の  Metro  デザインをやることに
  15. 15. 春の嵐嵐実装は  @koizuka  がやると聞いて安⼼心coji「とにかくカッコいい    デザインで」coji「来週までラフ,再来週まで    ブラッシュアップ,んで提出」
  16. 16. 春の嵐嵐
  17. 17. 春の嵐嵐とりあえずその時点は  ゆっくり としたプランを    koizukaさんと練った
  18. 18. 春の嵐嵐とりあえずその時点は  ゆっくり としたプランを    koizukaさんと練った⼀一週間でkoizuka  さんにプロトを組めるようにラフをアップ
  19. 19. 春の嵐嵐とりあえずその時点は  ゆっくり としたプランを    koizukaさんと練った⼀一週間でkoizuka  さんにプロトを組めるようにラフをアップ⼆二週間⽬目に仕上げて提出
  20. 20. 春の嵐嵐
  21. 21. 春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,
  22. 22. 春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,    水曜日の朝までにアプリのスクリーンショット送って」
  23. 23. 春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,    水曜日の朝までにアプリのスクリーンショット送って」この⽇日は⾦金金曜⽇日
  24. 24. 春の嵐嵐キックオフから3時間後,Microsoft様より「WDDでプレゼンに使えるか,      偉い⼈人に判断してもらうので,    水曜日の朝までにアプリのスクリーンショット送って」この⽇日は⾦金金曜⽇日メールが来たのは18時
  25. 25. 春の嵐嵐 先方が受取って確認するまでのラ グを考えると,火曜日中に送信す る必要がありました.
  26. 26. 春の嵐嵐「…営業時間換算で      16時間切切ってるけど…」 先方が受取って確認するまでのラ グを考えると,火曜日中に送信す る必要がありました.
  27. 27. 春の嵐嵐「…営業時間換算で      16時間切切ってるけど…」「…今から100時間で      なんとかするか」 先方が受取って確認するまでのラ グを考えると,火曜日中に送信す る必要がありました.
  28. 28. スケジュール 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 実際にはプログラムの方をkoizuka さんが平行して調査や実装を行っ ています
  29. 29. スケジュール 6 7デザインラフ 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 実際にはプログラムの方をkoizuka さんが平行して調査や実装を行っ ています
  30. 30. スケジュール 6 7デザインラフ デザイン修正 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 実際にはプログラムの方をkoizuka さんが平行して調査や実装を行っ ています
  31. 31. スケジュール 6 7デザインラフ デザイン修正 8 9 10 11 12 13 14実装組み込み 15 16 17 18 19 20 21 22 23 24 25 実際にはプログラムの方をkoizuka さんが平行して調査や実装を行っ ています
  32. 32. スケジュール 6 7デザインラフ デザイン修正 8 9 10 11 12 13 14実装組み込み 15 16 17 18 19 20 21検証・仕上げ 22 23 24 25 実際にはプログラムの方をkoizuka さんが平行して調査や実装を行っ ています
  33. 33. Inkscape
  34. 34. GUI  パーツ(4稿⽬目) 最終的なデモまでに4回ほど全面的に作り直 しをしています. InkScape で svg を作り,透過png に書き 出し,各パーツを xaml で割り当てました
  35. 35. ランディング(7稿⽬目) ランディングはデモの簡易化と,実装の工 数を考慮してダミーの画像のみ用意してい ます.ただ,見えるものなので実際の利便 性を意識して7回ほど作り直しました
  36. 36. ランディング(7稿⽬目)
  37. 37. ランディング(7稿⽬目)<?xml version="1.0" encoding="UTF-8"standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="1366" height="768" id="landing-view"version="1.1"><!-- ... --></svg>
  38. 38. プレーヤー(3稿⽬目) デモ提出直前までプレーヤーはこのようなデザインでした.下部に あるアプリバーは端末下端からスワイプで呼び出し.コメント入力 は画面をタップして起動する,というアイデアを採用していました
  39. 39. やっぱり SVG はエディタで手打ちだな! xml や html を手打ちでやった方が丁寧にデザインしやすいと考える 原理主義者以外にはオススメしません.ふつうに Photoshop か illustrator 使えばいいと思う
  40. 40. XAML  の悲劇 正確には 現状ある svg -> xaml の xslt はあくまで xaml で表現され たグラフィックファイルを書き出 すものであり.WPF, SilverLight で利用するには,そこから更に手 で編集しなおす必要があった
  41. 41. XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」 正確には 現状ある svg -> xaml の xslt はあくまで xaml で表現され たグラフィックファイルを書き出 すものであり.WPF, SilverLight で利用するには,そこから更に手 で編集しなおす必要があった
  42. 42. XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」えっ 正確には 現状ある svg -> xaml の xslt はあくまで xaml で表現され たグラフィックファイルを書き出 すものであり.WPF, SilverLight で利用するには,そこから更に手 で編集しなおす必要があった
  43. 43. XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」えっSVG  の変換  XSLTSilverLight  XAML  だった 正確には 現状ある svg -> xaml の xslt はあくまで xaml で表現され たグラフィックファイルを書き出 すものであり.WPF, SilverLight で利用するには,そこから更に手 で編集しなおす必要があった
  44. 44. XAML  の悲劇koizuka「なんか  Visual  Studio  で                            エラーでる」えっSVG  の変換  XSLTSilverLight  XAML  だった 正確には 現状ある svg -> xaml の xslt はあくまで xaml で表現され たグラフィックファイルを書き出そんな… すものであり.WPF, SilverLight で利用するには,そこから更に手 で編集しなおす必要があった
  45. 45. どうしよう・・・
  46. 46. メモ帳ほんとに メモ帳で xaml を編集して koizuka さんとファイル共有してやりとりしていました
  47. 47. Internet  Explorer  9※  IE9  は  xaml  をレンダリングできる
  48. 48. やっぱり XAML はエディタで手打ちだな! 正しいデザインフローは,プロジェクトを git なりで共有して. Visual Studio 11 のデザイナー機能を使って デザイン作業しコ ミットするのが良いと思います
  49. 49. プレーヤー(5稿⽬目) デモ直前になってデザインの再考をせまられて用意したもの 10分かそこいらでやらないといけなかったような思い出
  50. 50. 2  weeks,  Result
  51. 51. 2  weeks,  Result カラーマネジメント  (明るめ  /  暗め)
  52. 52. 2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案)
  53. 53. 2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案)
  54. 54. 2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案) アプリのナビゲーションビュー  (4案)
  55. 55. 2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案) アプリのナビゲーションビュー  (4案) プレーヤーのデザイン  (5案)
  56. 56. 2  weeks,  Result カラーマネジメント  (明るめ  /  暗め) スプラッシュ画像  (2案) アプリのランディングビュー  (7案) アプリのナビゲーションビュー  (4案) プレーヤーのデザイン  (5案) GUIパーツ⾒見見積りから全部  (34個)
  57. 57. オチ  -‐‑‒  WDD  その後 川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと おりに言ってました
  58. 58. オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと おりに言ってました
  59. 59. オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 VoQn「よかったー,川上さんに 仕事してないって思われてたから」 川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと おりに言ってました
  60. 60. オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 VoQn「よかったー,川上さんに 仕事してないって思われてたから」 川上会⻑⾧長「えっ,これが (入社してから) はじめてした仕事でしょ?」 川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと おりに言ってました
  61. 61. オチ  -‐‑‒  WDD  その後 川上会⻑⾧長「なんだ出来てるジャン,イイねェ」 VoQn「よかったー,川上さんに 仕事してないって思われてたから」 川上会⻑⾧長「えっ,これが (入社してから) はじめてした仕事でしょ?」 VoQn「えっ…」 川上会長,めっちゃほめてくれて嬉しかったけど,原文ママこのと おりに言ってました
  62. 62. ありがとうございましたもっとマシな発表とNicoNicoMetro(仮)の続報は これではあまりにも情報に有用 性ないので,Metro 考察編に て,ちゃんとして技術的解説や後⽇日の続報にご期待ください デザイン手法,設計指針につい て解説しようと思います

×