BtoBデジタルマーケティングやWeb制作の情報と、イントリックスの日常風景をお伝えします。

アポストロフィの形は2種類? その経緯とサイト制作時の考え方

グローバル
嶌田 千裕

冒頭の画像は米連邦政府のウェブサイト のキャプチャ(2018年5月時点)です。そこには、形の違う2種類のアポストロフィが使われています。

一つは「What’s New」の「’」。
英語では typewriter apostrophe と呼ばれています(以下、「直線型」と表記します) 。
英語入力モードで、「Shift」+「7」キーを押した際に入力される文字です。

もう一つは「USAGov’s」の「’」。
英語では typographic apostrophe や curly apostrophe と呼ばれています(以下、「曲線型」と表記します) 。
日本語入力モードで、「Shift」+「7」キー押した際に最初に候補として表示される文字です。

※キーは一般的な日本語配列のキーボードを想定
※両者は同じフォント

なぜ2種類のアポストロフィが存在するのでしょうか? その経緯をたどりつつ、サイト制作時にどちらを使うべきかを考えます。
後者は「全角アポストロフィ」じゃないの? 英語なのに日本語入力モード? といった疑問にも答えます!

どうして2種類のアポストロフィが生まれたの?

~活版印刷の時代

手書き~活版印刷の時代には「曲線型」が使われていました。
※活版印刷? こういうもの です。

タイプライターの登場

「直線型」は英語名の typewriter apostrophe の通り、タイプライターのために作られました。
タイプライターは搭載できる文字の数に制限があります。
そのため、それまで別の字形で表現されてきた、アポストロフィ引用符(シングルクォーテーションの左右)プライム(ダッシュ) といった記号が、一つの文字に統合されました。
字形も、汎用性をもたせるために単調なものになります。

アポストロフィ、引用符(左右)、プライム(ダッシュ)記号の使用例と、「曲線系」「直線型」の字体の違い

コンピューターでの扱いは?

初期のコンピューター

初期のコンピューターにおいても、タイプライターと同じ状況が続きます。
この頃欧米で制定された文字コードは、1文字=1バイトとされることが多く、表現できる字形がまだまだ少なかったためです。
※1バイトで表現できる文字の種類は最高で256種類(2の8乗)

全角アポストロフィが英文に混ざると文字化けする、といわれていたのもこの頃の話です。

Unicodeの普及

Unicodeは、世界で使われるあらゆる言語/文字を一つの文字コードで利用できるようにしよう、という理念のもとに作られたものです(最近はEmojiの追加が盛んです☺)。
「あらゆる文字を利用できる」ようにするため、これまで「直線型」に統合されていたそれぞれの記号が、再び独立したものとして定義し直されました。

現在、Unicodeの符号化方式の一つであるUTF-8は、世界中のWebサイトの90%以上で採用され 、スタンダードとなっています。
最初に挙げた米連邦政府のウェブサイトも、UTF-8が採用されています。

文字コードとは

コンピューターで文字を扱う仕組み。その文字コードで取り扱える文字の種類(文字集合)と、それらをコンピューター上で処理する方法(符号化方式)からなる。

疑問1 「曲線型」=全角アポストロフィ?

そう考えてOKです。Unicodeと、代表的な日本語文字コードであるShift_JIS、EUC-JPの互換表で両者は対応するものと紐付けられています。
日本語の入力環境に慣れている私たちは、英文に全角アポストロフィが混ざる? と想像して違和感を覚えます。これは適用されるフォントの問題が大きいです。
日本語フォントでは漢字と同じ幅をもつ字形があてられることが多く、一方、英語フォントではほかのアルファベットとなじむ幅の字形で自然です。

日英のフォントによる見え方の違い

ユニコード(UTF-8)で「’」は何バイト?

全角文字=2バイトと認識している方もいらっしゃるのではないでしょうか?
Shift_JISやEUC-JPではそうでした。

一方、UTF-8では1文字に1~6バイトをあてています。
1バイト領域にASCII、2バイト領域にASCIIから漏れるアルファベット系の文字(アクセントマーク付き文字や、キリル文字など)、3バイト以上の領域に記号、日本語含む非アルファベット系の文字や絵文字などが収録されています。
記号に属する「’」は、3バイトです。

疑問2 ネイティブは「曲線型」をどうやって入力している?

日本語入力モードのないネイティブの人は、どのように「曲線型」を入力しているのでしょうか?
一般には、「直線型」と「曲線型」の違いはそれほど意識されず、どちらも「直線型」で入力されています。
では「曲線型」が全く使われていないかといえば、そうではなく、テキスト入力ソフト側で自動変換することが推奨されています。
※一般的な文書入力の話で、組版では今でも「曲線型」の使用がルール化されています。

When text is set, U+2019 right single quotation mark is preferred as apostrophe, but only U+0027 is present on most keyboards. Software commonly offers a facility for automatically converting the U+0027 apostrophe to a contextually selected curly quotation glyph.
The Unicode Standard, Version 10.0

※U+2019 =「曲線型」、U+0027 =「直線型」

office製品でアポストロフィが全角に変換されてしまう! というあるあるも、この機能によるものです。

サイト制作時の考え方

Unicode の規格上推奨されている通り、理想的には「曲線型」を使いたいような気がします。
しかし、海外サイトでも混用されているぐらいなので、どちらを使用しても間違いではないといえそうです。(結局、どちらでも意味は伝わりますから!)

それぞれのメリット・デメリットを簡単にまとめます。

「曲線型」を使う

メリット

  • 本来の組版ルールに則っている
  • デザイン的に優れる
  • 将来的なスタンダード

デメリット

  • 変換のひと手間が必要
    コードのプログラム部分では、「直線型」も使用するので、地味に面倒
 

「直線型」を使う

メリット

  • サイトの中で統一しやすい
  • 文字化けの可能性が低くなる
    (Unicodeの普及初期には、デバイスの対応状況によって、規格に収録された文字でもうまく表示できないことがありました。しかし、普及が進んだ現在では、この優位性は小さなものです)

デメリット

  • 本来の組版ルールに則っていない
  • デザイン的に劣る

人が一つずつ注意して使い分けるのはとても大変なので、機械がもれなく“いい感じ”に変換してくれる未来が早く来てほしいな~と、個人的には待ち望んでいます。