狠狠撸

ニコニコ超デザイン
Metro ?死闘編
VoQn
ドワンゴ ?ニコニコ事業部
第三企画開発部 ?研究開発セクション

口頭で説明していた事や，LTで話
しそびれた事などをここに書き足
してあります

VoQn ?-‐?? ?あんただれ
ドワンゴ ?で ?デザイン/UX/UI ?研究

デザイナー?

エンジニア?

プログラマー?

ドワンゴ ?で ?デザイン/UX/UI ?研究

デザイナー?

エンジニア?

プログラマー?

デザイナーです (たぶん)


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


Web ?フロントエンド基礎技術 ?2011/12 ?-‐??

Haskell ?で超効率率率が良良くなる何か

いつかオープンソースになるとよいですね

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

春の嵐嵐

VoQn「へー
Win8 Metro アプリですかー,
誰がやるんすかねー(他人事)」

春の嵐嵐

VoQn「へー
Win8 Metro アプリですかー,
誰がやるんすかねー(他人事)」

あらき「ぼーくんが
? ? ?デザインやるんだよ」

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

春の嵐嵐

あらき「今月末までに」

春の嵐嵐


VoQn「超クールだねー」

春の嵐嵐


VoQn「超クールだねー」

Windows ?Developer ?Days ?(24/25?日)までに
ニコニコ動画の ?Metro ?デザインをやることに

春の嵐嵐
実装は ?@koizuka ?がやると聞いて
安?心

coji「とにかくカッコいい
? ?デザインで」

coji「来週までラフ，再来週まで
? ?ブラッシュアップ，んで提出」

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

春の嵐嵐

?一週間でkoizuka ?さんにプロトを組
めるようにラフをアップ

春の嵐嵐

?一週間でkoizuka ?さんにプロトを組
めるようにラフをアップ

?二週間?目に仕上げて提出

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

春の嵐嵐

? ?水曜日の朝までにアプリの

スクリーンショット送って」

春の嵐嵐



この?日は?金金曜?日

春の嵐嵐



この?日は?金金曜?日

メールが来たのは18時

春の嵐嵐

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

春の嵐嵐
「…営業時間換算で
? ? ?16時間切切ってるけど…」


春の嵐嵐
「…営業時間換算で
? ? ?16時間切切ってるけど…」

「…今から100時間で
? ? ?なんとかするか」


スケジュール
6 7

8 9
10 11 12 13 14

15 16 17 18 19
20 21

22 23 24
25
実際にはプログラムの方をkoizuka
さんが平行して調査や実装を行っ
ています

スケジュール
6 7

デザインラフ
8 9
10 11 12 13 14

15 16 17 18 19
20 21

22 23 24
25
ています

スケジュール
6 7

デザインラフデザイン修正
8 9
10 11 12 13 14

15 16 17 18 19
20 21

22 23 24
25
ています

スケジュール
6 7

8 9
10 11 12 13 14

実装組み込み
15 16 17 18 19
20 21

22 23 24
25
ています

スケジュール
6 7

8 9
10 11 12 13 14

実装組み込み
15 16 17 18 19
20 21

検証?仕上げ
22 23 24
25
ています

GUI ?パーツ(4稿?目)

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

ランディング(7稿?目)

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

ランディング(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>

プレーヤー(3稿?目)

デモ提出直前までプレーヤーはこのようなデザインでした．下部に
あるアプリバーは端末下端からスワイプで呼び出し．コメント入力
は画面をタップして起動する，というアイデアを採用していました

やっぱり SVG は
エディタで手打ちだな!

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

XAML ?の悲劇

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

XAML ?の悲劇
koizuka「なんか ?Visual ?Studio ?で
? ? ? ? ? ? ? ? ? ? ? ? ? ?エラーでる」


XAML ?の悲劇
? ? ? ? ? ? ? ? ? ? ? ? ? ?エラーでる」
えっ


XAML ?の悲劇
? ? ? ? ? ? ? ? ? ? ? ? ? ?エラーでる」
えっ

SVG ?の変換 ?XSLT
SilverLight ?XAML ?だった正確には現状ある svg -> xaml の

XAML ?の悲劇
? ? ? ? ? ? ? ? ? ? ? ? ? ?エラーでる」
えっ

SVG ?の変換 ?XSLT
SilverLight ?XAML ?だった正確には現状ある svg -> xaml の

そんな… すものであり．WPF, SilverLight

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

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

やっぱり XAML は
エディタで手打ちだな!

正しいデザインフローは，プロジェクトを git なりで共有して．
Visual Studio 11 のデザイナー機能を使ってデザイン作業しコ
ミットするのが良いと思います

プレーヤー(5稿?目)

デモ直前になってデザインの再考をせまられて用意したもの
10分かそこいらでやらないといけなかったような思い出

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

2 ?weeks, ?Result

スプラッシュ画像 ?(2案)

2 ?weeks, ?Result


アプリのランディングビュー ?(7案)

2 ?weeks, ?Result



アプリのナビゲーションビュー ?(4案)

2 ?weeks, ?Result




プレーヤーのデザイン ?(5案)

2 ?weeks, ?Result




プレーヤーのデザイン ?(5案)

GUIパーツ?見見積りから全部 ?(34個)

オチ ?-‐?? ?WDD ?その後

川上会長，めっちゃほめてくれて嬉しかったけど，原文ママこのと
おりに言ってました

川上会??長「なんだ出来てるジャン，イイねェ」



VoQn「よかったー，川上さんに
仕事してないって思われてたから」




川上会??長「えっ，これが (入社してから)

はじめてした仕事でしょ?」




川上会??長「えっ，これが (入社してから)

はじめてした仕事でしょ?」

VoQn「えっ…」

ありがとうございました
もっとマシな発表と
NicoNicoMetro(仮)の続報は
これではあまりにも情報に有用
性ないので，Metro 考察編に
て，ちゃんとして技術的解説や

後?日の続報にご期待くださいデザイン手法，設計指針につい
て解説しようと思います

狠狠撸

ニコニコ超デザイン-惭别迟谤辞死闘编-

More Related Content

ニコニコ超デザイン-惭别迟谤辞死闘编-

Editor's Notes