日本遊戲、動畫官網的設計手法：企業網站可以學的 5 件事

日本的遊戲、動畫官網，常常一打開就是一整片大圖，像走進作品的世界。它們的任務是讓沒玩過、沒看過的人，在幾秒內覺得「好像很好玩」，然後一路看下去、按下預購。

這和公司、店家網站要讓客人「覺得可靠、想詢問」，其實是同一件事。我們實際看了 8 個官網，整理出 5 種值得學的手法。每一點都附上網站連結，你可以自己點進去看；網站上的圖片和文字都屬於各自的公司，這篇只描述版面的做法。

有幾個官網是好幾年前的作品，現在看還是很有參考價值，但手機版的做法已經過時，最後一段會講到。

1. 第一屏就是一個世界：一張大圖、一句主標

《進擊的巨人》遊戲官網（光榮特庫摩）的特色介紹頁，整個畫面是一片陰沉的戰場風景，中間只有一行厚重的大標、一行副標和兩行說明，最下面一個往下捲的箭頭。往下捲，每一段都是「兩行標題＋短短一段說明＋一組可以左右切換的遊戲畫面」，背景全黑，讓畫面跳出來。

上方選單只有 6 個項目，購買的入口則是左上角一個紅色的小按鈕，和黑灰色的選單完全不同色。

企業網站可以學的：

• 首頁第一屏用一張真實的照片：工廠產線、店面、施工現場、上課的教室，再加一句話說清楚你們做什麼。比輪播五張圖、放一排按鈕更讓人記得住。
• 「預約」「詢價」按鈕用和選單不同的顏色，客人不用找就看得到。
• 每一段只講一件事：一個標題、兩三行字、一張圖。

2. 角色介紹頁：換成你的團隊、老師、師傅

這幾個官網的選單裡，幾乎都有「CHARACTER（角色介紹）」這一頁，而且做法各不相同：

• 整面格子：《鏡界の白雪》的角色頁，十幾位角色排成兩排直立的卡片，每張卡片上是角色的半身圖和直書的名字，點進去再看介紹。
• 一次看一位：《進擊的巨人》的角色頁，畫面中間是一位角色的全身圖，旁邊是名字、配音員和三四行介紹，左右箭頭切換，下面一排小頭像可以直接點選，右上角還能依陣營篩選。
• 一路往下看：《The Lost Child》的角色頁，角色圖左右交錯排下來，每位都有身分、名字、配音員、三段試聽語音和一張遊戲畫面。

企業網站可以學的：人會跟人買東西。補習班的老師、美髮店的設計師、工程行的師傅、診所的醫師，都很適合做成一頁「團隊介紹」：

• 人多（十位以上）就用整面格子，點進去看個人介紹。
• 只有兩三位核心人物，就一次一位、放大照片，寫得深入一點。
• 每個人除了照片和名字，再寫專長、年資、一句想對客人說的話。遊戲角色有試聽語音，你可以放一段 30 秒的自我介紹影片。

照片要用真人、自己拍的照片，不要用圖庫的模特兒假裝是員工。補習班的老師介紹怎麼寫，可以參考〈補習班、家教、才藝教室網站：招生頁要放什麼〉。

3. 故事頁：分成章節，讓人一路看下去

• 《PSYCHO-PASS 選択なき幸福》遊戲官網的故事頁，左邊一排發光邊框的分頁按鈕：主線故事、兩位主角各自的視角、兩份案件檔案；右邊是影片和文字。一個畫面就能切換不同的故事線，不用一直往下捲。
• 動畫《GATE》官網的故事頁，每一集一個按鈕，點進去是那一集的劇情、幾張截圖、預告影片，還有編劇、分鏡、演出、作畫監督這些工作人員的名字，每一集的格式都一樣。
• 《The Lost Child》的故事頁，圖文交錯：一張大圖、一行像毛筆字的發光標題、一小段劇情，再換下一段。

企業網站可以學的：

• 服務流程用分頁或步驟：「第一步 諮詢、第二步 報價、第三步 施工」，每一步一張圖、一段說明。
• 案例用固定格式：每個案例都寫客戶是誰、遇到什麼問題、做了什麼、結果如何。格式一樣，客人看兩三個就知道你們的實力。寫法可以參考〈作品集、案例頁怎麼寫〉。
• 品牌故事分成幾個年代或轉折，每段一張老照片，比一大段文字好讀。

4. 把產品資訊整理成一張小表

《鏡界の白雪》的首頁，主視覺下面一排小圖是最新消息，再下面分成三欄：最新消息、商品資訊、官方社群。商品資訊那一欄，把遊戲名稱、平台、類型、發售日、各版本的價格、年齡分級整理成一張小表，旁邊放兩個版本的包裝圖。想買的人不用到處找，一眼就看完。

企業網站可以學的：服務方案、產品頁也整理成一張「資訊卡」：方案名稱、內容、價格、需要多久、適合誰。價格寫「起」也沒關係，比完全不寫更讓人敢詢問。商品頁要放哪些資訊，可以參考〈購物網站商品頁要放什麼〉。

5. 給粉絲的特別內容：讓人有理由回來

《Period Cube》官網的特別內容頁，分頁裡有應援橫幅、社群頭像、桌布、短篇故事、聲優留言、影片和發售倒數的舊圖，粉絲可以下載、分享，等發售的期間也會一直回來看。

企業網站可以學的：準備一些客人用得到、願意分享的東西：

• 產品型錄、價目表的 PDF。
• 保養、使用說明，或教學影片。
• 節慶、季節活動的海報。
• 常見問題的整理文章。

這些內容也會讓網站有更多頁面可以被 Google 找到。

公司官網和作品官網，任務不一樣

前面看的都是「單一作品」的官網。遊戲公司自己的官網又是另一種樣子：

• 美國獨立遊戲工作室 Heart Machine（作品有《Hyper Light Drifter》）的公司官網，首頁先用一段話說明他們是誰，接著每款遊戲一列：一張大圖、名稱、兩三行簡介、一個「了解更多」按鈕，最後是玩家社群和周邊商品。
• SEGA 的「シャイニング」系列入口網站，把同一系列的多款作品集中在一起：輪播大圖、依平台標示的新聞列表、周邊商品列表、每款作品的橫幅入口。

企業網站可以學的：公司首頁的任務是「把產品或服務排好，讓人選」；單一產品、單一服務的頁面，才需要做得像遊戲官網那樣，讓人沉浸進去。產品線很多的公司，可以學系列入口網站，首頁當入口，每條產品線各自一個頁面。

不要學的 3 件事

1. 手機上把電腦版整個縮小：《PSYCHO-PASS》的故事頁、《GATE》動畫官網、SEGA 的系列入口網站，網頁設定寫死了寬度（約 960 到 1,100 像素），手機打開就是整個電腦版縮小，字小到要放大才看得到。現在大部分客人用手機看網站，一定要做響應式設計，細節可以看〈RWD 響應式網頁設計完整指南〉。
2. 鎖住手機的放大功能：《進擊的巨人》遊戲官網、《Period Cube》、《The Lost Child》在網頁設定裡限制了手機的雙指放大，有些瀏覽器會照這個設定不讓人放大。字小又不能放大，對長輩很不友善。
3. 重要的標題做成圖片：很多遊戲官網的大標是設計好的圖片，很漂亮，但 Google 讀不到圖片裡的字，瀏覽器的翻譯也翻不到。公司網站的標題用文字，再用字型和顏色做出質感。

另外，遊戲官網用的是作品自己的美術，公司網站不能拿別人的角色、插圖來用。照片要自己拍，或使用有授權的圖庫，可以看〈網站圖片和字型要有授權〉。想參考別人的網站又怕太像，可以先看〈參考別人的網站，學什麼、不學什麼？〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。做網站時，你可以帶幾個喜歡的網站來，遊戲、動畫官網也可以，我們一起整理你喜歡的是哪些地方，再設計成適合你的行業、你自己的樣子。

想讓網站一打開就有記憶點？歡迎免費諮詢。