ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble で作った Webアプリをかんたんに多言語対応する方法(Weglot)

f:id:toka-xel:20201012161926p:plain

みなさんこんにちは!

みなさんのホームページを多言語ウェブサイトにしたいと思った事はありませんか?

ネットを通じて世界中とつながることができるようになった今、ウェブサイトを多言語化できれば、ビジネスチャンスに国境がなくなり、個人的なネットワークも広がりますよね。新しいコミュニティへの扉も開かれます。

そうは言っても外国語の習得には時間がかかる・・・そんな方に今日は多言語プラグインの一つとしてWeglotをご紹介します。

Weglotとは?

Weglotはウェブサイトを複数の言語に翻訳する強力な言語翻訳ツールです。コードを実行しなくても、サイトを数分で多言語ウェブサイトに翻訳できます。100以上の言語をサポートしています。

対応しているノーコードプラットフォームも多く(Jimdo, Magento, Prestashop, Shopfy, Squarespace, Webflow, Weebly, Wix, WordPress)、そしてついにBubbleでも使えるようになりました!

Weglotを使うメリット

簡単!

なんといってもセットアップが驚くほど簡単です。5分もかからないかもしれません。

メンテナンス

Weglotを使用すると、更新でウェブサイトが壊れる心配がありません。Weglotが常にバックアップサポートをしています。これは、他の多言語翻訳ツールとWeglotの大きな違いです。

SEOに対応している

Weglotは、多言語サイトに関するGoogleのベストプラクティスに準拠した組み込みのSEOルールを自動的に適用しています。ユーザーがインデックスを作成する必要はありません。

翻訳の精度

他の翻訳ツールと異なり、Weglotはユーザーが翻訳を制御できます。他言語ページを急ぐ場合は機械翻訳を使用してサイトを数分で翻訳します。より正確な翻訳をしたい場合は個別にオプトアウトすることもできます。ブランド名や製品名などを翻訳しないように翻訳ルールを自分で設定することもできます。

100以上の言語ペアに対応

Weglotは100以上の言語に対応しており、全ての言語ペアで利用可能です。

さて、Weglotの魅力をご紹介させていただいたところで、実際のWeglotの利用をご紹介致します!

Weglotのサインアップ方法

まずはWeglotのHPを訪れてください。

weglot.com

ノーコードラボからの招待者としてサインアップしていただく事もできます。

dashboard.weglot.com

『無料トライアル』または『無料で体験する』をクリックしてください。

f:id:KiyokoT:20201009124530p:plain

Emailアドレスとパスワードの設定をして、利用規約への同意(必須)、Weglotからのお知らせを受け取るかどうか(オプショナル)に☑を入れ、設定したEmailからコンファームすればサインアップ完了です!

f:id:KiyokoT:20201009124810p:plain

Weglotのプライスプラン

無料プランもありますが、ビジネスユーズを検討するならやっぱり 有料プランが必要です。料金プランはとてもシンプルです。 年契約をすると2か月無料となります。

f:id:KiyokoT:20201009130726p:plain

weglot.com

実際にWeglotを使ってみよう!

では実際に使ってみましょう。といっても、Weglotのチュートリアルに従ってセットアップするだけです。

weglot.com

今回は、Bubbleで構築されたノーコードラボのサイトを翻訳したいと思います。

www.nocodelab.jp

ログインすると、こんなページが出てきます。プロジェクトの名前をつけて、Webサイトが利用しているツールを選択します(Bubbleはまだリストに入っていないので『Other』を選択してください)

f:id:KiyokoT:20201009140801p:plain

ドメインURL、サイト内の言語、翻訳したい言語を選択します。

f:id:KiyokoT:20201009142710p:plain

Webサイト側で、DNSの設定をします。

f:id:KiyokoT:20201009142848p:plain

翻訳開始です。しばらくお待ちください。その間にJavascriptコードをコピーします。

f:id:KiyokoT:20201009142958p:plain

先程のコピーしたJavascriptのスニペットをBubble側にペーストします。

Webサイトを作成したBubbleのアプリケーションを立ち上げて、SettingsのSEO/metatagsのタブへ行き、Script/metatags in headerに、Javascriptをペーストします。

f:id:KiyokoT:20201009143532p:plain

翻訳完了です!!が、もう一つ大切な設定があります。

コンテンツがダイナミックコンテンツの場合(今回の場合、テキスト情報は皆、div class=“content”の中に入っています。これはBubbleの仕様のようで、Bubbleで構築したサイトのテキスト情報は皆ダイナミックコンテンツとみなされるという事になります)、は以下の作業が必要になります。

support.weglot.com

① まず、Webサイトで右クリックをして『Inspect(検索)』を選択

② セレクターをクリックし、カーソルをその上に置いて、翻訳されていない領域を選択していることを確認

③ .classまたは#IDが表示される

④ WeglotのDashboard>Settings>Shopify Settingsへ移動し、動的コンテンツ(関連)を追加します

⑤ 最後に変更を保存してください

これでノーコードラボの英語のサイトが完成しました!

言語切り替えボタンも、ページの右下に作成されています。

f:id:KiyokoT:20201009143832p:plain

翻訳の修正

機械翻訳の精度はあがってきてはいますが、やっぱりどこかたどたどしく、誤解を与えかねない表現になる事も多くあります。Weglotはより正確な翻訳をするため、訳を個別に確認し、修正することができます。

まずはHomeのページへ行き、『+View more』または『Translations』をクリックしてください。

f:id:KiyokoT:20201009145433p:plain

そして、翻訳のレビューをします。

f:id:KiyokoT:20201009145531p:plain

一つずつレビューして修正を加えることで、より正確な英語サイトを公開できます。

f:id:KiyokoT:20201009145647p:plain

終わりに

Weglotを使ってBubbleのホームページを多言語化する方法をご説明させていただきましたが、いかがでしたでしょうか?

無料プランもありますし簡単に試すことができますので、興味がある方はぜひお試しください!