CSS、HTML、JavaScript分別是幹嘛的？寫程式跟行銷有什麼關聯？

《行銷人》編輯群 行銷趨勢
Tagged: 斜槓青年 程式入門 自學寫程式

｜本文摘自《大是文化》 一書， 日比野 新 著；黃立萍 譯。｜首圖／Photo by Helena Lopes from Pexels

現今，斜槓的種類越來越多，一個月多賺新臺幣兩、三萬元以上的人也不少。但另一方面，應該也有很多人不知道該做什麼才好。
在此，我要介紹幾個一般認為比較典型的型態，並且和程式設計相比較。

成為斜槓青年的典型選擇

1.  聯盟行銷
所謂聯盟行銷，是指「成果報酬型的廣告」。其機制是將特定的商品、服務等廣告刊載於網頁和部落格文章上，再依據點閱率賺取收益。
好處是雖然能輕易開始，但一個月可賺到豐厚收入的人少之又少，也有很多人連新臺幣兩、三百元也賺不到，就脫離這一行。此外，據說要需要花上半年左右的時間，才能達到收入穩定的程度。

2. 網路寫手
網路寫手的案件很多，但是，單價卻低廉得讓人驚訝，有些案件「撰寫3,000字的報導只拿新臺幣一百多元」。雖然只要累積成績，單價也會提高，但因為競爭激烈，做起來也沒那麼容易。

3. 轉賣
所謂轉賣，就是以低價買進商品，再透過Amazon、樂天、二手商品交易平臺Mercari（按：類似臺灣的「露天拍賣」）等網站高價賣出，藉以獲利。現金流動性高、可以在喜歡的時間做，這些都是優勢。
然而，轉賣不僅需要空間來放置庫存商品，還需要自行進貨、上架、包貨、寄送，可說是體力活兒。

那麼，以程式設計為另一種斜槓又如何？

首先，由於資訊科技人才不足，需求可說是相當多。根據日本經濟產業省的調查顯示，2016年當時IT人才的欠缺人數，竟高達約17萬人。不僅如此，該調查估計，到了2020年，還會來到兩倍以上，約37萬人；到了2030年，更會增加為2020年的兩倍以上，約為79萬人。

因此，我們可以預料，程式設計的人才需求，在未來也將持續攀升。當然，如果供給少於需求的情況持續下去，相信接案單價將會持續成長，變得更好賺錢。

2020年開始，程式設計已成為日本小學生的必修課（按：臺灣108課綱也將程式教育納入中學課程），因此若自己能夠理解，也可以教導孩子。不僅如此，只要學會程式設計，就能具備邏輯思考、解決問題的能力，相信在職場上也會很有幫助。

登陸頁面是什麼？想想廣告傳單

在網路上銷售、介紹商品或服務時，登陸頁面具有「廣告傳單的功能」。
登陸頁面大致上可分為四個部分。只要先了解架構，等你接到委託案之後，就更能理解製作的內容了。

那麼，接下來讓我們看看各個部分的相關內容。

廣告標語（catch copy）

有了廣告標語，才能引發瀏覽者的興趣，讓他們繼續閱讀網頁的正文。

正文（body copy）

先讓商品與讀者內心的問題有所共鳴，再介紹自己提供的解決對策。這些要素，是為了讓閱覽者認為，商家介紹的商品或服務「正好能解決我的煩惱」。

結論文案（closing）

結論文案是讓閱覽者毫不遲疑，立刻下單購買商品或服務的關鍵。

呼籲字句（Call To Action）

讓閱覽者在閱讀結尾文案之後，馬上採取行動、下單購買。具體而言，就是讓閱覽者「按下按鈕，跳轉到購買頁面」。

網頁的架構，也可以套用在銷售文案上

以上這些規則不僅有助於設計登陸頁面，未來如果你想要銷售物品或服務時，只要記住這四個架構，應該會很有幫助。

沒有萬用的頁面，得隨時更新改善

正如前一篇所說的，登陸頁面是網路的廣告傳單。因應季節、流行、性別、年齡，廣告傳單要引發興趣的重點也會隨之轉變。換言之，即使是這個月十分受歡迎的頁面，到了下個月也可能會讓商品賣不出去。因此，不可能會有「已完成、這樣就做完了」的時候。

維持速度感、不斷進行PDCA循環

一個好的登陸頁面，最需要的其實是「速度感」。就像如果要知道廣告傳單的效果如何，就只能試著發出去、再看看結果。正因如此，我們需要不斷改善、準備，並反覆進行「製作頁面→推出頁面→檢視成果→改善」的步驟，請參照下頁圖表。（編按：PDCA，是由Plan、Do、Check、Act 四個單字的字首所組成。是指透過「規劃、執行、檢查、行動」四個步驟，以確保目標達成的方法。）

  • 改變廣告標語。
  • 改變圖像。
  • 改變呼籲字句的按鈕顏色。
  • 改變呼籲字句的文案。
  • 改變廣告標語之後的文章內容。

可以說，登陸頁面有許多像這類應該持續改善的細節。尤其是要藉由改變廣告標語或圖像，才能讓閱覽者產生與以往截然不同的反應。

網站版型設計的基礎語言「CSS」

從這個部分開始，終於要開始設計網頁的版型囉！首先讓我們了解一下網頁版型設計所使用的程式語言！

CSS的功能，在於網站視覺上的版型設計

前面學習的HTML，是用來指定結構和文字的程式語言。

相對於HTML，本章要解說的程式語言「CSS」則是指定網站（也包含登陸頁面）的「版型設計」。舉例來說，背景色、留白、文字的字體大小和顏色，圖像的大小、行距的指定等。藉由使用CSS，就能製作出鮮明、容易瀏覽、引發人們關注的網站。
CSS是「Cascading Style Sheets」（階層式樣式表）的縮寫，也經常稱為「樣式表」（Style Sheets）。

雖然CSS在網路黎明期（1996 年）就已經存在，但當時尚未開始活躍。理由是，當時的HTML裡，就具備了版型設計的標籤，「利用CSS將版型設計分離出來」的概念還未深植人心。

然而到了今天，因為用CSS將版型設計從HTML分離出來的緣故，因此即使完全不改變HTML，也可望能輕鬆的改變網頁版型設計。

為什麼需要CSS？因為瀏覽網頁的裝置多，得隨時改變

再簡單一點來說，請想像一下，在電腦畫面上瀏覽網頁，以及在手機畫面上瀏覽網頁的情形。即使是瀏覽同一個頁面，設計應該都要有所變化。這也代表，我們不必改變HTML的文書結構來應付不同的版型需求，而是藉由分離出來的設計部分——「CSS」來切換用於電腦和手機上的網頁版型。

就像這樣，將「文書的結構」和「版型的設計」分離。我們日常生活中使用的載具（個人電腦、手機、平板電腦之類的電子儀器）種類增加得越多，能夠只改變版型、不改變文書結構的技術就越受到關注。

CSS的規格和HTML一樣，都有版本之分。如2.1、2.2、3等，藉由多次改版，不僅增加新功能，也會陸持續去除不合時宜的功能。
目前的最新版本是CSS3。從今而後，相信CSS也會持續升級，設計的幅度亦將持續拓展。

用JavaScript增添「動作」

在第三、四章解說過的HTML和CSS，都是稱為「標記式語言」的技術。從本章開始，就讓我們正式學習程式設計語言吧！

何謂JavaScript？

在程式語言當中，容易學習、也能應用在登陸頁面的技術，就是JavaScript。

JavaScript 可以在網頁頁面中增添動作。比方說「只要輸入郵遞區號，就會自動顯示地址」、「一點擊按鈕，就會瞬間變更商品圖像」等這類內容。各位應該都曾在網購商店等頁面體驗吧。

此外，JavaScript 是瀏覽器的內建語言之一，因此和製作登陸頁面相同，只要有瀏覽器和文字編輯器，無論使用Windows、Mac 都無妨，都可以立刻開始學習。而且，我們不只能簡單的學會、使用JavaScript，也可以用於操作EXCEL、WORD等軟體，或是讓每日的業務自動化，因此不僅能應用在網頁上，如果目的是商務場合上的工作自動化，也能用JavaScript 來執行。

學習JavaScript 的機會，或許能讓我們開始學會，對應於AI、IoT 時代所需的「自動化」的技術。
學習JavaScript 時的重點，就是「總之先運作看看」。雖然一聽到寫程式，我們就很容易先想到邏輯思考、理論這些東西，但重點在於一開始要先讓程式運作、先了解電腦的習性。

為了「哄騙」不像人類那樣靈活的電腦，就要充分解釋、好讓它們能正確理解指令，此時我們就需要「一步一步貼近它」。我覺得「手把手指導」這個詞彙真的相當恰當。只要某一次指導電腦細節的部分（寫了程式之後），從第二次開始，電腦就擅長做相同的事了。不過，第一次真的很辛苦。

先別認為「程式是個麻煩的東西」，若是懷著「透過語言來培育它」的心情，就能透過程式設計和電腦打好關係。

如果AI進化得更強大，或許終有一天，當電腦感覺到人類表達得模糊不清時，能先行做出反應，藉由互動來了解人類意圖。然而，這個未來離我們還很遙遠。現在，我們人類還需要手把手的帶領電腦，利用「程式語言」──這個電腦能理解的語言，來和它們對話。

更多行銷人報導
3年營收成長30%：星巴克圈粉全世界的原因，其實不是咖啡
從Apple的秋季發佈會看「蘋果式簡報」的 4 大技巧

｜本文摘自《大是文化》 一書， 日比野 新 著；黃立萍 譯。｜責任編輯：曲潔君