網站與W

ord

Press

008

INT

RO

DU

CT

ION

沒有網站等同於不存在這世上

附近頗受好評的餐廳、人氣觀光景點，想要調查有關這類資訊時，越來越多人習慣「先在網路

搜尋相關資訊」。近年來，網路越來越普及，所以有許多人也有「透過網路能查到世上所有資

訊」的錯覺，但其實網路搜尋得到的資訊僅限於世上極少的部分，但就算知道這點，一旦習慣

以網路搜尋資訊，就會覺得「在網路找不到 =不存在於這世上」。

比方說，你明天要與朋友在東京車站吃午餐，你雖然知道東京車站附近有家不錯的店，但是已

經超過三年沒光顧，而從網路搜尋也找不到這家店的資訊。此時你可能會覺得「該不會那家店

倒閉了吧？」，然後從資訊雜誌尋找其他店家。挑出幾間覺得不錯的店之後，透過網路搜尋這

些店家的名字，並且瀏覽這些店的網站，然後再打電話給氣氛最棒的那家預約。

有問題的網站對消費者行為的影響

看了電視／報紙／雜誌後再透過網站搜尋的機會

停止購買商品或收集資訊

經常

30.9%

偶爾

57.4%

62.6%

完全沒有

11.7%

合計：88.3%

圖 IN-1-1 消費者行動調查 2014：透過數位媒體購買商品的關鍵 出處：Adobe System公司 http://www.adobe.com/jp/news-room/news/201502/20150202_JapanConsumerResearch.html

在透過網路收集資訊已成為普遍手段的現代，不管企業與服務的規模有多小，都應該在

網路上設立擁有獨立網域的官方網站。

擁有公司網站以及經營網站的重要性1

擁有公司網站以及經營網站的重要性

1

IN

009

這一連串的行為模式想必每個網路使用者都經驗過。根據 Adobe公司於 2015年 2月發表的

消費者購買行動調查裡，面對「在電視／報紙／雜誌看到喜歡的商品，會再透過網站調查該商

品最新資訊嗎？」這個題目，有 88.3%的人回答「經常」與「偶爾」。

從同一份調查也可發現，瀏覽有問題的網站時，「就停止購買商品或搜集資訊的消費者」也高

達 62.6%。網路上缺乏自家公司的服務資訊固然是一大問題，但更重要的部分在於不能只是

將資訊放上網路，而是要管理資訊，向使用者提供正確的資訊。

擁有自家網站的真實價值

網路充斥著大量的資訊，其中也有不是商品或服務提供業者所發送的資訊。口碑網站或個人部

落格這類網站雖可直接聽到使用者的心聲，卻也因為這些是來自第三者的資訊，可信度可能不

高，有時會對企業形象或品牌形象造成不良影響。

這幾年來，越來越多企業主動投入 Twitter或 Facebook這類社群網站，而將這些特定的交流

服務應用在商業用途上的確是頗具效果的行銷手法，但既然是在其他公司的網站上營業，就必

須進行最低程度的風險管理。尤其是經營網路購物這塊領域的公司更是如此，有許多企業沒有

自己的網站，只在 Amazon、樂天市場、奇摩購物或拍賣網站銷售自家商品。

若要替這些在其他公司的網站舉辦活動打個比喻，大概就像是在百貨公司的活動推出攤位一

樣，雖然能與百貨公司的顧客接觸，但只要把攤位收掉，就無法再接觸到顧客。此外，正如活

動會場的攤位空間有限，能在社群網站與樂天拍賣網站刊登的資訊也有其限制，而且經營網站

的業者變更契約的事情也時有所聞。正如一堆超有名的蛋糕店全部擠在同一個地方，有時也得

考慮與購物中心那些超強的競爭對手競爭的風險。

使用社群網站與購物中心這類公司的網站服務…

可使用其他公司的服務系統與使用者

社群網站的更新較輕鬆可與該服務的廣大使用者群接觸

等於是向其他公司的網站租房子

努力更新的資訊會成為其他公司網站的東西

資訊越是優質，就越會成為其他公司的資產一旦解約，之前更新的資訊就全數消失

能刊載的資訊有限若是電子商務的網站，還會收取手續費有可能會在同一地點出現對手

圖 IN-1-2 使用其他公司的網路服務的優點與缺點

網站與W

ord

PressIN

TR

OD

UC

TIO

N

018

此外，也可以自訂網站的主題。實質上，企業必須自訂網站的主題，但近年來有許多網頁製

作公司從事WordPress的佈景主題製作，因為不會出現那些使用者人數不多的 CMS的缺

點，例如「找不到可負責製作的公司」、「費用太貴」。相較於其他 CMS而言，WordPress的

需求量也壓倒性的多，所以製作費也較其他 CMS便宜。當然，能自訂佈景主題是更為理想。

只要是以 HTML製作的網站功能，WordPress都能製作，而如此高自由度的設計方式也是

WordPress的特徵之一。

圖 IN-4-2 在同一頁面套用預設佈景主題的範例（左）與套用免費佈景主題的例子（右）

內容與設計的管理完全分開

這套佈景主題的機制讓製作各頁面內文的內容製作者與負責設計的設計師得以完全分工。以傳

統的網站為例，連變更一行文字都必須拜託網站製作公司，但若改用WordPress，網站經營

者就能自行包辦這些日常的更新作業，而且就算是缺乏網頁製作技術的人，更新網站時，也不

用擔心會不小心破壞有關設計的 HTML程式碼，導致網頁的版面被破壞。

由於可直接切換佈景主題，所以只要先建立聖誕節或情人節這類佈景主題，之後以幾個簡單的

步驟就能切換整個網站的設計。

︹企劃︺商務網站有九成由企劃決定

038

CH

AP

TE

R 1

CH

AP

TE

R 1

038

配合目標使用者改變內容的呈現方式

網站的內容通常是由網站經營者決定，但內容的呈現方式應配合使用者才對。舉例來說，以女

性為消費族群的購物網站卻使用男性風格的設計，或是明明是老年看護服務的企業網站，文字

卻小得難以閱讀，都會被認為是「不體貼使用者的網站」。

・ 網站的設計・ 文字大小・ 選單項目・ 聯絡表單的項目・ 有無智慧型手機專用版面 等等

圖 1-4-2 該配合目標使用者修改的部分

具體定出目標使用者這件事對於決定服務內容與網站設計是非常有幫助的，但是也不可過度執

著於該目標使用者，否則會使視野變得狹窄，換言之，就算是以女性為消費族群的購物網站，

也不一定非得將整個網站裝潢成女性風格，尤其在網路世界裡，也會有男性為了買禮物而造訪

網站，此時上門的男性可能會因為過於女性風格的設計而退避三舍。

樣本公司的情況：

• 目標使用者 1完成育子工作的五十幾歲銀髮夫婦。想要有一處盡情享受興趣的空間，也希望有一處週末

能與孫子們一起玩的寬廣空間。但現在還不想改建，預算也很充裕。

• 目標使用者 2正忙於帶小孩的 30幾歲夫婦。小孩已就讀國中，目前的公寓太小間，想要買中古房子再

改建。價格便宜與今年內能遷入是必要條件。

支援智慧型手機

4

2

059

CH

AP

TE

R 2

隨著智慧型手機爆發性的普及，也出現了使用者多半為智慧型手機使用者的網站，也讓

網站是否支援智慧型手機瀏覽這點顯得越來越重要。

支援智慧型手機4

智慧型手機的問世與普及

長期以來，使用者都是透過電腦瀏覽網站，但自從智慧型手機問世後，透過各種終端裝置瀏

覽網站已成常態。根據日本總務省於 2015年 5月發表的「資訊通信媒介使用時間與資訊行動

的調查報告書」指出，在 2014年 11月日本全國 13歲到 69歲的男女 1500人樣本之中，使

用智慧型手機的比例高達 62.3%，若將範圍限縮至 20幾歲，智慧型手機的使用率更是超過

94.1%。

在 2012年 9月∼10月實施的同一調查之中發現，智慧型手機的使用率僅有 32.0%，由此可

知，從 2012年起算的 2年內，智慧型手機的使用者暴增兩倍，而且從 2014年的調查發現，

「於自家使用電腦」的比例為 67.7%，從這結果得知，智慧型手機與電腦的使用率幾乎不分

上下。

圖 2-4-1 智慧型手機使用率的變遷與各年代使用圖表（總務省調查）

智慧型手機使用率的變遷

2012年9月 電腦 智慧型手機

32.0％

66.4％ 68.6％

94.1％82.2％

72.9％

■10代■20代■30代■40代■50代■60代

全年代48.6％

18.3％

74.7％71.5％

77.6％65.9％

51.0％

全年代67.7％

全年代62.3％

62.3％

2年內增加1.94倍

2014年11月

主流通信機器的使用率（2014年調查）

再者，根據尼爾森公司於 2014年 12月發表的調查，以電腦瀏覽的線上服務前十名（例如

Yahoo！、Google、YouTube這類服務），以電腦瀏覽的使用者越來越小，其中以電腦瀏覽使

用者位居第 8名的 Amazon來看，透過電腦瀏覽的使用者更是比前年減少了 14%，相對的，

透過智慧型手機瀏覽的使用者卻比前年增加了 60%。

︹設計︺吸引使用者瀏覽的網站設計

064

CH

AP

TE

R 2

要在網站使用的文章與照片必須在進入製作之前就準備。此外，近年來也出現了幻燈片

與動畫這類內容，讓內容的呈現方式變得更加多元。

介面（動態、呈現方式）的設計與素材的準備5

設計網站的魅力

網站是一種透過網路讓全世界瀏覽儲存在伺服器裡的文章或資料的機制，在網路速度仍慢的時

代裡，要瀏覽容量過大的資料是件很花時間的事，所以當時的網站以小容量的文字資料為主，

但現在，網路速度已呈飛躍性的提昇，所以除了可瀏覽大量的照片，也能毫無壓力地顯示容量

較大的動畫。

此外也出現了許多讓網站變得更具機能性以及更時髦的程式，例如以幻燈片方式顯示照片或照

片跳出畫面後，讓背景全黑的程式，而這類程式都已於網路發佈，每個人都能輕鬆使用。

與過去相較之下，網站的開發環境與瀏覽環境都已發展成熟，早期常發生網站在動畫的開發上

花費不少費用，但發佈之後，卻常因為顯示時間過久而被使用者拋棄的例子，現在這些功能卻

不需要花費太多費用就能實現，所以讓我們一起思考，哪種美妙的網站設計才具有留住使用者

腳步的魅力吧。

圖 2-5-1 於網路公佈的免費幻燈片程式 「Camera slideshow」（http://www.pixedelic.com/plugins/camera/）

Wo

rdPress

的SE

O

對策

3

4

179

CH

AP

TE

R 4

WordPress 的構造很適合 SEO對策使用，只要經營者以正確的 SEO知識更新網頁，一定能建置出更為優質的網站。

WordPress的 SEO對策3

透過標題突顯關鍵字

為了讓網站於有效的搜尋結果裡顯示，在頁面標題的 <title>標籤嵌入目標關鍵字是非常重要的

一環。雖然每種佈景主題的設定都不同，但是WordPress通常會在頁面標題裡顯示單元標題。

<title>

<h1> </h1>

</title>

單元標題

單元標題

網站名稱

圖 4-3-1 title標籤與 h1標籤重複

不過這裡會出現兩個問題。

第一個是單元標題同時出現在 <title>標籤以及頁面大標的 <h1>標籤裡。在 SEO對策具有

重要意義的 <title>標籤與 <h1>標籤使用相同的內容並非上上之策。第二個問題是 <title>

標籤會於搜尋結果裡顯示，所以必須「對待會要瀏覽網站的人」進行說明，而 <h1>標籤只會

在網站內顯示，所以屬於「對於已經在瀏覽網站的人」進行說明的文字。在這兩種完全不同的

情況下讓使用者瀏覽的文章本來就該準備兩種不同的內容。

︹經營︺從此時開始實踐，S

EO

、流量分析、宣傳

188

CH

AP

TE

R 4

為了讓網站繼續成長，就一定要利用流量分析工具了解使用者的動向。

導入流量分析工具4

導入流量分析工具

記錄與分析使用者在網站裡的行動資料稱為「流量分

析」。透過這項分析可了解使用者來自何處，瀏覽了哪

些頁面，又是在哪張頁面離開網站，可確認地掌握使用

者的行動。以正確的知識分析由流量分析工具收集的這

些資料，就能讓網站目前的問題以及使用者的目的變得

更清楚可見。

收集使用者資料的方法有很多種，而本書打算介紹最具

知名度的流量分析工具「Google Analytics」，只要將

這套工具的「分析標籤」的程式碼植入所有頁面，就能

收集使用者的資料。

若採用這項工具，之後就無法收集未設置此分析標籤的頁面與資料，所以請在網站發佈之前就

先設置此分析標籤。

網站發佈後才設置分析標籤的情況

網站發佈前就設置分析標籤的情況

無法收集設置分析標籤之前的流量歷程

網站發佈 發佈三個月後

設置分析標籤

三個月份的資料

發佈六個月後

網站發佈 發佈三個月後

設置分析標籤

六個月份的資料

發佈六個月後

圖 4-4-2 設置分析標籤的時間點

・瀏覽人次・瀏覽次數（頁面瀏覽量）・停留時間・參照來源

・使用的 OS・使用的瀏覽器・螢幕的解析度

キーワードの関連性

圖 4-4-1 流量分析可收集的資料

網站集客最佳化

6

4

203

CH

AP

TE

R 4

網站光是製作完成，是不會發生任何後續的，所以在網站發佈後，必須利用各種方法吸

引使用者造訪網站。

網站集客最佳化6

最佳化造訪網站的路線

第 1章曾強調「網站是在完成之後才開始」這件事。若是將製作出漂亮的自家網站這件事當作

目標，很可能會做出對生意毫無幫助的無人造訪網站。為了避免這種結果，本書總是不斷地希

望大家思考「網站的目的為何？」、「自家網站能提供什麼？」、「希望吸引哪種使用者？」這類

「希望完成的網站能創造什麼效果？」這些事。

即便是根據上述想法創建的網站，也有很多沒辦法吸引使用者瀏覽。網站的重點之一就是要持

續地「開發客戶」。

客戶開發要從「使用者經過何種路線造訪網站」，也就是了解「路徑」這點開始。使用者造訪

網站的路徑大致可分成「線上路徑」與「離線路徑」這兩種。

線上路徑：直接瀏覽

本書將直接造訪網站，完全不經過搜尋引擎與其他網站的瀏覽方式稱為「直接瀏覽」。直接瀏

覽的具體路徑共分兩種，其中一種是新增至瀏覽器的我的最愛之後，直接開啟網站，另一種則

是透過郵件或廣告郵件裡的連結開啟網站。

為了增加舊訪客而設置「新增至我的最愛」按鈕，早期算是很有效的做法，但是最近於社群網

站貼文已成為邀請使用者將自家網站新增至我的最愛的方法之一，所以設置分享按鈕也成為重

要的一環。這部分我們將在「線上瀏覽 4：SNS」裡解說。

若是想在郵件發送程式的郵件裡植入特定商品頁面這類下層頁面網址，網站的網址短一點會比

較好。

除此之外，看著名片或型錄再直接造訪網址的方式雖然很像是直接瀏覽，但其實是離線瀏覽的

方式，而這部分將在「離線瀏覽」的章節裡解說。

︹經營︺從此時開始實踐，S

EO

、流量分析、宣傳

CH

AP

TE

R 4

204

線上瀏覽 2：有機搜尋

使用者從非付費廣告的搜尋結果頁面進入網站的行為稱為「有機搜尋（Organic Search）。若

能增加來自有機搜尋的瀏覽，就能得到較穩定的客戶開發效果。因此，網站的客戶開發首重有

機搜尋。穩定地吸引使用者來訪的另一層意義就是無法在短時間之內使瀏覽量爆增，所以需要

透過付費的關鍵字廣告彌補不足之處。

要使有機搜尋的瀏覽量增加，就必須盡可能製作出與更多關鍵字有關的內容，而內容也必須擁

有能排在搜尋結果前位的品質。

線上瀏覽 3：網路廣告

網路付費廣告有很多類型，例如張貼在外部網站廣告欄的橫幅廣告、於搜尋結果頁面顯示的關

鍵字廣告。

關鍵字廣告的種類也很多，例如「Google Adwords」、或「雅虎奇摩搜尋行銷」。若想在

Google的搜尋結果頁面顯示，可於 Google Adwords註冊，若想於雅虎奇摩搜尋行銷的搜尋

結果面頁顯示，則可於雅虎奇摩搜尋行銷註冊。

購買關鍵字廣告的好處有很多，包含立刻產生效果這點，或是讓自家網站在有機搜尋也無法於

前幾名顯示的搜尋結果頁面顯示，也因為只在自家網站被點擊時才收費，所以能有效控制預

算。此外，點擊後再付費的廣告方式稱為「點擊廣告（PPC：Pay Per Click）」.

關鍵字廣告的缺點在於需要進行細部的設定，也必須測量效果，而且與 SEO的效果一樣，只

能吸引經營者預設的使用者（關鍵字）。

・ 讓自家網站在有機搜尋的情況下，

無法於前幾名顯示的搜尋結果頁面顯示

裡顯示，所以能創造較高的轉換率・ 是點擊後才付費，所以每一分成本都具 有極高的效率

・ 有許多方便的管理工具，可視預算決定 顯示的次數

好處

・ 需要改變設定以及測量效果，

網站的經營變得更加麻煩・ 只能吸引到經營者預設的使用者

缺點

キーワードの関連性

圖 4-6-1 關鍵字廣告的優缺點

︹經營︺從此時開始實踐，S

EO

、流量分析、宣傳

CH

AP

TE

R 4

206

其 他 擁 有 眾 多 使 用 者 的

社 群 媒 體 還 有「LINE」、

「Instagram」、「Pinterest」、

「Google+」、「Mixi」。我們當

然可透過外掛程式在網頁嵌入

所有的社群網站按鈕，但這可

能會讓使用者不知該點選哪一

個按鈕，所以請嵌入必要的按

鈕就好。

只不過，就算有分享按鈕，不

值得分享的內容還是不會被分享。舉例來說，比起產品型錄，報導員工實際使用產品的部落格

內更能在社群媒體或部落格這類外部網站被介紹。

這兩種頁面的差異之處在於「資訊的原創性」以及「發文者的性格」。產品型錄是公開用的東西，

而部落格的報導則給人「只有我才知道的內幕消息」的印象。此外，產品型錄通常無法讓使用者

感受到製作者的想法以及人情味，而部落格的報導則容易讓人感受到發文者的個性與人品。

由於部落格這種社群媒體是一種強力的宣傳武器，所以請積極地在社長與開發者部落格貼出專

屬自家公司的資訊。

來自離線的瀏覽

「來自離線的瀏覽」指的是使用者透過名片、傳單或是雜誌裡的網址直接瀏覽網站的情況。以

前也有人會直接輸入刊登於這類媒體的網站，但近年來，越來越少人這麼做，而是改成搜尋企

業名稱或品牌名稱來搜尋網站。

訂定搜尋引擎對策時，至少要在使用者以企業名稱或品牌名稱搜尋時，讓自家公司的網站排在

搜尋結果的第一順位。若是使用 Facebook這類社群網站宣傳或是在樂天這類購物網站開店

時，這些網頁通常都會被排在搜尋結果的第一順位。在自家網站能穩定地於第一順位顯示之

前，請定期確認排名。

找不到網站等於沒有公信力，所以在以企業名稱或品牌名稱搜尋，自家網站未能排在第一順位

時，也得思考是否別利用名片或傳單大力宣傳網站。

此外，若網站的內部構造還不完善，以企業名稱搜尋很可能會顯示位於首頁下層的頁面。在這

種情況或是希望使用者瀏覽特定頁面時，不妨在名片放上 QR碼，巧妙而確實地將使用者引導

至特定的頁面。

圖 4-6-3 與 SNS建立連繫的外掛程式

保存版、便利的外掛程式集

AP

PE

ND

IX A

216

自訂文章分類管理

Custom Post Type UI

URL

https://ja.wordpress.org/plugins/custom-post-type-ui/

「文章」、「靜態頁面」這類階層稱為「文章分類」，可自訂的文章分類稱為「自訂文章分類」。要自訂文章分類原

本必須在 function.php裡撰寫困難的程式碼，但只要使用這套外掛程式，就能輕鬆地從管理畫面新增自訂的文章分類。

自訂欄位管理

Advanced Custom Fields

URL

https://ja.wordpress.org/plugins/advanced-custom-fields/

WordPress可在文章／靜態頁面新增自訂的輸入欄位，而該輸入欄位稱為「自訂欄位」。要自訂欄位原本必須在 function.php裡撰寫困難的程式碼，但只要使用這套外掛程式，就能輕鬆地從管理畫面新增自訂的文章欄位。

功能擴充

外掛程式套件

Jetpack by WordPress.com

URL

https://ja.wordpress.org/plugins/jetpack/

這是於本章（A.3節）介紹的WordPress.com官方外掛程式套件。在本書介紹的外掛程式之中，有許多類似迴響擴充功能或是人氣文章顯示功能，都是透過 Jetpack使用的。此外，安裝太多外掛程式會使網站的執行速度變慢，所以在使用外掛程式之前，不妨先看看 Jetpack是否具備相同的功能。

問卷

Polldaddy Polls & Ratings

URL

https://ja.wordpress.org/plugins/polldaddy/

這是可在WordPress新增問卷功能與評價功能的外掛程式。這是由經營WordPress的 Automattic公司發佈的外掛程式，與 Jetpack、Akismet一樣，必須具有WordPress.com帳戶才能使用。也有免費的版本，但付費版本解除了使用自訂 CSS這部分的限制。