私の愛したフォント「AquaKana(アクアかな)」 #LOVEFONT

この記事は、特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る #LOVEFONT Advent Calendar 2012 の10日目の記事です。

aquakana

AquaKanaとは

AquaKana(Aqua かな、アクアかな などと表記されることもあります)は、OS X(Mac の OS)のメニューやタイトルバーなどの UI に使われているフォントの名前です。

隠しフォントになっているため、通常アプリケーションのフォント一覧には出てきません。ですので、Mac ユーザーでもこのフォントの存在を知らない方もいらっしゃると思います。

Mac のコンテンツ部分に標準で使われている「ヒラギノ角ゴ Pro」と、UI で使われている「AquaKana」で「ファイル ウインドウ ヘルプ」などを比較するとこんな感じです。

aquakana

AquaKana は一見ゴシック体のように見えますが、縦線と横線の太さなど、明らかに字形が違うことがお分かりいただけるかと思います。

商用利用して良いのか?

以前から、ずっと「AquaKana はWebデザインなどで商用利用して良いのか?」ということが気になっていました。
検索してもはっきりと答えが書いてあるページが出てこなかったので、Apple に電話して聞いたところ「Mac のシステムに入っているフォントは、AquaKana を含め商用利用して良いです」とのこと。これで安心して使えますね。

※もちろん、フォントそのものを再販する場合は別だそうです。

Webコーディングスクール 体験レッスン受付中

どういう場面で使えるか?

AquaKana を Webデザインで使うとしたら、どんな場所でしょうか。
個人的には、本文に使用するにはあまり向いていないように思います。
利用するとしたら、見出し、ロゴ、キャッチコピーなどでしょう。

例えば、日本郵政のスローガン で使用されているフォントは、AquaKana にかなり似ているように見えます。
(よく見ると、「た」や「ふ」の形が違うので別のフォントであることが分かります)

aquakana

こういったスローガンなどで使用するには、ただのゴシック体に比べ演出性が高く、効果的であるように思えます。

どうすれば使えるか

問題は、どうすれば隠しフォントである AquaKana を使えるかということです。

実は、「テキストエディット」や「Keynote」など Apple製のアプリで AquaKana を使うのはそれほど難しくありません。

.AquqKana {
	font-family: AquaKana;
}
.AquqKana-Bold {
	font-family: AquaKana-Bold;
}

というスタイルを指定した HTML をブラウザで開き、スタイルが指定されたテキストをコピーし、「テキストエディット(フォーマット: リッチテキスト)」や「Keynote」に貼り付ければ良いのです。

ただ、Photoshop や Illustrator などで AquaKana を使うには、この方法ではうまくいきません。
そこで、Photoshop や Illustrator でも気軽に AquaKana を使えるようにするWebアプリ を作りました。このページの AquaKana のキャプチャーは、このWebアプリで作っています。

使い方ですが、まず、Safari か Chrome(もちろん Mac版)で以下のページを開きます。

aquakana
AquaKana writer

「AquaKana」もしくは「AquaKana Bold」の下のテキストエリアに、AquaKana で表示したい文字を書き、[決定] ボタンを押します。すると、決定ボタンの下に文字が表示されます。

テキストエディットや Keynote で使いたい場合は、決定ボタンの下に表示されたテキストをコピーしてペーストすればOKです。

Photoshop や Illustrator などで使いたい場合は、command+P キーを押して印刷ダイアログを表示します。
Safari の場合は印刷ダイアログ左下の「PDF」プルダウンメニューをクリックし、「PDF として保存…」を選択します。
Chrome の場合は「送信先」部分の [変更…] ボタンをクリックし、「PDFに保存」を選択して [保存] ボタンをクリックします。

保存された PDF を Photoshop や Illustrator の Dock アイコンにドロップし、開けば使用できます。

私とAquaKanaの出会い

私は高校1年生の時からPCを使い始めて、デスクトップPCで Windows 95/98 を使っていました。
当時、初代 iMac も発売されていましたが、Mac だと見れないWebページも多く、Windows と同じく不安定(当時 Mac OS のバージョンは8か9で、今の OS X とは全く別物でした)と聞いていましたし、価格も高かったので全く興味ありませんでした。

大学生になって、授業で必要なノートPCを買いに家電量販店に行きました。当時発売されたばかりの Windows XP はそれまでの 95/98/Me と違い、NTベースで非常に安定していると聞いていたので期待していたのですが、画面を見た瞬間タスクバーやタイトルバーのケバい青色と、そして何より [スタート] ボタンの下に 2px の謎の隙間が空いていることが非常に気になりました。

なぜ 2px の隙間が空いているのか調べたところ、英語圏向けの Windows XP の [Start] ボタンの下には隙間がなく、どうやら半角カナの [スタート] というフォントは英語のそれに比べて 2px 小さいため、スタートボタンの下に 2px の隙間が空いているらしいということが分かりました…ってダメだろそれ。全世界同一パッケージならまだしも、国別にパッケージ違うのにその程度の調整すらせずに出荷とかどういうことなの…

試しに iMac G4 も見てみたところ、近未来的で美しい UI だなー、フォントも字游工房の「ヒラギノ角ゴ Pro」入ってるなんていいなーと思ってメニュー部分をよく見たら、どうもメニュー部分のフォントのひらがなとカタカナだけ違う気がして、調べたところ AquaKana という Mac OS X 用にデザインされたフォントだということが分かり、非常に衝撃を受けました。
アメリカの会社が、日本語版の OS の UI をより美しく見せるために、わざわざフォントをデザインするということが信じられなかったのです。

ちなみに、Windows にも日本語の UI 用のフォントは入っています。「MS UI Gothic」というもので、「MS Pゴシック」などと比べ、横幅が短くなっています。

ms-ui-gothic

日本語版 Windows の場合、「ファイル(F)」のようにニーモニック文字が丸括弧で囲まれ後ろにつくため、「File」のようにニーモニック文字が下線だけの英語版と比べて長くなってしまい、メニュー項目が多いアプリで文字が入りきれなくなることがあるため、あくまで実用目的に作られたのではないかと推測しています。

それに対して、OS X ではそもそもニーモニック文字がないため、AquaKana は実用目的ではなく、あくまでも「UI を美しく見せるため」に作ったのではないかと推測しています。

私は非常に感銘を受けて PowerBook G4 を買おうかと思ったのですが、教授に Mac でもいいか聞いたところ「Mac というのはデザイナーの人が使うものですから、ウフフフフ…」と言われ、仕方なく Windows XP を搭載した SHARP の Mebius MURAMASA という MacBook Air のように薄いノートPCを買い、UI のスキンを強引に Mac 風にして使っていました…

Retina Displayの登場でさらに美しくなったAquaKana

初期の Mac OS X ではひらがな、カタカナのみだった(漢字はヒラギノ角ゴのものを使用していた)AquaKana ですが、おそらく Lion(10.7)あたりから、漢字などを含む 30MB超の本格的なフォントになっています。

何が変わったかというと、どうやら漢字が少しだけ太くなり、ひらがな、カタカナとのバランスがより自然になったようです。
従来のディスプレイでは違いが分かりませんが、Retina Display で鮮明に表示された時に不自然に見えないようにという配慮だろうと推測しています。

retina-finder
※この画像は、クリックで等倍表示できます。

今は非 Retina Display の MacBook Air を使っていますが、iPad(Retina Display モデル)に「Air Display」というアプリを入れ、Wi-Fi 経由の Retina サブディスプレイとしてたまに利用しています。

Retina 環境でアプリやWebサイトがどう見えるか確認したり、AquaKana を高解像度で楽しむことができます。

ただ、Air Display だと画面の書き換えが遅いなど色々不便もあるので、将来 Retina Display 搭載の Mac を買い、改めて AquaKana を堪能したいと思っているところです。

明日の #LOVEFONT Advent Calendar 2012 は、彩さんによる「懐流体」だそうです。お楽しみに!

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index