ウェブサイトのローカライズで気をつけたい6つのポイント 後編

長谷川恭久
2008-06-05 08:00:00
  • このエントリーをはてなブックマークに追加

6. 言語に適した文字のケアを

 Unicodeが一般的に使われるようになってきたので、文字コードを気にすることなく多言語化ができることも多くなってきた。しかし、翻訳した文章をすべてテキストにすれば良いとは一概にいえない。

 英語サイトやサービスが日本語になったときに違和感を与えてしまうことがあるが、それは翻訳の仕方だけでなく、見た目から受ける印象の変化もあるだろう。

 欧文はOSにあらかじめ多彩な書体がインストールされているだけでなく、小さくても描写が美しいので、テキストでもある程度の水準の見た目を保つことができる。日本語は選べる書体が制限されているだけでなく、テキストも小さいと読み難くなってしまう。標準とされている文字の大きさの決め方や行間の取り方も異なるので、font-family属性の値を変えただけのCSSではローカライズしたとはいえない。さらに日本語では平仮名、カタカナだけでなく、漢字や半角(または全角)英数が混在するのでバランスをとるのが難しい。

上はすべて24ptで書いた例。下は半角英数(Web)を26ptにして書いた例。一見同じように見えるが…… 上はすべて24ptで書いた例。下は半角英数(Web)を26ptにして書いた例。一見同じように見えるが……
すべて同じ大きさで書かれた文章は半角英数が若干上に上がっているようにみえる。 すべて同じ大きさで書かれた文章は半角英数が若干上に上がっているようにみえる。

上が文字詰めをせずそのまま文字を書いた例。下は文字詰めを行い、半角英数の両脇も若干調整を起こった例。 上が文字詰めをせずそのまま文字を書いた例。下は文字詰めを行い、半角英数の両脇も若干調整を起こった例。
比較すると、横幅が狭くなっただけでなく、文章が全体的に引き締まったことがわかる。 比較すると、横幅が狭くなっただけでなく、文章が全体的に引き締まったことがわかる。

 日本語は欧文に比べるとテキストに対してきめ細かなコントロールを行うことができないので、ヘッダーやナビゲーションなど重要な情報で画像文字を使うことも検討したほうが良いだろう。文字の大きさ、詰めの調整や、デフォルトではインストールされていない書体を利用することで、明確にサイトのメッセージを伝えることができたり、サイトデザインにより馴染ませることができる。もちろん、欧文だからといって無限大に書体があるというわけではないので、サイトの性格に合ったフォントを選び、レイアウトと組み合わせると良いだろう。

全く同じ文字の調整を行った後に、それぞれ異なる書体を設定した例。言葉は同じだが見た目が変わっただけで受けるイメージも異なる。 全く同じ文字の調整を行った後に、それぞれ異なる書体を設定した例。言葉は同じだが見た目が変わっただけで受けるイメージも異なる。

 すべて画像文字に頼るのではなく、OSにインストールされているフォントを確認してCSSで継承させるのもひとつの方法だ。デフォルトでも数は豊富にあるだけでなく、OS間で共有していなくても似たような見た目のフォントは数多く存在する。効率化も重要な課題だが、こうして文字に対するケアを行うことで、サイトのイメージは随分良くなるのでバランスを考えて積極的に導入していきたい。

「フォントカタログ4・全標準フォント一覧」では、Mac OSXとWindows XPにプリインストールされたフォントがリストアップされている。それぞれのOSで似た書体を探して、CSSで代替フォントを指定するときに役立つ資料だ。フォントカタログ4・全標準フォント一覧」では、Mac OSXとWindows XPにプリインストールされたフォントがリストアップされている。それぞれのOSで似た書体を探して、CSSで代替フォントを指定するときに役立つ資料だ。
「8 FONTS YOU PROBABLY DON’T USE IN CSS, BUT SHOULD」というブログエントリーでは、WindwosとMacにインストールされている可能性が高い、珍しいフォントを8つ紹介している。欧文でサイトを構築する際は参考にしたい。8 FONTS YOU PROBABLY DON’T USE IN CSS, BUT SHOULD」というブログエントリーでは、WindwosとMacにインストールされている可能性が高い、珍しいフォントを8つ紹介している。欧文でサイトを構築する際は参考にしたい。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]