小村軟體為什麼用日本數位廳設計系統做網站 ── 便宜和品質可以兼顧
· 小村 豪 · 網站建置, 設計系統, 設計標準化, 無障礙設計, 費用行情
網站製作報價中占很大比重的,就是設計製作的工時。 小村軟體以日本數位廳公開的設計系統為基礎,大幅壓縮這道工序,在壓低費用的同時讓品質更穩定。
一聽到「便宜的網站製作」,很多人會覺得品質應該在某個地方被犧牲了。事實上,為了降價而省略訪談,或是只把文案套進範本裡的做法,確實容易做出讓人看不出在做什麼生意的網站。
小村軟體的網站製作之所以能壓低費用,靠的不是這個,而是設計工序的標準化。本文依序說明作為基礎的日本數位廳設計系統是什麼、為什麼會變便宜、為什麼品質不會下降,以及哪些案件不適合這種做法。
1. 日本數位廳設計系統是什麼
日本數位廳設計系統,是日本數位廳公開的、用於政府服務網站與應用程式的設計標準規格。大致上,它有系統地定義了以下內容。
| 要素 | 內容範例 |
|---|---|
| 設計代符(Design Token) | 配色、文字大小、留白、陰影等基準值 |
| 元件 | 按鈕、表單、卡片、麵包屑等UI元件的規格 |
| 設計理念 | 對無障礙的考量、版面與文案的指引 |
重點在於,這套規格是以開放授權公開,民間網站也能使用。行政程序類網站必須讓不分年齡、環境、IT熟練度的所有人都能使用,因此在對比度、文字大小、操作便利性上都經過驗證後才設計而成。這些累積下來的成果,民間公司的網站也能直接拿來當基礎。
另外,使用這套系統並不會獲得日本數位廳的認證或核可。本公司也不是「數位廳認證」,而是把公開的標準規格應用在民間用途上而已。
2. 為什麼會變便宜 ── 報價單裡消失的設計工序
一般的網站製作報價單裡,設計相關的項目占相當大的比重。首頁的設計稿、內頁的設計、修改的往返次數。正如中小企業網站製作費用行情中整理過的,如果從零開始設計,光是這道工序就可能達到數十萬日圓的規模,並不罕見。
以設計系統為基礎之後,這個結構就會改變。
- 配色、文字大小、留白、按鈕等基準,一開始就已經決定好
- 「提出多個設計案、選擇、修改」這種往返基本上不再需要
- 依賴設計師個人感覺的判斷變少,因此不容易發生返工
也就是說,變便宜的原因不是降價,而是工序本身變少了。省下來的工時,會用在真正直接影響效果的部分──讓人看懂公司在做什麼的架構規劃、文案、詢問動線的設計。網站無法傳達訊息的原因,多半不在設計,而在架構,這一點也寫在詢問量少的網站,該先修哪三個地方中。
3. 為什麼品質不會下降 ── 反而更穩定
「省掉設計,品質就會下降」這種直覺,其實是以從零開始設計為前提。如果使用標準化的設計系統,情況正好相反。
第一,無障礙設計。日本數位廳設計系統的元件,在色彩對比、文字大小、焦點顯示方式、觸控操作便利性等方面都經過考量而設計。若每個個別案件的設計都要每次自行確保這個水準,光是驗證本身就要花費工時。使用經過驗證的元件,結果反而能讓品質更穩定。
第二,實際運作的成效。政府服務的使用者範圍極廣,從不熟悉手機操作的人到專業人士都有。當中使用的設計規則,是靠「不管是誰都能不迷路地使用」磨練出來的,而不是靠「外觀是否新潮」。對於造訪公司網站的潛在客戶來說,重要的也正是這種特性。
第三,一致性。如果每個頁面的按鈕形狀或標題規則都不一樣,光是這樣就會讓人難以閱讀。遵循設計系統,即使之後再增加頁面,結構與調性也不會走樣。
本網站本身,就是以這套設計系統為基礎建置的。此外,製作案例中的Douzu Carry Service網站改版,也是依同樣方針建置。改版的具體做法,詳細整理在案例文章中。
4. 標準化也不會變成「同樣的外觀」
常見的疑慮是「用標準設計,會不會跟其他公司看起來一樣?」
被標準化的,是配色基準、文字大小的體系、元件的設計規則這類基礎部分。真正決定網站印象的,是Logo、照片、文案、頁面架構、文字的調性,這些都是依每個網站從零開始製作的。基礎一致,和沒有個性,是兩件不同的事。
另一方面,也有需要老實說明的地方。若案件需要作為品牌表現的精緻獨家視覺或動畫,這種做法並不合適。例如,以塑造世界觀為核心價值的品牌網站或活動網站就屬於這一類。這類案件,投入足夠的設計預算、委託專業設計公司,會得到更好的結果。若在洽談過程中發現客戶的需求主要集中在這方面,我們會在最初階段就坦白告知。
5. 總結
- 網站製作費用中,從零開始的設計製作占相當大的比重
- 小村軟體以日本數位廳公開的設計系統為基礎,大幅壓縮這道工序
- 變便宜的原因不是降價,而是工序變少;省下來的工時會用在架構、文案、動線的設計上
- 因為使用了考量無障礙、並在政府服務中實際運作驗證過的標準元件,品質反而更穩定
- Logo、照片、文案都是依每個網站製作,所以不會變成同樣的外觀;但不適合需要精緻獨家視覺的案件
如果想在壓低費用的同時,做出能傳達訊息的網站,可以在網站製作頁面確認做法與價格。附上目前網站的網址透過聯絡我們與我們聯繫,我們會整理出從哪裡開始修改最容易見效,再回覆給您。
相關文章
相關文章
共用相同標籤的最新文章。能以相近的主題延伸理解。
BtoB 企業的 Google 廣告小額投放 ── 用每月數萬日圓做出成果的設計與每週操作程序
本文是給想用每月數萬日圓預算開始投放 Google 廣告的 BtoB 企業的實務指南。內容涵蓋平均每日預算與請款上限的運作機制、轉換追蹤的整備、聚焦高意圖關鍵字、否定關鍵字與搜尋字詞報表的每週操作,以及小額預算下的出價策略選擇,皆以 Google 官方資訊為依據整理。
打造能被地區名搜尋到的網站 ── 中小企業的本地SEO實戰指南(地區頁面與Google商家檔案)
用「地區名稱+行業」搜尋卻找不到自家公司的中小企業,適用這篇整理。內容涵蓋修正本地SEO的先後順序:整理Google商家檔案、統一NAP資訊、設計地區頁面、網站端的基礎建設,以及在Search Console上衡量成效,全部以Google官方資訊為依據整理成實務步驟。
增加 BtoB 網站的詢問數 ── 修正順序的全景地圖(從集客到表單)
當 BtoB 網站的詢問數遲遲無法成長時,許多公司會先從集客(SEO・廣告)下手。但真正有效的順序,是先用量測找出瓶頸,整頓好作為承接頁面的服務頁面,修正表單等動線之後,最後才加上集客。本文將服務頁面設計、詢問動線改善、電子郵件到達率、聊天機器人、SEO・廣告、內部連結等各...
網站改版案例:宮崎運輸公司 Douzu Carry Service ── 從舊網站繼承了哪些內容、又是如何繼承的
以宮崎運輸公司 Douzu Carry Service 的網站改版為例,說明在動手設計之前先完成 URL 盤點、301 規劃與內容保留檢查的實際做法。
中小企業網站製作費用 ── 行情一覽表與報價單的讀法
整理中小企業在索取網站製作報價前應該知道的內容:依目的與規模區分的費用行情、報價單內容明細的讀法,以及各價格帶能做到什麼、做不到什麼。
相關主題
與本文相近的主題頁面。以本文為起點,可進一步連到相關服務與其他文章。
Windows 技術主題
彙整 KomuraSoft LLC 關於 Windows 開發、故障調查與既有資產活用文章的主題中心。
常見問題
整理諮詢這個主題時常見的問題。
- 日本數位廳設計系統可以用在民間公司的網站上嗎?
- 可以。日本數位廳以開放授權公開這套設計系統,行政機關以外的網站也能使用。不過,使用這套系統並不代表取得數位廳的認證或核可,本公司也只是把公開的設計系統應用在民間網站上,並非「數位廳認證」的立場。
- 用標準化設計,網站看起來會不會跟別家公司一樣?
- 標準化的只是配色、留白、元件的設計規則,Logo、照片、文案、頁面架構仍是依每個網站分別製作。真正決定網站印象的主要就是這些部分,所以即使設計標準化,也不會變成「在哪裡都看過的同一個網站」。反過來說,按鈕好不好按、文字好不好讀這些理應一致的部分能夠一致,正是標準化帶來的效果。
作者檔案
本文作者的個人檔案頁面。
Go Komura
小村軟體有限公司 代表
以 Windows 軟體開發、技術諮詢與故障調查為中心,在難以重現的故障調查與既有資產仍在運作的專案上具有優勢。