ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Web制作】自作Webサイトを多言語対応してみた【Webコーディング】

Webコーディング HTML CSS GitHub

背景

先日コーディングした水族館の仮想HPで、多言語切替が未実装だったので今回取り組んでみます。

fuchsia-84.hatenablog.com

現状まとめ(言語切替機能実装前)

  • 日本語版のみ作成(スタイル・スクリプト適用済)
  • ヘッダーに言語切替メニュー
  • Github Pagesで公開

ディレクトリ構成

日本語のみ対応時のディレクトリ構成
日本語のみ対応時のディレクトリ構成

  • index.html : Webサイトのトップページ(日本語のみ対応)
  • css : CSSファイル保存先
  • img : 画像ファイル保存先
  • js : スクリプト保存先

多言語サイトの実装法

今回はサブディレクトリで言語を分ける方法を選択。
理由としては、元にあるものをなるべくいじらず使い回したいことと、同一ファイル内に言語を混ぜると見にくいと感じたからです。

参考 : 多言語WEBサイト（ホームページ）の海外向けSEOに最適なURLとは？

構成と手順

上記を受けて、以下のように作成。

  • 言語別にサブディレクトリを作成、配下に言語別ファイルを置く → URLはリポジトリ/言語コード名/で対応
  • 切替メニューから選択した言語のページに飛ぶ
  • テキスト内容の翻訳
  • 言語別にフォントを設定

やらないこと

今回多言語化した自作サイトは仮想で作成しているWebサイトであるので、ブラウザに地域・国別にページの設定を行うメタデータの設定を行いません。
あくまで、表示されている言語の切替のみを実装します。

実在のサイトとして多言語対応を行う場合は、こちらの対応が必要になります。

参考 : 多言語サイトはrel=”altrenate” hreflang=”x”で管理しよう

ディレクトリ構成

以下のように作成。
画像ファイルとスクリプトは全言語で共通とし、
言語別にサブディレクトリを作ります。
その下に、それぞれの言語対応のHTMLとCSSを作成しました。

多言語対応時のディレクトリ構成
多言語対応時のディレクトリ構成

切替メニュー

a要素のリンク先を言語別のサブディレクトリに指定。

日本語版ページ、英語に切り替えるリンクの記述 :

<ul class="lang_menu" id="lang_menu">
  <li><a href="en/" rel="alternate" hreflang="en"><p><span>EN</span><span class="lang_jp">(英語)</span></p></a></li>
... 中略 ...                        
</ul>

繁体中国語フォント

Googleの提供するフォントcwTexYenが元サイトの雰囲気と合っていたので使用。
CSSで以下を記述で使用できる。

/*冒頭で*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);

/*フォント適用部分にfont-familyを追加*/
.cwTeXYen {
    font-family: 'cwTeXYen', sans-serif;
}

参考 :

韓国語フォント

Google Fontsから韓国語指定で検索、雰囲気と合うNanum Gothicを使用。
Google Fontsの使い方に準拠してCSSを記述。

参考 : 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント | webclips

成果物

多言語に対応できました！

f:id:fuchsia-84:20210908173238p:plain
ページ一部(右上: 英語 右下: 繁体中国語 左下: 韓国語 左上: 日本語)

実際のページ

github.com

工夫点

  • 言語別ディレクトリをつくる方法によりGoogleのクロール方法を意識
  • 画像やスクリプトをそのままに、テキストの翻訳とレイアウトの調整のみで低コスト
  • 元のレイアウトにおさまる範囲で適宜意訳 (例: ｢モデルコース｣は和製英語→”Recommended Route”、 ｢シルバー｣→英語では”Golden-ager”など国々で呼称がある)

開発期間

9月7日(火)

  • 英語版 3.0h
  • 繁体中国語版(残1セクション) 1.0h

合計 4.0h

9月8日(水)

  • 繁体中国語版残 1.0h
  • 韓国語版 1.5h
  • 繁体中国語、韓国語フォント適用 0.5h

合計 3.0h

全体の合計 7.0h / 0.88人日

おわりに

今回は水族館HPを題材として、Webサイトを多言語に対応させてみました。

はじめて実際に実装してみて、ふだんは多言語対応のサイトでは言語によってURLに"#en"が付くようになるものをよく見てきていましたが、実装方法によって見た目だけでなくブラウザのクロール方法や管理手法へのアプローチまで変わってくるということを知ることができました。

環境や、やりたいことにあった選択肢を持てるよう、他の方法もとれるように準備していきたいと思います！

ありがとうございました。