【台湾繁体字ウェブサイト制作ケーススタディ】 KA・RA・DA ファクトリー様

【台湾繁体字ウェブサイト制作ケーススタディ】 KA・RA・DA ファクトリー様

こんにちは!台湾で、デジタルマーケティングやウェブサイトの制作を手がける applemint 代表の佐藤(@slamdunk772) です。

表題にある通り、僕らは2019年にカラダファクトリー様のウェブサイト刷新のお手伝いを行いました。ウェブサイトをリニューアルした際に一番最悪なのが、予約が減ることですが、その後予約が減る様子はなく、むしろ効果は上がりました(本当です😄)

新 KA・RA・DA factory 様ウェブサイト

このプロジェクトはクライアント様のリクエストで、企画から制作まで全てを applemint で引き受けました。2019年以前の弊社の制作は、すでにある日本語サイトを中国語にするケースや、クライアント様がすでに企画を持っていて、それを形にするケースが多かったのですが、今回は全て自分たちで行いました。

そこで今回は applemint がどのような工程でウェブサイトを制作し、デザインはどんな点を意識したか、台湾でウェブサイトを作るときの注意点は何か、という点についてお話したいと思います。

制作工程その1. 分析

website analysis

今の時代、ウェブサイトを持っていない会社はほぼありません。applemint ではサイトをリニューアルする際、必ず旧サイトのデータを分析します。カラダファクトリー様も例外ではありません。

以下はカラダファクトリー様の旧サイトを分析した結果、得られた事象の一部です。

旧サイトの分析結果

・予約は圧倒的に電話が多いこと
・価格ページの閲覧が多かったこと
・エンゲージメントと予約率に相関があること
・女性訪問者が多いこと
・モバイルの流入が7割以上あった

これらの分析結果に対して旧サイトはいくつかの問題を抱えていました。その一例をご紹介します。

旧サイトの問題点

1. 予約ボタンを押すと予約ページに行くこと
2. 予約ページはPCでは予約はしやすいがモバイルは非常にしにくいこと
3. デザインが全然女性目線ではなかったこと

そこで僕らは以下の仮説を立てました:

applemint の仮説

1. 電話の予約導線をもっと見える化すれば、予約が増えるのではないか?
2. 価格をコースページに入れれば、価格ページにいく煩わしさがなくなり UX が向上するのではないか?
3. 回遊率を上げ、エンゲージメントをあげれば予約率が上がるのではないか?

つまり、分析の結果リニューアルするサイトでは『モバイルで予約をしやすい事』と、『電話予約がしやすい事』、『女性目線』をとにかく意識しました。その他にも、価格ページを各コースページ内に入れ、色んなコースに興味を持ってもらう事で回遊率を上げることを意識しました。

leo (佐藤峻)

今回はサイトリニューアルの目的が「予約率アップ」だったので、どうすれば予約率がアップするか、根拠のある仮説を立てることに時間をかけました!

2022年以降の分析の注意点

今回の分析で弊社は Google Analytics を見て約2-3年のデータを参照しました。今後 Google Analytics ではデータ保存期間がデフォルトだと2ヶ月です。来年の7月には現在の Google analytics は廃止になりますので、今からの導入をお勧めします。また設定はデフォルトの2ヶ月から26ヶ月への変更を強くお勧めします。

制作工程その2. 要素の決定と骨組み

顧客とのヒアリングで目的を明確にし、分析を通してターゲットを理解してボトルネックの仮説を立てたら今度はそれを形にします。家で例えると設計図の部分に当たります。また、設計図を書く前後に家の基礎となる『要素』を決めます。

この要素とは例えるなら家を木造にするか、コンクリートにするかという決定です。ウェブサイトだとどんなフォントを使うか、そのフォントの色は何か、フォントの大きさはどうするか、色の構成はどうするか、といった部分をターゲットによって変えます。

まずフォントは Noto Sans CJK TC を選びました。これは Google が出している無償フォントで日本語も中国語も英語もあります。

カラダファクトリーさんは日本の会社なので、いつ何時繁体字のサイトに日本語を入れて欲しいと言われるかわかりません。そんな時、日本語↔︎中国語で互換性のないフォントを使うと文字化けします。

フォントは他にも選択肢はあったと思いますが、日本本社の採用サイトも Noto Sans の日本語版である Noto Sans CJK JPを使っていたので Noto Sans に決めました。

フォントカラーは #1a1a1a と少々黒に偏った色にしました。

今まで applemint は目に比較的に優しい灰色に近い黒を好んで使っていましたが、カラダファクトリーさんの会社カラーであるオレンジの背景に対して灰色に近い黒を使うと、コントラストが足りないと感じました。

leo (佐藤峻)

新規流入者に対して信頼してもらいたいという気持ちもあったので、オレンジとコントラストの高い少し強めの黒を選びました。

制作工程その3. デザイン

ワイヤーを作成した後、早速デザインに入りました。デザインで意識したのはモバイルフレンドリーです。台湾ではデジタル広告を行うと流入の 80-90% はモバイルからになります。

そのため、弊社では予約率を増やすためには、デスクトップをただレスポンシブにするのではなく、モバイルに特化したウェブサイトを作るべきだと考えました。デスクトップのデザインは捨てた訳ではありませんが、とにかくモバイルに優しいサイトを心がけました。

ではモバイルフレンドリーとはどういうデザインでしょうか?近年のデザインの傾向を見ると『太字』、『アイコンの使用』、『モバイル用のカスタマイズ』が鍵となると思いました。

太字、アイコンの使用、カスタマイズ

僕は以前某クライアントの LP の訂正的な調査をした際、ランダムに4-5名の方にご協力を頂き、それらのユーザーが LP をどのように使うか見て、その様子をビデオでとったことがあります。

そのクライアントのターゲットである30-40代の女性は非常に長い LP を 30-40秒ほどの速さでスクロールしていたのが印象的でした。また、モバイルだと画像や太字、イラスト部分では一瞬指が止まることも確認できました。

そこで、 applemint では要所に強調したい部分を太字で表示し、各セクションをイラストで分けて、スクロールする指を止める仕掛けを意識しました。目指したのは読まれる/見られるコンテンツです。

leo (佐藤峻)

ちなみに以前60代の方への調査をした際は、スクロールスピードが一気に落ちて一つのLP を見るのに 1.5分ぐらいかけてました。

制作工程その4. 確認、確認、確認

こうして分析を基にした設計図と色付け(デザイン)を終え、クライアントにチェックをしてもらったらコーディング作業に入ります。建築で言うと実際の工事の部分にあたります。

公開前のこのコーディングはとにかく確認の連続です。誤植や表示の確認はもちろん、モバイル機器でどのように見えるかという確認を徹底的にします。なぜそんなことをしなければいけないか?少し古いデータですがこちらをご覧ください。

これは Google Analytics で見た、某クライアントのデバイス別流入者の情報です。ご覧のように、こんなにも異なる解像度(横幅 x 縦幅) のデバイスからユーザーが流入しているのがわかります。残念ながらこれらの解像度のデバイスを全て持っているわけではないので、一つ一つ確認することは不可能ですが、弊社では iphone11、iphone mini、Galaxy、を使って主要な画面の解像度での表示を確認しています。

弊社は社員が全員 iphone なので、ウェブサイト制作後に確認をするためだけにアンドロイドの Galaxy 携帯を購入しました。

結果は?

冒頭でもお伝えした通り、予約数は落ちることはなく、その後伸びました。2020年はカラダファクトリーさんは台湾に進出してから過去最高益も記録しました。また、幸いにも旧サイトにはなかったヨガ教室と産後コース、小顔コースのお問い合わせが増えている話を聞きました。

予想外に予約が増えたことで、スタッフをもっと補充したいというニーズから採用ページも充実化させました。

きちんと分析を行い、事象に対して仮説を立てて作ればウェブサイトは改善できます。残念ながら分析をきちんと行わず、ただただ綺麗なサイトを作る制作会社はたくさんいます。今の時代ウェブサイトはいくらでもテンプレートがあるので綺麗に作る事は可能です。

しかし applemint ではきちんと分析し、仮説を基にウェブサイトの制作をするため効果が出ると思っています。

台湾でウェブサイトを作るときの注意点

最後に台湾でウェブサイトを制作する上での注意点をいくつかお伝えしてこのブログを締めます。

まず、必ずモバイルフレンドリーを意識してください。日本の企業のクライアントの方は、どうしてもデスクトップのデザインばかり意識しますが、台湾ではデスクトップからの流入比率は年々減少しています。

もしもデザイン会社に台湾人向けの繁体字のウェブサイトを頼む場合は、そのデザイン会社に対して、モバイルデザインに関してどんなことを意識しているか聞いてみてください。もしも特に考えがなければ、違うデザイン会社に委託することを再考した方がいいかもしれません。それぐらい台湾ではモバイルを意識したデザインが重要です。

次に、なるべくローディングスピードを抑えるよう心がけてください。画像ファイルは一般的にローディングへの負荷が重いのに、未だに必要以上に画像ファイルを作っている会社が見られます。ちょっと専門的な言葉になりますが、ベクターファイルを使用したり、画像ファイルの使用を極力控えるといいと思います。

このブログを読んで弊社のウェブサイト制作に興味を持った方はコチラからご連絡お願いいたします。決して期待を裏切らないウェブサイト制作の自信があります。

applemintへのご相談やご連絡はこちらから!

Leo Sato 佐藤峻

関連ブログ

にお問い合わせ