スタート画面の上品なタイル グラデーションを真似する試み

以前から気になっていた事なのですが... Windows 8 のスタート画面上のタイル、微妙なグラデーションと細い枠線が使われていて、例えば単にSolidColorBrushでGridViewのタイルをベタ描くよりもずっと上品でオサレな感じだなぁと感心していました。

このタイル一つ一つのグラデーションが上品で綺麗ですよね！ね？という話なんですが
同意してもらえるか一抹の不安を抱えつつ記事を書いています

年末年始で時間もあることですし、どういうロジックでこの上品な描画を行っているか確認してみようぜ！そして出来れば真似してみよう！という企画です。

アプリの場合、ソリューションの Package.appxmanifest でアプリケーション タイルの背景色を指定します。
しかし、この色がそのままFlatに描画されている訳ではないです。

下の画像がタイルサイズ「小」での実際の描画を拡大した様子なのですが、判ります？

・1px のボーダーが設定されている
・ボーダー・タイル内部 共、色は左辺から右辺へのGradient Brushになっている

例えば WiFiSD8 を例にとると、Appxmanifestで設定しているタイル色は#759AC4 なのですが、実際の描画はこの色で塗りつぶされている訳では無く、以下の様なGradient 付きで描画されています。

場所	左辺	右辺
サイズ大(310x310)　タイル内部	759AC4	91B2D1
サイズ大(310x310)　ボーダー	83A4CA	9CBAD6
サイズワイド(310x150)　タイル内部	759AC4	91B2D1
サイズワイド(310x150)　ボーダー	83A4CA	9CBAD6
サイズ中(150x150)　タイル内部	759AC4	91B2D1
サイズ中(150x150)　ボーダー	83A4CA	9CBAD6
サイズ小(70x70)　タイル内部	759AC4	90B2D1
サイズ小(70x70)　ボーダー	83A4CA	9CBAD6

つまり元の#759AC4 からタイル内右辺の#91B2D1(サイズ小の場合は#90B2D1), ボーダー（枠線）左辺の#83A4CA と右辺#9CBAD6, を何らかの方法で計算しているという事になります。

他アプリのタイルのデータも取ってみます。

場所	左辺	右辺
ストア　タイル内部	1A961A	1AAF1A
ストア ボーダー	83A4CA	9CBAD6
IE　タイル内部	2672EC	2E8DEF
IE　ボーダー	3C80EE	4399F1
ミュージック　タイル内部	D24726	DC572E
ミュージック　ボーダー	D75A3C	E06843
カメラ　タイル内部	95008C	AE00A7
カメラ　ボーダー	A01A98	B61AB0

GreenとRed・Blueの増分差を見ると単にRGB値に定数掛け算している訳では無さそうなので、Windows的にお馴染みのHSL（HSVでは無く）に変換してみると

Excelとか持ち出して完全に見失っている様子

………うううーｎ……HSL に変換することでRGB 値から独立した変換係数的なのが出てくるかと思ったんですが、何か別の要素があるみたいです。又はHSL ではなくHSV でやっているのかもしれない。
とは言っても大体の傾向は判ります。左辺の値に「Saturation 1.01 / Lightness 1.10」 程度を掛けてあげると右辺の値になると。また、タイルのベースカラーからBorderへの変換は「 Saturation 0.9 / Lightness 1.10」あたりで。若干無理がありますが。

という事で、こういう掛け算をしてタイル・ボーダーのGradient Brushを作るとスタート画面っぽい上品なグラデーションが得られる、はず、です。やってみましょう。

（余談ですが、この記事30分くらいでちゃちゃっと書くつもりだったんですが、この時点でもう数時間経っている…RGB2HSL変換コードとか書いちゃうし何かもう見失っている 僕がマネージャーなら止めさせるレベル）

伝わらないかなぁ…

おおおお！！！！スタート画面のタイルっぽい！！かなり良い感じなのではないかと！僕は興奮しているのですが！
…でもなー…やっぱり、そもそものスタート画面のグラデーションの美しさが共有できていないとこの興奮も伝わらないのでは無いかという不安が消えません。

最後に

ストアアプリ、というかMetro Design Initiative では「Chrome排除！！」(※1）が鉄の掟、マントラな訳ですが…その割にはスタート画面で微妙にChromeってるのがずっと気になっていたのでした。人はマントラだけでは生きていけないのか。でもこれくらいなら上品で良いなと思います。

※１）Google Chrome の事では無いです。ウィンドウにドロップシャドウ落とす、XPのLunaみたいにつやつやさせる、左上からライトが当たっている前提でUI部品に変化つけたり、的な描画上の装飾（クロム）を排除しようぜ！という。Authentically Digital, 俺のカラダの筋肉はどれをとっても機械だぜ！(意訳)と並ぶ、Metro Designの柱です。