主視覺區塊・首屏畫面

網站首屏（主視覺區塊）要放什麼？

主視覺區塊只要放進三件事就夠了：「這裡是做什麼的」「為什麼要選這裡」「現在可以做什麼」。客人光看首屏，就要能決定要繼續看還是直接聯絡。

放得多不代表比較好。元素越多，每一個就越不顯眼，最好先分清楚哪些一定要放、哪些可以往下移。

放上行業和地區，是為了透過搜尋進來的客人。搜尋「望遠洞蛋糕」進來的客人，在首屏看到同樣的字，就會確定自己找對地方了。

客人真的只看首屏就做判斷嗎？

客人不是只看首屏，但停留最久的確實是首屏。尼爾森諾曼集團在2018年發表的眼動追蹤研究中，瀏覽時間約有57%集中在捲動之前的區域。

同一份研究中，前兩個畫面就占了瀏覽時間的約74%。這表示客人雖然會往下捲，但越往下看得越不仔細。

所以首屏也扮演著提供「繼續往下看的理由」的角色。客人要先在首屏確定這就是自己要找的店，才會讀到下方的價格・評價。

但也不必把所有東西都塞進首屏。客人只要看到往下的理由就會捲動，所以讓首屏底部稍微露出下一段內容，客人自然會接著看下去。

主視覺標語要怎麼寫？

主視覺標語的基本原則，是用客人搜尋時會用的字，在一句話裡寫出行業・地區・優勢。比起華麗的修辭，一看就懂的說法更容易被讀進去。

照以下順序寫寫看，大部分店家都能寫出堪用的標語。不要想一開始就寫得完美，先寫兩三個來比較。

想在一句話裡塞進所有優點，句子會變長，結果什麼都記不住。如果優點很多，就只把最有自信的一個放在首屏，其他的在下方區塊一項項說明。

標語定案後，最好讓搜尋結果中顯示的頁面標題和首屏標語用字一致。搜尋時看到的字和首屏上的字一樣，客人就比較不會混淆。

1. 01寫下客人找您的店時可能會搜尋的字詞。（例如「望遠洞 訂蛋糕」「弘大 層次剪」）
2. 02從中做出一個包含行業和地區的簡短大標題。
3. 03再加上一行小說明，寫出一個和別家店不同的地方。（例如「可當天訂購」「1:1諮詢後再施作」）
4. 04把按鈕文字定為客人要做的行動。（例如「詢問蛋糕預訂」「查看空檔」）
5. 05放到手機畫面上看看，如果換行太多就刪減字數。
6. 06給不認識店家的人看5秒，問他：「你覺得這裡是做什麼的？」

首屏放大圖或影片，網站會變慢嗎？

沒有處理的話會變慢。首屏的大圖通常是畫面中最大的元素，會直接反映在Google衡量載入速度的指標LCP（最大內容繪製時間）上。

依照web.dev的說明，LCP在2.5秒以下會被視為「良好」。基本做法是把首屏照片依螢幕大小縮小、轉換成輕量格式，並且不要對它套用延遲載入。

手機會比電腦慢，行動網路會比Wi-Fi慢。確認首屏時，關掉Wi-Fi直接用手機打開，最接近客人的實際情況。

背景影片能營造氛圍，但檔案大，在手機行動網路下是負擔。即使要用，也要做短一點，並準備好影片載入前顯示的靜態照片。

不同行業的首屏要怎麼安排？

每個行業的客人想在首屏確認的東西都不同，照片和按鈕也要配合挑選。以下是小店家常用的配置。

照片盡量使用在店裡實際拍攝的。圖庫網站的照片雖然整齊，但客人上門時發現樣子不同，反而會降低信任。

在手機畫面上，直式長照片幾乎會占滿整個畫面，文字和按鈕很容易被擠下去。電腦版和手機版照片分別裁切好，兩種畫面都會很整齊。

首屏標語和照片也可以配合季節或活動更換。不過每次更換都要拜託製作公司會很麻煩，最好事先確認能不能在管理後台自行更換。

• 咖啡廳：空間或招牌飲品照片、「延南洞手沖咖啡廳・每天10點~22點」、「導航」按鈕。
• 美髮店：實際作品照片、「合井站3分鐘・專做低損傷燙髮」、「依設計師預約」按鈕。
• 工作室：上課中的手部照片、「週末陶藝一日體驗課」、「查看本月課表」按鈕。
• 網路銷售：主打商品照片、「親手烘烤的手工穀麥・全國宅配」、「去看商品」按鈕。

首屏最常犯的錯誤有哪些？

最常見的錯誤，是只放一張大大的氛圍照片，卻把文字拿掉。老闆熟悉自己的店，覺得只有照片也夠了，但第一次來的客人很難馬上看出這是什麼店。

輪播圖自動切換、重要標語一下就消失，也是常見的問題。電腦上看起來沒問題，手機上按鈕卻被擠到畫面下方的情況也很多，一定要用手機確認。

一進站就跳出的彈出視窗也要小心。活動視窗遮住畫面，客人還沒看到店家介紹就忙著關視窗，Google也把遮住內容的彈出視窗列為不良網頁體驗之一。

用一張照片加標語開場，取代輪播圖，管理起來也比較簡單。想展示多張照片的話，可以在首屏下方另外放一個相簿區塊。

看首屏設計稿時，要問製作公司什麼？

拿到設計稿後，問製作公司以下四件事。以手機畫面為準得到答案，上線後要修改的地方就會變少。

• 在手機首屏上，不用捲動就看得到按鈕嗎？
• 會幫忙確認首屏照片的檔案大小和載入速度嗎？
• 照片上的文字在明亮的照片上也清楚易讀嗎？
• 如果使用輪播圖，客人能自己暫停或切換嗎？