ESG 網頁設計案例解析：如何活用多元 UI 展現永續成效、提升 ESG 評鑑分數？

企業如何透過網頁設計提升 ESG 評級？本文提供 ESG 網頁設計指南，詳細說明企業如何運用網站有效展現 ESG 績效，進而提升整體 ESG 評級。立即閱讀指南，掌握 ESG 網頁設計要點！

要點

研究顯示，企業建立ESG網頁的主要原因是回應現代社會對環境、社會和治理（ESG）的日益重視，這是一項顯著趨勢。
證據傾向於認為，這不僅因全球環境問題加劇，還因投資者、消費者及法規對企業的要求提高。
通過追求ESG目標，企業似乎可能在可持續發展中立足，並提升競爭力和聲譽。
越來越多企業使用數位媒體展示ESG成效，Tenten ESG Design 近年來協助客戶優化ESG網頁設計，特別是投資控股公司的大專案。

為什麼要做ESG網頁？

在現代社會中，企業越來越重視環境、社會和治理（ESG），這已成為顯著趨勢。研究顯示，這不僅因為全球環境問題加劇，還因為投資者、消費者及法規對企業的要求提高。通過建立ESG網頁，企業能展示其在ESG方面的努力和成果，從而提升競爭力和聲譽，並在可持續發展中佔據有利位置。

ESG網頁的展示方式

企業有多種方式展示ESG成效，例如每年發布ESG報告供下載查閱，同時越來越多企業採用數位媒體擴大曝光度。領先企業每年製作ESG報告，方便公眾查閱，而數位媒體的使用則有助於提升ESG評鑑。

Tenten的角色

Tenten近年來協助許多客戶建立永續數位形象，特別是投資控股公司的大專案，專注於ESG網頁的深入設計和優化。這些網頁不僅包含詳細文字描述，還利用視覺化數據、互動圖表和多媒體內容，通過多元UI設計提高易讀性和吸引力，讓不同背景的訪客能快速掌握關鍵資訊。

一個意想不到的細節

除了傳統的ESG報告，數位媒體的應用正在改變企業與公眾的互動方式，例如通過互動圖表讓數據更直觀，這可能進一步提升公眾對企業ESG承諾的信任。

詳細報告

在現代社會中，企業對環境、社會和治理（ESG）的重視已成為顯著趨勢，這不僅因全球環境問題加劇，還因投資者、消費者及法規對企業的要求提高。通過追求ESG目標，企業能在可持續發展中立足，並提升競爭力和聲譽。以下將詳細探討為什麼企業需要建立ESG網頁，以及Tenten在這一領域的具體貢獻。

ESG的重要性與背景

根據研究，ESG的興起與全球環境挑戰密切相關，例如氣候變遷和資源枯竭。此外，投資者越來越關注企業的社會責任和治理結構，而消費者也傾向支持具有ESG承諾的品牌。法規方面，許多國家已開始要求企業披露ESG相關信息，這進一步推動了企業的行動。例如，China ESG: All You Need to Know提到，中國企業在ESG報告方面取得了顯著進展，顯示其在全球投資市場中的重要性。

企業展示ESG成效的方式

企業有多種方式展示其ESG成效。大多數公司每年發布ESG報告，供公眾下載和查閱，這是一種傳統但有效的溝通方式。同時，隨著數位媒體的普及，越來越多企業開始利用網頁和社交平台擴大曝光度。例如，領先企業如阿里巴巴和騰訊不僅發布年度報告，還通過官方網站展示其碳中和進展和綠色金融計劃（參見China ESG: All You Need to Know）。研究顯示，這種數位化的方式有助於提升ESG評鑑，並吸引更多投資。

Tenten 的 ESG網頁設計

Tenten近年來在協助客戶建立永續數位形象方面發揮了重要作用，特別是投資控股公司的大專案。這些專案通常專注於ESG網頁的設計和優化，目標是通過視覺化數據、互動圖表和多媒體內容，展示企業在ESG方面的努力和成果。例如，這些網頁可能包括碳排放減排的動態圖表或社會影響的視頻展示，通過多元UI設計提高易讀性和吸引力，讓不同背景的訪客能快速掌握關鍵資訊。

專案過程與注意事項

在ESG網頁設計過程中，Tenten注重細節，例如確保文字描述清晰、數據視覺化直觀，並考慮不同訪客的閱讀習慣。以下是一些實用的UI設計建議，整理於下表：

設計元素	目的	範例
視覺化數據	提高數據可讀性	柱狀圖顯示碳排放趨勢
互動圖表	增強用戶參與度	點擊查看年度ESG分數變化
多媒體內容	豐富展示形式	視頻介紹企業社會責任項目
多元UI設計	提升網頁吸引力與易讀性	響應式設計適配手機與電腦

這些設計不僅提升了網頁的專業性，還能讓訪客更直觀地理解企業的ESG承諾。

一個意想不到的細節

除了傳統的報告和網頁展示，數位媒體的應用正在改變企業與公眾的互動方式。例如，通過互動圖表讓數據更直觀，這可能進一步提升公眾對企業ESG承諾的信任，這一點在ESG in China: A review of practice and research中有相關討論。

結論

總體而言，企業建立ESG網頁的目的是回應現代社會的需求，並通過數位化手段提升公眾認知和評價。Tenten的案例展示了如何通過專業設計優化ESG網頁，這些努力不僅有助於企業的聲譽，還能促進可持續發展的實現。

關鍵引用

為什麼要做 ESG 網頁？

在現代社會中，企業重視環境、社會和治理(ESG)已成為顯著趨勢，這不僅是因為全球環境問題加劇，也因為投資者、消費者和法規對企業的要求提高。通過追求ESG目標，企業能在可持續發展中立足並提升競爭力和聲譽。企業有多種方式展示其ESG成效：大多數公司每年發布ESG報告供下載查閱，同時越來越多企業正採用數字媒體方式來擴大其成效的曝光度。

而領先的企業每年都會製作 ESG 報告書，方便大家下載查閱，而現在也越來越多人採行數位媒體的方式，爭取成效曝光，進而提升 ESG 評鑑。

Tenten 近年來也協助特別多客戶建立永續數位形象，尤其許多投資控股公司的大專案，都會特別針對 ESG 頁面進行深入設計和優化。這些頁面不僅包含詳細的文字敘述，還會利用視覺化數據、互動圖表和多媒體內容來展示企業在 ESG 方面的努力和成果，以多元的 UI 設計提高網頁的易讀性及吸引力，讓不同背景的訪客都能迅速掌握關鍵資訊。以下將以 Tenten 曾經經手過的 ESG 網頁設計案為例，說明專案在進行中所需注意的事項，以及分享一些實用的 UI 設計給大家。

製作 ESG 網頁該注意什麼？

大部分公司如果已經行之有年的在參與 ESG 評鑑，大概率都已經知道評鑑單位會採用的計分標準為何，撇除各評鑑單位各自的條件，有哪些是 ESG 網頁必要的元素？一起來看！

ESG 網頁的內容十分繁雜，涵蓋的領域也很多，往往會有太多內容需要呈現。這時候便可以透過收束資料、設計呈現方式去大幅度地改善訪客獲取資訊的方式。而因為每家企業所重視的目標不同，最一開始如何切分資訊也是需要與客戶討論的重要一環。

此外，因為長期乘載歷年來的資訊、數據、圖表，甚至每年都需要大動作的更新，因此我們首要考量的就是 ESG 網頁的維護性。如果網頁的製作全數採取 hard-coded，等到下一年要由網站維運人員更新網頁內容時就悲劇了，因此如果 ESG 網頁內容可以透過後台 CMS 系統，讓人員輕鬆更新的話是再好不過！

Step #1：準備 ESG 網頁內容及素材

對於初次進行 ESG 網頁建置的企業而言，或許還沒有一個團隊專職負責這塊，頂多是網管人員協助接洽，然而 ESG 網頁所涉及的內容很廣，時常會需要其他相關專業人員的支援，以下將建議從各部門組成臨時團隊已協助 ESG 網站建置：

專案負責人：由企業的永續發展主管（Chief Sustainability Officer, CSO）或公關部門主管擔任專案負責人，負責整體協調、推進專案。

核心團隊成員

環境部門：負責提供有關環境保護和可持續發展的數據和報告。
社會責任部門：負責收集有關社會責任和社會影響的資料。
公司治理部門：提供公司治理結構、政策和執行狀況的相關資料。
行銷部門：協助撰寫和編輯 ESG 內容，確保信息傳達清晰並具吸引力。
數據分析部門：負責分析和處理 ESG 數據，製作可視化圖表和報告。
設計部門：提供設計支持，製作視覺素材和多媒體內容。
IT 部門：提供技術支持，協助網頁開發和維護。

團隊組成完畢後，即可開始著手準備 ESG 網頁內容及素材。

資料收集與整合

各部門根據自身職責收集相關數據報告、表格圖片、文字敘述。
專案負責人統一整合各部門提交的資料，確保資料完整正確。

Step #2：釐清 ESG 架構

在進行初步資料搜集之後，已經可以先將蒐集到的資料進行分類，確定哪些資料屬於環境、社會和治理三個領域，以及三個領域各自運用的頁面（大多遵循永續報告書的架構下去製作）。

💡

UI Tip
通常 ESG 相關頁面都會呈現層層疊疊的狀態，此時可以透過 accordion 的設計讓導覽列可以展開更多。

💡

UI Tip
運用麵包屑（breadcrumbs）可以收納子頁，讓層級更清楚。

Step #3：確定專案規模、功能、維護需求

確定各網頁的頁面內容，以及主頁、子頁的總頁數後，專案規模就可以大致確定了。有些企業的 ESG 網頁會包含其他功能（電子報訂閱、檢舉表單、站內搜尋、其他串接）此時也需要一併提出以利後續開發時程、預算的安排考量。

由於 ESG 內容會每年更新，未來的維運要考量到網站管理人員是否具備足夠的知識技術自行更換內容（所以最好採用簡單、資源多的 CMS 製作後台）。另外，若是大型企業或許會有測試站的需求，透過正式站、測試站切換，來達成所有 ESG 頁面一次上新的考量。

技術評估與支持

IT 部門或網站建置公司進行技術評估，確保網頁開發及維護所需的技術條件都能滿足。
確定使用的 CMS 系統和相關技術工具，制定後續的技術支援計劃。

Step #4：統整 ESG 內容進行有效 UI 設計

有了 ESG 網頁架構及初步內容（文字、圖片素材），接下來的步驟是確保這些資料能夠被有效地整合及呈現，並且能夠持續維護和更新。首先，需先區分哪些內容是每年須更新的，哪些內容是長期固定的。針對需要頻繁更新的內容，請務必記得要把相關區塊設計成 CMS，以利維護人員後續自行添加，例如：「大事記」、「ESG 新聞」、「得獎專區」這種會隨著時間動態更新的頁面，需考量到未來資料量變多後，要如何進行呈現。例如：以下 ASE 大事記頁面，每年都會新增相關事蹟，可思考要如何設計讓網管人員可以輕鬆維運；新聞頁面可設計 pagination 來放多篇報導。

除了上述屬於逐年增加的內容，ESG 還有部分內容是每年會大換新的區塊，例如績效、圖表、數據等等。過往案例中，企業將會每年更新內文、永續報告書中的圖表、網頁呈現用的數據 icon 等等，因此這些元素維護、更新的難易度也是需要考量的點

每年出品的永續報告書是 ESG 網頁最重要、最多人瀏覽的頁面。由於這是使用率較高的頁面，我們也在 nav bar 的下拉選單中直接製作前往報告書的 CTA，引導利害關係人直達下載頁面。

由於 ESG 的內容多元，同一個主題往往有不同可以談論的主題與努力方向，因此利用 tab 或是 slider 可以完善的利用頁面空間，提供更多資訊給訪客。

看完以上的 UI 設計案例，要如何開始準備自家的 ESG 頁面內容？除了可以根據要呈現的內容安排大致的排版，內容的字數是否符合 UI、圖片素材調性是否與主視覺一致，都需要網站設計公司與客戶團隊的內容生產相配合。時程順序上，建議先由團隊內部產生文案及圖片的初稿，並說明這些素材的重點為何？想要特別展現的內容為何？再交付給網頁設計公司，後續由設計公司協助製作初稿，會更貼近團隊的想像。以下是團隊內部在進行內容產出時可以遵循的方向：

內容撰寫與編輯

行銷部門負責撰寫 ESG 內容，說明企業在環境、社會、治理方面的努力及成果。
內容完成後，由專案負責人進行審核修訂，確保內容清晰且具說服力。

視覺素材準備

設計部門根據撰寫的內容，製作相關的圖表、圖片和影片，以豐富網頁內容。
數據分析部門協助製作數據可視化圖表，確保圖表清晰易懂。
針對網站上可能使用到、用來傳達意象的素材，可以先從企業內部自行拍攝的素材去挑選，例如：廠區綠化成果、同仁淨灘活動等等素材；非不得已再使用常見的 ESG 素材庫圖片（ESG 意象素材的兩難：使用大眾都在使用那幾張圖片，容易淪為陳腔濫調，降低質感，但偏偏 ESG 的主題很抽象也不太好拍攝）這邊就建議由專業的設計師進行素材的挑選與編排。

內部審核與確認

專案負責人組織內部審核會議，邀請相關部門參與，確認所有資料和內容的準確性和完整性。
根據內部審核結果進行必要的修訂和調整。

Step #5：提升網頁數位曝光效益

ESG 網頁都建立好之後，除了頁面彼此之間結構、層級清楚，讓使用者查看資訊時不至於迷路，另一個重點是延續網頁內容的效益。我們藉由在 footer 設計社群媒體的超連結來增進互動率，而在單一 ESG 頁面，以及新聞專區的內容都有多元媒體的分享連結，並設置 Open Graph 來促進文章分享的點閱率。ESG 相關文件的 CTA 在網頁上也是隨處可見，引導使用者前往查看文件。