台積電互動數位版版面拆解：TCSA 常勝軍的 HTML5 數位報告怎麼做

由 宜君 邱 分享的筆記

自定義章節 9 大章 可勾選產出個人化報告 主題式報告 6 本 人權／氣候／供應鏈／SDGs… 無障礙 ALT+C/U/H 快捷鍵＋跳過連結＋深色模式 互動元素 4+ 問答／遊戲／影片／ChatBot 核心概念：三層架構，不只是一本 PDF 台積電把「永續報告」拆成三層，各自服務不同讀者與目的。這正是它年年拿 TCSA 報告書獎的關鍵——資訊揭露完整（內容層）、溝通成效佳（互動層）、可信度高（無障礙＋查證）。 第一層 · 入口與導覽 「最新永續資訊」頁 頂部導覽（永續管理／永續角色／永續故事／永續資料庫／聯絡我們）＋搜尋＋中英切換＋深色模式；主內容由上而下：主標題 → 自定義報告書入口 → 當年度報告書下載卡 → 6 本主題式報告卡片 → 自定義章節勾選表單 →「探索更多資源」。一頁把所有「報告」收攏，讀者按需求挑入口。 第二層 · 報告內容層 一本主報告 ＋ 六本主題式 ＋ 自定義組合 主報告 ：完整的民國 114 年永續報告書（PDF）。 主題式報告書 ：把永續拆成 6 本獨立小報告——人權、氣候暨自然、永續影響力評價、聯合國永續發展行動目標、責任供應鏈、重大性分析，各自有封面卡與下載。 自定義報告書 ：讓讀者勾選想看的章節，即時產出一份只含該章節的個人化 PDF——這是它最突出的互動設計。 第三層 · 多媒體與互動 問答、遊戲、影片、ChatBot 頁尾放「互動問答」「偵探聯盟小遊戲」「訂閱電子報」，永續故事區有「精選影片」；右下角掛 ChatBot（「你好！需要幫忙嗎？」配吉祥物）。這些不是報告書內容，卻是「多媒體應用與內容呈現」那 40% 的實體——把閱覽從「讀」變成「玩」。 自定義報告書的 9 大章節（可直接當你的章節藍圖） 章節 涵蓋小節 1. 導言 主席的話、公司簡介、創新的價值、永續績效、永續里程、肯定與榮耀 2. 實踐永續管理 ESG 執行架構、管理平…