ホーム
ブログ
「多言語ウェブサイト制作」14の鉄則
～海外ウェブサイト事例と企業担当者、必見のポイント～

GLOBAL MARKETING BLOG

新着理論的に学ぶ

2021年01月05日

「多言語ウェブサイト制作」14の鉄則
～海外ウェブサイト事例と企業担当者、必見のポイント～

企業が多言語でウェブサイトを制作する際に、コンテンツ、レイアウト、タイポグラフィ、色、トピックなど、考慮しなければならないことがたくさんあります。

また、人口減少によってマーケットの縮小に苦しむ日本とは対照的に国連の報告では、世界の人口が2050年には97億人、2100年頃には110億人に達すると見積もられており、世界中の多くの企業は将来を見据え、海外マーケティングに焦点を移しています。

この世界中で加速するデジタル化の中で、ただ単純に英語化された海外向けウェブサイトや、国や地域に向けてローカライズされていないウェブサイトの場合、その存在価値は限りなく低くなってしまうのが現実ではないでしょうか。せっかく作ったウェブサイトに訪れてくれた海外ユーザーの離脱を防ぎ、惹きつけるために、多言語ウェブサイト制作のポイントを押さえる必要があります。

今回は、海外向けのウェブサイト制作を検討する際の押さえておくべき14の鉄則をご紹介します！

＃1 豊富なコンテンツ

ユーザーは、何か有益な情報を求めてウェブサイトを訪れます。このことを忘れずに、ユーザーに有益なコンテンツを提供するように努めましょう。有益なコンテンツとは自社ビジネスとユーザーニーズに関連するもので、ウェブサイトを訪れるユーザーにとって価値のあるでなければなりません。

「動画」「無料ダウンロード可能なホワイトペーパー」「ウェビナー」「インフォグラフィック」などユーザーにとって有益な情報を十分に得られるものにする必要があります。豊富なコンテンツを用意することで、顧客との信頼関係を構築するでしょう。また、公開するコンテンツがSEO最適化されているほど、検索エンジンに表示され、オーガニックトラフィックを引き付ける可能性も高くなります。

3D印刷会社のUltimakerのウェブサイトは、明確なナビゲーションと豊富なコンテンツが用意されており、顧客を惹きつけるウェブサイトを持っています。「ホワイトペーパー」「ウェビナー」「ブログ」などをはじめ、音声で顧客の悩みを解決するための「ポッドキャスト」、３D印刷を学ぶための「アカデミー」も用意されています。また、このウェブサイトは国際的なWebデザインや開発を評価するCSS Design Awards の「SpecialKudos」も受賞しています。

< Ultimaker >

＃2 一貫性を追求する

ウェブサイトのデザインを直感的に行っていませんか？

ブランディングを成功させている企業のホームページは、すべてのページで一貫性が認められます。一貫性を持たせることは、ブランドを確立するうえで重要な意味があります。

ウェブサイトの設計において、トップページから個別ページまで、サイト全体でそのサイトに属していることがわかるようなデザインすることがポイントです。そのためには、ビジュアル面（色やロゴ、スタイルなど）と機能面（UIコントロールなど）で、一貫性を持たせることを意識します。

Magneticaは、医療機器であるMRIの設計・開発を行う企業です。Magneticaのウェブサイトは印象深く、視覚的にインパクトのあるサイトビジュアルだけでなく、科学的なMRI技術をわかりやすく説明しています。表示するすべてのページでユーザーをフォローするCTAがあり、すべての製品ページの下部に「メールでお問い合わせ」のCTAを配置しています。

< Magnetica >

#3 レイアウトを最適化する

ウェブサイトを訪問するユーザーは、表示されている情報を「読む」のではなく、瞬間的に「スキャン」しながら目当ての情報を探し出します。適切な階層設計が出来ていないと、ユーザーは「スキャン」が思うようにできなくなるため、そのサイトから離脱してしまうでしょう。ウェブサイトを設計する場合に、最も重要な要素を適切に注目されるように配置する必要があります。

ウェブサイトを訪れたユーザーは、左から右、上から下へと目を動かします。一般的に人間の視覚パターンとして「F字型」、「Z字型」が存在します。Z字型のウェブサイトは、少ない文章と画像など比較的シンプルなデザインで有効的に機能するデザインになります。

①でユーザーの注意を引くロゴを配置し、②で「LOG IN」や「SING UP」ボタンを配置し、③でより多くの情報を与え、④でユーザーの行動を促進するCTAを配置します。

複雑なコンテンツ構造に対してこの「Z字型」を強制的に組み込もうとしても、上手くいかない可能性があります。しかし、このZ字型は非常に基本的なサイトのフレームであり、コンバージョン率を高めるのにも役立ちます。また、ユーザーがページをスクロールする必要がないように、ページの上部領域（スクロールせずに見える範囲）に、最も価値のある情報を掲載しましょう。

#4 ページを最適化する

ページを最適化することは、スピーディーにサイトを表示することにつながります。

画像を多用したり、コンテンツの量が増えたりすると、サイトは徐々に重くなり、ページの最適化を怠ると、表示されるまでに時間がかかってしまうのです。読み込み時間が５秒以上かかると、ユーザーの38％は離脱すると言われています。サイトの速度を測定する場合は、GoogleのPageSpeed Insightsを活用しましょう。PageSpeed Insightsは、サイトの読み込み時間のほかに、軽量化するための改善点も見つけることができます。また、ページの最適化ですぐに取り組めて効果的な方法は、画像の圧縮です。SquooshやTinypangなど、専用の画像圧縮アプリを利用すると、画像の圧縮作業が楽になります。

また、モバイル最適化も忘れてはいけません。Statistaの調査によると、世界のウェブトラフィックのうちモバイルからのアクセスが48.71％(2019年第1四半期）を占めています。アジアとアフリカ圏においては世界平均よりも高く、2020年10月におけるモバイルトラフィックの割合はトルコは77.3％、ナイジェリアは75.1％、インドは64.3％でした。

#5 予測可能なナビゲーションを設計する

効果的なナビゲーションは、ユーザーが求めている情報に適切にたどり着けるように誘導する大事な役割を果たしています。ウェブサイトがどんなに視覚的に美しくても、インパクトのあるデザインであっても、ユーザーが目的地にたどり着けなくては、簡単に離脱してしまうでしょう。

ナビゲーションを適切に設置するには、サイト全体の構造を整理します。コンテンツをカテゴリ分けしたり、階層を整えたりしてから、ナビゲーションの配置を作成します。ナビゲーションを隠して非表示にしないでください。ウェブサイトの使いやすさを損なうとともに、離脱したユーザーからの信頼性を失い、ユーザーが戻ってくる可能性は低くなるでしょう。

ナビゲーションはメニューとしてトップページの上部またはサイドバーに配置するようにしましょう。また、メニューを補完する説明を加えたり、クリックした際に何が表示されるかを示す必要があるでしょう。また、人間の脳は一時的に覚えて居られる情報の量には人類共通で大体決まっていて、その数は「7個±2個」という「The Magical Number Seven」があります。ですので、選択肢の数を最小限に抑え、ユーザーが欲しい情報をできるだけシンプルに明確化させ、素早く検索できることを優先としたサイト構成が重要なポイントとなるでしょう。

HR(人事）ツールを提供しているZenefits社のウェブサイトは、シンプル・簡素化されており、効果的なナビゲーションをユーザーに提供しています。

#6 競合との差別化を明確にする

ビジネスの世界には “Differentiate or die,”という「格言」があるように、サイトデザインにおいても競合他社との差別化は重要なポイントの一つになります。この情報社会において、ユーザーは豊富な選択肢を持っています。その中で自社独自のブランド力をユーザーに伝えるツールの１つがウェブサイトです。

競合他社をとの違いを明確化して、ユーザーにとって最も最適なソリューションを伝えましょう。

#7 CTA（行動を促すフレーズ）

優れたCTAがウェブサイトにとって、どれほど重要かは、ご存知でしょうか？表示されるウェブサイトの全てのページに何らかの形のCTAを挿入するべきです。ハッキリと見える場所に設置し、シンプルであり、言葉に目的を持たせましょう。

海外向け多言語ウェブサイトのCTAでは、アクション主導で利用可能なオファーに連動することが重要です。海外向けウェブサイトのアクションを促すフレーズは「Sign up」「Try for free」「Learn more」「Subscribe」といった具体的なコピーなどが多く見受けられます。いずれにせよ、何を出口に据えるか、それを明確にしたうえでCTAフレーズを設置することがポイントです。英語のCTAの場合は2～5語が適切と言われています。

また、CTAは常にA/Bテストを実施する必要があります。「A / Bテスト」は、サイトの継続的な改善と成果の最大化に大きく貢献します。ただしテストする時には一度にすべての要素を盛り込むと正確な判断ができなくなるため、一つひとつ丁寧に検証するのがコツです。

#8 重要な情報を視覚的に目立たせる

ユーザーに注目してもらいたい情報やユーザーの行動を促したいときなどは、色のコントラストや文字のサイズ、画像、空白などを上手く活用し、ユーザーに視覚的にメッセージを届けましょう。

オーストラリアの資源会社向け発電サービスを構築・設計しているPowerwestのトップページは、高品質な画像と共に、余白を活用し、効果的な配色コントラストで視覚的にインパクトのあるメッセージを伝えています。わかりやすい言葉を使用し、CTAは明確であり、そのナビゲーションパネルはとても簡単に操作することができます。

< Powerwest >

#9 美しい文字バランスを重視する

ウェブ上に表示されている情報の多くは、画像ではなく「文字」であると言われています。ユーザーに、適切な情報をスピーディーに伝えるには、文字配列の美しさや背景色と文字のコントラストなど「タイポグラフィ」を意識したデザインにすることは不可欠となります。

３つ以上の異なるフォントを使用すると、タイポグラフィが崩れて、サイトにまとまりがなくなります。3つ以上のフォントを使うことはおススメしていません。また、「サイズを変える」、「文字の太さを変える」など工夫することが大切です。

読みやすい文字の大きさは、16pxと言われています。文字サイズに迷ったら、16ptを使うようにしましょう。また、タイポグラフィーにおける段落間の空白を適切に使用すると、理解度が最大で20％向上することが証明されています。

テキストの色のコントラストが適切か考慮する必要があります。文字と背景のカラーコントラストが適切かどうかはカラーコントラストチェッカーなどを活用しながら、テキストに十分なカラーコントラストがあるかどうかを確認しましょう。現在では、Google Web Fonts、Font Library、Adobe Typekitなど、新しいフォントを調達するために利用できるものが無数に存在します。

#10 関連する画像や動画を使用する

文字でメッセージを伝えることも重要ですが、画像や動画は文字よりも強力に人々を捉えることが出来ます。関連する動画や画像は、文字で説明されている概念をより印象付けるのに役立ちます。情報に関連したものを適度に挿入しましょう。単純に装飾目的で選ばないように注意が必要です。高品質で適切な画像や動画はユーザーの心を捉え、信頼関係を構築してくれるでしょう。

また、画僧はSEO（上位表示）にも貢献してくれます。画像検索でのSEOが向上することで、ウェブサイトのトラフィックが増える可能性もあるでしょう。ウェブサイトの画像を最適化するには、サイズを125kb未満に抑え、画像タイトルと代替テキストを含めましょう。

米国にある、飛行機や宇宙開発関連製品を製造するロッキード・マーティン社が重要視しているのは、会社のコンセプトやサービスなどを、ユーザーにできるだけ正確に伝えるために、高品質な画像や動画をウェブサイトに配置し顧客との信頼関係を構築しています。そのためには高品質のグラフィックは不可欠で、サイトに掲載されている画像のほとんどは、非常にクオリティの高いものとなっています。

#11 予期しないポップアップを表示しない

サイトの中には、訪問すると、一定時間滞在したユーザーに対して、ポップアップを表示されることがあります。ポップアップ機能はユーザーを混乱させる原因になることもありますので、避けるのが無難です。ポップアップの多くは広告として認識され、サイト訪問者は無視する傾向にあります。これは「バナーブラインドネス/Banner blindness」と呼ばれる現象であり、人が一度バナーを「広告」と認識してしまうと（広告でなくとも）、本能的に避けるというものです。

#12 音声付きの動画を自動再生しない

サイトに移動した途端に音楽が鳴ったり、動画がスタートしたりすると、ユーザーは驚いてサイトを消して、ほかのサイトに移動する傾向があります。実際、Facebook動画の85％は音声なしで視聴されており、インスタグラムのストーリー動画も40％以上が音声なしで視聴されています。

動画や音楽を挿入したい場合は、自動再生しないよう設定しておきます。または、サウンドだけオフにして自動再生するという方法もあります。

＃13リンク切れがないことを確認する

リンク切れは、SEO的にもユーザビリティ的にも適切ではありません。Brokenlinkcheckやdead-link-checker.comなど、リンク切れを見つけるツールを使い、定期的にチェックするようにしましょう。

#14 新しいタブで内部リンクを開かない

Webサイトには、内部リンクと外部リンクの2種類のリンクがあります。

ユーザーがリンクをクリックすると、新たにタブが立ち上がり、該当ページが表示されることがありますが、内部リンクは新しいタブで開かないように気を付けましょう。新しいタブが開くと、多くクリックしたときにタブが増えすぎて、ユーザーは不快な思いをする可能性があるからです。内部リンクの場合「戻る」をクリックすれば、元のページに戻れますので、同じタブで開くように設定しておきましょう。