見出し画像

サイトを自動で多言語生成してくれるツール【WOVN.io】の特徴と仕組み紹介

TAM UX/UI

こんにちは。TAM UX/UIチーム ディレクターの平上です。
今回グローバルサイトにて、Webサイト多言語化ツール「WOVN（ウォーブン）」を導入しました。その実装方法や仕組みをご紹介します。日本語から簡単に、かつ低コストで翻訳できる仕組みがないか探している方に向けた情報をお伝えできればと思います。

＜ご依頼いただいた背景＞
・Webサイト多言語化ツールの選定はクライアント側でされており、WOVN導入は確定していた。
・日本語のコーポレートサイトを海外向けのデザインに調整し、別のドメインで8カ国語展開したい。※今回はページ作成時にWOVNの仕組みを取り入れましたが、公開済みのページに追加することも可能です。


WOVNを選んだ理由

日本語から外国語のサイトを作成する際は、用意した日本語原稿を必要な言語分に「翻訳」し、国ごとのサイトを「作成」する必要が出てしまいます。ですが、WOVNを使用すると、日本語のページを作成するだけで、選択した言語に自動翻訳されたページを公開することができます。

しかも、今回は上場企業のクライアントということもあり、翻訳原稿のクオリティ担保は必須でしたが、WOVN側で自動翻訳されたテキストはWOVN管理画面から手動で修正することができ、間違った翻訳がそのまま公開される危険性を防ぐことができます。（詳しくは、翻訳の調整にて紹介します）

WOVNのおすすめポイント

  1. サイトを多言語展開する際のコスト削減ができる

  2. 自動翻訳されたテキストを、手作業で調整できる

  3. 海外に対してもSEO対策ができる

  4. WOVN担当者さんのサポート体制が手厚い

導入方法

今回は、日本語ページのphpファイルを作成し、WOVNの仕組みを使って英語など数言語に翻訳を実施しました。WOVNの導入にはいくつか方法がありますが、今回はクライアントとWOVN担当者間で相談され、ライブラリ方式（単純方式、パス形式）に決まりました。

ライブラリ方式に決定した理由としては「翻訳後ページが検索サイトに掲載される（海外向けのSEO対策ができる）」ことだそうです。例えば、スクリプト方式では検索エンジンは翻訳ページの存在を知ることができず検索結果にページが表示されません。

続いて、主に制作会社側が実施する3つの内容を紹介します。

  1. wovn.phpフォルダをサイトのドキュメントルートに配置する

  2. wovn.iniファイルを編集し、サイトのドキュメントルートに配置する

  3. PHP の require_once 文をファイルの先頭に挿入する（単純方式）

※内容を認識したり調査したりする工数は別として、私たちのプロジェクトでは1時間もかからずできる作業でした。

また、言語切り替えのプルダウンは、デフォルトで用意されているものもありますが、サイト独自のものにしたい場合はウィジェットデザインを使うこともできます。

WOVNの仕組み

サーバーについて

クライアントのサーバー内にアップしたphpファイルは、WOVNサーバー内で/en/配下に生成されます。
例えば　https://www.tam-tam.co.jp/index.html　のページを英語翻訳した場合は、https://www.tam-tam.co.jp/en/index.html のURLへと変更になります。

もう少し詳細を説明すると、
phpファイルのテキスト情報はWOVNサーバー内で、テキストに対して翻訳をかけページができる、ユーザーにはそのページを表示するという処理がされています。
ですので、URLとしてはwww.tam-tam.co.jpサーバ内にあるように見えるのですが、実際はWOVNのサーバーにファイルが存在します。

WOVN CDNに、翻訳文章のファイルをリクエストします

ドメインについて

一般的に、サイトを作る際はテスト環境で作成して確認してから本番環境へ公開すると思います。WOVNでは、本番環境のドメイン（基本ドメイン）の他にサブドメイン（許可ドメイン）を設定でき、すべてを同じウェブサイトとして認識します。

アカウントについて

全ての権限を持ったアカウントと、テキストの編集権限のみ持ったアカウントが用意されています。会社内や、ページ更新を依頼する制作会社との間で分けて管理できます。

翻訳の調整

前述の通り、WOVNでは管理画面で各言語の調整を行えるので、翻訳のクオリティ担保することができます。今回調整した内容としては、下記の3点です。

  1. 人物やブランドの名前、製品名などを翻訳されないように設定
    ※翻訳抽出無視設定を使用

  2. 画像内に入っているテキストは自動翻訳されないので、必要な言語分の画像を作成し、差し替え対応

  3. 全文を見直し、正しい翻訳に調整

※今回はドメイン全体に設定されている共通ヘッダーフッターを使用したので、共有エリアも翻訳抽出無視設定を実施しました。

他にも、次の通りCSSの出し分けで調整対応いたしました。

  • バナーなど、一部コンテンツ出し分け作業

  • 現地語にした際に行数が長くなってしまい、表示が崩れてしまった箇所の調整作業

テキストの差し替えは、管理画面でも設定できますが、表示されたページ上でも設定することができます。

管理画面上でテキストの差し替えをしている様子
表示されたページを見ながらテキストや画像の差し替え作業ができるので、普段ソースコードを触らない人でも簡単です！

下書き保存/プレビュー機能も備わっているので、公開後にテキストを調整する時も、順を追って対応することができます。

最後に

WOVN導入の依頼をいただいたときは、どのように進めれば良いか、どんな対応が必要なのか全く分からず不安でしたが、WOVN担当者さんが手厚くサポートしてくれ、質問にもスピーディに対応いただけたので、制作会社側も安心して進められました。

TAM はWebサービス、業務アプリなどの新しい価値を作り出すサポートしています！お気軽にご相談ください。

平上 依未理 / Emiri Hiragami
ディレクター
学生の頃に経験したTAMでのインターンシップを経て、会社の雰囲気や仕事内容に魅力を感じ2019年に新卒で入社。webサイトやコンテンツの運用を中心に行いながら、新規サイトの立ち上げにも少しずつ参加しています。

この記事が気に入ったらサポートをしてみませんか？