雖然每天透過電腦或手機點擊無數的網站，但對沒有架站經驗的人而言，可能不太清楚一個網站是如何完成的。
如同介紹依產業別的8種網頁設計表現手法此篇貼文所述，網站因產業類別、架設目的、訴求對象會有不同的網站架構與表現手法，但製作流程是一致的，今天這篇貼文就是要徹底解說網站的製作流程。

1. 前置作業

1-1. 設定訴求對象或建構一個角色作為行銷對象

首先，您希望誰來瀏覽您的網站？
當然絕大多數的人會是希望不分年男女老幼任何人都能來瀏覽網站。但，如果精準鎖定目標客戶做訴求，更能發揮集客効果與廣告効果。
一般是以年齡層與職業別作為訴求對象，更細緻的做法就建構一個角色做為行銷對象，即什麼是角色行銷（Persona）。有了虛擬的目標客戶之後，網站架構與網頁設計的方向就可以目標客戶的角度出發。
例如，不是籠統的“喜歡流行的20幾歲女孩”，而是“在大企業工作3年間、20幾歲的OL、假日喜歡與友人到東區逛街、喜歡流行的Ａ小姐”，更清楚地將目標客戶的輪廓描述出來。
為什麼要架設網站？每個網站都有其終極目的，有的網站是為了要促銷商品、有的網站是為了增加客源。確定了終極目的之後，網頁設計師才能正確掌握設計方向。

1-2. 决定概念

設計方向確定後，接下來要決定概念，若概念不清楚，設計者與客戶之間容易產生齟齬。
例如，美容室網站要做出「休閒的感覺」或「平靜的氣氛」等，使用諸如此類比較抽象的用語，每個人想像將會千差萬別。因此設計的概念要使用明確的用語來表現。
介紹一個實際案例如下：

要讓消費者知道我們的美容院收費比其他所有業者便宜｜目標客戶不僅僅是20來歲的年輕女孩，也希望30歲～40歲的熟齡婦女來享受我們的服務｜頂級預約制，交通便利，想要剪頭髮，只要一通電話， 隨時都可以配合。

將抽象的用語以具體的事物來表達，能使網頁設計人員更能領略概念的內涵。要是已曖昧的印象進行網頁設計，弄不清楚到底是為了誰架設網站，想要表達的意念無法傳遞出去。更重要的是，要以使用者為中心的設計概念，讓網頁設計能夠符合使用者的習慣與需求，希望讓使用者在瀏覽網頁的過程中不會產生壓力或感到挫折，並能讓使用者在使用網站功能時，能以最少的努力發揮最大的效能的所謂易用性的觀點而言，就會變成非常難用的網站。

1-3. 決定網站標題與廣告標語

確定了網站的概念之後，接下來要決定網站標題，已經在營運的店家或公司，通常是使用與店家名稱或公司名稱一樣的標題，如果是架設新網站、或網站改版，可以選用有個性且好記的網站標題。
決定網站標題之後，接下來要決定網站的廣告標語。廣告標語雖非絕對必要，但是網站要是有廣告標語可以讓用戶清楚知道網站存在的目的是什麼。
『令人印象深刻的簡短的一句話』是下廣告標語的秘訣，舉例如下：

trippiece

「みんなで遊べば、地球は楽しい」 ps:日本規模最大旅遊網站

絕妙的廣告標語，讓人清楚明白這是什麼類型的網站、提供什麼樣的服務。換言之，若目標客戶不夠鮮明，就無法產生叫人動心的廣告標語。因為短短的廣告標題裡面蘊含了『為誰、提供什麼服務』。
決定廣告標語時，有一點要注意的地方。競爭同業也會使用廣告標語，例如：「免費試用一個月」「上網吃到飽」等，最好避開使用。廣告標語不僅僅是說明，也會成為網站的品牌。例如看到“只溶於口，不溶於手”就會連想到M＆M巧克力。

1-4. 決定網站功能

決定網站製作功能之後才能確立如何設計網頁與編寫程式碼。例如：「桌上型網站與手機版分開製作，還是採用RWD響應式網頁設計？」、「可對應使用的瀏覽器有哪些？」「是否使用WordPress作為後台管理？」等等。

1-5. 準備主機空間與註冊網域名稱

網站完成之後，必須先準備主機空間與註冊網域名稱，才能出現在網際網路上。
若是大型網站，通常企業會有自己的主機空間，有IT人員進行管理與維護，需要耗費龐大的人力資源與電費。中小企業與自營業則多半是向主機商租用虛擬主機。關於如何選用網域名稱，詳情請參考：網域名稱對SEO的影響

2. 製作網站的外觀

2-1. 網站架構

確定目標客戶與概念之後，接下來就是具體著手網頁設計的階段。如同室內設計或服裝設計一樣，首先要有網站的『設計圖』。

設計圖包括網站整體的「外觀」與每個分頁「細節」部分。做出樹狀的網站架構圖之後，才知道要製作哪寫頁面，如何處理網頁導覽(Navigation bar)與下拉選單(drop down menu)。

2-2. 決定網頁排版

首頁(Top page)、產品介紹(Products page)、 公司簡介(About us)等頁面，根據頁面屬性與文案會有不同的排版與設計，稱之為網站框架規劃(wireframe working)。

一般人瀏覽電腦版網頁的習慣是「從左到右・從上到下」、手機版的瀏覽視線則是「從上到下」。因此網頁內容的優先順序可依此方式做排列。

3. 編寫程式碼

3-1. 決定後台管理系統

若不諳難懂的語法，就無法直接透過FTP主機經常更新網頁內容。塞巴貓以全球最多人使用的後台管理系統WordPress為客戶架設網站，網站上線後，客戶可以輕鬆編輯頁面或新增頁面。

3-2. 編寫程式碼

塞巴貓使用WordPress架設網站，呈現網頁視覺效果的HTML/CSS等語法都已經被製作成非常方便好用的編輯器，只要點選編輯器上面的選單，就可以做出各式各樣的設計與排版。

3-3. 測試瀏覽器相容性

設計好的網頁呈現在各種不同的瀏覽器或不同比例的螢幕是否會走樣？至少要相容於最多人使用的瀏覽器諸如：Google Chrome、Internet Explorer、Mozilla Firefox、Safari等。塞巴貓製作的RWD響應式網頁設計適應電腦、平板、智慧型手機等各種尺寸螢幕。

3-4. 測試主機相容性

塞巴貓提供測試用主機架設DEMO網站，客戶確認前後台無誤之後，在遷移到客戶的正式主機。遷移到正式主機之後，再全面測試所有頁面是否正常開啟，所有連結是否斷鏈或連到錯頁面的情況。

4. 網站上線後

4-1. 向搜尋引擎登錄自己的網站

辛辛苦苦架設出來的網站，當然希望能讓更多人看到。除了將自己的網址貼到他站吸引網路蜘蛛來存取自己的網頁的方法外，也可以到Google等搜尋引擎登錄自己的網站，詳情請參考：寫給想要架設網站的人。

4-2. 檢查網站流量

善加使用Search Console，可以監控前來網站瀏覽的用戶是透過什麼路徑看了哪些頁面。瞭解您的網站向 Google 搜尋和全球使用者展示的樣貌。

4-3. 更新網頁

頻繁更新網頁內容，網路蜘蛛前來存取網頁的次數也會相對的增加，有助於搜尋結果排名。

4-4. 搭配運用社群媒體、付費廣告、電子報

新網站的流量來源主要是依賴關鍵字搜尋。另外，twitter、facebook、instagram等社群媒體的運用早已被大家熟知與運用。
要是有廣告預算的話，可利用關鍵字點擊付費廣告或發送電子報為自己的網站做宣傳。

總結

以上是就開始設計製作網頁到網站上線一連串的作業做了徹底的介紹與解說。當然根據網站規模，是否參與實品拍攝、logo設計、文案撰稿..等，網頁設計公司參與的人數也會有不同，但流程是一致的。

網站上線後就放著不管，就無法發揮對網站所期待的作用。知識庫持續提供網路新知，希望協助您有效提升網站的流量與網站應該發會的作用。