1.
ニコニコ超デザイン
Metro 死闘編
VoQn
ドワンゴ ニコニコ事業部
第三企画開発部 研究開発セクション
口頭で説明していた事や，LTで話
しそびれた事などをここに書き足
してあります

2.
VoQn -‐‑‒ あんただれ
ドワンゴ で デザイン/UX/UI 研究
デザイナー?
エンジニア?
プログラマー?

3.
VoQn -‐‑‒ あんただれ
ドワンゴ で デザイン/UX/UI 研究
デザイナー?
エンジニア?
プログラマー?
デザイナーです (たぶん)

4.
VoQn -‐‑‒ あんただれ
ニコニコ静画(電⼦子書籍) 2010/9 -‐‑‒ 2011/11
プロジェクト発足時から，プロ
モーション，コンセプトワーク，デ
ザイン，フロントエンドの実装を担
当しました

5.
VoQn -‐‑‒ あんただれ
Web フロントエンド基礎技術 2011/12 -‐‑‒
Haskell で超効率率率が良良くなる何か
いつかオープンソースになるとよいですね

6.
春の嵐嵐

7.
春の嵐嵐
上司 あらき から
ペライチの紙を渡される(WDD)

8.
春の嵐嵐
上司 あらき から
ペライチの紙を渡される(WDD)
VoQn「へー
Win8 Metro アプリですかー,
誰がやるんすかねー(他人事)」

9.
春の嵐嵐
上司 あらき から
ペライチの紙を渡される(WDD)
VoQn「へー
Win8 Metro アプリですかー,
誰がやるんすかねー(他人事)」
あらき「ぼーくんが
デザインやるんだよ」

10.
春の嵐嵐

11.
春の嵐嵐
VoQn「へー(動揺)」

12.
春の嵐嵐
VoQn「へー(動揺)」
あらき「今月末までに」

13.
春の嵐嵐
VoQn「へー(動揺)」
あらき「今月末までに」
VoQn「超クールだねー」

14.
春の嵐嵐
VoQn「へー(動揺)」
あらき「今月末までに」
VoQn「超クールだねー」
Windows Developer Days (24/25⽇日)までに
ニコニコ動画の Metro デザインをやることに

15.
春の嵐嵐
実装は @koizuka がやると聞いて
安⼼心
coji「とにかくカッコいい
デザインで」
coji「来週までラフ，再来週まで
ブラッシュアップ，んで提出」

16.
春の嵐嵐

17.
春の嵐嵐
とりあえずその時点は
ゆっくり としたプランを
koizukaさんと練った

18.
春の嵐嵐
とりあえずその時点は
ゆっくり としたプランを
koizukaさんと練った
⼀一週間でkoizuka さんにプロトを組
めるようにラフをアップ

19.
春の嵐嵐
とりあえずその時点は
ゆっくり としたプランを
koizukaさんと練った
⼀一週間でkoizuka さんにプロトを組
めるようにラフをアップ
⼆二週間⽬目に仕上げて提出

20.
春の嵐嵐

21.
春の嵐嵐
キックオフから3時間後，Microsoft様より
「WDDでプレゼンに使えるか，
偉い⼈人に判断してもらうので，

22.
春の嵐嵐
キックオフから3時間後，Microsoft様より
「WDDでプレゼンに使えるか，
偉い⼈人に判断してもらうので，
水曜日の朝までにアプリの
スクリーンショット送って」

23.
春の嵐嵐
キックオフから3時間後，Microsoft様より
「WDDでプレゼンに使えるか，
偉い⼈人に判断してもらうので，
水曜日の朝までにアプリの
スクリーンショット送って」
この⽇日は⾦金金曜⽇日

24.
春の嵐嵐
キックオフから3時間後，Microsoft様より
「WDDでプレゼンに使えるか，
偉い⼈人に判断してもらうので，
水曜日の朝までにアプリの
スクリーンショット送って」
この⽇日は⾦金金曜⽇日
メールが来たのは18時

25.
春の嵐嵐
先方が受取って確認するまでのラ
グを考えると，火曜日中に送信す
る必要がありました．

26.
春の嵐嵐
「…営業時間換算で
16時間切切ってるけど…」
先方が受取って確認するまでのラ
グを考えると，火曜日中に送信す
る必要がありました．

27.
春の嵐嵐
「…営業時間換算で
16時間切切ってるけど…」
「…今から100時間で
なんとかするか」
先方が受取って確認するまでのラ
グを考えると，火曜日中に送信す
る必要がありました．

28.
スケジュール
6 7
8 9
10 11 12 13 14
15 16 17 18 19
20 21
22 23 24
25
実際にはプログラムの方をkoizuka
さんが平行して調査や実装を行っ
ています

29.
スケジュール
6 7
デザインラフ
8 9
10 11 12 13 14
15 16 17 18 19
20 21
22 23 24
25
実際にはプログラムの方をkoizuka
さんが平行して調査や実装を行っ
ています

30.
スケジュール
6 7
デザインラフ デザイン修正
8 9
10 11 12 13 14
15 16 17 18 19
20 21
22 23 24
25
実際にはプログラムの方をkoizuka
さんが平行して調査や実装を行っ
ています

31.
スケジュール
6 7
デザインラフ デザイン修正
8 9
10 11 12 13 14
実装組み込み
15 16 17 18 19
20 21
22 23 24
25
実際にはプログラムの方をkoizuka
さんが平行して調査や実装を行っ
ています

32.
スケジュール
6 7
デザインラフ デザイン修正
8 9
10 11 12 13 14
実装組み込み
15 16 17 18 19
20 21
検証・仕上げ
22 23 24
25
実際にはプログラムの方をkoizuka
さんが平行して調査や実装を行っ
ています

33.
Inkscape

34.
GUI パーツ(4稿⽬目)
最終的なデモまでに4回ほど全面的に作り直
しをしています．
InkScape で svg を作り，透過png に書き
出し，各パーツを xaml で割り当てました

35.
ランディング(7稿⽬目)
ランディングはデモの簡易化と，実装の工
数を考慮してダミーの画像のみ用意してい
ます．ただ，見えるものなので実際の利便
性を意識して7回ほど作り直しました

36.
ランディング(7稿⽬目)

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.
プレーヤー(3稿⽬目)
デモ提出直前までプレーヤーはこのようなデザインでした．下部に
あるアプリバーは端末下端からスワイプで呼び出し．コメント入力
は画面をタップして起動する，というアイデアを採用していました

39.
やっぱり SVG は
エディタで手打ちだな!
xml や html を手打ちでやった方が丁寧にデザインしやすいと考える
原理主義者以外にはオススメしません．ふつうに Photoshop か
illustrator 使えばいいと思う

40.
XAML の悲劇
正確には 現状ある svg -> xaml の
xslt はあくまで xaml で表現され
たグラフィックファイルを書き出
すものであり．WPF, SilverLight
で利用するには，そこから更に手
で編集しなおす必要があった

41.
XAML の悲劇
koizuka「なんか Visual Studio で
エラーでる」
正確には 現状ある svg -> xaml の
xslt はあくまで xaml で表現され
たグラフィックファイルを書き出
すものであり．WPF, SilverLight
で利用するには，そこから更に手
で編集しなおす必要があった

42.
XAML の悲劇
koizuka「なんか Visual Studio で
エラーでる」
えっ
正確には 現状ある svg -> xaml の
xslt はあくまで xaml で表現され
たグラフィックファイルを書き出
すものであり．WPF, SilverLight
で利用するには，そこから更に手
で編集しなおす必要があった

43.
XAML の悲劇
koizuka「なんか Visual Studio で
エラーでる」
えっ
SVG の変換 XSLT
SilverLight XAML だった 正確には 現状ある svg -> xaml の
xslt はあくまで xaml で表現され
たグラフィックファイルを書き出
すものであり．WPF, SilverLight
で利用するには，そこから更に手
で編集しなおす必要があった

44.
XAML の悲劇
koizuka「なんか Visual Studio で
エラーでる」
えっ
SVG の変換 XSLT
SilverLight XAML だった 正確には 現状ある svg -> xaml の
xslt はあくまで xaml で表現され
たグラフィックファイルを書き出
そんな… すものであり．WPF, SilverLight
で利用するには，そこから更に手
で編集しなおす必要があった

45.
どうしよう・・・

46.
メモ帳
ほんとに メモ帳で xaml を編集して koizuka さんとファイル共有
してやりとりしていました

47.
Internet Explorer 9
※ IE9 は xaml をレンダリングできる

48.
やっぱり XAML は
エディタで手打ちだな!
正しいデザインフローは，プロジェクトを git なりで共有して．
Visual Studio 11 のデザイナー機能を使って デザイン作業しコ
ミットするのが良いと思います

49.
プレーヤー(5稿⽬目)
デモ直前になってデザインの再考をせまられて用意したもの
10分かそこいらでやらないといけなかったような思い出

50.
2 weeks, Result

51.
2 weeks, Result
カラーマネジメント (明るめ / 暗め)

52.
2 weeks, Result
カラーマネジメント (明るめ / 暗め)
スプラッシュ画像 (2案)

53.
2 weeks, Result
カラーマネジメント (明るめ / 暗め)
スプラッシュ画像 (2案)
アプリのランディングビュー (7案)

54.
2 weeks, Result
カラーマネジメント (明るめ / 暗め)
スプラッシュ画像 (2案)
アプリのランディングビュー (7案)
アプリのナビゲーションビュー (4案)

55.
2 weeks, Result
カラーマネジメント (明るめ / 暗め)
スプラッシュ画像 (2案)
アプリのランディングビュー (7案)
アプリのナビゲーションビュー (4案)
プレーヤーのデザイン (5案)

56.
2 weeks, Result
カラーマネジメント (明るめ / 暗め)
スプラッシュ画像 (2案)
アプリのランディングビュー (7案)
アプリのナビゲーションビュー (4案)
プレーヤーのデザイン (5案)
GUIパーツ⾒見見積りから全部 (34個)

57.
オチ -‐‑‒ WDD その後
川上会長，めっちゃほめてくれて嬉しかったけど，原文ママこのと
おりに言ってました

58.
オチ -‐‑‒ WDD その後
川上会⻑⾧長「なんだ出来てるジャン，イイねェ」
川上会長，めっちゃほめてくれて嬉しかったけど，原文ママこのと
おりに言ってました

59.
オチ -‐‑‒ WDD その後
川上会⻑⾧長「なんだ出来てるジャン，イイねェ」
VoQn「よかったー，川上さんに
仕事してないって思われてたから」
川上会長，めっちゃほめてくれて嬉しかったけど，原文ママこのと
おりに言ってました

60.
オチ -‐‑‒ WDD その後
川上会⻑⾧長「なんだ出来てるジャン，イイねェ」
VoQn「よかったー，川上さんに
仕事してないって思われてたから」
川上会⻑⾧長「えっ，これが (入社してから)
はじめてした仕事でしょ?」
川上会長，めっちゃほめてくれて嬉しかったけど，原文ママこのと
おりに言ってました

61.
オチ -‐‑‒ WDD その後
川上会⻑⾧長「なんだ出来てるジャン，イイねェ」
VoQn「よかったー，川上さんに
仕事してないって思われてたから」
川上会⻑⾧長「えっ，これが (入社してから)
はじめてした仕事でしょ?」
VoQn「えっ…」
川上会長，めっちゃほめてくれて嬉しかったけど，原文ママこのと
おりに言ってました

62.
ありがとうございました
もっとマシな発表と
NicoNicoMetro(仮)の続報は
これではあまりにも情報に有用
性ないので，Metro 考察編に
て，ちゃんとして技術的解説や
後⽇日の続報にご期待ください デザイン手法，設計指針につい
て解説しようと思います