【硬塞 IG 研究室】編輯自產內容日更貼文我們怎麼辦到?背後產製流程導入公開

自製專題

你是否也注意到這幾個月 INSIDE 重新回歸 IG 平台,更不一樣的是我們重新設計的排版,和過去的風格相當不同,不私藏告訴大家背後的產製流程!
評論
截圖_2021-03-26_下午2_31_49
評論

重啟契機

相信各位讀者都有關注到 INSIDE 在農曆年前重啟我們的 Instagram 帳號!在帳號早期,當時還是以新聞照、產品照作為貼文主要內容,後來由於人力限制,我們暫時停止更新 IG 了一段時間,繼續以其他能直接置入連結導流官網的社群平台為主。

然而,在近幾年以來,我們也關注到台灣 IG 用戶在使用習慣悄悄有了些轉變,在以美照攝影為王的社群平台逐漸開展另一條新道路知識型圖卡內容。

先前專訪電商人妻時她也提到,在兩年前知識型帳號還非常少,過去自己也只是零碎分享 IG 行銷知識,而在去年 2020 年知識型帳號大量崛起,自己的 IG 上也提供更多知識型、工具型等乾貨內容。

長期關注 INSIDE 的讀者應該可以了解到,INSIDE 網站原生內容除了科技時事,也包含廣泛知識型內容,硬塞科技字典、乾貨教學文,要做知識型的帳號並沒有不可行,但是就人力可負擔的工作量來說就需要審慎評估。

運用自產圖文系統 編輯們穩定產出

身為新聞媒體每日需要處理大量的文字內容,若是要經營 IG ,就需要專為此生產圖文內容。這時後端的產製流程就扮演相當重要的角色了!對於目前同時經營網站文章、Podcast 節目、在 Clubhouse 頻繁開房的編輯們來說,究竟是如何穩定更新 IG 呢?

簡單來說,我們與關鍵評論網的設計討論出了一套圖文產製系統,將發文主題、數量固定,這讓我們在重啟兩個月後,追蹤數穩定增加成長率超過 52%

3B573880-D342-4C3D-AC83-AFCB38BBCB56

首先,先給大家一些背景資料,目前 INSIDE 的 IG 動態牆貼文並非由單一社群編輯操刀,是由 INSIDE 編輯部同事們共同製作,一位主編加上四位編輯輪班上陣,各位現在所看到的排版一致、每週涵蓋六大系列主題的 INSIDE IG 是由五個人共同產製,也就是每日貼文都有一位值班編輯。

截圖_2021-03-26_下午2_27_55

確定重啟 IG 這項內容產品後,編輯向集團的設計師尋求協助,溝通素材與設計風格,設計師與 PM 也針對編輯部的痛點找到解決方案,最終引入了團隊專屬的圖文產製流程,現在編輯也不私藏地圖文內容生成幕後公開,提供給在今年仍有意要經營 IG 內容的用戶,或是已在經營想提升產製效率的創作者、品牌。

不是 Canva、AI、PPT 製圖 團隊協作系統大公開

設計師 Yoyo 坦言,在本次要解決圖片產製的問題在初期,讓她相當燒腦,必須解決以下痛點:

  • 每日發佈,順序不固定
    整個系列有六種內容,每日發佈一則,順序不固定,因此我們不能透過固定的排序讓使用者透過畫面找到發文的一致性,做出每日每週固定發文的類型。
  • 一週是一組系列的發文形式
    既然是一週一系列的知識型內容,因此儘管內容不同也要能看出是同系列的貼文,不同週的內容也要有不一樣的變化。
  • 與多位編輯合作
    不同內容由不同的編輯負責,且內容及產量皆不同,有些還有時事需求,因此大大提高預做偷跑的難度。
  • 合作流程複雜
    資訊內容的產出是由多人負責,製作內容也不盡相同,資訊量差異蠻多,以至於合作上溝通成本提高。
  • 圖文製作時間
    碎片化且短暫。

不過挑戰總是能激起更多創意點子,在一陣腦力風暴後,終於讓 Yoyo 終於找到幾乎能做到更好協作模式,答案就是最佳的工具組合: Figma + Google Sheet!也就是說,只要設計師一次性輔助,日後行銷、編輯就可自行運用  Google Sheet 製作圖片,比起簡報軟體或是繪圖軟體,能快速產出系列模板的圖片,且不會有跑版問題,尋找會使用 Figma 的設計夥伴,並參考以下的流程,你也能獲得這套製圖神器!

先說結果,我們做到了

  • 版面能隨著文字內容有所變化
    利用 Figma Auto Layout 的特點讓畫面跟網站一樣會有自適應的彈性。
  • 可以自行切換所需版型
    將各週畫面做成 Components,讓編輯能夠自行選用跟切換。
  • 透過模組化元件讓更動畫面更容易
    只要更動 Main Components 的設計所有相關版型就會一併更新。
  • 文字和圖片透過 plugin 做到連動且能隨時更新
    將 Google Sheet 做為文字及圖片內容主要輸入區域,並透過 Google Sheets Sync 這個 plugin 將每個區域對應的文字做連動設定,也是編輯相對熟悉的使用工具,在編輯上比較不會產生誤區。



以上怎麼辦到的?

以下會詳細介紹如何設定 Google Sheets 跟 Plugin 如何使用(溫馨提醒:不包含 Figma 畫面的製作和設定,所以建議可以直接尋找身邊的 Figma 好手在初期協作,後面就可以事半功倍啦!)

1.將版面做好相關設定

先列出畫面期待做到的需求,再因應設計去規劃,做好 component 和 auto layout 等等相關設定。

1_gCOFxGiI7wU7-bXmQW4w3Q_(1)
設計在繪圖軟體已經設計完成的系列模板導入 Figma,像是我們共有四個主題色(每週輪替)以及六個主題有各自系列模板。

再來,就是關鍵了。

2. 於 plugin 頁面安裝 Google Sheets Sync

安裝完 plugin 後開啟一份準備連動的 Google Sheet 表單。

1_F-HsIf2aSzWluYNFReO5Ug_(1)
Figma 上的 Plugin Google Sheets Sync 是由 David Williames 所開發。

3.透過命名來串接 Google Sheet 表單上相對應的欄位

這個 Plugin 是透過【命名】的方式去將畫面跟表單做串連,因此命名在這裡很重要,有一些【特定的命名規則】也需要去遵守,以下示範最基礎的內容串接方式,適用中、英文的文字和圖片。(附上英文命名規則說明繁中翻譯版本正在與開發者洽談中靜候佳音)

在 Figma 裡面命名你的圖層,並在圖層名之前加上 #
例:圖層名 Cn_Name (在前面加上 #)-> #Cn_Name (見下方圖一)
在 Google Sheets 上建立圖層名的欄位,命名需與圖層相同,並使用粗體作為標示
例:使用 A 列作為對應圖層的欄位,Cn_Name (見下方圖二)

1_-xmshbKKjci4x9DybQNJ5Q_(1)
在 Figma 裡面命名圖層(圖一)
1_sVz697JtbrcZmylUgidljA_(1)
在 Google Sheets 上建立圖層名的欄位(圖二)

4.在 Figma 裡使用 Google Sheets Sync 這個 plugin

請跟著下列步驟指示

  • 先點擊 Open Google Sheets Sync
  • 輸入表單連結[ 請記得開啟權限 — 知道連結的使用者皆可查看
  • 最後按下 Fetch & Sync
1_6kIDRXaUAxeMRk2NyPvtDQ_(1)

5.之後每次更動只要按下 Re-Sync 即可

1_aqEcGGT_Xh-tE-2-hJ0SUA_(1)

編輯實測優化 達最大彈性設定

上面的設定是以「硬塞科技名人語錄」系列為例,不過還有其他頁數與排版比較多的像是「硬塞評論」「硬塞開箱」主題,編輯在實際測試後針對圖文所需的最大彈性空間回報給設計師,設計持續調整優化,編輯著手製作到第三次就達到最彈性的設定,編輯也就不需要再麻煩設計師了!例如在開箱系列中會需要 App 畫面及介紹帳號,就增添了下方的版型:

截圖_2021-04-07_上午11_30_52

另外,像是深度評論文,雖然是轉譯長文內容,字數仍然多於其他主題,就需要容納多字數的版型設計,也在初期由設計師完成排版設計,讓編輯能將圖片連結及文字輸入至 Google Sheet,快速在 Figma 產出圖檔輸出就完成當日圖片製作了!

截圖_2021-04-07_上午11_20_10
編輯操作的 Google Sheet 介面

編輯們雖然不會使用 Figma,但經過 Google Sheet 產出在介面上的圖片幾乎不用更動就可以輸出了,如果想要針對局部更動,仍然可以簡單微調,接著輸出圖檔就完成囉!

截圖_2021-04-07_上午11_39_09
圖文放上 Google Sheet 同步以後就能生成圖卡


免費索取簡報 和設計師展開 IG 新計畫吧

不論你是品牌還是多人協作的創作者帳號,有系列性的內容主題,或許都可以參考,對於初期想要累積內容的帳號來說,可以有效解決 IG 圖文產製的創作門檻,也不用使用千篇一律的免費模板,可針對品牌風格與設計討論出獨具特色的模板。

只要到本篇貼文完成步驟即可獲得此份操作攻略簡報,不用擔心文章弄丟無法查看!

目前 INSIDE 持續努力成長中,希望在資訊爆炸的當今,除了既有的網站文章,以策展內容提供給讀者們更行動便利、更好消化的資訊,對於我們的主題有任何想法都歡迎至 IG 私訊給我們,日後帳號持續壯大,有機會將持續和大家分享我們的 IG 經營筆記,最後,不免工商一下 INSIDE 重新推出全新的六大 IG 主題,週一到週六更新,趕快追蹤起來吧!

核稿編輯:Chris

延伸閱讀:





最新發展: