第30回リクリセミナー「フォントのホント」に行ってきたよ

Pocket

10月1日に第30回リクリセミナー「フォントのホント」に行ってきました。
遅くなってしまいましたが、恒例の振り返りレポートです。

#1 日本語Webフォント最新事情

文字関連のイベントでよくお見かけする関口さんのセッション。
文字の歴史からはじまり、約300サイト独自調査した資料も交えてのセッションでした。

使用フォントランキング

FONTPLUSユーザーが使用しているフォントのランキングが公式サイトから見えるのですが、なかなかおもしろかったです。

使用フォントランキング | FONTPLUS SUPPORT

筑紫はやっぱり人気ですね。
上位はさすがに読ませるフォントですが、下の方にいくとデザイン系のクセがあるのもポツポツいるのがおもしろいです。
ランディングページなどでは思い切った書体を使う傾向があるそうです。

参考サイト

参考サイトをあげつつ、使用されているフォントについて紹介されてました。
高級ホテルやレストランなどは明朝、上場企業はゴシック、お子様向け製品などは丸ゴシックを使う傾向があるとのこと。

以下、紹介されたサイトをいくつか抜粋。

明朝体

161010_01京都造形芸術大学 通信教育部  (筑紫明朝)

161010_02鬼怒川金谷ホテル (筑紫明朝)

161010_03うかい(筑紫明朝・筑紫Aオールド)

161010_04そうさす(秀英初号・筑紫Aオールド)

ゴシック体

161010_05三井不動産(ロダン)

161010_06北海道銀行(ニューロダン)

丸ゴシック体

161010_07ケロッグ(スーラ)

161010_08生活定点1992-2016|博報堂生活総研(筑紫A丸ゴシック)

アンチゴチ

161010_09電通報(アンチックセザンヌ)

全部乗せ

161010_10吉本隆明の183講演 – ほぼ日刊イトイ新聞(くろかね、筑紫B丸ゴ、などなど)

webフォントの普及率

米国企業では80%の普及率である一方、日本企業ではまだ10%以下だそうです。
クライアントさんや社内で意思決定権がある人が理解してくれないと、まだまだ導入がむずかしいのかもしれません。

以前、FONTPLUSさんの価格設定とアクセス解析を元に資料を作ったことがあるのですが、いうほど高くはないと思うんですけどね。

年間120万PV(月10万PV相当)…年間12,960円
年間300万PV(月25万PV相当)…年間32,400円
(参考: FONTPLUS|料金プラン

使用できるドメイン数、使える書体数に制限なしでこのお値段なので、しれっと見積もりに入れててもいいように思ってます。

#2 文字・書体のひみつ 〜フォントの裏側教えます〜

モリサワの高桑さんのセッション。

A1明朝

まずは、A1明朝のお話からスタート。
活字時代の古い書体で、線の交差部分がにじむ(墨だまり)も再現しているのがポイント。
昔は明朝体をA、ゴシックはBという分け方だったので、名前にAがついてるそうです。
最近では、映画『君の名は。』のロゴのフォントとしても使われています。
161010_17映画『君の名は。』公式サイト

書体制作の現場

実際に書体が出来上がるまでの工程を動画で見ました。

  1. 調査・企画。コンセプトを考えます。
  2. 500文字をデザイン。方眼紙に手で書いていきます。
    ベテランの人でも1日に20字程度。1カ月くらいかけて作成していきます。
  3. 出来上がったものをスキャナで取り込んで、デジタル化し、全字形へ展開。
    最低3、4カ月、長いときには10年以上かけて書体を作成するとのこと。
  4. 検査で文字が似たものを集め、濃度が似ているかチェック。
  5. たくさんの熟語を作り文字のバランスを検討。
  6. 文章を組んでみる組版テストを実施。

こういう工程を知るとフォントって高いな…とは思わなくなりますね。

TypeSquareでのbold指定

モリサワが提供しているウェブフォントサービス「TypeSquare」ではCSSでのボールド指定(font-weight:bold)が反映されないとのこと。
これはbold指定ではなく、ウェイトを使ってほしいからだそうです。

TypeSquareでは、html内でのbold指定や、 CSSによる「font-weight: bold」などのウエイト調整は、 自動的に解除されるため、反映しません。
1書体に対し複数のウェイトが用意されており、それらのフォントを指定することで、より細やかなウエイト調整を行っていただくことを実現しているためです。
bold設定以上の美しいページを作成いただくために、ぜひご活用ください。
詳細 | よくある質問 | Webフォント TypeSquare [タイプスクウェア] )

参考サイト

webフォントが使われている例として、資生堂を中心に紹介されてました。

161010_11HAKU(黎ミン)

161010_12MACHERIE(フォーク)

161010_13uno(秀英角ゴシック)

161010_14Beauty & Co. (ゴシックMB101)

161010_15花椿(見出し: 本明朝 / 本文: 秀英角ゴシック金)

資生堂は資生堂書体を作ってるだけあって、webでの書体選びもこだわっているようですね。
(参考: Webと誌面、”両方で使える”フォントを選定 – 資生堂「花椿」Webサイトのリニューアル秘話)

161010_16モリサワ

モリサワコーポレートサイトではWebフォントを使っているそうですが、おもしろいのが、レスポンシブによってフォントを変えているということ。

見出しには力強さと信頼感を備えた「ゴシックMB101」を、本文には可読性を重視した「UD新ゴNT」を採用しています。さらに、レスポンシブデザインへの対応の一環として、画面幅が狭まった際には、本文のテキストを通常より文字幅の狭い「UD新ゴ コンデンス」に変更し、スムーズな閲覧に貢献しています。
(参考: モリサワコーポレートサイトでWebフォントを全面採用)

アクセシビリティを考慮してかUDが使われてるのもポイントですかね。

TypeSquare

月1万PVまでであれば、1書体に限りますが無料で使うことができます。
25万PVだと月2160円。
MORISAWA PASSPORTを契約していれば、追加料金なしで利用できるようです。

価格 | Webフォント TypeSquare [タイプスクウェア]

ちなみに、Jimdoでは有料プランにするとTypeSquareが使えるそうです。

#3 LT

今回はLT大会もありました。

個人的に一番興味深かったのが、あわゆきさんのフォントづくりの話。
制作は、Drop&Type とIllustratorで作ってるそうです。

フォント制作ソフトではGlyphsもありますが、Glyphsで調整する前の試作としても良さそうと思いました。
お値段が2500円と手頃なのもいいですね。

#4 読みやすさ、伝わりやすさのためのテキストの扱いアレコレ

テキスト・フォント・組版と3つ構成で、読みやすさ、伝わりやすさを説く鷹野さんのセッション。

テキスト

ひらく漢字・ひらかない漢字の説明。
判別がむずかしいですが、自分で手書きしたときに漢字でどう書くかが一つの判断基準とのこと。

参考サイト:
表記規則:企業サイトで使用する「ひらく漢字」「ひらかない漢字」
第2回:わかりやすい文章の10大原則

フォント

そのサイトの世界観に合うフォントを選ぼうということで、実際のサイトを元にいろんなフォントを当てはめてのレクチャー。
A1明朝は万能でみんな好きだけれど、使われすぎてる感じもあるので逆に避けた方がいいかも…といったお話がありドキリとしました。

私はついつい、いつも同じフォントばかり使ってしまうので、自分の引き出しを増やすためにも、もっといろんなフォントを試してみようと思いました。

フォントのトレンドとして、最近人気の手書き風デザイン書体もいくつか紹介されてました。

組版

人は文章を読むとき、1文字1文字読んでいるのではなく、まとまりを認識しているとのこと。
文字を詰めることで読みやすさがアップするので、打ちっぱなしにはせず、自動カーニング+手詰を併用してうまく詰めようというお話。

フォント選び

フォントを選ぶことは、「世界観・テイスト」の表現でもあり、認識しやすさ、読みやすさといった「誤読を避ける気遣い」でもあるとのこと。

中でも「適切なフォントを選択すると、フォントの存在感は消える」という言葉が印象的でした。

最後に

以前よりも知ってるフォントが増えたものの、まだまだ使いこなせてないのが現状…。
今回のセミナーを受けて、その時々に合ったフォントを選べるようになりたいと、より一層感じました。

他の方のブログはこちら

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。