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 程式碼
為什麼會看到廣告
37會員
31內容數
短篇奇幻作品將不定期更新。
留言0
查看全部
發表第一個留言支持創作者!
Ray C的沙龍 的其他內容
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業,其中使用了最近接觸的 Vite 作為專案開發和打包的工具,以及因為對 Utility-First CSS 頗感興趣,將 Tailwind 納入專案並初次使用它做開發...
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
這次的專案為六角學院在 2021 年疫情期間舉辦的「程式體驗營」最終作業,其中使用了最近接觸的 Vite 作為專案開發和打包的工具,以及因為對 Utility-First CSS 頗感興趣,將 Tailwind 納入專案並初次使用它做開發...
我並非這美術設計的原創,不過得益於 Instagram 上 @uixperience 的作品參考,才實現了這優雅計算機的外觀。在互動的部分,我讓按鍵在按下時減少陰影,並加深按鍵背景的顏色,這樣就像是真的被按了下去一樣;另外,在顯示計算結果的部分,透過 JS 增減 CSS class 的方式隨時...
一開始的版本是和 Todo MVC 類似的簡易待辦事項清單,由於本身的使用需求,不斷調整和優化 Todo 清單的外觀與功能,如使用 SortableJS 做出拖拉排序、結合 LocalStorage 做出儲存機制、Markdown link 語法的支持,以及對 XSS 跨網站指令程式碼的防禦處...
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
在模糊的色彩中,珍成了一個謎,她的微笑是一絲喜悅,刻畫在世界的畫布上。她的眼睛,雖然不清楚,似乎閃爍著溫柔的智慧,蘊含著千次日落和無數低語夢想的故事。她的名字是一種旋律,在她觸及的生命中迴響,一個簡單的名字,成為與善良同義的詞。
Thumbnail
到海邊最期待的就是可以看到日落的美景,在有個漂亮的餐廳吃飯,再好不過啦!
Thumbnail
在名古屋逛街的時候,無意間在高島屋JR GATE TOWER 發現了我最愛的CLASKA Gallery Shop "DO選物店。 仔細回想一下,我第一次逛CLASKA Gallery Shop應該是在2017年的東京,當時買了一個深灰色的帆布包,還有一個非常喜歡的滾珠香水,大概也就是從那個時候,我
Thumbnail
身為吉卜力動畫迷一定會想來名古屋朝聖的。第一次前往的人,平日第一梯次10點入場絕對是最好的選擇。
Thumbnail
稍微修改一下多年前看鋼鍊展時留下的文字跟照片,重新整理放在這邊。
Thumbnail
2021年《龍貓》;2022《神隱少女》;2023《霍爾的移動城堡》。 2023 LOEWE x Howl's Moving Castle今年是LOEWE連續三年與吉卜力工作室的合作,同時也迎來彼此合作最終篇。
Thumbnail
身為吉卜力資深影迷,看見這本由英國人撰寫的解析書,真的是非常好奇,因為評論這玩意,是與作者、評論者跟讀者三分背景的相關性非常高,基本上你找不到一個可以全球通用的評論,除非你寫非常的一般論,不然一定會因為某一方背景或文化上的差異,造成不同的解讀切入。 當然,文化也有強勢弱勢之別、流行與非主流的差異,所
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
在模糊的色彩中,珍成了一個謎,她的微笑是一絲喜悅,刻畫在世界的畫布上。她的眼睛,雖然不清楚,似乎閃爍著溫柔的智慧,蘊含著千次日落和無數低語夢想的故事。她的名字是一種旋律,在她觸及的生命中迴響,一個簡單的名字,成為與善良同義的詞。
Thumbnail
到海邊最期待的就是可以看到日落的美景,在有個漂亮的餐廳吃飯,再好不過啦!
Thumbnail
在名古屋逛街的時候,無意間在高島屋JR GATE TOWER 發現了我最愛的CLASKA Gallery Shop "DO選物店。 仔細回想一下,我第一次逛CLASKA Gallery Shop應該是在2017年的東京,當時買了一個深灰色的帆布包,還有一個非常喜歡的滾珠香水,大概也就是從那個時候,我
Thumbnail
身為吉卜力動畫迷一定會想來名古屋朝聖的。第一次前往的人,平日第一梯次10點入場絕對是最好的選擇。
Thumbnail
稍微修改一下多年前看鋼鍊展時留下的文字跟照片,重新整理放在這邊。
Thumbnail
2021年《龍貓》;2022《神隱少女》;2023《霍爾的移動城堡》。 2023 LOEWE x Howl's Moving Castle今年是LOEWE連續三年與吉卜力工作室的合作,同時也迎來彼此合作最終篇。
Thumbnail
身為吉卜力資深影迷,看見這本由英國人撰寫的解析書,真的是非常好奇,因為評論這玩意,是與作者、評論者跟讀者三分背景的相關性非常高,基本上你找不到一個可以全球通用的評論,除非你寫非常的一般論,不然一定會因為某一方背景或文化上的差異,造成不同的解讀切入。 當然,文化也有強勢弱勢之別、流行與非主流的差異,所