「憤怒的菩薩-超前導之卷」是公視時代推理劇「憤怒的菩薩」的官方網站。不同於傳統資訊型官網，網站目的是希望在戲劇正片釋出前，讓網站作為前導，提供觀眾透過探索解謎的方式，了解「憤怒的菩薩」有關人物角色、節目內容、歷史背景等全方位的訊息。
這次的專案可分為「前製期」、「製作期」與「宣傳期」三階段，三階段製作過程說明如下：
（一）前製期
前製作的工作有二，包括：WebVR技術研究與網站腳本撰寫：
1. WebVR技術研究
本次網站的設計目的是讓使用者可以在網站上看到360度的虛擬場景，經評估後選擇Kolor Panotour Pro 作為場景導覽的後製工具，由於此工具的功能群組皆已模組化，因此可以最低度程式編輯背景製作出全景圖片。不過由於本網站還涉及數位敘事場景的編排，因此仍須配合其他程式撰寫，方能達到最佳的互動效果。由於網站載入速度與使用者體驗有正相關，據此工作團隊最後決定360度全景照片為主體，並在各照片中加入聲音、文字與2D平面圖片之素材藉此豐富網站內容，亦可減低網站資料載入之負擔。
2.網站腳本
數位敘事網站與資訊型網站的差異在於，前者本身就該是一組完整的故事，故事亦包括起承轉合或是情節衝突，因此製作前仍須有完整的腳本，帶領觀眾進數位敘事網站想要營造世界觀。以下是本次網站的劇情概念：
「平靜的菩薩庄發生命案了，新文報的菜鳥記者「阿辦」奉命前往調查。您將跟著阿辦從菩薩庄近郊開始造訪不同的場景，並蒐集其中的蛛絲馬跡。1946年，貨船「朝風丸」載滿了歸心似箭的旅日台灣人回到基隆港。因偵破殺人案而聲名大噪的中國留學生陶展文，也隨著好友楊輝銘來台，但兩人卻遇上離奇的殺人案。精彩懸疑的辦案過程，將於2018年8月18日於公視電視頻道與公視+線上影音平台上映。在一切真相大白之前，請跟著「阿辦」一窺神秘的菩薩庄吧!」
由於網站共搜集12組場景且資訊量豐富，為了讓觀眾更有參與感，因此設計出虛擬角色「阿辦」。「阿辦」存在的目的，是為了帶領觀眾生動地穿越不同的場景，並搜集各場景中的掛件資訊。為了增加網站的趣味性，本網站邀請多位「憤怒的菩薩」劇中演員跨界演出，亦邀請「憤怒的菩薩」原著出版單位「內容力」協助撰稿，從而延伸原著小說的歷史資訊，藉此跨界結合擴大網站前導討論的話題性，後者則豐富網站資訊，可擴大「憤怒的菩薩」的跨媒體使用體驗。
（二）製作期
整體的製作期可在分為360度場景照片拍攝與數位敘事網站等階段：
1. 360度場景照片拍攝
照片拍攝期間自2017年12月至2018年3月，360度場境照片拍攝須配合「憤怒的菩薩」劇組的工作流程，這是由於歷史劇場景搭建複雜，部分場景因有租借時限壓力必須搶拍。因此與劇組協調後，360度場景拍攝團隊皆以演員當天通告前2小時為基準抵達現場，並由劇組工作人員協調淨空場地，以利場景拍攝事宜。
團隊使用的360度相機為Ricoh Theta V 4K 360度攝影機，並搭背輕型腳架。相機本體重量約121公克，可錄製當於1400萬輸出畫素高解析度的全景靜態圖像。在自動模式下的ISO值為1600，手動模式的ISO值可設定為3200，整體來看能有效的擷取暗部畫面。此外相機可透過WIFI連線而有遙控功能，因此在拍攝空景時，周邊人員可「躲」到不會被擷取到地點，以拍出完整的畫面。
完成相片拍攝為下一個步驟則是修圖，修圖的目的在於建立故事場景氛圍，本劇雖為歷史劇，但多數場景仍有非歷史劇時代背景的物件，例如日光燈、冷氣、電線、人孔、塑膠地板等，因此必須透修圖覆蓋，藉以還原360度的歷史劇場景。
以上圖為例，該場景為苗栗苑里的「蔡家古厝」，但古厝的四周仍有一般現代民宅（綠色框架標示處），因此需要透過後製將現代民宅去背修整。此外，原圖正下方則有360度場景的破圖（請參考正下方的黑色區塊），亦需要透過修圖方式補強。
事實上，正下方的破圖皆為360度相片會產生的問題，因此工作人員拍攝時都會事先補拍該場景的地板照片，以作為縫補下方破圖的素材。最後則是整體氛圍的修飾，例如讓天空呈現天藍色、讓雲彩的細部較為精緻、建築物紅磚牆的彩度更飽滿等。
2. 360度電腦虛擬場景製作
為了強化視覺風格，製作團隊與實踐大學團隊合作電腦繪圖虛擬場景。電腦繪圖的虛擬場景有兩組，包括：「菩薩庒近郊」與「菩薩山」。兩組虛擬場景的設計理念以菩薩庒兇殺案懸疑氛圍為主體，並參入正片中大量出現的象徵意象，諸如菩薩、棄屍的油筒、遠渡重洋的貨輪、碉堡等，藉此吸睛並引發使用者探索的動力。
3.網站製作
「憤怒的菩薩超前導之卷」陳述的是記者「阿辦」到菩薩庒搜集案情線索的故事，因此製作團隊需要設計「阿辦」（同樣也是觀眾）的探索場景的路線，以及不同場景中的線索。下圖為網頁架構：
使用者一開始會進入VR1之場景，並在場景內探索不同的線索與資訊，若要進入下一個場景（預設為VR2），則須完成解謎才能轉場到VR2至VR11以後的場景。當使用者進入VR2的場景後，可以自行在VR2場景探索，使用者可跟著探索指示依序探索VR3至VR11的場景，亦可自行選擇左上方的地圖選單，依照喜好探索不同的場景。上述VR12的場景若轉為前台視覺，則會是以下的樣貌：
每個場景中，皆設有不同的「掛件」，掛件為場景中的資訊，資訊型態包括：演員介紹、當代歷史背景介紹、原著小說背景介紹三類。資訊的類型包括文字、圖片、影片與演員配音。藉由掛件的組合，可讓場景與場景之間連結為有劇情發展的故事。以場景「林家大廳」為例，其中的掛件對照與故事如下表（點入網站後，選擇「林家大廳」）：
若對照實景，不同的掛件編號會對應在照片中不同的物件，例如編號3的掛件為壁畫，使用者點選「壁畫」即可看到該掛件的資訊。黃框標示的檯燈則為觀眾進入該場景的起始點，而使用者若點選用綠框標註的大門，則可轉場到下個場景。
最後，由VR1（菩薩庒近郊）進入VR2（菩薩庒），以及從VR11（陶展文書房）與VR12（菩薩山）時，皆設有解謎程式，謎底則分別在VR1與VR11的場景中。此設計的目的在於強化網站敘事的趣味性，亦提升觀眾反覆點選掛件的比例。
（三）宣傳期
由於網站早於戲劇正片釋出，為了引起觀眾興趣拜訪網站。第一波釋出網站站址時，便在「憤怒的菩薩」Facebook粉絲專頁以「聞聲不見人」的貼文概念，讓觀眾猜測網站的聲優是由哪位演員擔任。
再公佈結果的同時，則配合公關發稿，以「公視新時代劇憤怒的菩薩即將上映」、「男主角吳慷仁擔任網站聲優」、「虛擬實境網站」三主題，吸引外部媒體同步發稿以造成話題。
最後本官網亦規劃網路活動，讓使用者再度回到官網中尋找謎底。在這次的數位敘事官網中，「林景維臥房」與「陶展文書房」的掛件中各藏有一本「三國志」。其中一本三國志有完整的文字，但另外一本部分文字則被遮蔽。玩家必須相互對照後，才能知道謎底為何。本活動的謎底在正片最後一週釋出，謎底內容也與劇情有關，以而強化觀眾的參與感。
為了傳承戲劇場景的搭建經驗，製作團隊在拍攝360度環景照片時，亦同步訪問本劇的美術總監，請其說明各場景設計理念與搭建的方式。以戲劇場景中的菩薩庒為例，該場景的拍攝地點是台北市萬華區的剝皮寮。此場景相信許多觀眾都非常熟悉，也在其他戲劇中看過剝皮寮的街道。
美術團隊的挑戰是要在有限的製作費與人力資源下，陳設出有意義、有生活感的街道。劇組認為，美術設計雖然要力求掩蓋現代，但也得要「遮」的有巧思、有意義。舉來來說，由於剝皮寮牆上有許多既有塗鴉，因此劇組選擇在街邊以和服商家的美麗和服，巧妙遮掉塗鴉，而且轉化、創造了新的意義。本系列報導共有三篇，皆已在「憤怒的菩薩」Facebook粉絲專頁之網誌釋出。
後記
「憤怒的菩薩-超前導之卷」數位敘事網的設計概念起於全媒體製作，由於網路打破傳統載具限制，不僅可以自由使用文字、影像、音訊、視訊、動畫等多樣媒材來敘事，還能超連結、相互混搭、開放互動，讓敘事者擺脫「載具決定文體」的束縛，邁向「內容決定文體」的新路，為每一個故事、每一則新聞，量身打造最適合的敘事形式。「憤怒的菩薩-超前導之卷」亦秉持全媒體的理念而製作，希望在戲劇與小說之外，用另一種說故事的方式讓觀眾認識「憤怒的菩薩」。
雖然全媒體/跨媒體製作在國外行之有年，但在國內仍為陌生，故須花費較多的溝通成本進行內外的跨部門/跨單位協調。以拍攝360度場景為例，仍須以劇組的拍攝時間為主，以拍出無人的空景。試想若360度的場景若有演員可配合定點、定格演出，是否能仍場景更豐富、更有趣味？演員走位亦可作為保存、演員配合360度場景拍攝的話題，亦可豐富整體的宣傳能量？從而提升本片在傳統與網路媒體上的曝光程度與討論聲量。
