企業形象網站
最常見的類型，包含首頁、關於我們、服務、案例、最新消息與聯絡頁。目標是建立專業形象並帶來查詢，適合大部分 B2B 與服務型公司。
Web Design · Hong Kong
香港網頁設計｜度身訂造網站設計與響應式網頁製作
香港自家團隊、自家設計。由頁面結構規劃、視覺設計、程式編寫，到上線部署與日後維護，一個團隊跟到底。
一分鐘了解我們的網頁設計服務
Black Media 的網頁設計服務，是由香港自家團隊為企業度身訂造網站：先確認業務目標與頁面結構，再進行視覺設計與程式編寫，交付時已包含響應式編排、SEO 基礎設定與上線部署。服務類型涵蓋企業形象網站、品牌網站、一頁式 Landing Page、網站改版、中英雙語及多語言網站、會員與預約系統，並可一併安排網頁寄存、商務電郵與網上商店。
- 公司成立
- 2012 年
- 設計師經驗
- 網頁設計師超過 10 年經驗
- 服務客戶數
- 已為超過 6,000 名中小企提供網站設計
- 客戶類型
- 演藝界、香港及國內上市公司、日本上市公司、百年字號店鋪、飲食集團、大型雜誌
- 設計方式
- 自家設計團隊，度身訂造或多款版式可選
- 支援語言
- 繁體中文、簡體中文、英文、日文
- 技術基準
- 響應式、mobile-first、Core Web Vitals、WCAG 2.2
Hong Kong team
香港自家團隊 自家設計
網站設計公司成立於2012年，網頁設計師超過10年經驗，多款不同種類的網站設計供客戶選擇，可為客戶度身訂造網站設計服務！憑著精湛網站設計技術為各大小企業提供優質及完善的網站設計、網站寄存及網上商店等多項網絡服務。
自家團隊的實際好處，是所有環節都在同一屋簷下處理。設計師改版面、程式員改功能、伺服器同事調線路，不需要經第三方轉介；遇到「表單收不到郵件」或「網站突然變慢」這類跨範疇問題，可以一次查到底。這也是我們同時提供網頁寄存與商務電郵的原因——網站的問題往往不只在網站上。
我們的三個工作原則
- 先結構，後視覺：頁面清單與導覽層次未定就開始畫版面，後期一定會重做。
- 能自己更新：客戶要能自行改文字、換圖、加產品，網站才有生命力。
- 交付要交得清楚：檔案、帳號、操作說明齊備，域名以客戶公司名義持有。
Clients
服務過的客戶類型
開業至今，我們已為超過6000名中小企提供網站設計，當中使用我們的客戶群包括香港演藝界人士、香港及國內上市公司網站、日本上市公司等及中小企業等。
香港多間百年字號店鋪、香港玄學家、飲食集團、大型雜誌及各中小企公司等提供網站設計服務，而且我們擁有自己家的設計團隊，非一般小型網站設計公司可比，所以製作成本亦會較為相宜，為您製作的網站更合您的要求。
不同客戶，重點不同
- 上市公司：文件發佈流程（公告、通函、年報）、雙語一致性、伺服器可用性。
- 百年字號與傳統行業：把品牌歷史說清楚，同時令年輕客群在手機上易讀易買。
- 飲食集團：分店資料、菜單更新、訂座與外賣查詢，手機體驗優先。
- 雜誌與內容平台：文章分類與標籤、載入速度、廣告位與訂閱表單。
- 演藝與個人品牌：視覺主導、作品與媒體報導呈現、社交平台整合。
- 中小企：以有限預算做到專業形象與穩定的查詢來源。
香港網頁設計服務涵蓋什麼？
為不同大中小企業提供優質的度身訂造網頁設計，是 Black Media 的核心服務。我們會先了解品牌定位、目標訪客與所需功能，再由自家設計師製作版面，並配合程式編寫，完成企業網站、宣傳頁、會員或預約系統等不同類型之網頁。
今日的訪客多數以手機瀏覽。我們的網站設計重視響應式編排（Responsive Web Design），讓內容在桌面、平板及手機都清晰可讀。若您同時需要網頁寄存、商務電郵或網上商店，亦可一併由同一團隊規劃，減少日後維護成本。
如果您正在比較香港網頁設計公司，歡迎帶同現有網站、品牌顏色或參考案例與我們聯絡，我們會按預算建議合適的設計方向與時程。
一個網頁設計項目通常包含這些工作
- 結構規劃：頁面清單、導覽層次、網址命名規則、每頁對應的關鍵字與行動目標。
- 視覺設計：版面、色彩、字體、圖片風格、按鈕與表單樣式，以及手機版排列。
- 程式編寫：切版、動態內容、表單與驗證、後台管理、與第三方服務整合。
- SEO 基礎：標題層級、title 與 description、canonical、robots.txt、sitemap.xml、結構化資料。
- 速度處理：圖片格式與尺寸、延遲載入、壓縮與快取、減少首屏 JavaScript。
- 上線部署：伺服器與 DNS 設定、SSL 憑證、HTTPS 轉向、301 轉向、郵件驗證紀錄檢查。
- 交付培訓：後台操作說明、檔案與帳號交付。
想同時了解網上銷售與推廣，可參考網上商店與廣告服務（SEO / SEM）；伺服器與線路安排見網頁寄存。
Website types
六種網站類型，怎樣選才對？
選錯類型，之後無論設計多漂亮都難以達成目標。以下是六種最常見的網站，以及各自適合的情況。
品牌網站
以視覺敘事為主，配合品牌色彩、字體與影像風格。適合零售、時尚、餐飲、酒店等重視觀感與情緒的行業。
一頁式網站
所有內容集中在單一頁面，以錨點滑動瀏覽。適合初創、單一服務或形象展示；但只有一組 title 與網址，SEO 覆蓋面較窄。
Landing Page
為特定廣告或活動而設，聚焦一個行動目標，通常會精簡導覽以減少分心。配合關鍵字廣告使用效果最明顯。
網上商店
需要產品目錄、購物車、訂單與庫存管理、會員系統。屬獨立範疇，詳見網上商店方案。
功能型網站
會員系統、預約系統、報名與課程管理、內部查詢平台等，重點在流程設計與資料結構，而非版面花巧。
| 比較項目 | 一頁式網站 | 多頁網站 |
|---|---|---|
| SEO 覆蓋 | 只有一組 title 與網址，能針對的關鍵字有限 | 每個服務、行業、地區可有獨立落地頁 |
| 製作時間 | 較短 | 視頁數而定，較長 |
| 內容擴充 | 愈加愈長，容易失焦 | 可持續新增頁面而不影響現有結構 |
| 適合情況 | 單一活動、單一產品、廣告落地 | 以搜尋流量長期獲客、服務項目較多 |
| 內部連結 | 只能做錨點連結 | 可建立完整的樞紐與子頁連結架構 |
Responsive · Mobile-first
響應式設計與 mobile-first：手機版就是「正式版」
響應式網頁設計是指同一組網址與內容，透過 CSS 自動適應不同螢幕尺寸，不需要維護另一個手機版網站。這不只是方便——Google 自 2024 年 7 月 5 日起已完成 mobile-first 索引的全面推行，行動裝置版本就是索引依據，沒有桌面優先的例外。
內容一致性（content parity）要顧的七項
- 主要內容：手機與桌面應提供相同正文，不可為了「乾淨」而在手機版刪走段落。
- 標題：H1 / H2 / H3 在兩個版本都要保留且結構清晰。
- 結構化資料：兩個版本都要有，網址需指向行動版。
- title 與 meta description：兩版保持一致。
- 圖片：使用支援格式、相同 alt 文字與穩定網址。
- robots meta：兩版一致，手機版不可誤加 noindex。
- 延遲載入：主要內容必須無需用戶互動即可顯示。
手機版最容易出事的五個位置
- 導覽選單層數太深，重要頁面要三、四次點擊才到。
- 字體太小或行高太窄，中文長段落在手機上難以閱讀。
- 按鈕太細或太貼近，容易誤觸（詳見無障礙一節）。
- 表單欄位過多，手機輸入成本高，導致放棄率上升。
- 橫向表格與大圖溢出畫面，需要左右拖動。
SEO structure
網站結構與 SEO：設計階段就決定了上限
SEO 不是上線後才加的一層。頁面規劃決定了每個關鍵字有沒有落地頁；導覽與內部連結決定了搜尋引擎能否抓到全站；標題層級決定了內容能否被正確理解。
一頁一個主題
每頁對應一組核心關鍵字。若兩頁講同一件事，會互相分薄；若一頁塞五個服務，則每個服務都不夠深入。
標題層級
每頁單一 H1 表達主題，H2 分區、H3 展開細節，必要時用 H4。層級要按內容邏輯，不應為了字體大小而跳級。
網址命名
短、可讀、含關鍵字、用連字號分隔，例如 web-design。網址一旦公開就應盡量固定，改動需配 301。
內部連結架構
以樞紐頁帶子頁，子頁互相關聯並鏈回樞紐；錨文字用具描述性的關鍵字變體，而非「按此」。
meta 與分享資料
每頁獨立 title 與 description；Open Graph 資料令連結在 WhatsApp、Facebook 分享時顯示正確標題與圖片。
結構化資料
Organization、Service、FAQPage、BreadcrumbList、HowTo 等 schema，讓搜尋引擎與 AI 系統準確理解頁面內容類型。
內部連結的實際做法
GEO · AI search
GEO：讓 AI 搜尋願意引用你的內容
當用戶改用 ChatGPT、Perplexity 或 Google AI Overviews 查詢，「被引用」比「排第幾」更重要。生成式引擎優化（GEO）的核心，是把內容寫成機器容易擷取、又對人有用的形式。
設計與內容上可以做的六件事
- 直答區：在 H1 或 H2 下方先用 40 至 80 字直接回答該段主題，再展開細節。
- 清晰層級：H2 用問句或明確主題句，H3 分點展開，段落控制在 2 至 4 句。
- 事實列表：以定義列表或表格呈現可量化資料（年份、數量、規格、門檻）。
- FAQ 區塊：以真實客戶問題撰寫，並加上 FAQPage 結構化資料。
- 定義句：對專有名詞給出一句可獨立引用的定義，例如「響應式網頁設計是指……」。
- 可被讀取：主要內容以 HTML 直接輸出，不要求互動才顯示，並在 robots.txt 允許 AI 爬蟲。
本頁本身就是示範：快速答案區、事實列表、比較表格、術語連結與 28 條 FAQ，都是為了讓人與機器都容易取用。相同做法可套用到廣告服務與網上商店頁面。
Performance
速度、圖片與 Core Web Vitals
網站快慢直接影響訪客會否留下。以下是我們採用的公開技術基準，客戶可用同一套標準檢視任何供應商的交付質素。
| 指標 | 量度內容 | 良好 | 需要改善 | 差 |
|---|---|---|---|---|
| LCP（最大內容繪製） | 主要內容載入速度 | ≤ 2.5 秒 | 2.5 – 4.0 秒 | > 4.0 秒 |
| INP（互動至下一次繪製） | 對點擊與輸入的反應速度 | ≤ 200 毫秒 | 200 – 500 毫秒 | > 500 毫秒 |
| CLS（累積版面配置轉移） | 版面是否出現非預期跳動 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
圖片格式怎樣選
| 格式 | 與 JPEG 相比 | 適合用途 |
|---|---|---|
| JPEG | 基準 | 相容性最高的照片格式，適合作為後備 |
| WebP | 依 Google 自身壓縮研究約小 25% 至 34%（部分實測更高） | 目前網頁照片的主力格式，瀏覽器支援普及 |
| AVIF | 普遍比 JPEG 小約四成至五成以上，亦比 WebP 更小 | 追求極致體積，但編碼較慢，需注意支援度 |
| SVG | 不適用（向量格式） | 標誌、圖示、線稿，可無損放大 |
| PNG | 通常較大 | 需要透明背景又不適合 SVG 的情況 |
我們在每個項目都會做的速度處理
- 圖片按實際顯示尺寸輸出，不把 3000px 原圖直接放上網。
- 為圖片設定寬高或長寬比，避免載入時版面跳動（CLS）。
- 首屏以外的圖片使用延遲載入，首屏主圖則預先載入。
- 字體預先連線並控制載入策略，避免文字閃動。
- 啟用壓縮與瀏覽器快取，減少重複下載。
- 控制首屏 JavaScript 數量，避免長任務拖慢 INP。
- 移除在目標市場無法連接的外部資源（尤其影響內地訪客，詳見跨境訪問）。
無障礙設計與 WCAG 2.2
無障礙不只是為特定人士而做，它同時改善所有人的可用性——對比度足夠、按鈕夠大、表單不用重複輸入，對每個訪客都有好處。現行國際標準為 WCAG 2.2，於 2023 年 10 月成為 W3C 建議標準，在 WCAG 2.1 之上新增九項成功準則，並移除已過時的 4.1.1 Parsing。
WCAG 2.2 新增準則涵蓋的六個方向
- 鍵盤焦點可見度：元素取得焦點時不應被固定頁首等內容完全遮蔽。
- 焦點外觀：焦點指示器需要足夠明顯，並與未取得焦點的狀態有至少 3:1 對比。
- 拖曳操作替代：任何需要拖曳的操作，都應提供單指標替代方式（例如按鈕）。
- 目標尺寸：AA 級要求可點擊目標至少 24 × 24 CSS 像素，或以足夠間距避免誤觸。
- 一致的求助途徑：聯絡資料、客服或自助說明應在各頁以相同相對順序出現。
- 避免重複輸入與無障礙驗證：已填寫的資料應自動帶入，驗證方式不應依賴解謎或辨識物件等認知測試。
我們在設計與切版時會處理的細節
- 文字與背景對比度、深色區塊上的按鈕可讀性。
- 所有互動元素可用鍵盤操作，並有清晰焦點樣式。
- 圖片 alt 文字（裝飾性圖片留空 alt）、表單 label 與錯誤訊息。
- 「跳至主要內容」連結、語意化標籤（header、nav、main、footer）。
- 手機上按鈕與連結的最小尺寸與間距。
Multilingual
多語言與中英雙語網站
香港客戶最常需要的組合是繁體中文加英文，做內地市場再加簡體版，做日本客戶則加日文版。技術上的關鍵是：每個語言要有獨立網址，並以 hreflang 標示語言與地區關係，讓搜尋引擎向不同用戶顯示正確版本。
四種語言版本的實務注意事項
- 繁體中文（zh-Hant-HK）：香港用詞與標點習慣，數字與英文夾雜時要留意字距。
- 英文（en）：同一段中文譯成英文通常會變長，版面需預留伸縮空間。
- 簡體中文（zh-Hans）：不只是字形轉換，用詞習慣不同（軟件／軟體、網絡／網路），建議人手校訂。
- 日文（ja）：字型與行高需另設，長片假名詞會影響換行。
常見錯誤
- 所有語言共用同一網址、用 JavaScript 切換內容——搜尋引擎只會索引到其中一個版本。
- hreflang 只單向指向，未做互相對應。
- 語言切換按鈕藏在頁尾，海外訪客找不到。
- 只翻譯正文，忘記 title、description、alt 文字與表單提示。
網站改版：如何不丟失現有排名
改版最大的風險不是設計不好看，而是網址變了卻沒有處理轉向，令原本有排名的頁面變成 404。以下是我們的改版程序。
-
匯出現有網址與表現數據
列出所有現有頁面，標記哪些有搜尋流量、哪些有外部連結指向，作為保留與合併的依據。
-
決定保留、合併或淘汰
有價值的內容保留並補充；重複或過時的頁面合併到新頁；完全無用的才淘汰。
-
建立新舊網址對照表
每一條舊網址都要有對應的新網址，逐條設定 301 永久轉向，避免把所有舊頁一律指向首頁。
-
保留標題與內容重點
重寫版面時保留原有的 H1 主題與關鍵段落，避免頁面主題被改掉。
-
上線後檢查
檢查 404、轉向鏈、內部連結是否仍指向舊網址，重新提交 sitemap，並持續觀察索引與流量。
改版同時是重整內部連結與內容深度的好時機——這也是為什麼我們建議改版與 SEO 規劃一併進行。
Process
網頁設計的七個步驟
每一步都會確認清楚才進入下一步，避免後期大幅改動造成時間與成本浪費。
-
第一步：了解需求與目標
弄清楚網站要解決什麼問題：要更多查詢、要在網上賣貨、要提升形象，還是要方便同事更新資料。同時了解目標客群、主要市場與競爭對手。
-
第二步：結構規劃與報價
排出頁面清單、導覽層次與網址命名規則，決定每頁對應哪組關鍵字，再提供逐項列明的報價與時間表。
-
第三步：設計稿確認
先做首頁與一至兩個內頁設計稿，確認版面、色彩與字體方向；方向確認後才展開其餘頁面，減少重工。
-
第四步：內容整理
整理文字、圖片、產品資料與公司資料。這是最常拖慢項目的一環，我們可協助整理或按需要安排撰寫與攝影。
-
第五步：程式編寫與功能開發
切版、加入功能（表單、會員、預約、後台）、設定結構化資料與 meta 資料，並在不同瀏覽器與裝置測試。
-
第六步：上線部署
設定伺服器與 DNS、安裝 SSL 憑證、處理 HTTP 轉 HTTPS、提交 sitemap、確認舊網址 301 轉向，並檢查郵件驗證紀錄。
-
第七步：交付、培訓與維護
交付檔案與帳號、提供後台操作說明，之後可按次或以定期方案安排維護、內容更新與成效檢視。
Deliverables
交付清單與技術規格
驗收時可逐項對照，這份清單同樣適用於檢視其他供應商的交付內容。
設計與版面
- 桌面、平板、手機三種版面
- 字體、色彩與按鈕樣式規範
- 圖片裁切與比例規則
- 表單與錯誤訊息樣式
- 404 與感謝頁面
SEO 與結構
- 每頁單一 H1 與清晰 H2 / H3
- 每頁獨立 title 與 description
- canonical、robots.txt、sitemap.xml
- Open Graph 分享資料
- 結構化資料（Organization / Service / FAQ / Breadcrumb）
- 圖片 alt 與檔名規範
上線與交付
- SSL 憑證與 HTTPS 轉向
- 301 轉向對照表（如屬改版）
- 表單收件與通知測試
- 後台帳號與操作說明
- 網站檔案與資料庫備份
- 域名以客戶公司名義持有
Maintenance
網站維護：上線只是開始
網站不是一次性項目。程式與外掛會有安全更新、憑證會到期、內容會過時、瀏覽器與搜尋引擎的要求亦會變。維護做得好，網站可以用很多年；不做維護，通常兩三年後就會出現安全或顯示問題。
維護涵蓋的六類工作
- 內容更新：文字、圖片、產品、價格、最新消息。
- 安全更新：後台系統、外掛與伺服器套件的更新。
- 備份與還原：檔案與資料庫分開備份，並確認可以還原。
- 憑證與域名：SSL 續期、域名到期提醒。
- 功能檢查：表單收件、郵件通知、支付與第三方整合。
- 監控：網站與伺服器可用性，令問題在客戶發現前先處理。
Industries
各行業網站設計重點
同樣是一個網站，貿易公司要的是產品規格與詢價，餐飲要的是菜單與訂座。以下是我們常處理的行業與各自的設計重點。
Pricing
網頁設計價錢由什麼決定
我們不以單一價錢籠統覆蓋所有需求，而是按項目範圍逐項列明。以下六項是影響報價的主要因素。
| 因素 | 為什麼影響價錢 | 客戶可以怎樣控制 |
|---|---|---|
| 頁數與內容量 | 每頁都需要版面、切版與內容編排 | 先做核心頁面，其餘分階段增加 |
| 設計程度 | 度身訂造比套用版式需要更多設計時間 | 明確參考風格，減少來回修改 |
| 功能複雜度 | 表單、會員、購物車、預約、後台各有開發成本 | 先上線必要功能，觀察使用情況再擴充 |
| 語言版本 | 每個語言都需獨立內容、版面調整與測試 | 先做主要市場語言，再加第二語言 |
| 內容與影像 | 撰寫、翻譯與攝影屬額外製作工序 | 自行提供文字與相片可降低成本 |
| 寄存與維護 | 屬持續性服務，與一次性設計費分開計算 | 按實際更新頻率選擇按次或定期方案 |
比較報價時應該問的五條問題
- 設計是原創還是套用現成版式？可否先看設計稿方向？
- 內容由誰撰寫與翻譯？相片由誰提供？
- 報價是否包含寄存、商務電郵、SSL 憑證與域名？
- 上線後的更新怎樣收費？回覆時間如何？
- 網站檔案、後台帳號與域名由誰持有？
最常見的十個網頁設計失誤
這些問題我們在檢視客戶舊網站時反覆遇到，修正成本通常不高，但影響很直接。
- 首頁講太多，重點不明：訪客三秒內看不出你做什麼生意。
- 沒有明確行動指引：全頁沒有一個顯眼的查詢、報價或 WhatsApp 按鈕。
- 聯絡方法難找：電話與地址只放在頁尾，手機用戶要滑很久。
- 每頁 title 相同：所有頁面共用「公司名稱」作標題，搜尋結果無法區分。
- 圖片過大：直接上傳相機原檔，令手機用戶等數秒才見到內容。
- 用圖片放文字：重要內容做成圖片，搜尋引擎與 AI 都讀不到。
- 標題層級混亂：用 H1 做裝飾字體，或整頁沒有 H2 分區。
- 改版不做 301：舊網址全部 404，原有排名歸零。
- 表單欄位太多：只需一個查詢，卻要求填十個欄位。
- 上線後沒人管：最新消息停在幾年前，訪客會懷疑公司是否還在運作。
想知道自己的網站有哪幾項需要處理，可帶同現有網址聯絡我們，我們可指出優先處理的項目。
Get ready
開始前要準備什麼
資料齊備，項目通常可以快一半。以下是我們最常向客戶索取的內容。
品牌與視覺
- 標誌檔案（最好是向量檔）
- 品牌色彩與字體
- 現有印刷品或宣傳素材
- 二至三個參考網站
內容
- 公司簡介與服務說明
- 產品或服務清單與規格
- 案例、客戶名單或證書
- 常見問題與客戶最常問的事
技術與行政
- 現有域名與註冊商帳號
- 現有網站與寄存資料
- 接收查詢的電郵地址
- 需要的語言版本與上線期限
服務範圍與時間
Black Media 的網頁設計服務包括什麼？
包括網站結構規劃、視覺設計、程式編寫、響應式編排、SEO 基礎設定（標題層級、meta 資料、結構化資料、sitemap）、表單與功能開發、上線部署與交付培訓。可按需要加入網上商店、會員系統、預約系統、多語言版本，以及網頁寄存、商務電郵與域名註冊。
什麼是度身訂造網站設計，與套用版式有什麼分別？
度身訂造是按品牌定位、內容結構與功能需求重新設計版面；套用現成版式則是把內容填入既有框架。前者彈性更大、更貼合業務流程，後者起步較快、成本較低。我們擁有自家設計團隊，可提供多款不同種類的網站設計供客戶選擇，亦可完全度身訂造。
網頁設計需要多少時間完成？
取決於頁數、功能與客戶提供資料的速度。一般形象網站由確認設計稿起約 2 至 6 星期；加入網上商店、會員系統或多語言版本則需更長時間。最常拖慢項目的環節是內容與圖片未齊，準備清單見開始前要準備什麼。
設計稿可以改幾次？
修改次數與範圍會在報價時列明。實務上最有效的做法是在設計稿階段一次過集中提出意見，並先確認版面方向再處理細節，避免在切版後才推翻整體結構。
可以只做設計，寄存放在自己的伺服器嗎？
可以。設計、寄存、電郵與域名可分開處理，我們可把完成的網站部署到客戶指定環境，並協助 DNS 指向與上線測試。
如何開始網頁設計項目？
帶同現有網站、品牌顏色或參考案例，透過 WhatsApp、電話或電郵 cs@blackmedia.biz 聯絡我們，說明業務性質、目標與預算範圍；我們會按預算建議合適的設計方向、頁面結構與時程，並提供逐項報價。
價錢與報價
網頁設計價錢如何計算？
主要取決於六項因素：頁數與內容量、設計是否度身訂造、功能複雜度、語言版本數目、是否需要內容撰寫及攝影、以及後續維護與寄存安排。詳細對照表見收費結構一節。
為什麼有些網頁設計報價相差很遠？
常見差異來自四方面：設計是套版還是原創、內容由誰撰寫、功能是現成外掛還是自行開發、以及報價有否包含寄存、電郵、憑證與日後更新。比較時應逐項對照範圍，而不是只看總額。
找自由工作者與找公司團隊有什麼分別？
個人接案在單一項目價錢上較有彈性；但涉及伺服器、電郵、跨境線路與長期維護時，需要的是可持續的支援安排。選擇前值得問清楚：出問題時由誰處理、檔案與域名由誰持有、日後更新如何收費。
網站檔案與域名由誰持有？
域名應以客戶公司名義註冊持有；項目完成並結清款項後，可交付網站檔案及相關帳號資料，確保日後可自由選擇服務供應商。
設計與手機體驗
網站會否自動適應手機？
會。所有網站採用響應式網頁設計，同一組網址與內容自動適應手機、平板與桌面。這亦符合 Google 的 mobile-first 索引要求：自 2024 年 7 月 5 日起，Google 已全面以行動裝置版本作為索引依據。
手機版與桌面版可以顯示不同內容嗎？
不建議。在 mobile-first 索引下，如果手機版隱藏了主要內容、標題或結構化資料，這些內容有可能不被索引。主要內容亦不應要求用戶互動才載入。詳見響應式一節。
一頁式網站與多頁網站應該選哪一種？
一頁式適合單一活動、單一產品或廣告落地頁；但只有一組 title 與網址，能覆蓋的關鍵字有限。若需要以搜尋流量長期獲客，多頁結構讓每個服務、每個行業都有自己的落地頁，SEO 空間大得多。比較表見網站類型一節。
什麼是 Landing Page，與首頁有什麼分別？
Landing Page 是為特定廣告、活動或客群設計的落地頁，內容集中在一個訊息與一個行動，通常會精簡導覽以減少分心；首頁需要照顧所有訪客與所有服務，因此不適合直接作為廣告落地頁。配合關鍵字廣告使用效果最明顯。
網站需要符合無障礙標準嗎？
無障礙設計能擴大可用人群，亦改善整體可用性。現行標準為 WCAG 2.2，於 2023 年 10 月成為 W3C 建議標準，在 2.1 之上新增九項成功準則並移除 4.1.1 Parsing，涵蓋鍵盤焦點、拖曳替代、目標尺寸、一致求助途徑、避免重複輸入與無障礙驗證。
按鈕與連結應該做多大？
WCAG 2.2 的 Target Size (Minimum) 屬 AA 級要求，指可點擊目標至少 24 × 24 CSS 像素，或以足夠間距避免誤觸。手機導覽、篩選按鈕與表單控件最容易違反這一項。
SEO、GEO 與速度
網頁設計如何配合 SEO？
在設計階段就決定頁面清單與關鍵字對應（一頁一個主題）、網址命名規則、標題層級、內部連結架構與結構化資料。上線後補做的成本遠高於一開始規劃，詳見網站結構與 SEO。
每頁是否只可以有一個 H1？
建議每頁只用一個 H1 表達該頁主題，其下以 H2 分區、H3 展開細節，形成清晰層級。這對搜尋引擎理解結構、以及 AI 系統擷取段落作答案引用都有幫助。
什麼是 GEO，網頁設計可以怎樣配合？
GEO（生成式引擎優化）指讓內容更容易被 ChatGPT、Perplexity、Google AI Overviews 等系統引用。做法包括預留簡短直答區、清晰 H2 / H3 層級、FAQ 與定義句、事實列表，以及 FAQPage 與 BreadcrumbList 等結構化資料。詳見GEO 一節。
網站速度應該達到什麼標準？
以 Core Web Vitals 為基準：LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1，以真實用戶第 75 百分位數評估，桌面與流動裝置分別計算，三項全部達標才算通過。完整數值見速度一節。
圖片應該用哪種格式？
一般照片建議 WebP，依 Google 自身壓縮研究約比 JPEG 小 25% 至 34%（部分獨立實測更高）；AVIF 壓縮率更高，普遍比 JPEG 小約四成至五成以上，但編碼較慢。標誌與線稿用 SVG。實際壓縮率會因圖片內容與品質設定而異。
SEO 需要多久才見效？
新網站或新內容通常需要數星期讓搜尋引擎完成索引，具競爭度的關鍵字往往需要 3 至 6 個月才見到穩定變化。任何保證「一個月上第一位」的說法都不符合搜尋引擎的運作方式，詳見廣告服務。
多語言、改版與維護
可以做中英雙語或多語言網站嗎？
可以，包括繁體中文、簡體中文、英文與日文。每個語言需要獨立網址，並以 hreflang 標示語言與地區關係；同時要處理字型、行高與版面長度差異。詳見多語言一節。
簡體版網站與繁體版可以自動轉換嗎？
字形可以程式轉換，但用詞習慣不同（軟件／軟體、網絡／網路），單純轉字會令內容生硬。建議簡體版由人手校訂用詞，並保留獨立網址讓搜尋引擎分別索引。
現有網站可以改版而保留 SEO 排名嗎？
可以，關鍵是網址處理：改版前匯出完整網址清單，保留有價值的內容與標題，對變更的網址設定 301 永久轉向，維持內部連結一致，上線後重新提交 sitemap。忽略 301 是改版後流量下跌最常見的原因，程序見改版一節。
改版時舊網站的內容要全部重寫嗎？
不需要。有搜尋表現或客戶常看的頁面應保留並補充；內容過時或重複的頁面才需要合併或重寫，合併時同樣以 301 把舊網址指向新頁面。
網站要在內地正常打開，設計上要注意什麼？
避免載入在內地無法連接的外部資源（部分字型、地圖或分析 script），否則瀏覽器會等到逾時才顯示內容；同時控制圖片大小、啟用壓縮與快取。線路方面，我們可按客戶需求安排 5 個不同網絡，配合中港線路、美加線路或全球系統，詳見網頁寄存。
網站可以自己更新內容嗎？
可以。我們可按需要加入後台管理介面，讓客戶自行更新文字、圖片、產品、價格與最新消息，交付前會提供操作說明；亦可選擇由我們代為更新。
上線之後有什麼維護工作？
包括內容更新、功能調整、備份與還原測試、SSL 憑證續期、後台與程式安全更新、表單與郵件通知檢查，以及可用性監控。維護可按次計算或以定期方案安排，詳見維護一節。
沒有標誌或相片可以怎樣處理？
可按需要安排標誌設計與產品攝影，或先以暫用素材上線，之後逐步替換。視覺素材與推廣內容製作可配合廣告服務一併安排。
網站需要準備哪些內容才可以開始？
一般需要：公司簡介與服務說明文字、標誌檔案（最好是向量檔）、品牌色彩與字體、產品或服務相片、聯絡資料與地址，以及參考網站。完整清單見準備清單。
Get started
準備好開始您的網站設計項目？
帶同現有網站、品牌顏色或參考案例聯絡我們，我們會按預算建議合適的設計方向、頁面結構與時程，並提供逐項列明的報價。
- 電郵：cs@blackmedia.biz
- 電話：5669 2073
- 地址：九龍新蒲崗大有街 34 號新科技廣場 11 樓 16 室