網站架設與設計
展現網站巨大價值

What makes us different?

Intro

Gremlin Works多年網站設計與建置等應用開發經驗,網站的開發最重要關鍵在目標與定位,網站架設屬於工具與技術,其網站所有功能都是因為目標成效來企劃。

例如:購買率、會員量、回購率、關注度、使用率… 等價值的創造,都是網站建置最核心的動機與目的,創造網站所帶來的價值與資產,網站不再是技術面的問題,而是定位與策略,只有這樣才能看見網站真正成效與價值。

網站目標分析定位

透過品牌價值與核心群眾分析,定義網站希望目標與成效,企劃網站連結性與核心群眾需求性,讓網站滿足不同造訪者不同需求與服務,確認網站建置目標。

品牌網站企劃與策略

滿足不同造訪者動機與目的,建構品牌與服務產品在網站上的完整連結性,佈局體驗與策略需求,提升網站關注瀏覽量,創造網站所帶來的品牌價值與成效。

模擬體驗UI/UX設計

UI/UX 企劃與設計,透過 Wireframe 製作,準確繪製所有功能與所有使用者操作模擬,並進行設計與規範製作,預覽網站視覺呈現與態度,以利進行下階程式開發製作。

網站SEO內容企劃

針對企業性質及需求擬定的SEO優化企劃,專注於改善關鍵字報告、內容行銷、內部連結等方向,為您打造穩定排名的關鍵字佈局。我們將定期分析競業網站、線上流量與市場狀況,確保策略符合搜尋引擎的演算法更新。

網站程式開發與建置

網路技術與應用整合是重要的核心基礎,包跨國際企業網站應用整合、中小型網站、工具應用平台、內部服務功能平台、ERP、CRM導入串接… 等項目,透過完整分析與計畫,提供最適切的開發技術與工具應用整合。

網站維運與營運

網站在線上發佈後,持續提供維護與營運的服務,包含內容企劃、設計製作、功能製作更新、經營代管等工作執行。國際企業的網站平台營運執行與技術支援,有效提升數位化與網路化效能與創造利潤。

服務項目

Whatdo we build ?

電商網站

根據統計,2019年4月台灣電子購物及郵購業營業額高達154億元,人人都能輕鬆上網開店,電商平台的選擇也有幾十種,包含蝦皮、pc home到自己架站的電商平台,例如:shopify, shopline, cyberbiz…。這些電商平台有許多制式的模板,能便宜、快速的幫你創建好網站。雖然這些平台也有提供SEO優化的功能,不過相較於客製化電商網站,制式模板在設計及功能上受很大的限制,對SEO優化成效也不是那麼顯著,因此大部分公司中小規模的企業都會選擇客製化電商網站,有效運用網站最大價值。
shopify, shopline and cyberbiz等電商平台多以月繳的方式收費,如果你與平台簽2年的約,不續約後,這個網站上的所有資料將無法取得,例如:會員資料、流量數據以及SEO排名等等的資料。反之,我們的客製化電商網站則是走一次買斷型的方式,直接杜絕了上述到期之後,所有的數據都付諸東流的情況。且客製化網站的價格其實並不是大家想像的那麼高昂,如果你將每個月付給電商平台錢省下來,其實就能客製化設計出專屬於你的網站了!而這樣的方式也能更貼近目標客戶的需求,讓SEO的效果最大化。
制式電商平台一般來說都會含有基本的SEO功能,但根據數據顯示,其實那些平台的SEO都沒有比客製化網站的SEO做得還好。我們也從過去客戶的真實經驗了解,從制式化電商網站改為客製化網站後的SEO優化排名都表現得相當出色。
提到了這麼多客製化網站優於制式電商平台的特點之後,想必大家對於客製電商網站的金額很好奇!客製化電商網站的價格會隨著客戶的需求以及功能而有所差異,但其實你只要省下每個月付給那些平台的錢,就能請我們客製化專屬於你的網站了!所以如果對於價格感興趣的話,不妨填寫表單,我們會請專人進一步了解你的需求,並報價給您!

品牌形象網站

品牌形象網站會呈現一個公司或企業的形象及其概念的網頁,大多數的企業都需要品牌形象的網站在網路上曝光,原因有二:
1. 增加品牌的曝光度。
2. 增加轉換率。
為了讓網站能達到上述的目標,我們必須要了解:
1. 您的目標受眾是誰?
2. 客戶在乎的是什麼?
3. 您能提供什麼服務?
4. 客戶會用什麼關鍵字搜尋到你?
掌握了這些資訊後我們就能更完善企劃網站整體方向,架設出一個符合使用者來訪需求的網站,成功增加銷售轉換。

OEM/ODM 製造業的網站

台灣雖然只是一座小島,但是製造了許多很棒的商品,卻因為種種因素尚未在國際的市場中發光發熱。針對製造業者,我們會針對產品進行市場分析、客戶分析以及競爭者分析。對製造業或是任何B2B的企業而言,最重要的關鍵就是與客戶建立信任感。那麼信任感從何累積呢?其實就是「網站」!每個企業給他人的第一印象,其實就源自於網站,因此如何透過網站與客戶建立信任感和完美呈現產品的品質就很重要,因為這個部分會影響到客戶對您的感受,為什麼您的產品值得客戶花這筆錢?

有些製造商的市場佔有率可能已經高達80-90%,因此行銷重點不該放在要如何吸引更多的客戶,反而要思考如何與現有的客戶建立更多的交易往來。針對這樣的情況,我們能透過專業的網站企劃與設計,讓您與客戶建立信任感,也能提供給客戶更加完整的體驗,例如:索取樣品、新品展示預約、產品更新狀況或是追蹤貨物等等。

ERP和CRM系統

一般而言,客製化ERP和CRM系統是一個需要密切溝通且複雜的專案,這些客製化系統主要是依據企業的商業模式開發,提升企業管理效率。以下為我們的基本流程:

  • 定義出我們系統的目標與特點分別有哪些?此部分須與商業策略及SMART分析相符。
  • 此系統一般而言會是公司內部上百人都會使用到,因此我們必須了解所有使用者的意見與看法。很多失敗案例都是因為使用者並無參與企劃討論階段,設計出來的系統不符合他們的使用需求或習慣。
  • 在規劃系統前,觀察現況以避免相同的錯誤不斷發生。除此之外,也要確保開發團隊成員們確實了解目前的商業模式、流程及步驟。我們的PM及團隊會到場親自與您們討論專案需求、目標、設計等,以確保整體溝通的完整性。
  • 開發一套系統,需要花費大量人力、金錢及時間,因此我們會與您們討論、評估系統功能製作的優先順序為何?畢竟經費、時間都是有限的,分出製作項目的優先順序,依照計畫階段性完成。
  • 下一步我們會提供wireframe黑白線稿,與開發團隊、使用者更進一步的討論系統將如何呈現與運作。
    上述初步設計都沒問題後,我們會提供一個第一階段的樣品,讓您能夠更清楚的了解這是否符合您的需求及期望?並確認在進行到整體開發製作前,所有功能或樣式都無需做任何調整及修改。

What is the right website for You?

想架設網站?網站需要改版?網站沒有轉換成效?無論是任何網站相關需求,都歡迎填寫以下的表單,我們的網站專業團隊將與您聯繫,進一步共同討論您的想法及目標,並提供網站設計與架構建議、預估的費用與時程。

How to build a website

你在考慮使用Wix快速架設網站嗎?想動手開始架設網站,卻總是困擾於陌生的專有名詞? 網路上很多教學資訊,卻找不到給還是初學者的你一個重點式整理嗎?這篇文章將一次補齊你入門前必須具備的重點資訊! 包括常見問題: DNS是什麼? 為什麼需要擁有網域和主機,不能用免費的嗎? SSL是什麼? 如何知道來觀看網站的使用者分析呢?前端 (Front-End) 和後端 (Back-End) 程式又是什麼? 自己做網站或找專業的人,優缺點是什麼?

七項流程

網頁製作,你該完成的七項流程
你是否具備了架設網站該有的基本概念?先看看你是不是這些資料都準備好了。

  1. 我的網域申請了嗎?我的網域名是什麼?
  2. 我的主機商是誰?主機資訊已經完整從該公司收到了嗎?
  3. 我是否已經正確將DNS指向我的主機位置了?
  4. 我的網站需要資料庫嗎?如果是靜態網站不需要。
  5. 我需要SSL憑證並且購買好了嗎?或是認為現階段還不需要?
  6. 我需要使用Google Analytics,已經申請好 Tracking Code了嗎?
  7. 我的網站想要嵌入Google Map,已經申請好API key了嗎?

如果你對上面的問題都很陌生,不用緊張!接下來我們將針對這些必備的基本概念介紹給你,也會推薦適合初入門的你該使用的平台。

網域是什麼

網域是什麼?網域申請教學

每個人都有自己的名字,每戶人家也都有自己門牌, 這些都是辨別個體的一種方式。浩瀚的網路上有來自全球成千上萬的網站,當然也需要分別它們的辦法。而每個網站自己專有的名牌,就是網域。以我們Gremlin Works網站為例子,我們的網域便是:www.gremlinworks.com.tw
以下是幾個常見網站的網域:

  1. 谷歌:www.google.com
  2. 臉書:www.facebook.com
  3. 推特:www.twitter.com

要製作一個網站前,你得先搞清楚你想要申請自己的網域,還是用架站平台或部落格平台上提供的免費網域。這兩個有什麼差別呢?為什麼免費的不用還要考慮?
如果你有用過痞客邦Pixnet隨意窩 XuiteTumblrBlogger 等部落格平台,那你用的就是他們的免費子網域。在類似平台上辦部落格,他們都會要求你設定一個還沒被用過的使用者帳號,而這個帳號名會被用來區分你的部落格網站。假設我們創了一個帳號叫 gremlinworks,以下是我們在不同平台上會擁有的免費網域。

  1. 痞客邦:gremlinworks.pixnet.net
  2. 隨意窩:blog.xuite.net/gremlinworks/blog
  3. Tumblr:gremlinworks.tumblr.com

看得出來這些子網域跟我們自己申請網域 (gremlinworks.com.tw) 有什麼差別了吧,選用自己的網域會給用戶更專業的感覺!雖然使用免費網域是最快速又 ( 短時期內 ) 省錢的方式,但卻也隱藏一些問題,因此建議在一開始就把網站未來發展考慮進去才行。

免費網域會衍生 2 個問題:

  1. 冗長的網域名:立即要面對的問題,就是當你必須曝光自己的網站時,不論是名片上也好,在行銷廣告也罷,往往會是一長串字母,裡面還會交雜平台名字 ( 跟自己品牌無關 ) 的文字。
  2. SEO權重的轉移:你在網站上所有經營累積的成果,都很有可能在日後面臨搬家轉址的過程,而必須得從頭開始,主因是不少平台仍不提供權重的轉移。白話來說,就算你搬家了也重新指向新頁面了,但使用者搜尋時還是會因為舊網站的權重較重而先搜尋到。 各位應該有搜尋過一些文章,頁面點開後顯示「我已搬家,將為你連到本頁新連結」吧?沒錯,就是這個缺點。如此一來,以後使用者要找到你,搜尋結果都要先繞過以前使用的平台頁面。這實在不是長久之計啊!

要去哪裡買網址呢?

  1. Namecheap:24小時客服團隊 ( 雖然要用英文溝通,但有問題時,他們 Live Support Team 回覆真的很快!),一年 .com 費用較 GoDaddy 少約1塊錢美金,網友評價高,購買介面簡單。
  2. GoDaddy:有中文介面,老品牌網站,全球客戶眾多,僅提供週一至週五客服,購買流程對新入門者較容易產生誤會。
  3. PChome買網址:沒錯!萬能的台灣 PChome 也可以買網址,當然介面客服也都是很「台灣」,對於追求親切感的朋友,這也是不錯的選擇。

主機是什麼

虛擬主機是什麼?最受歡迎虛擬主機比較若把架設網站比喻成一個室內裝修的工程,那麼首先你至少需要有一間房子。 不管是小型公寓還是濱海別墅,總是要先有一個房,才能開始動手室內裝修,把漂亮的傢俱放進去。同樣的,你的網站就是需要這樣的虛擬主機空間 (Web Hosting),來存放網站的所有資料。
如果本身沒有工程師在管理網站的話,記得要詢求「虛擬主機」,而不是VPS或實體主機的方案喔! 虛擬主機就等於主機商已經幫你蓋好所有的環境,而你只需要把自己的物品搬進去就可以了,對於非工程師背景的人,管理及使用上會比較容易。要去哪裡租虛擬主機呢?

  1. 遠振資訊:台灣機房,中文客服,超簡單中文介面,適合對主機相關知識很陌生又有點懼怕的初階管理者使用,好上手。
  2. BlueHost:香港機房,價格平價、無限流量、無限容量、也無限網域,相當俗又大碗的選擇。
  3. SiteGround:新加坡機房,穩定性很高,客服展現高評價的水準,自家開發的 Super Cacher 功能,也就是讓你的 WordPress 網站瀏覽起來飛快。還有,最重要的還有免費支援 Let’s Encrypt SSL 憑證功能。一整個水平高到破表的服務,也讓近期很多人都轉而投向它的懷抱了!

DNS是什麼

DNS是什麼?如何設定DNS?前面我們已經說明了「網域是你的門牌」、「主機是你的房子」,那如何在網路世界讓大家找到你的房子呢? 這時就是要倚靠DNS設定 (Domain Name System)。DNS像是地址簿,確定網域指向主機,讓瀏覽者可以輸入門牌就找到你的房子,參觀你精心設計的家。另外要提醒你,所有的DNS設定變更最久會在48小時才生效。

DNS設定最常使用的有三個記錄 (Record Types):

  1. A記錄:將你的網域名稱指向你的主機IP,將網域及主機串接起來最主要的記錄,多數人的需求只要成功設定此項,就可以讓你的網站順利運作了。
  2. MX記錄:當你需要用這台主機收發信件時,記得也要將你的 MX 記錄指到這台主機,才能正常使用信箱。
  3. CNAME記錄:當你的網站有其他別名時,你就需要設定 CNAME 記錄來連結到正規的網域。舉例來說:你的正規網域是 example.com,你可以使用 CNAME 設定,將 www.example.com 或子網域 abc.example.com 指到 example.com。記得!A記錄是對應IP位址,而 CNAME 則是對應網域。

URL是什麼

URL是什麼?URL和網域的差別在哪?在網站製作過程你一定會看到URL這個名詞,卻一時不知道是什麼。其實,這在生活中很常使用,我們常口語化把它稱為”連結”,也就是”網址”。當你要分享一篇實用的文章,或有趣的新聞給朋友時,你複製貼上的那一串網址就是所謂的URL。或許有些人會有疑問,那URL和網域的差別在哪? 所謂的網域是你網站的名字,但仔細觀察後發現,在這個網站中每一頁的網址其實都會不同。 舉例來說:你的網域是 example.com,而你的最新文章的URL肯定會在網域後台加上一些後綴,就像 example.com/blog/post-2019 ,像這樣的字串。基本上,網域只是URL的其中一部分。

有些人在工作時可能需要附上一個連結到信件中,但往往頁面的URL極為冗長複雜,這時請記得善用 Google的短網址工具https://goo.gl/ 。只要把你的連結貼上去,它自動幫你產生一組短網址喔! 更棒的是,他還有幫你記錄點擊次數,所以你也可以同時追蹤呢。

SSL憑證是什麼

SSL憑證是什麼?如何安裝SSL?

Secure HTTPS

在瀏覽網站時,你有沒有注意過有些網站開頭是 https:// 有些是 http://,而且 https 的網站前面還有個小鎖頭? 擁有這個鎖頭的網站就是有特別建立SSL憑證的網站。https的 “s” 就是代表安全性,secure 的意思。透過這個字母來告訴瀏覽者,他們正在觀看的網站是有認證過的,可以放心又安心! 因為你申請時必須接受公司資料的審核,而使用者也可以直接點擊鎖頭,看到這些公開的資訊。

哪些人一定要申請SSL憑證呢?

如果你的網站會有記錄個資、商品交易、訂購等功能的,那麼,強烈建議你在準備主機網域時,也一併將SSL憑證準備好。若是消費者在填入個人資訊時發現你的網站不安全,很有可能會打消念頭,嘗試其他網站。

Secure HTTPS icon

去哪裡申請SSL憑證呢?

除了前段介紹到的 SiteGround 主機商是免費提供SSL憑證,並且可簡便完成之外,其實上方推薦的網域商及主機商都有各自提供SSL購買的服務。 因此,對於初階入門的人,建議選定好主機/網域商之後,直接選擇他們的SSL憑證即可。
若考量預算,而想轉而選擇免費的SSL憑證的朋友,以下兩大平台也是不錯的選擇: StartSSLLet’s Encrypt

Google Analytics

Google Analytics和Google Map如何取得?

Google Analytics Tracking Code(追蹤碼)
註冊帳號後,輸入網站資訊,將取得的追蹤碼放到網站標籤裡,Google就會開始幫你追蹤你的來訪者資訊了。Google Analytics 對整體網站SEO的重要性,在連結中的文章會仔細探討。

Google Analytics logo

Google Map API key (金鑰)
那有些網站都會嵌入Google Map,它的API key又是怎麼申請的呢?點擊取得金鑰(GET STARTED)按鈕後,將你的網域輸入限制的HTTP參照網址內,系統就會自動產生一組金鑰提供你使用了。

架設網站用哪個平台?五大網頁製作平台比較

Table 2

WordPress

WordPress為最推薦的自架網站平台

為何Wordpress在某些項目相對不足,卻在最後得到最高的推薦評價呢? 其實 WordPress 與其他平台在本質上是有些差異的。首先,Wordpress 是個網站內容管理系統 (CMS, Content Managment System) ,而其他的是網路架站平台。兩個都是製作網頁的方式,那到底差別是什麼?

WordPress 是一個網頁製作軟體,只要你將它下載在任何一個伺服器 (非常簡單,一鍵搞定),你就能擁有一個完整的後台來管理你的網頁。在後台你可以撰寫文章、修改佈景主題、上傳照片、做任何外觀上的客製化,是個很完善的管理系統。這個選擇適合想要掌控網站細節,而且想擁有自己網域的人,因為 WordPress 網站設計自由極大。相對的,要花的時間較多,而且如果你有一些基本的程式概念會幫助很大(不是必須)。其他的網路架站平台如 Wix、Squarespace 是不需要程式背景的,架站速度簡單且快速。缺點是,你的網站容易被平台綁住,不易搬運。網頁佈景主題受限,有些無法客製化。長期來說價位也相對高。如果你對網站外觀不是那麼在意,只需要短期快速的架設一個可以發布消息的網頁,那麼這可能比較適合你。

有一件事我們得釐清一下,上述所提的 WordPress 是 WordPress.org,網頁製作軟體。而其實 WordPress 本身也有提供與其他網路架站平台作用較相似的 WordPress.com。Wordpress.com 的優缺點也就是簡單快速,但客製化的自由性較低,且價格偏高。注意不要搞錯了喔。

現在大部分的 B2B企業中,WordPress.org 是較廣為使用的。雖然在一開始的設定看似較費工,但對於長久的經營及各項功能費用算下來,相對來講是在這些選擇中最為強大的工具! 鼓勵大家可以試試看喔。有興趣的話,可以閱讀 WordPress人人能上手? 這篇文章。

網站建置流程

如何架設網站:了解客製化網站建置流程

恭喜,你已經有了網頁製作名詞的基礎概念,也設定好網域和製作平台了!但接下來呢?現在你的網站上是沒有任何內容的,該從哪裡開始?是外觀設計,撰寫文章,還是寫程式?不管你是自己架站還是聘請網頁設計公司,了解網站建置流程都會對你有幫助。因為每個流程順序是環環相扣的,知道每個步驟的程序能幫你節省資源及時間,不怕白做工。
接下來我們會先簡單帶過建置過程,詳細介紹請點延伸閱讀:如何架設網站:了解客製化網站建置流程

策略分析

策略分析 (Plan & Analyze)
架設一個好網站並不是只是發布一些文章和漂亮的圖片那麼簡單,你可是在和網路上所有其他同業競爭!當你在比較競爭對手的網站時,是否總覺得對方經營得很出色,而自己想要進入線上市場,卻缺少網站結構及技術端的資訊分析?其實了解線上市長趨勢是個一直持續的過程,因為網路世界不斷的在變化。你可以從最簡單的開始,注意競爭對手介面設計、使用者經驗,構想一個你喜歡的網站範本。以後再慢慢深入到文章架構、網頁讀取速度、搜尋引擎優化等等。

網站地圖

網站地圖 (Sitemap)製作Sitemap就像是繪製你的網站地圖,計畫頁面組織以及資訊該存放在哪個位置,讓用戶可以找到他們想去的方向。網站架構的全貌在這個階段會被具體繪製出來,以「頁面」為單位進行架構的確認,透過 sitemap 圖可以知道各頁面的層級關係及如何連結,以及定義清楚靜態頁面及需要後台管理的頁面。

圖稿原型

圖稿原型 (Wireframe & Prototype)為了避免製作網頁後一直修改設計消耗成本,必須先做出基本的 UI 使用者介面設計圖稿及原型。Wireframe是將所有頁面的功能繪製出來的靜態線框稿,它完全不考慮任何視覺上的元素,目的就是要專注於頁面的主要資訊及編排架構。Prototype 和 Wireframe 基本上目的一樣,是讓我們得知頁面功能及資訊的原型,但差別在於:Prototype 要考慮 UX 使用者經驗!它是像瀏覽網站一樣可以被操作的,並不是靜態,因此能讓你更真實感受網站使用者的體驗。

撰寫程式

撰寫程式 (Code)如果你想要完整得去客製化你的網站,那麼認識前端及後端語言就會對你有很大的幫助。前端最主要由三大部分組成:HTML + CSS + JavaScript。他們的作用就是替網站建構出一副骨架,穿上漂亮的新衣,並賦予他能與使用者互動的能力。如果你願意花時間在前端語言上,在Wordpress後台裡的佈景主題CSS客製化,或是JavaScript外掛工具都能給你很多發揮創意的空間,打造出獨一無二的網頁介面。而後台的開發則是為了方便以後長期的網站內容管理。

上稿除錯

上稿除錯 (Launch & Debug)每個網站系統的運作被開發完成後,一定需要經過多次的測試並除錯,透過不同測試者操作每個網站功能,並在各個環境(Windows、Mac、iOS、Android) 及各瀏覽器(Chrome、Safari、Firefox) 反覆測試過後,才能讓網站在上線後,面對不同狀態下的使用者都能正確地被呈現。最後,網站的管理要把手上的所有資料都上傳到後台,讓頁面上的資料都是正確的。如此一來,網站就可以正式公告大家上線了!

結語

講了這麼多,對於架設網站你是否更有信心了?如果沒有,沒關係,或許你可以考慮網站架設公司的服務。你可能會想,自己架設網站比較省錢吧?我的網站資訊都給對方,這樣不安全吧?如果你還在猶豫,可以參考連結文章中的自架網站優缺點分析,幫你做出適當的決定。
如果你在考慮打造一個跨國網站,想知道經營跨國網站跟一般網站有什麼不同,有什麼該注意的設定、是不是在自己的能力之內,我們也有相關的文章說明。
不管你最後的選擇為何,希望本篇文章的基本概念都能讓你的網頁製作流程更加順暢!
Contact

想與我們合作?

聯絡我們

Gremlin Works 擁有各產業網站設計與建置等應用開發經驗,網站的開發最重要關鍵在目標與定位,網站屬於行銷工具與技術架設,其網站所有功能都將符合網站目標及成效來企劃。