Web

この投稿は3年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2013 年 12 月 12 日 1,235日前)
3,687文字 (読了時間9分)

SPONSORED LINK

特に誰からも聞かれなかったので自分から書きますが、先日このサイトのデザインをリニューアルしました。で、ついでといってはなんですが、以前から興味のあった日本語Webフォントを導入しました。

モリサワ TypeSquare 2013年1月31日まで無料!
モリサワ TypeSquare 2013年1月31日まで無料!

今回採用したのは、モリサワのTypeSquareというサービス。PVに応じて課金されるサービスですが、来年の1/31までは無料です。もう一つ有名どころとしてはソフトバンク系のFontPlusというのがあって、違いは以下の通りです。

TypeSquare FontPlus
費用(月額) 2,100円〜 1,050円〜
フォント数 約330 約700

おめあてのフォント(オールド明朝系)はFontPlusにしかなかったのですが、なぜか実装が上手くいかなかったのでモリサワにしました。大変後ろ向きな選択であります。

使ってみた感想

Webフォントをアイコン以外で使ったのははじめてだったんですが、なかなかいいですね。自分のブログに対するナルシスティックな思いをかき立ててくれます。

小説を書き始めた頃、自分の書いたものを印刷すると、それだけで高級ななにかができあがったような気分になったものですが、その頃の気持ちを思い出しました。以下、感想です。

1. 速度面

日本語のまともなフォントは字数が多い(15,000字〜)ので、5MBぐらいあります。これを読み込ませるのは無茶だろうということで、どのWebフォントサービスも次のような流れでフォントの読み込みを処理します。

  1. まず、JSを読み込み。必要なフォントの種類をCSS解析で決定。
  2. 続いて、対象となる文字を重複なくリスト化
  3. サーバに問い合わせて、必要なグリフだけが含まれたフォントをダウンロード

この速度自体はそんなに遅いとは感じませんでした。今後、向上していくことでしょう。

ただし、Webフォントにつきものの現象なのですが、フォントがダウンロードされるまでの数秒間、デバイスフォントがそのまま表示されます。あと、適用される瞬間に僅かな間ですが文字が消えます。

僕みたいにだらしない人間は「別にいいじゃんそんぐらい、カッケーだろ?」となりますが、クリエイティブにこだわる方は許せないと思いますので、フォント読み込み完了までローディング画面を出したりフェードインエフェクト入れたりすることになるでしょう。

ちなみに、TypeSquare自体にフォント読み込み完了を示すイベントのようなものがあるのかどうかは調べてないのでわかりません。

2. ブラウザ対応

まず、Windowsだと汚いですね。特にXPだと字がかすれちゃってよく読めません。まあ、これはOSの問題なんで、しょうがないんじゃないでしょうか。昔見た『Helvetica』というドキュメンタリーでもタイプデザイナーがビル・ゲイツをめちゃくちゃDISってましたからね。

ヘルベチカ ~世界を魅了する書 [DVD]

ヘルベチカ ~世界を魅了する書 [DVD] [DVD]

価格¥ 4,935

監督ゲイリー・ハストウィット

出演者マイケル・ビェルート, ネヴィル・ブロディ, デヴィッド・カーソン, マシュー・カーター, ウィム・クロゥエル

出版社角川エンタテインメント

商品カテゴリーDVD

“Helvetica! Period! Helvetica! Period!” って叫ぶシーンが印象的です。

Supported by amazon Product Advertising API

このサイトの場合は、それ以前にIE8で盛大に崩れているので、今後暇ができたら対応します。

iOSはたぶん大丈夫です。iOS7しか見てないけど。Androidは怖くて見てません

自分のブログだったらいいですが、お客さんのサイトとかだったらどうですかねー。う〜ん。勧めるかどうか微妙なところです。「IE8でも綺麗に見せられるようにしてくれ!」とか言われたら超めんどくさそう。

3. 技術的な制限

存在するフォントを解析してダウンロードするという仕様上、コンテンツがボンボコ追加されるようなサイトには向いてないですね。

たとえば、FacebookのタイムラインみたいなものはNGです。フォントをダウンロードした後に文字が追加されますから。やってないんでわかりませんが。

FontPlusにはそこら辺をどうにかするAPIもあるみたいなんですが、タイムライン作るだけでもめんどくさいのに、フォントのケアまでしろとか言われた日には「誰がやんの?」ってなりますよね。UIデザイナー? そんなスペシャルな人材はうちにはおらんぞ! とかなるんじゃないですか。

こんなことできるよ!

さて、ネガティブなことを書いてしまったので、嬉しかった点など。

憧れの和欧混植

和欧混植というのは、英語のフォントと日本語のフォントを混ぜて使うことです(多分)。InDesignとかだとわりとよく使われてるはずです。

このサイトではこんな設定にしてあります。

/* SASS使用 */
$body-font: 'Garamond', 'A1 Mincho', 'ヒラギノ明朝 ProN W3', 'IPA P明朝', serif;
$title-font: Georgia, 'Akashi', sans-serif;

ちょっと前のSafariとかは一つ目のフォント以外全部無視してたような気がするのですが、いまではしっかり和欧混植できてます。

このサイトの見出し。かっこいい...よね?
このサイトの見出し。かっこいい…よね?

まあ、この組み合わせがそんなにいいのかというと、ちょっとモニョるところはありますが、僕がいいっていってるんだからいいじゃないですか。なんなんですか。

欧文書体 2 定番書体と演出法 (タイポグラフィの基本BOOK)

欧文書体 2 定番書体と演出法 (タイポグラフィの基本BOOK) [書籍]

著者小林 章, 監修=嘉瑞工房

クリエーター嘉瑞工房, 嘉瑞工房

出版社美術出版社

出版日2008 年 8 月 22 日

商品カテゴリー単行本

ページ数160

ISBN4568503647

ライノタイプでタイプデザイナーしていた方の本。

Supported by amazon Product Advertising API

CSS3でぼかしとか

リニューアル時に実装して、まだ使っていないこのサイトの機能に「ネタバレ」というものがあります。要するに、こんな感じですね。ポートピア殺人事件の犯人を書きたいときとかに使えます。

ポートピア殺人事件というのはファミコン初期のアドベンチャーゲームなのですが、真犯人はなんと助手のヤスです。ついでに書いてしまいますが、アガサ・クリスティーの『アクロイド殺し』の真犯人はなんと語り手です。

この表示はCSS3のblurフィルターを使ってます。

TinyMCEを調教済みのこのブログでは、管理画面で段落を選んでポチッとボタンを押すだけなので、大変お手軽。こういうのもWebフォントだからこそできる芸当ですね。

@import 'compass/css3/filter';
.netabare{
    position: relative;
    @include filter(blur(7px));
}

2008年頃はFlashのTextLayoutFrameworkと組み合せて一生懸命フォントを組み込んだりしてましたが、いまとなってはこんなにお手軽。月日が経つのは本当に早いですね。

というわけで、TypeSquare使ってみた雑感でした。たぶん、無料期間が終了しても使い続けると思います。このブログ、大してPVがないのにCloudFlareも有料版、有料SSLも導入済みなど、かなり富豪ブログなので、がんばってPVを延ばしたい所存であります。

アクロイド殺し (ハヤカワ文庫―クリスティー文庫)

アクロイド殺し (ハヤカワ文庫―クリスティー文庫) [書籍]

著者アガサ クリスティー

クリエーターAgatha Christie, 羽田 詩津子

出版社早川書房

出版日2003-12

商品カテゴリー文庫

ページ数445

ISBN4151300031

犯人はネタバレのところに書いてあるので注意。筒井康隆『ロートレック荘殺人事件』はこれのパロディで、併せてオススメ。

Supported by amazon Product Advertising API

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2013 年 12 月 12 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

わたしが究極的な問いに攻撃を仕掛けられて背後の武器をつかむときには、いろんな武器から選ぶことはできない、選ぶことができたとしても、「無縁な」武器を選んでしまうだろう。われわれすべてには武器の備えは一種類しかないからである。

— フランツ・カフカ

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。