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 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
之前介紹過漫畫，終於動畫出了，當然也是不能放過，只能說，世界上有這樣的作品真是太好了。
身為創作者，不管小時候單純塗鴉，或者後來開始畫漫畫、畫油畫、寫小說，其實一直有人問我「創作這些要幹嘛」。
對，這些賣不了什麼錢我自己比誰都清楚，而我腦袋裡想創作的東西永遠是實際創作出來的數十倍，有些還未成形無
第一次出國獨旅，選擇難度較低的日本，出發前沒有做太多功課，但一個人晃晃也得到許多發想，對於四年未出國的我，好像重新充電了一番，旅途中也發現自己的內心深處，讓我帶你一起文旅吧！吉卜力美術館之旅，下北澤、中目黑、代官山的探索與感悟，以及在東京車站與好友相遇的故事。
介紹日本畫家樋口裕子（Higuchi Yuko）在中正紀念堂所開設的展覽，展示了她獨特的復古奇幻畫風、細膩插畫與水彩創作。展覽中除了插畫外，還有她繪製的藝術字體等創作，以及展示她對於角色和繪本的用心。樋口裕子在創作上展現了多樣的面向，從細膩的手繪風格到水彩的運用，以及角色與視覺元素的多樣性。
續前篇，繼續來點藝術史的觀察。
樋口裕子在作品集“BABEL: Higuchi Yuko Artworks”中，
向波西（Hieronymus Bosch）和老彼得．布勒哲爾（Pieter Bruegel the Elder）等創作者致敬，將既有圖像的意義轉化，變成是一種對神祕生物的關懷與和平共存。
之前熟悉的樋口裕子，可能是來自MOE雜誌或是各種商品合作，
透過這次展出，讓樋口裕子作品更多的面貌得以被看見。
在幾百張手稿中， 有一個系列在牆上閃爍著，吸引了我的目光。
《最後的審判》和《巴別塔》……
既上一篇【兔子愛看展】奇幻動物森林-樋口裕子展(上)，大多為平面的作品，但樋口裕子不只有平面的，還有立體的作品與電影海報，尤其是藝術家筆下的角色躍出平面，成為立體的玩偶；展場更是包含木雕迷你書、日式掛軸與屏風等。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
之前介紹過漫畫，終於動畫出了，當然也是不能放過，只能說，世界上有這樣的作品真是太好了。
身為創作者，不管小時候單純塗鴉，或者後來開始畫漫畫、畫油畫、寫小說，其實一直有人問我「創作這些要幹嘛」。
對，這些賣不了什麼錢我自己比誰都清楚，而我腦袋裡想創作的東西永遠是實際創作出來的數十倍，有些還未成形無
第一次出國獨旅，選擇難度較低的日本，出發前沒有做太多功課，但一個人晃晃也得到許多發想，對於四年未出國的我，好像重新充電了一番，旅途中也發現自己的內心深處，讓我帶你一起文旅吧！吉卜力美術館之旅，下北澤、中目黑、代官山的探索與感悟，以及在東京車站與好友相遇的故事。
介紹日本畫家樋口裕子（Higuchi Yuko）在中正紀念堂所開設的展覽，展示了她獨特的復古奇幻畫風、細膩插畫與水彩創作。展覽中除了插畫外，還有她繪製的藝術字體等創作，以及展示她對於角色和繪本的用心。樋口裕子在創作上展現了多樣的面向，從細膩的手繪風格到水彩的運用，以及角色與視覺元素的多樣性。
續前篇，繼續來點藝術史的觀察。
樋口裕子在作品集“BABEL: Higuchi Yuko Artworks”中，
向波西（Hieronymus Bosch）和老彼得．布勒哲爾（Pieter Bruegel the Elder）等創作者致敬，將既有圖像的意義轉化，變成是一種對神祕生物的關懷與和平共存。
之前熟悉的樋口裕子，可能是來自MOE雜誌或是各種商品合作，
透過這次展出，讓樋口裕子作品更多的面貌得以被看見。
在幾百張手稿中， 有一個系列在牆上閃爍著，吸引了我的目光。
《最後的審判》和《巴別塔》……
既上一篇【兔子愛看展】奇幻動物森林-樋口裕子展(上)，大多為平面的作品，但樋口裕子不只有平面的，還有立體的作品與電影海報，尤其是藝術家筆下的角色躍出平面，成為立體的玩偶；展場更是包含木雕迷你書、日式掛軸與屏風等。