北齋的浪為什麼像會動：浮世繪的層次感，到今天的視差與 Live2D

《神奈川沖浪裏》大概是全世界被印在最多杯子、T 恤和手機殼上的一張畫。它被印得太多，以至於我們幾乎忘了第一次看見它的感覺：那道浪的爪子正要收下來，船上的人縮著身體，遠處的富士山小得像一顆石頭。它是一張靜止的木版畫，卻讓每個人都覺得「下一秒會發生什麼事」。

這篇想談的不是北齋有多偉大，而是一個比較實際的問題：一張只用幾個顏色、沒有透視法、沒有光影的畫，為什麼會「動」？答案藏在浮世繪的製作方式裡，而那個方式，和我們今天做網頁視差、做 Live2D 角色的邏輯，幾乎是同一件事。

I · 分版一張畫，其實是好幾塊木板

浮世繪不是「畫」出來的，是「印」出來的。繪師畫好底稿，彫師把線稿刻成主版，接著每一個顏色都要另外刻一塊色版：一塊印天空的灰藍，一塊印浪身的深藍，一塊印船的棕色。印刷時，摺師把紙對準版上的定位記號，一層一層疊上去。

所以《神奈川沖浪裏》在物理上就是分層的。那些看起來渾然一體的浪，其實是「線稿層」、「淺藍層」、「深藍層」和「留白的紙」四個東西疊出來的結果。北齋用的深藍是當時剛從歐洲進口的普魯士藍，一種比傳統藍靛更飽和、更不會褪色的顏料，這讓浪的暗部可以壓得很深，白色泡沫才會亮得像燈。

畫面的力量不是來自任何一層，而是來自層與層之間的落差。ON LAYERS

這件事對做設計的人來說很熟悉。我們在 Photoshop 裡把一張插畫拆成幾十個圖層，不是為了方便修改而已，而是因為「分開的東西才能各自被控制」。浮世繪工房在兩百年前就用木板做了同一件事。

II · 前中後把遠近拆成三個世界

北齋的《富嶽三十六景》有一個固定的遊戲規則：富士山永遠在，但它幾乎從來不是最大的東西。它被放在浪的後面、漁夫的後面、被風吹走的紙張的後面。

這兩張畫都沒有西方意義上的透視法，沒有消失點，遠處的東西也沒有被畫得比較模糊。它們的空間感完全來自「層的排序」：前景大而清楚，後景小而簡單，中景負責把兩者接起來。眼睛在三層之間移動的時候，畫面就有了深度。

我們今天在網頁上做的視差捲動，本質上就是這件事：把前景、中景、背景分成三個圖層，讓它們用不同的速度移動。速度差製造距離感，距離感製造「動」。北齋沒有捲軸可以捲，但他用大小差和位置差，達到了同樣的效果。

III · 雨與線廣重把天氣畫成圖層

北齋之後的廣重，把這套方法用在天氣上。《大橋安宅驟雨》裡的雨不是點、不是霧，而是一整層細直的黑線，覆蓋在整個畫面上。橋上的人撐傘彎腰，河面是深藍的，遠岸是一片淡墨的剪影。

做動態設計的人會很想把這張畫「動起來」，讓雨往下落、讓河面晃。但仔細看，廣重其實已經把動態的骨架做完了：雨是一層、人是一層、河是一層、遠岸是一層。動畫師要做的只是決定每一層的速度。

IV · 光琳的浪北齋之前，浪就已經有爪子

很多人以為浪的爪子是北齋的發明。往前推一百多年，尾形光琳的《波濤圖屏風》裡，浪頭已經長出一樣的形狀：泡沫的末端捲成一根根手指，往內勾。

光琳和北齋的差別在於「層」的數量。光琳的浪只有兩層：浪，和金。北齋把它拆成四層，再把富士山和船塞進去。層越多，畫面可以講的關係就越多。但層太多，畫面也會碎。北齋的厲害之處在於他知道停在哪裡。

V · 今天Live2D 就是把浮世繪立起來

我們工作室做 Live2D 角色的時候，第一件事就是把插畫拆層：頭髮前、頭髮後、眼白、瞳孔、上睫毛、下睫毛、瀏海、瀏海投在額頭上的陰影。一個角色拆到幾百層是正常的。拆層不是為了好看，是為了「每一層可以有自己的動法」：呼吸時頭髮晃的幅度，和衣服晃的幅度不一樣；轉頭時瀏海移動的方向，和後髮相反。

層不是技術問題，是觀看的問題。你決定把什麼拆開，就決定了觀眾會注意到什麼。ON SEEING

北齋做的也是這件事。他把浪和富士山拆開，是為了讓你的眼睛在兩者之間來回。他把泡沫和浪身拆開，是為了讓白色亮起來。他決定了你會先看到什麼、再看到什麼。這就是設計。

所以下次再看到那道浪，可以試著做一件事：把它拆回去。想像浪身是一層、泡沫是一層、船是一層、山是一層、天空是一層。你會發現這張畫一點都不安靜，它每一層都在往不同的方向走。