多言語対応の和風サイトをデザインする時の注意点【縦書き注意】

インバウンド需要拡大につき、多言語サイトを依頼される機会も増えてきたのではないでしょうか。

特に外国人観光客が興味を持ちそうな、和食や旅館といった「和」のテイストのWebサイトは、必ずと言っていいほど多言語対応が必要なケースが多いです。

私も先日、和食のお店の多言語サイトを作りました。

和風テイストのWebサイトはデザインが楽しいです！

そしてそれを日本だけでなく国外の方が見てくれていると思うと、とてもやりがいがありますよね。

ただ、通常のサイトを作る時と比べて工夫と注意が必要な点があると感じたので、今回は和風サイトをデザインする時のコツ・多言語対応させる時のデザインの注意点について気づいたことを書きますね。

和風サイトをデザインする時のコツ

日本の伝統色を使う

『NIPPON COLORS – 日本の伝統色』という素敵なサイトがあります。

その名の通り、日本の伝統的な色の一覧とカラーコードが載っている便利なサイトです。

ここに紹介されている色をベースに配色を決めることで、「和」の雰囲気にぐっと近づきますし、洗練された印象になります。

お客さんへの色の提案にも役立ちますね！

色の名前の響きがとても綺麗なので、眺めているだけで楽しいですよ(*´ω｀)

背景やパーツに和紙や千代紙のテクスチャを使ってみる

こちらは嵐山駅はんなりほっこりスクエアの公式サイトですが、千代紙のような模様が背景が使われていてとても可愛いですね！

着物の柄のような和柄を背景に使うことで、華やかな雰囲気に仕上がります。

シンプルに仕上げたい場合も、白背景を和紙のテクスチャに変えたり、↑このようにボタンも色のついた和紙を使ってあげても素敵な和風の雰囲気になります。

明朝体と、墨のような黒をテキストに使う

お茶のはまださんのサイトがとても素敵だったので、制作する時に参考にさせて頂きました。

このサイトのように明朝体やもしくは筆で書いたようなフォントを使うのはもちろん、文字色もポイントです。

真っ黒（#000）にせず、墨のような少し灰色が混ざったような色合い （#313131あたり） にすると、一気に和の雰囲気が出せます。

真っ黒にするとデジタル感が出てしまいますが、少し灰色を入れることではんなりした印象になりますね。

多言語対応の和風サイトをデザインする時は、縦書きに注意

この通りデザインするまでは楽しいんですけど、面倒なのはコーディングでした・・・。

多言語サイトにはいくつか落とし穴があったのです。

縦書きレイアウトは、英訳版をCSSで調整する必要あり

和風サイトをデザインすると、どうしても日本らしく縦書きのレイアウトがしたくなりますよね。

テキストを縦書きにしたい時は、CSSで writing-mode: vertical-rl を指定すれば縦書きになってくれます。

例えばこんな感じです↓

猫の種類を思いつくだけ書いてみたけど、懐石料理のメニューみたいになった

しかし注意点があります。

このCSSのまま英訳されると、このような表示になってしまうのです。

これは読みにくいですね・・・。

なので非常に面倒なのですが、英訳版の時のみCSSを書き換える必要があるのです。

横書きに戻すCSSの書き方は例えば以下の2つがあります。

これで綺麗な表示になりました！

英訳された時のことを想定してデザインしよう

他にも英訳が日本語よりも長くなってしまいボックスやボタンをはみ出したり、縦長のボックスに収まっていたテキストの表示が崩れるなど、様々な問題があります。

↑例えばこちら、Google翻訳ボタンをポチッと押すとどうなるかと言うと・・・

こうなります！＼(^o^)／

はみ出てるしGoogle翻訳もおかしいし色々もう、アレですね・・・

こういう崩れを1つ1つ探しては地道に修正していかなければならないわけです・・・めんどくさいですね・・・

この作業の負担を少しでも減らすためには、最初から翻訳されることを意識してデザインするのが大事です。

日本語から英語に訳されると、縦書きの文章はもちろん横書きにしなければなりませんし、 一般的に日本語の原文よりも文章ボリュームが増えることが多いです。

なのでそれを意識して文字の配置やレイアウトを組んでいきましょう。

他にも、多言語サイトの場合は最初から文字入りの一枚画像を作るのではなく、画像の上にCSSでテキストを載せる方が効率的です。

文字入り画像を作ってしまった場合は、画像の文字をその国の言語に直して翻訳された時に画像を差し替える、という余計な作業が発生してしまいますので・・・。

WordPressで『Google Language Translator』を使った場合どうやって調整するの？？

1からコーディングする場合は、ページ自体を日本語版と英語版で分けてしまったり、クラス名を指定したり、多言語サイトのCSSの調整がしやすいと思います。

が、問題はWordPressです。

WordPressで多言語サイトを作る時、『Google Language Translator』などの翻訳プラグインを使う方も多いと思います。

これはポチっとクリックするだけでサイトの全文を自動的に翻訳してくれる優れものなのですが、楽だからこそ英訳された時のレイアウトの崩れを見落としがちだったりします・・・。

ではこのプラグインを使った時に多言語サイトの調整をしたい時、どうすればいいのでしょうか？

実はとっても簡単です。このプラグインを使って翻訳されると、そのページのhtmlに『 translated-ltr 』というクラス名が追加されます。

なので　.translated-ltr　を最初に指定してからCSSを調整すれば、翻訳された時のデザインのみを調整することができます。

多言語サイトは、海外の方が見た時のデザインも意識したい

以上、和風サイトをデザインする時のコツと、多言語対応にする時の注意点についてでした。

Webデザインを通して日本文化を発信できるのはすごく楽しいですよね！

インバウンド需要により、今後もどんどん多言語対応が必要なサイトが増えてくると思います。

日本語版のデザインを作って満足しがちですが、外国の方が見た時に綺麗に表示されるかということも意識して作っていきたいです。