{"allowContribute":false,"item":{"artifactHtml":"\u003cstyle\u003e\n  :root { --paper:#F7F8F7; --ink:#14191A; --ink-2:#4E5658; --accent:#0D5A63; --soft:#DFEEF0; --hair:#D8DEDC; --gold:#8A6D3B; }\n  :root[data-theme=\"dark\"] { --paper:#121616; --ink:#E9EDEC; --ink-2:#AEB6B7; --accent:#6FC5D2; --soft:#12333A; --hair:#2B3233; --gold:#C9A66B; }\n  .doc { background:var(--paper); color:var(--ink); padding:30px 34px; font:16px/1.72 -apple-system,\"PingFang TC\",\"Noto Sans TC\",sans-serif; }\n  .eyebrow { font:600 11px ui-monospace; letter-spacing:.16em; color:var(--accent); }\n  h1 { font-size:28px; line-height:1.28; letter-spacing:-.015em; margin:12px 0 0; }\n  h2 { font-size:20px; margin:34px 0 4px; padding-bottom:8px; border-bottom:2px solid var(--accent); }\n  h3 { font-size:16px; margin:20px 0 2px; color:var(--ink); }\n  p, li { color:var(--ink-2); max-width:64ch; }\n  .lede { margin:10px 0 0; font-size:17px; }\n  .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:20px 0; }\n  .stat { background:var(--soft); border-radius:8px; padding:12px 14px; }\n  .stat .k { font-size:12px; color:var(--accent); }\n  .stat .v { font-size:22px; font-weight:700; margin-top:4px; }\n  .stat .n { font-size:12px; color:var(--ink-2); margin-top:2px; }\n  table { border-collapse:collapse; width:100%; font-size:14px; margin:12px 0; }\n  th,td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--hair); vertical-align:top; }\n  th { font:600 11px ui-monospace; letter-spacing:.06em; color:var(--ink-2); }\n  .callout { display:flex; gap:12px; padding:13px 15px; background:var(--soft); border-radius:6px; margin:14px 0; }\n  .callout .tag { flex:none; font:700 11px ui-monospace; letter-spacing:.08em; color:var(--accent); padding-top:3px; }\n  .warn { border-left:3px solid var(--gold); background:transparent; }\n  .warn .tag { color:var(--gold); }\n  .layer { border:1px solid var(--hair); border-radius:8px; padding:14px 16px; margin:12px 0; }\n  .layer .t { font:700 12px ui-monospace; letter-spacing:.08em; color:var(--accent); }\n  .layer h3 { margin-top:6px; }\n  @media (max-width:640px) { .doc { padding:20px 18px; } h1 { font-size:22px; } }\n\u003c/style\u003e\n\u003cdiv class=\"doc\"\u003e\n  \u003cheader\u003e\n    \u003cdiv class=\"eyebrow\"\u003e知識整理 · 研究筆記\u003c/div\u003e\n    \u003ch1\u003e台積電互動數位版版面拆解：TCSA 常勝軍的 HTML5 數位報告怎麼做\u003c/h1\u003e\n    \u003cp class=\"lede\"\u003e實地拆解 esg.tsmc.com（2026-08 瀏覽）——不只是把 PDF 放上網，而是「報告書網頁化＋可自定義＋多媒體＋無障礙」的完整套路\u003c/p\u003e\n  \u003c/header\u003e\n\n  \u003csection data-cube=\"stats\" class=\"stats\"\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e自定義章節\u003c/div\u003e\u003cdiv class=\"v\"\u003e9 大章\u003c/div\u003e\u003cdiv class=\"n\"\u003e可勾選產出個人化報告\u003c/div\u003e\u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e主題式報告\u003c/div\u003e\u003cdiv class=\"v\"\u003e6 本\u003c/div\u003e\u003cdiv class=\"n\"\u003e人權／氣候／供應鏈／SDGs…\u003c/div\u003e\u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e無障礙\u003c/div\u003e\u003cdiv class=\"v\"\u003eALT+C/U/H\u003c/div\u003e\u003cdiv class=\"n\"\u003e快捷鍵＋跳過連結＋深色模式\u003c/div\u003e\u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e互動元素\u003c/div\u003e\u003cdiv class=\"v\"\u003e4+\u003c/div\u003e\u003cdiv class=\"n\"\u003e問答／遊戲／影片／ChatBot\u003c/div\u003e\u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003ch2\u003e核心概念：三層架構，不只是一本 PDF\u003c/h2\u003e\n  \u003cp\u003e台積電把「永續報告」拆成三層，各自服務不同讀者與目的。這正是它年年拿 TCSA 報告書獎的關鍵——資訊揭露完整（內容層）、溝通成效佳（互動層）、可信度高（無障礙＋查證）。\u003c/p\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第一層 · 入口與導覽\u003c/div\u003e\n    \u003ch3\u003e「最新永續資訊」頁\u003c/h3\u003e\n    \u003cp\u003e頂部導覽（永續管理／永續角色／永續故事／永續資料庫／聯絡我們）＋搜尋＋中英切換＋深色模式；主內容由上而下：主標題 → 自定義報告書入口 → 當年度報告書下載卡 → 6 本主題式報告卡片 → 自定義章節勾選表單 →「探索更多資源」。一頁把所有「報告」收攏，讀者按需求挑入口。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第二層 · 報告內容層\u003c/div\u003e\n    \u003ch3\u003e一本主報告 ＋ 六本主題式 ＋ 自定義組合\u003c/h3\u003e\n    \u003cp\u003e\u003cb\u003e主報告\u003c/b\u003e：完整的民國 114 年永續報告書（PDF）。\u003cb\u003e主題式報告書\u003c/b\u003e：把永續拆成 6 本獨立小報告——人權、氣候暨自然、永續影響力評價、聯合國永續發展行動目標、責任供應鏈、重大性分析，各自有封面卡與下載。\u003cb\u003e自定義報告書\u003c/b\u003e：讓讀者勾選想看的章節，即時產出一份只含該章節的個人化 PDF——這是它最突出的互動設計。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第三層 · 多媒體與互動\u003c/div\u003e\n    \u003ch3\u003e問答、遊戲、影片、ChatBot\u003c/h3\u003e\n    \u003cp\u003e頁尾放「互動問答」「偵探聯盟小遊戲」「訂閱電子報」，永續故事區有「精選影片」；右下角掛 ChatBot（「你好！需要幫忙嗎？」配吉祥物）。這些不是報告書內容，卻是「多媒體應用與內容呈現」那 40% 的實體——把閱覽從「讀」變成「玩」。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003ch2\u003e自定義報告書的 9 大章節（可直接當你的章節藍圖）\u003c/h2\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\u003cth\u003e章節\u003c/th\u003e\u003cth\u003e涵蓋小節\u003c/th\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e1. 導言\u003c/td\u003e\u003ctd\u003e主席的話、公司簡介、創新的價值、永續績效、永續里程、肯定與榮耀\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e2. 實踐永續管理\u003c/td\u003e\u003ctd\u003eESG 執行架構、管理平台、重大性分析與利害關係人溝通、永續影響力、SDGs\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e3. 追求創新的先行者\u003c/td\u003e\u003ctd\u003e創新管理、產品品質、客戶關係管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e4. 負責任的採購者\u003c/td\u003e\u003ctd\u003e永續供應鏈管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e5. 綠色力量的執行者\u003c/td\u003e\u003ctd\u003e氣候與能源、水管理、資源循環、空氣汙染防制、生物多樣性\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e6. 員工引以為傲的公司\u003c/td\u003e\u003ctd\u003e共融職場、人才吸引與留任、人才發展、職業安全與衛生\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e7. 改變社會的力量\u003c/td\u003e\u003ctd\u003e社會影響力、文教基金會、慈善基金會\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e8. 營運與治理\u003c/td\u003e\u003ctd\u003e公司治理、財務績效、稅務、資訊安全、商業與人權\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e9. 附錄\u003c/td\u003e\u003ctd\u003e關於報告書、永續揭露框架、公協會參與、第三方查證聲明、聯絡資訊\u003c/td\u003e\u003c/tr\u003e\n  \u003c/table\u003e\n  \u003cp\u003e這套章節直接呼應 GRI／TCFD／IFRS 的揭露結構——你上一份筆記的「8 大章節骨架」在這裡有實作範本，可以逐章對照著排自己的架構。\u003c/p\u003e\n\n  \u003ch2\u003e無障礙設計：這是評分不是加分\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e頁首有\u003cb\u003e「跳到主要內容」\u003c/b\u003e跳過連結，還有 \u003cb\u003eALT+U／ALT+C／ALT+H\u003c/b\u003e 三個鍵盤快捷鍵，直跳導覽／中央內容／頁尾。\u003c/li\u003e\n    \u003cli\u003e\u003cb\u003e深色／淺色模式\u003c/b\u003e切換（連「減少裝置耗能」都標註）。\u003c/li\u003e\n    \u003cli\u003e整站標題層級結構清晰（h1→h2→h3），所有勾選框都有 label，鍵盤可完整操作——WCAG 的「可感知／可操作／可理解／穩健」四原則在架構層就落地。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e視覺語言\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e首頁：\u003cb\u003e地球衛星影像\u003c/b\u003e主視覺＋大標「驅動美好改變」，環境／社會／經濟三個標籤直接疊在地球上——用一張圖傳達全球永續願景。\u003c/li\u003e\n    \u003cli\u003e內頁：極簡、卡片式模組、大量留白；品牌紅（#C41E3A）做強調、粉紫＋米色漸層做裝飾；無襯線字體、高對比。\u003c/li\u003e\n    \u003cli\u003e響應式：行動裝置也能順暢閱讀與操作。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003cdiv class=\"callout warn\"\u003e\u003cspan class=\"tag\"\u003e對你的啟示\u003c/span\u003e\u003cdiv\u003e你目前會 InDesign＋互動 PDF 連結，要走到這套：\u003cb\u003e① 先抄章節結構\u003c/b\u003e（9 大章）與「主報告＋主題式拆分」的內容架構；\u003cb\u003e② HTML5 互動版用 FlipHTML5／AnyFlip 當入口\u003c/b\u003e，同樣能疊加影片、問答、連結；\u003cb\u003e③ 無障礙是台積電的真正門檻\u003c/b\u003e——翻頁書平台的無障礙能力有限，若要比照，PDF 標籤＋跳過連結＋深色模式這幾樣至少要做到。\u003c/div\u003e\u003c/div\u003e\n\n  \u003ch2\u003e參考來源\u003c/h2\u003e\n  \u003cul style=\"font-size:13px\"\u003e\n    \u003cli\u003e台積電永續網站 esg.tsmc.com／最新永續資訊（2026-08-20 實地拆解）\u003c/li\u003e\n    \u003cli\u003eTCSA 台灣企業永續獎官方（報告書獎評選辦法）\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e","content":"\u003cdiv class=\"doc\"\u003e\n  \n\n  \u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e自定義章節\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e9 大章\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e可勾選產出個人化報告\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e主題式報告\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6 本\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e人權／氣候／供應鏈／SDGs…\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e無障礙\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eALT+C/U/H\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e快捷鍵＋跳過連結＋深色模式\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e互動元素\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e4+\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e問答／遊戲／影片／ChatBot\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n  \u003ch2\u003e核心概念：三層架構，不只是一本 PDF\u003c/h2\u003e\n  \u003cp\u003e台積電把「永續報告」拆成三層，各自服務不同讀者與目的。這正是它年年拿 TCSA 報告書獎的關鍵——資訊揭露完整（內容層）、溝通成效佳（互動層）、可信度高（無障礙＋查證）。\u003c/p\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第一層 · 入口與導覽\u003c/div\u003e\n    \u003ch3\u003e「最新永續資訊」頁\u003c/h3\u003e\n    \u003cp\u003e頂部導覽（永續管理／永續角色／永續故事／永續資料庫／聯絡我們）＋搜尋＋中英切換＋深色模式；主內容由上而下：主標題 → 自定義報告書入口 → 當年度報告書下載卡 → 6 本主題式報告卡片 → 自定義章節勾選表單 →「探索更多資源」。一頁把所有「報告」收攏，讀者按需求挑入口。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第二層 · 報告內容層\u003c/div\u003e\n    \u003ch3\u003e一本主報告 ＋ 六本主題式 ＋ 自定義組合\u003c/h3\u003e\n    \u003cp\u003e\u003cb\u003e主報告\u003c/b\u003e：完整的民國 114 年永續報告書（PDF）。\u003cb\u003e主題式報告書\u003c/b\u003e：把永續拆成 6 本獨立小報告——人權、氣候暨自然、永續影響力評價、聯合國永續發展行動目標、責任供應鏈、重大性分析，各自有封面卡與下載。\u003cb\u003e自定義報告書\u003c/b\u003e：讓讀者勾選想看的章節，即時產出一份只含該章節的個人化 PDF——這是它最突出的互動設計。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第三層 · 多媒體與互動\u003c/div\u003e\n    \u003ch3\u003e問答、遊戲、影片、ChatBot\u003c/h3\u003e\n    \u003cp\u003e頁尾放「互動問答」「偵探聯盟小遊戲」「訂閱電子報」，永續故事區有「精選影片」；右下角掛 ChatBot（「你好！需要幫忙嗎？」配吉祥物）。這些不是報告書內容，卻是「多媒體應用與內容呈現」那 40% 的實體——把閱覽從「讀」變成「玩」。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003ch2\u003e自定義報告書的 9 大章節（可直接當你的章節藍圖）\u003c/h2\u003e\n  \u003ctable\u003e\n    \u003ctbody\u003e\u003ctr\u003e\u003cth\u003e章節\u003c/th\u003e\u003cth\u003e涵蓋小節\u003c/th\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e1. 導言\u003c/td\u003e\u003ctd\u003e主席的話、公司簡介、創新的價值、永續績效、永續里程、肯定與榮耀\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e2. 實踐永續管理\u003c/td\u003e\u003ctd\u003eESG 執行架構、管理平台、重大性分析與利害關係人溝通、永續影響力、SDGs\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e3. 追求創新的先行者\u003c/td\u003e\u003ctd\u003e創新管理、產品品質、客戶關係管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e4. 負責任的採購者\u003c/td\u003e\u003ctd\u003e永續供應鏈管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e5. 綠色力量的執行者\u003c/td\u003e\u003ctd\u003e氣候與能源、水管理、資源循環、空氣汙染防制、生物多樣性\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e6. 員工引以為傲的公司\u003c/td\u003e\u003ctd\u003e共融職場、人才吸引與留任、人才發展、職業安全與衛生\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e7. 改變社會的力量\u003c/td\u003e\u003ctd\u003e社會影響力、文教基金會、慈善基金會\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e8. 營運與治理\u003c/td\u003e\u003ctd\u003e公司治理、財務績效、稅務、資訊安全、商業與人權\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e9. 附錄\u003c/td\u003e\u003ctd\u003e關於報告書、永續揭露框架、公協會參與、第三方查證聲明、聯絡資訊\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\u003c/table\u003e\n  \u003cp\u003e這套章節直接呼應 GRI／TCFD／IFRS 的揭露結構——你上一份筆記的「8 大章節骨架」在這裡有實作範本，可以逐章對照著排自己的架構。\u003c/p\u003e\n\n  \u003ch2\u003e無障礙設計：這是評分不是加分\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e頁首有\u003cb\u003e「跳到主要內容」\u003c/b\u003e跳過連結，還有 \u003cb\u003eALT+U／ALT+C／ALT+H\u003c/b\u003e 三個鍵盤快捷鍵，直跳導覽／中央內容／頁尾。\u003c/li\u003e\n    \u003cli\u003e\u003cb\u003e深色／淺色模式\u003c/b\u003e切換（連「減少裝置耗能」都標註）。\u003c/li\u003e\n    \u003cli\u003e整站標題層級結構清晰（h1→h2→h3），所有勾選框都有 label，鍵盤可完整操作——WCAG 的「可感知／可操作／可理解／穩健」四原則在架構層就落地。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e視覺語言\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e首頁：\u003cb\u003e地球衛星影像\u003c/b\u003e主視覺＋大標「驅動美好改變」，環境／社會／經濟三個標籤直接疊在地球上——用一張圖傳達全球永續願景。\u003c/li\u003e\n    \u003cli\u003e內頁：極簡、卡片式模組、大量留白；品牌紅（#C41E3A）做強調、粉紫＋米色漸層做裝飾；無襯線字體、高對比。\u003c/li\u003e\n    \u003cli\u003e響應式：行動裝置也能順暢閱讀與操作。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003cdiv class=\"callout warn\"\u003e\u003cspan class=\"tag\"\u003e對你的啟示\u003c/span\u003e\u003cdiv\u003e你目前會 InDesign＋互動 PDF 連結，要走到這套：\u003cb\u003e① 先抄章節結構\u003c/b\u003e（9 大章）與「主報告＋主題式拆分」的內容架構；\u003cb\u003e② HTML5 互動版用 FlipHTML5／AnyFlip 當入口\u003c/b\u003e，同樣能疊加影片、問答、連結；\u003cb\u003e③ 無障礙是台積電的真正門檻\u003c/b\u003e——翻頁書平台的無障礙能力有限，若要比照，PDF 標籤＋跳過連結＋深色模式這幾樣至少要做到。\u003c/div\u003e\u003c/div\u003e\n\n  \u003ch2\u003e參考來源\u003c/h2\u003e\n  \u003cul style=\"font-size:13px\"\u003e\n    \u003cli\u003e台積電永續網站 esg.tsmc.com／最新永續資訊（2026-08-20 實地拆解）\u003c/li\u003e\n    \u003cli\u003eTCSA 台灣企業永續獎官方（報告書獎評選辦法）\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e","createdAt":1787211833813,"deletedAt":null,"displayMode":"artifact","id":"5c32fa285af3b7908ae2d069","isNew":false,"isPublic":true,"itemType":"NOTE","name":"台積電互動數位版版面拆解：TCSA 常勝軍的 HTML5 數位報告怎麼做","parents":{"cf3ada54ee05f9e21c11f6d8":1787211833813},"preParentID":null,"updatedAt":1787214046764,"updatedBy":{"userId":"6a86803e00359fe5001aa0","userName":"宜君 邱"},"version":4},"ownerName":"宜君 邱","subtree":[{"artifactHtml":"\u003cstyle\u003e\n  :root { --paper:#F7F8F7; --ink:#14191A; --ink-2:#4E5658; --accent:#0D5A63; --soft:#DFEEF0; --hair:#D8DEDC; --gold:#8A6D3B; }\n  :root[data-theme=\"dark\"] { --paper:#121616; --ink:#E9EDEC; --ink-2:#AEB6B7; --accent:#6FC5D2; --soft:#12333A; --hair:#2B3233; --gold:#C9A66B; }\n  .doc { background:var(--paper); color:var(--ink); padding:30px 34px; font:16px/1.72 -apple-system,\"PingFang TC\",\"Noto Sans TC\",sans-serif; }\n  .eyebrow { font:600 11px ui-monospace; letter-spacing:.16em; color:var(--accent); }\n  h1 { font-size:28px; line-height:1.28; letter-spacing:-.015em; margin:12px 0 0; }\n  h2 { font-size:20px; margin:34px 0 4px; padding-bottom:8px; border-bottom:2px solid var(--accent); }\n  h3 { font-size:16px; margin:20px 0 2px; color:var(--ink); }\n  p, li { color:var(--ink-2); max-width:64ch; }\n  .lede { margin:10px 0 0; font-size:17px; }\n  .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:20px 0; }\n  .stat { background:var(--soft); border-radius:8px; padding:12px 14px; }\n  .stat .k { font-size:12px; color:var(--accent); }\n  .stat .v { font-size:22px; font-weight:700; margin-top:4px; }\n  .stat .n { font-size:12px; color:var(--ink-2); margin-top:2px; }\n  table { border-collapse:collapse; width:100%; font-size:14px; margin:12px 0; }\n  th,td { text-align:left; padding:8px 12px; border-bottom:1px solid var(--hair); vertical-align:top; }\n  th { font:600 11px ui-monospace; letter-spacing:.06em; color:var(--ink-2); }\n  .callout { display:flex; gap:12px; padding:13px 15px; background:var(--soft); border-radius:6px; margin:14px 0; }\n  .callout .tag { flex:none; font:700 11px ui-monospace; letter-spacing:.08em; color:var(--accent); padding-top:3px; }\n  .warn { border-left:3px solid var(--gold); background:transparent; }\n  .warn .tag { color:var(--gold); }\n  .layer { border:1px solid var(--hair); border-radius:8px; padding:14px 16px; margin:12px 0; }\n  .layer .t { font:700 12px ui-monospace; letter-spacing:.08em; color:var(--accent); }\n  .layer h3 { margin-top:6px; }\n  @media (max-width:640px) { .doc { padding:20px 18px; } h1 { font-size:22px; } }\n\u003c/style\u003e\n\u003cdiv class=\"doc\"\u003e\n  \u003cheader\u003e\n    \u003cdiv class=\"eyebrow\"\u003e知識整理 · 研究筆記\u003c/div\u003e\n    \u003ch1\u003e台積電互動數位版版面拆解：TCSA 常勝軍的 HTML5 數位報告怎麼做\u003c/h1\u003e\n    \u003cp class=\"lede\"\u003e實地拆解 esg.tsmc.com（2026-08 瀏覽）——不只是把 PDF 放上網，而是「報告書網頁化＋可自定義＋多媒體＋無障礙」的完整套路\u003c/p\u003e\n  \u003c/header\u003e\n\n  \u003csection data-cube=\"stats\" class=\"stats\"\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e自定義章節\u003c/div\u003e\u003cdiv class=\"v\"\u003e9 大章\u003c/div\u003e\u003cdiv class=\"n\"\u003e可勾選產出個人化報告\u003c/div\u003e\u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e主題式報告\u003c/div\u003e\u003cdiv class=\"v\"\u003e6 本\u003c/div\u003e\u003cdiv class=\"n\"\u003e人權／氣候／供應鏈／SDGs…\u003c/div\u003e\u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e無障礙\u003c/div\u003e\u003cdiv class=\"v\"\u003eALT+C/U/H\u003c/div\u003e\u003cdiv class=\"n\"\u003e快捷鍵＋跳過連結＋深色模式\u003c/div\u003e\u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"k\"\u003e互動元素\u003c/div\u003e\u003cdiv class=\"v\"\u003e4+\u003c/div\u003e\u003cdiv class=\"n\"\u003e問答／遊戲／影片／ChatBot\u003c/div\u003e\u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003ch2\u003e核心概念：三層架構，不只是一本 PDF\u003c/h2\u003e\n  \u003cp\u003e台積電把「永續報告」拆成三層，各自服務不同讀者與目的。這正是它年年拿 TCSA 報告書獎的關鍵——資訊揭露完整（內容層）、溝通成效佳（互動層）、可信度高（無障礙＋查證）。\u003c/p\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第一層 · 入口與導覽\u003c/div\u003e\n    \u003ch3\u003e「最新永續資訊」頁\u003c/h3\u003e\n    \u003cp\u003e頂部導覽（永續管理／永續角色／永續故事／永續資料庫／聯絡我們）＋搜尋＋中英切換＋深色模式；主內容由上而下：主標題 → 自定義報告書入口 → 當年度報告書下載卡 → 6 本主題式報告卡片 → 自定義章節勾選表單 →「探索更多資源」。一頁把所有「報告」收攏，讀者按需求挑入口。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第二層 · 報告內容層\u003c/div\u003e\n    \u003ch3\u003e一本主報告 ＋ 六本主題式 ＋ 自定義組合\u003c/h3\u003e\n    \u003cp\u003e\u003cb\u003e主報告\u003c/b\u003e：完整的民國 114 年永續報告書（PDF）。\u003cb\u003e主題式報告書\u003c/b\u003e：把永續拆成 6 本獨立小報告——人權、氣候暨自然、永續影響力評價、聯合國永續發展行動目標、責任供應鏈、重大性分析，各自有封面卡與下載。\u003cb\u003e自定義報告書\u003c/b\u003e：讓讀者勾選想看的章節，即時產出一份只含該章節的個人化 PDF——這是它最突出的互動設計。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第三層 · 多媒體與互動\u003c/div\u003e\n    \u003ch3\u003e問答、遊戲、影片、ChatBot\u003c/h3\u003e\n    \u003cp\u003e頁尾放「互動問答」「偵探聯盟小遊戲」「訂閱電子報」，永續故事區有「精選影片」；右下角掛 ChatBot（「你好！需要幫忙嗎？」配吉祥物）。這些不是報告書內容，卻是「多媒體應用與內容呈現」那 40% 的實體——把閱覽從「讀」變成「玩」。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003ch2\u003e自定義報告書的 9 大章節（可直接當你的章節藍圖）\u003c/h2\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\u003cth\u003e章節\u003c/th\u003e\u003cth\u003e涵蓋小節\u003c/th\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e1. 導言\u003c/td\u003e\u003ctd\u003e主席的話、公司簡介、創新的價值、永續績效、永續里程、肯定與榮耀\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e2. 實踐永續管理\u003c/td\u003e\u003ctd\u003eESG 執行架構、管理平台、重大性分析與利害關係人溝通、永續影響力、SDGs\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e3. 追求創新的先行者\u003c/td\u003e\u003ctd\u003e創新管理、產品品質、客戶關係管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e4. 負責任的採購者\u003c/td\u003e\u003ctd\u003e永續供應鏈管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e5. 綠色力量的執行者\u003c/td\u003e\u003ctd\u003e氣候與能源、水管理、資源循環、空氣汙染防制、生物多樣性\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e6. 員工引以為傲的公司\u003c/td\u003e\u003ctd\u003e共融職場、人才吸引與留任、人才發展、職業安全與衛生\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e7. 改變社會的力量\u003c/td\u003e\u003ctd\u003e社會影響力、文教基金會、慈善基金會\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e8. 營運與治理\u003c/td\u003e\u003ctd\u003e公司治理、財務績效、稅務、資訊安全、商業與人權\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e9. 附錄\u003c/td\u003e\u003ctd\u003e關於報告書、永續揭露框架、公協會參與、第三方查證聲明、聯絡資訊\u003c/td\u003e\u003c/tr\u003e\n  \u003c/table\u003e\n  \u003cp\u003e這套章節直接呼應 GRI／TCFD／IFRS 的揭露結構——你上一份筆記的「8 大章節骨架」在這裡有實作範本，可以逐章對照著排自己的架構。\u003c/p\u003e\n\n  \u003ch2\u003e無障礙設計：這是評分不是加分\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e頁首有\u003cb\u003e「跳到主要內容」\u003c/b\u003e跳過連結，還有 \u003cb\u003eALT+U／ALT+C／ALT+H\u003c/b\u003e 三個鍵盤快捷鍵，直跳導覽／中央內容／頁尾。\u003c/li\u003e\n    \u003cli\u003e\u003cb\u003e深色／淺色模式\u003c/b\u003e切換（連「減少裝置耗能」都標註）。\u003c/li\u003e\n    \u003cli\u003e整站標題層級結構清晰（h1→h2→h3），所有勾選框都有 label，鍵盤可完整操作——WCAG 的「可感知／可操作／可理解／穩健」四原則在架構層就落地。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e視覺語言\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e首頁：\u003cb\u003e地球衛星影像\u003c/b\u003e主視覺＋大標「驅動美好改變」，環境／社會／經濟三個標籤直接疊在地球上——用一張圖傳達全球永續願景。\u003c/li\u003e\n    \u003cli\u003e內頁：極簡、卡片式模組、大量留白；品牌紅（#C41E3A）做強調、粉紫＋米色漸層做裝飾；無襯線字體、高對比。\u003c/li\u003e\n    \u003cli\u003e響應式：行動裝置也能順暢閱讀與操作。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003cdiv class=\"callout warn\"\u003e\u003cspan class=\"tag\"\u003e對你的啟示\u003c/span\u003e\u003cdiv\u003e你目前會 InDesign＋互動 PDF 連結，要走到這套：\u003cb\u003e① 先抄章節結構\u003c/b\u003e（9 大章）與「主報告＋主題式拆分」的內容架構；\u003cb\u003e② HTML5 互動版用 FlipHTML5／AnyFlip 當入口\u003c/b\u003e，同樣能疊加影片、問答、連結；\u003cb\u003e③ 無障礙是台積電的真正門檻\u003c/b\u003e——翻頁書平台的無障礙能力有限，若要比照，PDF 標籤＋跳過連結＋深色模式這幾樣至少要做到。\u003c/div\u003e\u003c/div\u003e\n\n  \u003ch2\u003e參考來源\u003c/h2\u003e\n  \u003cul style=\"font-size:13px\"\u003e\n    \u003cli\u003e台積電永續網站 esg.tsmc.com／最新永續資訊（2026-08-20 實地拆解）\u003c/li\u003e\n    \u003cli\u003eTCSA 台灣企業永續獎官方（報告書獎評選辦法）\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e","content":"\u003cdiv class=\"doc\"\u003e\n  \n\n  \u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e自定義章節\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e9 大章\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e可勾選產出個人化報告\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e主題式報告\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e6 本\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e人權／氣候／供應鏈／SDGs…\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e無障礙\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eALT+C/U/H\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e快捷鍵＋跳過連結＋深色模式\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003e互動元素\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e4+\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e問答／遊戲／影片／ChatBot\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\n  \u003ch2\u003e核心概念：三層架構，不只是一本 PDF\u003c/h2\u003e\n  \u003cp\u003e台積電把「永續報告」拆成三層，各自服務不同讀者與目的。這正是它年年拿 TCSA 報告書獎的關鍵——資訊揭露完整（內容層）、溝通成效佳（互動層）、可信度高（無障礙＋查證）。\u003c/p\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第一層 · 入口與導覽\u003c/div\u003e\n    \u003ch3\u003e「最新永續資訊」頁\u003c/h3\u003e\n    \u003cp\u003e頂部導覽（永續管理／永續角色／永續故事／永續資料庫／聯絡我們）＋搜尋＋中英切換＋深色模式；主內容由上而下：主標題 → 自定義報告書入口 → 當年度報告書下載卡 → 6 本主題式報告卡片 → 自定義章節勾選表單 →「探索更多資源」。一頁把所有「報告」收攏，讀者按需求挑入口。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第二層 · 報告內容層\u003c/div\u003e\n    \u003ch3\u003e一本主報告 ＋ 六本主題式 ＋ 自定義組合\u003c/h3\u003e\n    \u003cp\u003e\u003cb\u003e主報告\u003c/b\u003e：完整的民國 114 年永續報告書（PDF）。\u003cb\u003e主題式報告書\u003c/b\u003e：把永續拆成 6 本獨立小報告——人權、氣候暨自然、永續影響力評價、聯合國永續發展行動目標、責任供應鏈、重大性分析，各自有封面卡與下載。\u003cb\u003e自定義報告書\u003c/b\u003e：讓讀者勾選想看的章節，即時產出一份只含該章節的個人化 PDF——這是它最突出的互動設計。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"layer\"\u003e\n    \u003cdiv class=\"t\"\u003e第三層 · 多媒體與互動\u003c/div\u003e\n    \u003ch3\u003e問答、遊戲、影片、ChatBot\u003c/h3\u003e\n    \u003cp\u003e頁尾放「互動問答」「偵探聯盟小遊戲」「訂閱電子報」，永續故事區有「精選影片」；右下角掛 ChatBot（「你好！需要幫忙嗎？」配吉祥物）。這些不是報告書內容，卻是「多媒體應用與內容呈現」那 40% 的實體——把閱覽從「讀」變成「玩」。\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003ch2\u003e自定義報告書的 9 大章節（可直接當你的章節藍圖）\u003c/h2\u003e\n  \u003ctable\u003e\n    \u003ctbody\u003e\u003ctr\u003e\u003cth\u003e章節\u003c/th\u003e\u003cth\u003e涵蓋小節\u003c/th\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e1. 導言\u003c/td\u003e\u003ctd\u003e主席的話、公司簡介、創新的價值、永續績效、永續里程、肯定與榮耀\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e2. 實踐永續管理\u003c/td\u003e\u003ctd\u003eESG 執行架構、管理平台、重大性分析與利害關係人溝通、永續影響力、SDGs\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e3. 追求創新的先行者\u003c/td\u003e\u003ctd\u003e創新管理、產品品質、客戶關係管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e4. 負責任的採購者\u003c/td\u003e\u003ctd\u003e永續供應鏈管理\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e5. 綠色力量的執行者\u003c/td\u003e\u003ctd\u003e氣候與能源、水管理、資源循環、空氣汙染防制、生物多樣性\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e6. 員工引以為傲的公司\u003c/td\u003e\u003ctd\u003e共融職場、人才吸引與留任、人才發展、職業安全與衛生\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e7. 改變社會的力量\u003c/td\u003e\u003ctd\u003e社會影響力、文教基金會、慈善基金會\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e8. 營運與治理\u003c/td\u003e\u003ctd\u003e公司治理、財務績效、稅務、資訊安全、商業與人權\u003c/td\u003e\u003c/tr\u003e\n    \u003ctr\u003e\u003ctd\u003e9. 附錄\u003c/td\u003e\u003ctd\u003e關於報告書、永續揭露框架、公協會參與、第三方查證聲明、聯絡資訊\u003c/td\u003e\u003c/tr\u003e\n  \u003c/tbody\u003e\u003c/table\u003e\n  \u003cp\u003e這套章節直接呼應 GRI／TCFD／IFRS 的揭露結構——你上一份筆記的「8 大章節骨架」在這裡有實作範本，可以逐章對照著排自己的架構。\u003c/p\u003e\n\n  \u003ch2\u003e無障礙設計：這是評分不是加分\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e頁首有\u003cb\u003e「跳到主要內容」\u003c/b\u003e跳過連結，還有 \u003cb\u003eALT+U／ALT+C／ALT+H\u003c/b\u003e 三個鍵盤快捷鍵，直跳導覽／中央內容／頁尾。\u003c/li\u003e\n    \u003cli\u003e\u003cb\u003e深色／淺色模式\u003c/b\u003e切換（連「減少裝置耗能」都標註）。\u003c/li\u003e\n    \u003cli\u003e整站標題層級結構清晰（h1→h2→h3），所有勾選框都有 label，鍵盤可完整操作——WCAG 的「可感知／可操作／可理解／穩健」四原則在架構層就落地。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e視覺語言\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003e首頁：\u003cb\u003e地球衛星影像\u003c/b\u003e主視覺＋大標「驅動美好改變」，環境／社會／經濟三個標籤直接疊在地球上——用一張圖傳達全球永續願景。\u003c/li\u003e\n    \u003cli\u003e內頁：極簡、卡片式模組、大量留白；品牌紅（#C41E3A）做強調、粉紫＋米色漸層做裝飾；無襯線字體、高對比。\u003c/li\u003e\n    \u003cli\u003e響應式：行動裝置也能順暢閱讀與操作。\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003cdiv class=\"callout warn\"\u003e\u003cspan class=\"tag\"\u003e對你的啟示\u003c/span\u003e\u003cdiv\u003e你目前會 InDesign＋互動 PDF 連結，要走到這套：\u003cb\u003e① 先抄章節結構\u003c/b\u003e（9 大章）與「主報告＋主題式拆分」的內容架構；\u003cb\u003e② HTML5 互動版用 FlipHTML5／AnyFlip 當入口\u003c/b\u003e，同樣能疊加影片、問答、連結；\u003cb\u003e③ 無障礙是台積電的真正門檻\u003c/b\u003e——翻頁書平台的無障礙能力有限，若要比照，PDF 標籤＋跳過連結＋深色模式這幾樣至少要做到。\u003c/div\u003e\u003c/div\u003e\n\n  \u003ch2\u003e參考來源\u003c/h2\u003e\n  \u003cul style=\"font-size:13px\"\u003e\n    \u003cli\u003e台積電永續網站 esg.tsmc.com／最新永續資訊（2026-08-20 實地拆解）\u003c/li\u003e\n    \u003cli\u003eTCSA 台灣企業永續獎官方（報告書獎評選辦法）\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e","createdAt":1787211833813,"deletedAt":null,"displayMode":"artifact","id":"5c32fa285af3b7908ae2d069","isNew":false,"isPublic":true,"itemType":"NOTE","name":"台積電互動數位版版面拆解：TCSA 常勝軍的 HTML5 數位報告怎麼做","parents":{"cf3ada54ee05f9e21c11f6d8":1787211833813},"preParentID":null,"updatedAt":1787214046764,"updatedBy":{"userId":"6a86803e00359fe5001aa0","userName":"宜君 邱"},"version":4}]}