Ghibli Gallery｜重新設計吉卜力工作室作品相簿
閱讀時間約 2 分鐘
簡介
2020 下半年在全世界仍受到冠狀病毒肆虐期間，吉卜力工作室在官網四次公開合計 24 部動畫作品、共 1,178 張高畫質劇照，表示在未觸法的情形之下可自由下載使用，並且還會持續釋出過去動畫作品的劇照。由於 官網 的劇照呈現方式不太友好，也未在移動裝置上做排版優化，加上分批公開的作品劇照未整合在一起，對於歷史悠久且廣受好評的工作室而言實在可惜，因此這次透過對吉卜力工作室網站的網址命名邏輯和動畫出版年份做資料處理，設計開發出整合目前所有吉卜力工作室公開的作品劇照、且排版更為清晰和易於使用的新吉卜力相簿。
外觀與互動設計
- 依照動畫出版年份和作品劇照的網址命名邏輯，整合出新的作品劇照資料
- 網頁載入時加入 Loading 畫面，加深使用者對吉卜力工作室的品牌印象，並預設瀏覽位置回到最上方
- 使用 Noto Serif JP 字體，統一日文、英文和數字基線
- 將網站設計為可在網址後加入 Query String 參數 en，輕鬆切換 英文、日文 介面
- 透過點擊作品目錄切換動畫劇照，達成不換頁觀看
- 將原本吉卜力工作室官網散佈式的劇照改為兩欄並排 (平板與手機則ㄧ欄) 並配合深色主題呈現，視覺上更為精緻且能長久觀看
- 使用平板尺寸以上的設備觀看時，可透過點擊劇照進入劇院模式
- 將劇院模式的關閉按鈕「✕」設計為只在碰觸或移動滑鼠的 2 秒內顯示，減弱關閉按鈕的強烈存在感
開發紀錄
- 自製 吉卜力動畫作品劇照資料
- 使用相似於 Preact 的 micro-library petite-vue，開發無需 build
- 樣式與功能性程式碼皆以模組化方式進行拆分管理
- RWD 響應式設計上使用 rem 單位配合 Media Query 呈現，達成任意縮放螢幕、元素單位比例也能自適應
- 使用壓縮工具 Terser 搭配 IIFE 立即函式壓縮 JavaScript 程式碼
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
JavaScript30 傳送門：https://javascript30.com/
挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io
本次學習心得：
製造過度效果延遲的方法：transition-delay V.S
在模糊的色彩中，珍成了一個謎，她的微笑是一絲喜悅，刻畫在世界的畫布上。她的眼睛，雖然不清楚，似乎閃爍著溫柔的智慧，蘊含著千次日落和無數低語夢想的故事。她的名字是一種旋律，在她觸及的生命中迴響，一個簡單的名字，成為與善良同義的詞。
到海邊最期待的就是可以看到日落的美景，在有個漂亮的餐廳吃飯，再好不過啦！
在名古屋逛街的時候，無意間在高島屋JR GATE TOWER 發現了我最愛的CLASKA Gallery Shop "DO選物店。
仔細回想一下，我第一次逛CLASKA Gallery Shop應該是在2017年的東京，當時買了一個深灰色的帆布包，還有一個非常喜歡的滾珠香水，大概也就是從那個時候，我
身為吉卜力動畫迷一定會想來名古屋朝聖的。第一次前往的人，平日第一梯次10點入場絕對是最好的選擇。
２０２１年《龍貓》；２０２２《神隱少女》；２０２３《霍爾的移動城堡》。
2023 LOEWE x Howl's Moving Castle今年是LOEWE連續三年與吉卜力工作室的合作，同時也迎來彼此合作最終篇。
身為吉卜力資深影迷，看見這本由英國人撰寫的解析書，真的是非常好奇，因為評論這玩意，是與作者、評論者跟讀者三分背景的相關性非常高，基本上你找不到一個可以全球通用的評論，除非你寫非常的一般論，不然一定會因為某一方背景或文化上的差異，造成不同的解讀切入。
當然，文化也有強勢弱勢之別、流行與非主流的差異，所
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
JavaScript30 傳送門：https://javascript30.com/
挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io
本次學習心得：
製造過度效果延遲的方法：transition-delay V.S
在模糊的色彩中，珍成了一個謎，她的微笑是一絲喜悅，刻畫在世界的畫布上。她的眼睛，雖然不清楚，似乎閃爍著溫柔的智慧，蘊含著千次日落和無數低語夢想的故事。她的名字是一種旋律，在她觸及的生命中迴響，一個簡單的名字，成為與善良同義的詞。
到海邊最期待的就是可以看到日落的美景，在有個漂亮的餐廳吃飯，再好不過啦！
在名古屋逛街的時候，無意間在高島屋JR GATE TOWER 發現了我最愛的CLASKA Gallery Shop "DO選物店。
仔細回想一下，我第一次逛CLASKA Gallery Shop應該是在2017年的東京，當時買了一個深灰色的帆布包，還有一個非常喜歡的滾珠香水，大概也就是從那個時候，我
身為吉卜力動畫迷一定會想來名古屋朝聖的。第一次前往的人，平日第一梯次10點入場絕對是最好的選擇。
２０２１年《龍貓》；２０２２《神隱少女》；２０２３《霍爾的移動城堡》。
2023 LOEWE x Howl's Moving Castle今年是LOEWE連續三年與吉卜力工作室的合作，同時也迎來彼此合作最終篇。
身為吉卜力資深影迷，看見這本由英國人撰寫的解析書，真的是非常好奇，因為評論這玩意，是與作者、評論者跟讀者三分背景的相關性非常高，基本上你找不到一個可以全球通用的評論，除非你寫非常的一般論，不然一定會因為某一方背景或文化上的差異，造成不同的解讀切入。
當然，文化也有強勢弱勢之別、流行與非主流的差異，所