【網站製作】日系/日文網站設計的迷思、要素與步驟

【網站製作】日系/日文網站設計的迷思、要素與步驟

大家好,我是applemint 代表佐藤。

你有沒有想過做一個日系的網站,或是將你的中文網站翻譯為日文的網站?

如果你的產品與服務的目標客戶是日本人的話,那我相信你有很大得機率需要一個日系、日文的網站。
不過如果想做一個網站只需要將網站上的中文翻譯成日文嗎?我們相信它並沒有這麼簡單。

當你在製作一個日文網站的時候需要考慮到以下三點:

  1. 你的目標用戶就會變成日本人(當然)
  2. 日文語言的非常複雜性
  3. 日本人如何瀏覽網頁與在網站上的活動

在 applemint 我們曾經將一個中文網站翻譯、轉換為日文網站。
這個過程如我們所預期的一樣,我們遇到了許多困難。

在這篇文章中,我首先將點出為什麼將中文網站轉換為日文網站會這麼困難。再來,我會介紹是什麼可以讓一個網站算得上日系網站。
換句話說,我會介紹日系網站的獨特元素。
最後,我會介紹一個我們為一間在台日商製作網站的案例,並且介紹我們是如何用 applemint 的使用者體驗理念來設計這個網站。

為什麼日文這麼困難呢?

如果你曾經學過日文,那你應該能夠理解這個語言的困難之處。
日文包含平假名、片假名與漢字。
我真心佩服曾經從頭開始學日文並精通這個語言的外國人。
如果我不是日本人,我一定不會嘗試學日文。

因為日文的寫作系統包括平假名、片假名、與漢字,這樣會讓一個句子的長度變長。
舉例來說,如果我要用日文與中文寫 “applemint is a digital marketing agency”我們便可以很清楚的看到兩者間的差異。

『applemint はデジタル・マーケティングエージェンシーです。』(日文)

『蘋果薄荷是網路行銷公司』(中文)

上面日文的文字幾乎是中文的兩倍長。
所以這樣會使將中文網頁轉換為日文網頁變得困難。以下是一個例子:

image in 【網站製作】日系/日文網站設計的迷思、要素與步驟

那我現在單純將這張圖的文字翻譯成日文,再把它貼上到同樣一張圖的旁邊,我們來看看這樣做的話結果怎麼樣。

image 1 in 【網站製作】日系/日文網站設計的迷思、要素與步驟

你有注意到這個段落的長度超出了這個圖片的長度嗎?這樣會影響在這個內容以下的所有設計。

如果你只單純的請一個譯者將在網頁上的中文文字內容翻譯為日文,那他們便會照著做。
不過這樣子做的話,翻譯完成的文字長度通常會比原本需要的長度還常,這樣就會需要花時間重新將網頁排版與設計。

所以,當我們要將中文網頁轉換為日文網頁時,我們會注意日文的本質,並小心的翻譯。

日系網站的獨特元素

data656 in 【網站製作】日系/日文網站設計的迷思、要素與步驟

垂直字體

就跟台灣一樣,日本在寫字的時候也常常是由上而下的垂直書寫,特別將這種表現方式運用在首頁標題,或是同一頁的其他副標題上。

它不僅僅是一個能吸引目光的呈現方式,也是另一個運用排版空間的選擇。

螢幕快照 2019 07 18 上午10.12.21 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
bunshun.co.jp
螢幕快照 2019 07 18 上午10.14.35 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
haradaorp.co.jp
螢幕快照 2019 07 18 上午10.15.04 in 【網站製作】日系/日文網站設計的迷思、要素與步驟

全景式的大自然

日本的網頁製作特別喜歡加入大自然的元素,無論是農村、海邊、花草樹木都是製作日系網站所常用的素材。

而且,這些素材在使用上常常會以全景呈現,這樣便可帶給螢幕另一端的使用者一種身歷其境的視覺體驗。

螢幕快照 2019 07 18 上午10.13.43 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
heidee-winery
螢幕快照 2019 07 18 上午10.13.07 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
shin-nyo-do

卡通風格的圖案

漫畫、動畫風靡全球的日本,理所當然的也會將自身平面繪畫的優勢融入在網頁製作中。

因此,在日系的網站中也常見有卡通風格、插畫風格的設計,這樣的使用可以增添網頁設計的趣味,以比較活潑的方式溝通及介紹公司的服務與產品。

螢幕快照 2019 07 18 上午10.16.17 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
yamazaki
螢幕快照 2019 07 18 上午10.33.03 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
sakaimark.co.jp

鮮明的顏色搭配

顏色的運用是日本文化中不可或缺的元素。鮮明色彩的搭配,已經可以在傳統和服各式各樣的顏色搭配中看見。
而將這樣的顏色搭配運用在網頁製作上,可以給使用者帶來相當豐富的視覺體驗。

螢幕快照 2019 07 18 上午10.20.46 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
magic-show.team
螢幕快照 2019 07 18 上午10.24.53 in 【網站製作】日系/日文網站設計的迷思、要素與步驟
shiseido

日文網路使用者目前情況

雖然相較於台灣,日本整體來說比較不會使用手機,但事實上日本近年來使用手機的使用者人數已經超過使用電腦的 (2018年,手機用戶佔全體54.2%,電腦用戶佔全體48.7%)。

另外,20-29歲的年輕世代用手機上網的比率為 87.8%,顯示行動裝置 (手機) 版本的網頁日益重要。

但對於行動裝置版的網頁來說,排版就更重要了,尤其是將中文換成日文的時候,因為日文的字句較中文長,如果是直接翻譯的話,網頁的排版恐怕會有許多格式跑掉的地方。

我們如何為一間日商設計網站給台灣的使用者

karada 656 in 【網站製作】日系/日文網站設計的迷思、要素與步驟

我們最近有幸能為 KARADA 身體工場更新設計他們的網頁。
Here
KARADA 身體工場是一間日本按摩 / 推拿公司。

當我們在更新一個網頁的設計時,我們會採取以下的步驟:

  1. 清楚定義目標
  2. 分析現有的網站
  3. 假設網站的用戶將如何完成客戶所定義的目標
  4. 精確的挑出目標用戶,並具體的選擇網頁元素(字體、顏色、字體大小等等)
  5. 畫製線框稿(wireframe)
  6. 最後佈局 (comprehensive layout)
  7. 開始寫網頁

上述的步驟有可能視情況而改變,不過通常我們會依照這樣的步驟。

數據層面,分析現有的網頁

當我們完整的分析KARADA 身體工場原有的網站,我們發現了幾件有趣的事情。
網站跳出率(bounce rate)與轉換率(conversion rate)幾乎沒有關聯。然後,網頁的點閱數與造訪術語轉換率無關,不過平均造訪時間與轉換率卻有正相關。

預約服務的轉換率非常低,沒有完成轉換的用戶通常在價錢頁面或是服務頁面便會跳出。
另外,KARADA 身體工場網站主要的流量來於是手機與女性用戶。

將以上納入考量,我們假設如果我們能設計一個網頁,且專門為女生用戶用手機在網頁上瀏覽而設計的,我們便能改善轉換率。
因此,我們便從服務頁面的內容修改起。

關於設計

我們仔細的思考了如何設計一個對手機用戶友善的網頁。
我們知道手機用戶在滑動瀏覽的速度較使用電腦瀏覽的用戶快上許多。

我們也發現近期的網頁設計趨勢是更頻繁的使用粗體字作為強調功能,因為這樣比較能抓住用戶的目光,尤其是在他們滑動閱覽速度很快的時候。
我們也特別使用圖是在網頁中,使得用戶就算是在高速滑動瀏覽時也可以立刻知道他們在看什麼。

karada design656 in 【網站製作】日系/日文網站設計的迷思、要素與步驟

關於字體,由於日語和中文的兼容性,我們決定主要使用noto sans。我們認為客戶遲早會要求我們製作日文頁面,如果字體彼此不兼容,則會影響外觀。

關於字體的顏色,我們決定使用#1a1a1a(RGB)。一般來說,許多公司為了避免高對比度而避免使用純黑色來避免高對比度,因為高對比度更容易使我們的眼睛疲勞。

我們以前喜歡使用#333333或灰黑色,因為這些顏色對眼睛來說是比較舒服的,因此這類顏色也在許多與新聞相關的網站中出現。當然,我們需要訪客在KARADA網站上花時間閱覽內容,但我們認為灰黑色不足以讓用戶信賴網站上的內容,所以我們最終採用了更黑的顏色。

karada design3 656 in 【網站製作】日系/日文網站設計的迷思、要素與步驟

最後

我們之前主要關注數位廣告操作,因為這是我們看到需求的地方。
不幸的是,我們的大多數客戶忽視了這些數位廣告投放目標的重要性,並且很難獲得轉換。
我們知道製作網站的成本很高。
我們也知道許多設計公司不希望製作網站,因為製作網站的費用非常令人害怕,許多公司都試圖降低製作網站的預算。
因此,我們看到許多廣告客戶陷入負面循環,他們繼續在數位廣告上花費大量資金,但ROA(廣告投資報酬率)很低。

因此我們花相當多的時間認真設計UX / UI。
也因為我們認真看待UX / UI,我們可能不會比其他公司便宜。

如果您希望在台灣製作讓用戶滿意的日文網站,請與我們聯繫

從這裡聯絡 applemint!

Leo Sato 佐藤峻

相關文章

與我們聯繫