網站設計的電腦

Website Design 網站設計

  • 企業網站設計背景大樓

    企業網站設計

    公司、行號、企業、店舖、工廠、製造業
    介紹企業形象的網站。

    more
  • 購物網站設計背景衣服

    購物網站設計

    購物、金流物流、商品庫存、折扣、會員
    線上販售商品的網站。

    more
  • 活動網站設計背景人物

    活動網站設計

    活動、比賽、典禮、新品發表、行銷創意
    短期宣導活動的網站。

    more
  • 客製化網站設計背景筆電

    客製化網站設計

    創新平台、特殊功能、大型系統
    替您客製化您專屬所需的網站功能。

    more
  • 學校網站設計背景學生

    學校網站設計

    大專院校、科系所、國高中、⼩學、幼稚園
    大量資訊文章公告的的網站。

    more
  • 政府網站設計背景印章

    政府網站設計

    便民平台、政令宣導、公部門、公家標案、無障礙網頁
    政府機關官方的網站

    more

Website Design

網站設計,先是設計

山川久也是一間以設計為核心的網站設計公司。我們相信一個網站最終會被記住的,是它的樣子——版面的呼吸、字的重量、顏色的分寸、滑動時的節奏。技術讓網站能動,設計決定它值不值得被看。以下說明我們如何做設計,以及支撐這些設計所需的技術與製作內容。

Design First

設計,是第一原則

設計,是我們的第一原則

網站設計不是把資料排進版型裡。每一個專案我們都從空白開始:先理解這個品牌想給人什麼感覺,再決定版面的疏密、字級的層次、留白的比例、顏色的溫度。這些判斷沒有標準答案,也沒有任何模板能代勞——它們是設計師逐一決定的,而這些決定的總和,就是一個網站的質感。

我們不接受「先上線再說,好看以後再調」。視覺一旦妥協,之後補救的成本遠高於一開始就做對。網頁設計的細節是累加的:一個字距、一段留白、一次轉場的緩急,單看都微不足道,疊在一起就是專業與業餘的距離。

我們如何定義「好看」

好看不是主觀的形容詞,它由幾件可以被討論的事構成:

  • 秩序:版面要有清楚的層次。哪個先看、哪個後看,由設計決定,而不是讓所有元素同時搶。
  • 留白:空的地方和有內容的地方一樣重要。密度過高的畫面會讓內容互相消耗,該空的地方要敢空。
  • :中文網頁的字體選擇有限,所以字級、字重、行高與字距的拿捏更關鍵。文字排得好,畫面就先贏一半。
  • :顏色要服務品牌,而不是追流行。主色、輔色與大面積底色的比例,決定了整體是沉穩、清爽還是張揚。
  • 動態:轉場與互動要有節奏感,快慢與緩急都是設計。動得太多會吵,動得對會讓人想繼續往下看。
  • 一致:一個網站從首頁到內頁、從電腦到手機,語彙要是同一套。細節不一致,質感就會散掉。

每一個網站都重新設計

我們不套用市售版型。這件事常被理解成技術選擇,但它其實是設計立場——套版的意思是,你的網站和世界上另外幾千個網站長得一樣,只有顏色和照片不同。對一個想被記住的品牌來說,這是最不划算的省。

從零開始設計的代價是時間與成本較高,換來的是版面完全依照你的內容與品牌氣質量身安排,日後要增加什麼、調整什麼,也不必受版型原本的限制。

設計要能被完整實現

設計稿再好,做不出來就沒有意義。業界常見的做法是設計與前端切版分開發包,設計師交出稿子就結案,實作的人只能照著「大概」做——那些讓畫面好看的細節,往往就是在這一手流失的。這也是我們堅持設計與程式都在同一個團隊裡的原因——切版時的每一個像素、動態的每一段緩動曲線,都由理解這份設計的人親手完成,不會在轉手的過程中被簡化掉。後面關於技術架構、製作流程與規格的說明,都是為了讓設計能夠原封不動地被實現。

Scope & Types

服務範圍與類型

服務範圍:網站設計與網頁設計

網頁設計著重於畫面與操作層面,包含版面配置、配色系統、字級規範與瀏覽動線;網站設計則涵蓋更完整的範圍,除視覺設計外,另包含網站架構規劃、功能邏輯設計、後台系統建置與 SEO 底層結構。本服務為完整的網站設計,兩者皆包含於專案範圍內。

網站設計類型與適用對象

類型適用對象設計重點
企業網站設計公司、行號、工廠、製造業品牌形象、實績呈現、專業信任感建立
購物網站設計品牌電商、零售、批發商品陳列、結帳動線、金流物流串接
活動網站設計展覽、比賽、新品發表主視覺張力、互動效果、線上報名
客製化網站設計平台服務、產業系統、新創資料結構、權限分層、流程邏輯
學校網站設計大專院校、高中職、國中小資訊架構、多處室分權、無障礙規範
政府網站設計公部門、便民平台、標案無障礙等級、資安規範、標案規格

各類型網站的功能模組

下列為各類型網站設計專案中常見的功能模組。實際建置項目依需求訪談結果確認,未使用的模組不會列入開發範圍,以免增加後續維護負擔。

企業形象網站
公司簡介與沿革、服務項目、產品型錄、實績案例、最新消息與公告、據點與聯絡資訊、線上詢價表單、人才招募專區、多語系切換、投資人專區。
購物網站
商品分類與規格管理、庫存控管、購物車與結帳流程、金流串接(信用卡、ATM、超商代碼、行動支付)、物流串接(宅配、超商取貨)、電子發票開立、會員系統與分級、優惠券與滿額折扣、紅利點數、訂單管理與出貨作業、退換貨處理、銷售報表。
活動網站
活動主視覺與互動效果、線上報名與名額控管、抽獎機制、問卷與投票、倒數計時、社群分享、活動地圖與交通資訊、報名資料匯出、活動結束後的頁面封存。
客製化系統網站
多層級帳號權限、流程簽核、資料查詢與統計報表、批次匯入匯出、通知與提醒機制、操作紀錄稽核、第三方系統 API 介接、排程自動化作業。
學校網站
最新公告與跑馬燈、行事曆、處室與科系分權管理、師資介紹、課程資訊、招生專區、榮譽榜、檔案下載區、輪播看板、無障礙標章規範。
政府機關網站
政令宣導與新聞發布、法規與公文下載、線上申辦與表單、民意信箱、資料開放專區、網站導覽與鍵盤操作支援、無障礙等級檢測、資安防護規範。

Tech & Process

技術與製作流程

開發技術與架構

所有專案均為客製開發,程式由團隊自行撰寫,不使用市售網站模板、不依賴第三方外掛套件。技術規格如下:

  • 後端開發:PHP 原生開發,依專案需求設計資料庫結構與資料表關聯,不採用通用型 CMS 架構。
  • 前端技術:HTML5、CSS3、JavaScript 手工切版,RWD 響應式版型,支援主流瀏覽器與行動裝置。
  • 後台系統:依客戶實際維運流程客製,僅建置會使用到的功能模組,避免通用後台的冗餘設定。
  • 資料庫:MySQL/MariaDB,索引與查詢依資料量規劃,兼顧擴充性與查詢效能。
  • 介接能力:金流、物流、電子發票、第三方登入、地圖服務,以及客戶既有的 ERP、CRM、POS 系統 API 串接。
  • 主機環境:提供中華電信機房自有主機服務,硬體與網路環境由公司自行維運,不轉包第三方。

採用原生開發的原因在於安全性與擴充性。套版網站的風險來自模板與外掛本身——任一外掛出現漏洞,網站即暴露於風險中;原生開發的程式碼不含未使用的功能,攻擊面較小,後續擴充也較不受既有架構限制。原生開發同樣需要資安把關,因此測試階段包含資安檢查(見製作流程 06),並於維護方案中持續進行系統與資安更新。

製作流程與交付項目

階段·工作內容·交付項目

  1. 01 需求訪談 確認網站目標、目標客群、功能需求與風格方向 交付項目需求確認單
  2. 02 架構企劃 規劃網站地圖、頁面層級、功能清單與後台權限 交付項目網站架構圖、功能規格表
  3. 03 UI/UX 設計 版面設計、視覺風格定調、操作動線規劃 交付項目各頁設計稿(電腦版/手機版)
  4. 04 前端切版 RWD 響應式切版、動態效果實作、跨瀏覽器調整 交付項目可瀏覽的前台頁面
  5. 05 後端開發 資料庫建置、客製後台、表單與金流串接 交付項目後台管理系統
  6. 06 測試優化 跨裝置測試、效能檢測、資安檢查、SEO 結構檢查 交付項目測試報告
  7. 07 上線與保固 主機部署、SSL 設定、送交搜尋引擎收錄、教育訓練 交付項目正式站台、後台操作說明

專案時程參考:企業形象官網約 2-3 個月、購物網站約 3-4 個月、大型客製系統約 4-6 個月,實際依功能複雜度與資料提供進度調整。

Standards

規格與規範

響應式網頁設計規格

所有網站設計專案均包含 RWD 響應式網頁設計,非額外加價項目。響應式並非將電腦版等比例縮小,而是針對不同螢幕尺寸重新配置資訊優先順序:

  • 依裝置尺寸調整版面欄數、選單形式與圖文排列方式。
  • 行動版單獨檢視與調校,確保觸控目標尺寸、表格呈現與表單操作符合手機使用情境。
  • 配合搜尋引擎行動優先索引原則,行動版內容與電腦版保持一致,不做內容刪減。
  • 測試涵蓋主流瀏覽器與常見手機、平板機種。

SEO 結構與網站效能

搜尋引擎優化的底層結構於網站設計階段即一併建置,並非上線後另行加購的項目。標準包含:

  • 網址結構:語意化網址規劃,避免無意義參數。
  • 標題與描述:每頁獨立的 title 與 meta description,可於後台自行編輯。
  • 標題階層:H1 至 H3 正確分層,一頁一個 H1。
  • 權重收斂:canonical 設定,避免相同內容分散於多個網址互相稀釋。
  • 索引控管:sitemap.xml 自動產生、robots.txt 規則設定。
  • 結構化資料:依頁面類型建置 JSON-LD,提升搜尋結果呈現完整度。
  • 載入效能:圖片壓縮與延遲載入、資源精簡、快取規則設定。
  • 可讀性:主要內容以文字呈現,不將重要資訊製作為整張圖片或僅存在於動畫中。

資訊安全與後台管理

後台系統依客戶維運需求客製,常見功能模組包含文章與公告管理、產品或商品管理、圖片與檔案上傳、表單資料查詢與匯出、多層級帳號權限管理、以及網站基本設定。資安措施包含 SSL 憑證安裝與全站 HTTPS、後台登入防護與登入紀錄、上傳檔案類型限制、資料庫定期備份,以及依需求設定的後台存取限制。

無障礙網頁與規範遵循

學校與政府機關網站設計專案須符合政府訂定的無障礙網頁規範,本公司具備相關標章的實作與送檢經驗,一般企業網站亦可依需求採用相同標準製作。實作項目包含:

  • 圖片替代文字、表單欄位標籤與錯誤提示的正確標記。
  • 完整的鍵盤操作支援,不依賴滑鼠即可瀏覽全站。
  • 網站導覽、快速鍵設定與跳至主要內容的定位點。
  • 文字與背景的色彩對比度符合檢測標準。
  • 語意化的標籤結構,確保螢幕報讀軟體可正確解析。
  • 影音內容的替代說明與字幕規範。

個人資料保護方面,涉及會員或表單資料蒐集的網站,於設計階段一併規劃蒐集告知、同意機制與資料存取權限,符合個人資料保護法之要求。

網站改版與資料轉移

既有網站改版時,除新站建置外,另包含舊網站的資料轉移與網址對應處理。舊有網址若未妥善設定轉址,將導致既有搜尋排名與外部連結失效,這是改版後流量下降的主要原因之一。本服務於改版專案中會逐一比對舊網址並建立 301 轉址對應,使既有排名與外部連結的權重得以延續,將改版造成的流量波動降到最低。

評估建議:若網站僅為視覺過時、架構仍合理,可採改版方式保留原有結構;若無行動版、後台無法維護、程式老舊已無法安全更新,或每次擴充功能都需重寫,則建議重新建置。

Cost & Terms

費用與合作方式

為什麼選擇山川久也

  • 近二十年的專注:自 2006 年投入設計、2010 年正式登記成立,長期專注於網站設計與系統開發領域。
  • 設計與開發全程內部執行:企劃、UI/UX 設計、前端與後端開發皆由內部團隊完成,不外包、不轉手,溝通窗口與品質責任單一。
  • 原生開發不套版:程式從零撰寫,不使用市售模板與第三方外掛,沒有外掛漏洞風險,功能與擴充不受既有架構限制。
  • 自有主機環境:於中華電信機房自行維運主機設備,網站上線後的環境問題不必再找第三方廠商。
  • 跨類型專案經驗:企業形象、購物電商、學校、政府標案與客製系統皆有實際承接經驗。

歷年成果可瀏覽網站設計作品集,或查看各產業案例了解不同類型專案的實際樣貌。

費用級距與報價組成

網站設計費用依類型與功能複雜度而異,以下為客製化開發的費用級距:

網站類型費用區間影響因素
企業形象官網NT$ 10-50 萬頁數、設計細緻度、是否客製後台
購物網站NT$ 30-100 萬含金流、物流、會員、訂單管理
客製化系統網站NT$ 50 萬起,依需求報價特殊功能、API 串接、後台邏輯複雜度

完整報價應涵蓋專案管理、UI/UX 設計、前端開發、後端開發、客製後台、SSL 憑證、第一年主機與保固維護。建議於評估報價時一併確認以下項目:設計提案款數與修改次數、後台為客製或套裝、RWD 是否包含、主機與網址第二年續約費用、保固範圍與期限,以及程式原始碼與資料的所有權歸屬。

維護與保固

網站上線後提供保固期間的程式錯誤修復服務。保固期滿後可另行議定維護方案,維護方案包含主機與環境維運、系統與資安更新、憑證續約管理、資料備份,以及依時數計算的內容更新與小幅調整;新功能開發與改版需求則另行報價。

服務區域

公司位於新北市土城區,網站設計服務範圍涵蓋台北、新北、桃園、台中、台南、高雄等全台各縣市。專案進行方式可依需求安排到府洽談、視訊會議或線上協作,非雙北地區的客戶以視訊會議與線上協作進行,溝通頻率與雙北專案相同。

常見問題

Q:網站設計費用大約多少? 費用依網站類型與功能複雜度而定:企業形象官網約 10-50 萬,購物網站約 30-100 萬,客製化系統網站 50 萬起、依需求報價。完整報價應涵蓋專案管理、UI/UX 設計、前後端開發、客製後台、SSL 憑證與第一年主機維護。歡迎與我們聯繫取得免費需求評估。
Q:網站設計專案需要多久時間? 企業形象官網約 2-3 個月,購物網站約 3-4 個月,大型客製系統約 4-6 個月。實際時程依功能複雜度與資料提供進度而定。
Q:客製化網站設計與套版網站有什麼差別? 客製化網站設計依企業需求從零規劃架構、設計與程式,視覺獨特、功能可依營運流程調整,且程式不含未使用的模組,攻擊面較小。套版網站使用現成模板與第三方外掛,外觀相似、功能受限,並須承擔模板或外掛本身的漏洞風險,長期維護成本較高。
Q:網站設計包含 RWD 響應式設計嗎? 包含,且非額外加價項目。所有專案均含響應式網頁設計,依螢幕尺寸重新配置版面與資訊優先順序,行動版單獨檢視調校,確保電腦、平板與手機皆有完整內容與良好操作體驗。
Q:網站完成後可以自行更新內容嗎? 可以。客製後台依實際維運需求建置,提供文章、公告、產品或商品、圖片等內容的自行編輯功能,並於交付時提供後台操作教學。
Q:程式原始碼與資料的所有權歸誰? 客製開發專案的程式原始碼與資料所有權歸屬客戶,並載明於合約,日後可自行保管或移轉。
Q:是否提供主機與後續維護服務? 提供。本公司於中華電信機房承租機櫃並自行管理,主機設備為公司自有、環境自行維運。網站上線後提供保固期間的程式錯誤修復,保固期滿可另行議定維護方案,涵蓋主機維運、系統與資安更新、憑證續約與資料備份。
Q:網站設計的付款方式為何? 採兩期付款:簽約時支付專案總額的 50% 作為訂金,網站驗收完成、正式上線前支付尾款 50%。專案範圍、付款節點與交付項目皆載明於合約。
Q:如何挑選網站設計公司? 建議從六個面向確認:一、設計與程式是否由同一團隊執行,避免多方轉包造成責任不清;二、後台是客製或套裝,這決定日後維護是否順手;三、RWD 響應式是否內含而非加價項目;四、報價是否涵蓋專案管理、設計、前後端、客製後台、SSL 與第一年主機;五、保固範圍與期限是否明確載於合約;六、程式原始碼與資料的所有權歸屬。山川久也的做法是全案內部執行不外包、後台全客製、RWD 內含、原始碼與資料歸屬客戶,保固範圍與期限依專案於合約中約定。
Q:網站完成後可以保證 Google 排名嗎? 不保證特定關鍵字的排名。搜尋排名由 Google 演算法決定,並受同業競爭與外部連結等站外因素影響,任何承諾「保證第一頁」的說法都應審慎看待。我們能負責的是交付符合搜尋引擎規範的網站結構:語意化網址、每頁獨立的標題與描述、正確的標題階層、canonical 權重收斂、sitemap 與 robots 設定、JSON-LD 結構化資料、行動裝置相容與載入效能優化,讓網站具備良好的收錄與競爭條件。

提供免費需求評估,依實際需求提供項目明細與報價。