品牌力 × 永續力：GTUT的ESG網站設計精選案例

一、 讓ESG不再只是報告，而是品牌的數位展演

在永續成為全球企業經營關鍵詞的今天，ESG（環境、社會與治理）不再只是年度報告上的名詞，而是品牌價值、溝通策略與社會責任的綜合展現。企業是否真正實踐ESG，不僅看內部政策，更看它如何「被理解」與「如何落實」—— ESG網站的存在，正是讓永續策略具體可見、對外建立信任感的重要管道。

設計在這其中不只是點綴，應成為內容價值的載體、傳遞重要訊息與專業的橋樑。無論是應對ESG評鑑機構、潛在投資者，或是面對消費者與社會大眾，一個兼具結構清晰、資料透明與視覺一致性的ESG永續網站，已成為企業傳遞信任與永續責任的最佳媒介。

GTUT長期協助眾多知名企業規劃ESG數位版圖，深知ESG網站不只是資訊上架，更牽涉到內容策略的整合與品牌理念的具象化呈現。從架構設計、視覺語言到多語系支援及互動模組，我們以設計為工具，將企業的永續精神轉譯為溝通語言，讓品牌在永續議題中有溫度和識別度。

二、 打造企業永續網站：從設計語言到溝通策略

GTUT 協助企業打造ESG網站時，始終不只是「把資料變成網頁」而已。我們深知，ESG 是企業對永續政策的規劃與落實，因此需要將內容結構、品牌風格、視覺語言與跨媒介表現一併納入ESG的設計思維。

我們不僅協助企業統整 ESG 架構與資料，也兼顧網站與永續報告書的整體視覺延伸，讓企業在不同平台上都有一致且具辨識度的呈現。此外，我們也會依據企業每年度想聚焦的永續議題與優勢內容，發想專屬的主題視覺與圖表設計，幫助企業在評鑑與溝通中都能展現企業獨有的理念精神。以下從三個面向說明 GTUT 的設計實力與價值。

2.1 ESG指標架構設計–讓永續邏輯被看懂，也被看見

分類結構是否清楚、邏輯是否合理，是影響ESG 專區閱讀體驗與資訊掌握效率的關鍵。GTUT會依據企業原始資料進行資訊拆解與模組重組，將複雜資料轉化為好找、好讀、好理解的網站架構。

以我們近期參與的專案為例：

• 東聯化學：針對12個永續主題，網站首頁透過圖塊式分類導覽，幫助訪客快速進入不同議題區塊。

• 奎茂紙器：以單頁式呈現方式，結合段落分區與標題設計，精簡但不失條理，讓使用者快速掌握重點內容。

2.2可視化數據呈現–讓數字更有感，也更有說服力

永續內容中常包含大量的量化數據與績效指標，若未經整理與設計，容易使資訊顯得生硬、難以閱讀。GTUT會根據每家企業的資料特性，透過圖卡模組、視覺標示與排版設計，協助企業將關鍵數字轉化為一目了然的視覺化圖表，不僅提升專業度，也強化與利害關係人的溝通效果。

以兩個不同產業類型的案例為例：

• 震旦辦公設備：在頁面中段設計「ESG成果摘要」區塊，使用條列式數據圖卡呈現如碳排放減量、公益時數、員工培訓等核心成果，讓訪客在短時間內掌握品牌的永續行動力。

• 元翎精密：透過視覺化的數據模組呈現節能減碳成果，搭配圖文排版與輔助說明，清楚傳達永續成效，展現製造業永續實踐的專業形象。

2.3 多語系與跨裝置設計–讓永續資訊跨界無礙、順利傳達

永續溝通不應有門檻，GTUT在ESG網站設計中，重視多語系與跨裝置閱讀體驗，協助企業讓各類受眾——從國際投資人、在地社群，到內部員工——都能擁有良好的瀏覽閱讀體驗。我們會依據品牌內容規模與使用情境，針對不同裝置進行排版與模組調整，而非使用單一版型，確保網站在各種情境下都能維持清晰、有溫度的永續傳遞。

例如：

• 東聯化學網站支援繁中、簡中與英文三語切換，並在設計上維持語系間的一致性，有助於企業進行對外揭露與跨區域溝通。
• 震旦集團的網站針對不同裝置進行設計細節優化，無論在桌機、平板或手機上皆能保持內容條理與閱讀節奏，讓內容無論在哪種裝置上都能清楚傳遞。

三、 4大實戰案例解析：企業如何透過網站實踐永續設計

永續不只是標準作業，更是每間企業獨有經營的展現。GTUT過去參與多家企業ESG專區規劃，涵蓋製造業、集團品牌、食品產業與中小企業等不同規模與需求。我們在專案中協助客戶將既有內容轉譯為更清楚、易讀、具視覺層次的網頁介面，讓永續資訊成為品牌溝通的一部分。

以下將分享四個實際案例，從設計視角切入，分別觀察在內容模組、視覺語言、動線設計或互動呈現等面向，GTUT如何在不同條件下，為企業打造具信任感的永續專區。

3.1 東聯化學 OUCC｜從報告書金獎看見品牌整合力

東聯化學為國內指標性的石化企業，具備深厚的研發技術與完整的永續報告書架構。GTUT在此次專案中，協助客戶將永續報告內容轉譯為網頁閱讀邏輯，並以品牌視覺為主軸，整合資料架構與圖像語言，打造出兼具專業性與辨識度的企業永續專區。 

• 品牌視覺統整與主題設計提案
  GTUT 每年在協助東聯規劃永續報告書與網站時，會依據企業當年度想聚焦的議題，發想專屬主題與視覺方向，例如 2023 年以「品牌英文OUCC與綠能源的結合」為主軸，展現其技術創新與環境承諾。同時，我們也確保報告與網站在色彩、圖像語言與主視覺延伸上保持一致性，讓品牌在不同媒介中都能傳遞出連貫、專業的永續形象。

• 內容拆解與模組整合
  ESG內容原本多集中於報告書中，我們協助將其拆解為多個主題分類，轉化為段落模組、數據模組與條列模組等，搭配統一排版邏輯，提升資訊清晰度，也方便後續更新與維護。

• 強化技術與產品特色
  在永續價值鏈主題中，著重呈現東聯如 EO 衍生物、CO₂再利用、生物可分解塑膠等具差異化的永續研發成果，這些內容經視覺優化與模組化呈現，更容易被外部利害關係人理解與記憶。

透過這次合作，GTUT 協助東聯不只是將內容上架，而是從品牌策略的角度，整合永續架構與視覺表現，讓企業價值能被看懂，也被記住。
東聯化學以「敏捷韌性、打造永續競爭力」為主題，推動循環經濟方案、碳捕捉產品開發與再生原料應用等減碳作為，榮獲 2024 年 TCSA 永續報告書金獎及台灣永續企業績優殊榮。自 2019 年起，東聯已連續六年獲得企業永續報告書獎，展現其在節能減碳、企業治理與資訊揭露上的穩健表現。
此外，東聯也連續三年獲選《商業周刊》碳競爭力100強企業，並於 2023 年入選《天下雜誌》1.5°C 溫控目標企業名單，獲得「成效卓越」等級評價，顯示其在氣候治理與低碳轉型的實質成果與產業領先地位。
從內容到設計，東聯成功將永續精神轉化為具體可感的數位體驗，並在品牌溝通與 ESG 實踐之間建立清晰連結，成為產業 ESG 推動的重要參考標竿。

東聯化學獲TCSA永續報告書金獎及台灣永續企業績優殊榮
 

東聯化學連續三年獲商業周刊碳競爭力100強企業殊榮

東聯化學入選天下雜誌1.5度C溫控【成效卓越】等級企業
 

3.2 震旦集團 & 震旦辦公設備｜以一致設計語調統整 ESG 行動

震旦集團為台灣指標性的辦公與通訊設備品牌，旗下子品牌震旦辦公設備亦持續深化 ESG 實踐，近年同步強化永續內容的數位揭露。GTUT 協助兩站重整永續專區，從模組規劃、視覺語言到閱讀節奏調整，打造邏輯清晰、風格一致的永續版面，讓雙品牌在設計與策略上都能一體呈現 ESG 行動。

3.2.1震旦集團｜設計貫穿理念與畫面，建立 ESG 品牌節奏

震旦集團以「讓辦公生活更美好」作為永續主軸，推動集團旗下各事業單位持續落實 ESG 行動。GTUT 在此次網站優化中，聚焦於 ESG 專區小首頁的內容組織與視覺規劃，協助整合資料架構與視覺語言，讓永續資訊更具導引力與識別性

• 重整首頁架構，聚焦永續核心議題
  將永續治理、環境管理、社會參與等重點單元整合於 ESG 小首頁中，透過分區模組、標題引導與圖片設計，提升使用者對 ESG 內容的掌握效率，並強化整體入口的品牌感與閱讀節。

• 風格延伸品牌語調，強化第一印象
  視覺設計上，延續震旦品牌簡約專業的調性，選用霧感配色、具象剪影與高識別度圖片，搭配首頁環境意象與「Green for Earth」專區設計，讓整體風格兼具永續感與品牌辨識度。該區塊的剪影圖像與霧化背景，也獲得客戶對於「新意」與「色彩質感」的正面回饋。

GTUT 協助震旦集團以資訊導向與品牌一致性的原則，建立 ESG 小首頁作為內容入口，也讓永續策略在網站中形成鮮明的品牌節奏。

3-2-2震旦辦公設備｜以動畫與模組語言詮釋永續溝通

震旦辦公設備長期關注環境永續與社會參與，透過單頁式 ESG 專區，清晰展現其永續方針與行動成果。GTUT 在本案中協助統整永續資訊的呈現邏輯，搭配動畫設計與視覺模組，讓企業理念與行動能夠在有限篇幅中有效傳達。

• 動畫視覺開場，建立友善低碳印象
  頁面開頭以植物與辦公產品交錯的橫向動畫作為起始場景，營造自然與科技共存的品牌氛圍，也呼應低碳生態的永續主題，也作為 ESG 專區與整體網站之間的視覺轉場，強化第一印象並提升使用者的沉浸體驗。

• 單頁式架構分區清晰，內容掌握更有節奏
  整體採用段落式設計，依序展開品牌理念、行動成果與未來方針，資訊集中不雜亂，閱讀動線簡潔清晰，讓使用者能在單一頁面中快速掌握企業的永續規劃全貌。

• 關鍵成果視覺化，凸顯永續行動力
  在「永續亮點績效」段落，透過橘色圖示與條列設計，聚焦碳排放減量、社會參與、教育訓練等 ESG 行動，讓使用者快速掌握企業成果，強化永續資訊的可讀性與識別度。

本次設計延續集團的品牌語調，並加入動態視覺與單頁模組整合的做法，使震旦辦公設備的永續專區在簡潔中保有特色，也讓企業的永續行動能更直觀地被理解與感受。

3.3 元翎精密｜結合願景與數據，打造製造業的永續節奏

元翎精密專注於氣動產品與金屬加工，近年積極強化 ESG 行動與資訊揭露。GTUT 協助元翎在既有網站架構中打造 ESG 專區，聚焦品牌視覺、數據傳達與段落節奏，整合報告內容，建立品牌專屬的永續入口。 

• 品牌視覺開場，建立未來感的 ESG 敘事語境
  進場畫面融合深色植景與科技網格，搭配企業技術應用場景與雙語標語，在首頁即傳遞元翎「製造 × 永續」的品牌願景。此段開場不僅營造差異化風格，也成為 ESG 內容邏輯的起點鋪陳。

• 數據模組設計，讓 ESG 表現一目瞭然
  透過動畫遞增的數據圖卡，具體呈現用電、廢棄物等節能成果，搭配清楚的文字輔助與圖文排版，讓訪客能在短時間內掌握元翎在製程優化與減碳推動上的實質成效，提升內容的可讀性與說服力。

• 段落節奏規劃，串聯動態內容與永續脈絡
  專頁以段落式模組呈現企業主張、成果數據與 ESG 新聞，搭配視覺導引與滾動式排版，將原先分散的資訊有邏輯地聚合，讓報告書內容轉化為一個可持續更新的對外窗口，也提升網站資訊架構與品牌溝通力。

本次專案中，GTUT 不僅協助元翎在既有網站架構下梳理內容，更透過品牌定位與視覺語言的整合，協助製造業打造一個兼具專業度與敘事感的 ESG 起點。

3.4 奎茂紙器｜用紙的邏輯，架起永續溝通的框架

奎茂紙器專注於環保包材與紙類加工，身為中小企業，也積極投入 ESG 實踐。GTUT 協助其建置 ESG 網頁，以單頁式設計聚焦核心理念與行動亮點，以精練內容勾勒出清晰的永續輪廓，打造具備品牌感的永續專區。 

• 行動內容結合產品策略，展現永續差異化優勢
  專區內容聚焦企業的永續應用實例，如奎茂主打「替代木箱」的強化重包裝紙箱產品，協助客戶以紙材取代傳統木製包材，降低木材耗用與碳排影響，展現產品導向的永續實踐，強化企業差異化價值。

• 單頁式模組整合，打造精準清楚的閱讀體驗
  透過段落式模組設計，依序呈現品牌理念、環境行動與社會參與，讓使用者在滑動間自然閱讀、快速掌握企業永續主張，兼顧資訊效率與閱讀節奏。

• 紙的品牌語言延伸，營造永續感的視覺語境
  頁面延續品牌識別中的綠色色彩與簡約版型，呼應奎茂以紙為本的產業定位，打造乾淨、俐落的永續形象，也讓品牌專業感在 ESG 專區中同步展現。

本案展現 GTUT 在中小企業 ESG 網頁設計上的策略彈性與整合力，不論內容規模大小，我們始終以品牌為本，協助企業建立屬於自己的永續數位門面。

四、設計是工具，更是連結企業與永續信任的橋樑

GTUT 長期陪伴企業推動永續，也始終相信：ESG 不只是評鑑與揭露的義務，更是企業邁向未來的對話起點。當永續成為品牌的一部分，企業需要的不只是頁面，而是一套能夠整合理念、傳遞價值、讓行動被看見的溝通方式。
我們所設計的 ESG 專區，不只是讓內容上線，更是讓品牌價值有出口、讓永續語言被理解。從視覺風格到架構設計，從模組規劃到閱讀節奏，我們思考的不是頁面該長什麼樣，而是企業想讓誰看見什麼、為什麼值得被記住。
對我們而言，永續不只是目標，而是 GTUT 對每一個合作夥伴的承諾：幫助他們用自己的語言，說出值得被聽見的事。