feature image

2022年3月12日 | ブログ記事

あの日見た書体の名前を僕たちはまだ知らない。


目次

まえがき

こんにちは、@d_etteiu8383です。この記事はtraP新歓ブログリレー2022 4日目(3/12)の記事です。本日同時投稿されている@Onagadoriの記事もぜひご覧ください!

学内バイトのすゝめ
これは新歓ブログリレー4日目の記事です。 新入生の皆さん、ご入学おめでとうございます。 はじめまして、21Bのおながどりと申します。 さて、春休みは普段より時間に余裕があるため「アルバイトを始めたい!」と考える方も多いのではないでしょうか。これを読むあなたが大学に合格したばかりなら、なおさらでしょう。大学生になって人生で初めてアルバイトをする方もいるのではないでしょうか。私も1年生の8月から近所のスーパーマーケットで、さらに9月からは大学内でもアルバイトを始めました。 そこで、今日はアルバイトを半年掛け持ちした感想をもとに、大学内でできるお仕事について話したいと思います。アルバイト探しに迷う…

新入生の皆さん、東京工業大学へのご入学おめでとうございます🎉突然ですが本日3/12が何の日かご存じですか?そうです、〈物語〉シリーズの戦場ヶ原ひたぎ役などで知られる声優の斎藤千和さんの誕生日ですね。

ということで今日は〈物語〉シリーズの紹介をする記事に...しようと思っていたのですが、それでは書いている僕しか楽しくない記事になってしまうので、別ベクトルで〈物語〉シリーズの良さを布教する感じの記事にします。

  1. 書体について
  2. 書体名の調べ方について
  3. 好きな書体名について

簡単にお話します。気楽にお読みください。

〈物語〉シリーズとは

〈物語〉シリーズは『化物語』を始めとする西尾維新による小説シリーズで...みたいな話はWikipediaとか著者公式ページをご覧ください。内容を要約すると1人の男の子が10人ぐらいの女の子といちゃいちゃする話です。

上に挿入した動画はそのテレビアニメ版の第一話です。

〈物語〉の最初には...

僕が本書の中で、というかシリーズ全作品を通して「かっこいい」と思っている部分を紹介します。

西尾維新 (2006)『化物語 (上)』 講談社 p.4

どこだよって感じだ...

まず本書を開くとp.3に「化物語 上 西尾維新」と、本からの自己紹介があります。こんにちは。

上の画像はその次のページ、p.4に記された一文です。装丁デザイン/イラスト担当者の名前の下にひっそりと、でも確かに「本文使用書体:FOT-筑紫明朝 Pro L」と書かれています。タイトル・著者名の次、目次の前、まだ物語すら始まっていない、よくわからん場所に、必ずこいつが書かれています。化物語上巻のみならず、下巻にも、傷物語にも、偽物語にも、終物語にも、死物語にも...100%、物語の前には彼がいます。物語シリーズっぽく言うなら『100%こいつが書かれた小説です。』といったところでしょうか。

「この文のどこがかっこいいんだ」なんて思う方もいるとは思いますが、少なくとも僕はこの文を初めて見た時、とても感動したというか、強い衝撃を受けたことを覚えています。

本記事は、読者の皆さんにもこの一文のかっこよさを理解してもらうための記事となっています。最後まで読んだ後にもう一度この一文を見て、「かっこいいじゃん」と思ってもらえたら何よりです。

書体の話

「本文使用書体」...上の一文について理解するには、まず書体について理解する必要がありそうです。

書体(しょたい)とは、一定の文字体系のもとにある文字について、それぞれの字体が一貫した特徴と独自の様式を備えた字形として、表現されているものをいう。
書体 - Wikipedia

なんか小難しい説明がされていますが、要するに「一貫した特徴・様式を持っている字形」だと思えば良いと思います。「フォント」と聞いて何か思い浮かぶ人は多分それであってます。"書体"と"フォント"の区別とか僕はあまり気にしないタイプです。とにかくその文字の形の種類みたいなものだと理解しておけば十分です。

書体の名前

人間の髪型に"ショート", "セミロング", "ストレート", "ウェーブ", "ポニーテール"とか名前がついているのと同じように、書体にも大体名前が付けられています。「書体なんて詳しくないぞ」という方も、美術の授業で「ゴシック体」とか「明朝体」とかは聞いたことがあるのではないでしょうか。この本文で使われている書体は(十中八九)ゴシック体です。

ゴシック体とか明朝体は、書体の大まかな分類の名前です。何となく線の太さが均一であればゴシック体と呼び、縦横の線の太さの違いや角の飾り(ウロコ)があれば明朝体と呼んだりします。誰にでも読みやすいように設計された書体なら「ユニバーサルデザイン書体(UD書体)」と呼んだりもします。

さらに、「大まかな分類」の名前だけでなく、(大抵の場合)それぞれ一つ一つの書体に名前が付けられています。名前は大事です。名前を付けるということは、"それを他と区別する"ということに他なりません。

ウェブサイトや書籍、チラシ、CMなど、文字が使われる場面は多種多様です。文字が持つ視覚的な情報は、それを読んだ人に、その文章の内容以上の情報を伝えることがあります。

ashita

「教授が講義スライド内で課題締め切りを伝える」「"余命宣告"がテーマの小説の表紙デザイン」「ソーシャルゲームのイベント期間を伝える」...その場面で伝えたい情報によって、書体も適切に使い分ける、つまり区別する必要があります。文字は世界中の様々な場面で利用されていますから、必然的に、様々な書体がデザインされてきました。この世には何種類もの書体が、そしてその名前が存在します。

"名前がついている"というのは当たり前のようではありますが、名前の存在は、そこに名付け親がいるということ、その名前を付けようという意思があったことの証明でもあります。こうして考えてみると、いろんな書体の名前を知るというのが少し楽しく思えてきます。

そして名前を知るということは、それを認識することをも意味します。traP内にはタイポグラフィやアプリケーションのデザインを行っている部員も在籍しているのですが、知っている書体の数はデザインの引き出しの数となります。「この部分では○○の書体を使おう」「ここのデザインは××の書体と相性がよさそうだ」など、デザインを決定する際にはどのような書体を選べるか=知っているかが結構影響してきます。

あの日見た書体の名前を僕たちはまだ知らない。

そろそろタイトルを回収しに行きましょう。ここまで名前は大事だ、名前を知っていることは大事だと主張してきましたが、実際、今あなたが読んでいるこの文字の書体の名前をあなたはご存じですか?本ブログの本文で利用されているフォントは比較的有名なものなので、フォント好きの方なら簡単に言い当てられるかもしれませんね。

しかし書体に関する学識の有る無しに関わらず、今見ている文字の、その書体の名前を言い当てるのは至難の業です。本ブログにおいて@spaさんが投稿している絶対フォント感トレーニング【デザインフォント編】という記事にあるように、ある程度のトレーニングを積めば有名なフォントをズバッと言い当てること(=絶対フォント感)はできるようになります。

絶対フォント感トレーニング【デザインフォント編】
この記事は「夏のブログリレー」参加記事です。 はじめまして、spaです。 最近LETSを契約したので、絶対フォント感のお話をします。 絶対フォント感とは 絶対フォント感とは、文字を見ただけでフォントがわかる能力です。意味わかりませんね。私もわかりません。 完璧な絶対フォント感を身につけるにはとてつもない修練が必要となるので、今回は日常に潜むデザインフォントの名前を特定できると楽しいよ、という紹介をしたいと思います。 フォントの基礎知識 一口にフォント[1]と言ってもいろいろな種類があります。 日常生活でよく目にするフォントは、おおまかに明朝体、ゴシック体、その他の書体に分けられます…

...が、上記の記事内で

完璧な絶対フォント感を身につけるにはとてつもない修練が必要となる

と紹介されているように、すべてのフォントと顔見知りになるには膨大な時間がかかります。

大抵の場合、文字達は自身のフォントに関する自己紹介をしてくれません。テレビを観ても、街中で看板を見かけても、その中の文字達は「私はHelveticaです」だとか、「俺はラグランパンチだ」なんて言ってくれません。一度顔を見かけた程度では、名前を知ることすらできないのです。仮に完璧な絶対フォント感を身に着けていたとしても、初対面の書体を前にしては無力であり、せいぜい「君は新ゴ Mに似てるね」とか推測できる程度です。「何でもは知らないわよ。知ってるフォントだけ」ということですね。

書体名の調べ方

しかし幸いなことに、ことウェブページにおける書体については、比較的簡単にその名前を調べることができます。

そもそもウェブページでは、一般的にスタイルシートと呼ばれる仕組みを用いてその見栄えが制御されています。一般的にはCSSと呼ばれるスタイルシートが用いられています。

CSS の基本 - ウェブ開発を学ぶ | MDN
CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか?コンテンツを (ウェブページの) レイアウトの中で特定の場所に表示するにはどうすればいいのか?背景画像と色を使って ウェブページをどのように飾るのか?というような疑問に答えていきます。

このCSSにおいては、ページで用いる書体を以下のように設定します。

html {
	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', sans-serif;
}

これは実際に本ブログで利用されているCSSから一部を抜粋したものです。font-familyの欄に、使用する書体名を列挙します。...そうです、ウェブページにおいてはそもそも書体をその名前で設定しているため、このCSSさえ読むことができれば書体名は判明します。

より詳しい構文の説明などはMDNの以下のページが詳しいです。

font-family - CSS: カスケーディングスタイルシート | MDN
CSS の font-family プロパティは、選択した要素に対して、フォントファミリー名や総称ファミリー名の優先順位リストを指定することができます。

本ブログにおいては"游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', sans-serifの8種類の名前が記載されていますが、これらの書体すべてがページ内で利用されるわけではありません。これは仕様書体の優先順位リストの指定であり、先頭に近い書体から優先的に利用されます。ウェブページはPC、スマートフォン、最近ではゲーム機からも表示できますが、さまざまな環境でイイ感じに表示できるよう、このように複数設定する場合が多いです。

開発者ツールで書体名を調べる

さて、このCSSの閲覧方法ですが、ブラウザー開発者ツールとは? - ウェブ開発を学ぶ | MDNで紹介されている"ブラウザー開発者ツール"を通して確認することができます。

ブラウザー開発者ツールとは? - ウェブ開発を学ぶ | MDN
近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザの開発者ツールの使い方について説明します。

上記サイトにもある通り、

で開発者ツールを開くことができます。例えばこの記事で開くとこんな感じ。

devtool_sample

ブラウザによって異なりますが、ElementsInspectorと名前の付いたタブを開くとページ本文を確認できます。

html_sample

HTMLと呼ばれる言語で記述されているため、パッと見ごちゃごちゃしていてよくわからないかもしれませんが、基本的には

が集まって構成されています。

詳しくはHTML の基本 - ウェブ開発を学ぶ | MDN等を参照してください。今回は深く理解してもらう必要はありません。

HTML の基本 - ウェブ開発を学ぶ | MDN
HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、ウェブサイトのコンテンツの構造を作るために使うコードです。例えば、コンテンツは段落、箇条書きのリスト、画像の使用、データテーブルなどの組み合わせで構成されています。タイトルが示すように、この記事では HTML とその機能の基本的な理解ができるように説明します。

で、この各要素に対して、CSSによって"見た目"が設定されています。これまたブラウザによって名称が異なりますが、開発者ツール上のStyleといったタブで実際にどのようなCSSが設定されているのかを確認できます。

devtool_style

また、Computedといったタブから、その要素の見た目が最終的にどう設定されているのかを確認できます。先ほども説明したように、CSSは優先順位リストであり、その優先順位に従って最終的に選ばれた"見た目"はこのタブで確認できます。つまりここを見ればなんというフォントが適用されているのか確認することができます。

devtool_computed

下部のRendered Fontsに、実際に表示に利用された書体名が表示されます。この例では147文字でYu Gothic Mediumが、8文字でSource Code Pro Mediumが使用されていることがわかります。

拡張機能で書体名を調べる

ここまで開発者ツールでのフォント名確認の方法を簡単に紹介しましたが、ブラウザの拡張機能としてフォント名確認ツールもいくつか存在します。WhatFont Toolはその一つで、こちらを利用すればもっと簡単にフォント名を確認することができます。

いろんな書体の名前

さて、ウェブページにおける書体名の調べ方が何となくわかったところで、最後に具体的にどんな書体があるのかいくつか見てみましょう。僕の好きな書体名と部内アンケートで募った書体名をいくつかピックアップして掲載します。

筑紫明朝

tsukumin-1

僕が冒頭で「かっこいい」と言っていたアレです。"筑紫明朝"は書体の名前で、この書体が〈物語〉シリーズで本文に利用されていたんですね。"明朝"とあるように、明朝体の一種です。すっきりと、それでいて優雅な曲線を持つ美しい書体ですが、その名前も非常にかっこいいです。デザイン自体にも高級感がありますが、名前からも高級感が溢れ出ています。フォントワークスを代表するフォントにふさわしい名前ですね。僕の大好きなフォントです。

筑紫書体シリーズ | Fontworks

メイリオ

meiryo-1

明瞭をもじってメイリオって名前にするの普通にすごいハイセンスだと思う
(部内アンケートでの意見)

メイリオはWindowsの標準フォントとして広く知られる書体です。名前は"明瞭"に由来しており、その非常に読みやすいデザインがうまく表現されています。

Impact

impact

分かりやすいしその名の通りインパクトはある
(部内アンケートでの意見)

"名は体を表す"とはよく言ったものです。そのどっしりとした重厚感から、ロゴ作成などにも重宝します。かっこいい。

アンニャントロマン

toroman

不思議な感じがして語感も良い
名前がとても覚えやすい。ポップな印象がフォントに合っている
(部内アンケートでの意見)

同人サークル「森の中の猫の小屋」により制作/配布されているフリーフォントです。以下のページからDLすることが可能です。

フリーフォント「アンニャントロマン」
フリーのロゴタイプかなフォント「アンニャントロマン」。自由にお使い頂けます。

英語表記はAnnyantRomanですが、配布サイトのURLなど(http://inatsuka.com/extra/toroman/)から考えるに明らかに制作サイドはアンニャン/トロマンで区切っています。かわいいですね。

あとがき

皆さんは普段本を読むとき、その本文で使用されている書体の名前を知りたいと思ったことは有りますか?僕は化物語を読むまで、全くもって、書体を気にしたことなんてありませんでした。だからこそ、初めて化物語を読んだときに、「これから私はこの書体で語ります」という挨拶に強い衝撃を受けたのでした。

僕が書体に興味を持ち始めたのはここからです。筑紫明朝について調べ、Fontworksを知り、ラグランパンチに惚れ...そんなこんなで今に至ります。いろんな書体を調べて、知って、そのおかげでいろんな声を使えるようになりました。character(文字)はcharacter(性格)です。知っているフォントの幅が広いほど、文章やデザインにおける表現の幅も広がると思っています。英語で「正体」は"true character"と言いますし、皆さんもぜひ、普段見ている文字の本当のフォントを、書体の正体を、調べてみてはいかがでしょうか?

そういえば「今あなたが読んでいるこの文字の書体の名前をあなたはご存じですか?」と質問しましたが、答えはわかったでしょうか?前述した開発者ツールや拡張機能を使って確認してもOKですが、『タイトル・著者名の次、目次の前』に...


最後までお読みいただきありがとうございます。明日の新歓ブログリレー2022担当者は@NABE, @yukikurageです。楽しみ~

d_etteiu8383 icon
この記事を書いた人
d_etteiu8383

19の"でっていう"です グラフィック班とゲーム班所属 3DCGメインでいろいろ活動しています Vtuberっぽいこともしてたりしてなかったり

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2022年4月5日
アーキテクチャとディレクトリ構造
mazrean icon mazrean
2022年3月29日
課題・レポートの作成、何使う?【新歓ブログリレー2022 21日目】
aya_se icon aya_se
2022年4月19日
【入門】JUCEを使ってVSTプラグインを作ろう!!
kashiwade icon kashiwade
2022年3月27日
ReactでToDoリストを作る(後編)
mehm8128 icon mehm8128
2022年3月25日
Wordのすゝめ
Tennessine_699 icon Tennessine_699
記事一覧 タグ一覧 Google アナリティクスについて