BLUE ROOM
以「偏愛藍」為題的單頁家具選品站：滿版主色開場，六件選件各自展開細節，一路走到空間情境與收尾標語。全站零 JavaScript，互動由原生元素完成。
- 品牌網站
- 視覺設計
- 前端開發
- 無障礙設計
- 01
專案背景
選品的起點不是市場分析，而是老闆自己喜歡這樣的藍。網站要說的就是這件事：一個人的偏愛，怎麼變成一屋子的風景。
- 02
規劃重點
只有六件選件，數量撐不起一個分類系統；但每件家具的輪廓、材質與擺放姿態又值得被好好看見。網站需要在「一眼看完」與「願意細看」之間找到平衡。
- 03
設計構想
不做分類、不做篩選，改用一條單頁動線：主色開場 → 說明偏愛的由來 → 六件選件 → 空間裡的樣子 → 收尾。訪客不必做任何選擇，往下捲就是完整的故事。
- 以 #223be5 一色鋪滿首頁與結尾，中段全部退為淺灰藍
- 四階藍色色階當作「MANY SHADES. ONE LOVE.」的視覺註腳
- 英文襯線斜體與中文黑體交錯，讓標語有語氣
- 04
視覺與體驗
首頁把標題壓到 12.7vw、字距收到 -0.085em，讓「A shade to live in.」幾乎撐滿整個藍。往下每個區段換一次底色深淺，用顏色本身取代分隔線來標示段落。
- 商品卡預設只給一句話，細節收在可展開的面板裡
- 情境區採影像與文字左右對切，照片滿版不裁切重點
- 結尾以 13vw 的 Always blue. 收束，回到開場的同一個藍
- 05
技術實作
一份 HTML、一份 8 KB 的 CSS，沒有 JavaScript、沒有建置流程、也沒有網頁字型。物件細節的展開收合交給原生 details / summary，捲動定位交給 CSS scroll-behavior。
- 零指令碼，所以沒有任何內容需要等待腳本才能讀到
- 略過導覽連結、focus-visible 外框與完整替代文字
- prefers-reduced-motion 開啟時關閉全站轉場與平滑捲動
- 三個斷點：選件牆由三欄收成兩欄，再收成單欄
- 06
作品呈現
下方選讀六個區段，依網站本身的順序排列。從滿版的藍開場，到最後一句 Always blue.，整條動線就是這個案子要證明的事——一個顏色，足以撐起一個品牌網站。
畫面選讀
SCREENS
01首頁A SHADE TO LIVE IN整個首屏只有一個顏色、一句話、一張椅子。標題大到幾乎滿版，把品牌主色直接變成第一印象，而不是等訪客往下捲才發現。
02一個藍色的開始OUR LITTLE OBSESSION把選品的理由講得直白：老闆喜歡這樣的藍。下方四顆由深到淺的圓點是品牌色階，也是「MANY SHADES. ONE LOVE.」這句話的圖解。
03家具選集THE SELECTED OBJECTS六件選件排成三欄。每張卡片預設只給品名、英文類別與一句話，資訊量壓到最低，讓照片先說話。
04物件細節OBJECT DETAIL點「探索物件細節」才展開材質與擺放建議。這是全站唯一的互動，用原生 details 元素完成——沒有寫任何 JavaScript，鍵盤與螢幕閱讀器也直接可用。
05藍色日常LIVING WITH BLUE左右對切：一邊是滿版實景，一邊是留白。到這裡訪客已經看完六件單品，需要一張照片告訴他們這些東西擺在一起是什麼樣子。
06結語ALWAYS BLUE回到開場的同一個藍，用一句 Always blue. 收尾。單頁網站沒有下一頁，所以結尾必須自己把話說完。
下一個專案