フォント – ページ 19

時に、西暦2015年—「あの作品」のフォント：マティス

Published on 2016年3月19日By mizuhoLeave a comment

今回は、マティスというフォントを紹介します。

マティスは明朝体の中でも、特に筆運びの重厚感を表現したデザインが特徴のフォント。

名前は聞き覚えがなくても、どこかで目にしたことがある、という人は多いはず。

エヴァンゲリオン公式サイト

ご覧のように、社会現象となったアニメ「新世紀エヴァンゲリオン」で、字幕やサブタイトルなどで非常に印象的な使われ方をしました。

マティスを発売している会社・フォントワークスの公式サイトによると、当時は作品にこのフォントが使われていることを知らなかったそうです。
TVシリーズの放映後、急にフォントが売れ出して、それではじめて知ったとのこと。

LETS｜特集フォントストーリー(Story of the font) Chapter2：マティス-EB　　エヴァンゲリオンのL字型サブタイトルで使用されたあの極太明朝体

いまや、さまざまなアニメやゲームで「フォント協力」として、このフォントワークスの名前がクレジットされることも多いので、探してみるのも面白いです。
さて、昨年は作品の物語がスタートした2015年に当たるということで、いろいろなコラボイベントが行われていました。

これは名古屋パルコで開催された海洋堂フィギュアワールド。

あれ、何か印象が違う…？

って、これヒラギノ明朝じゃないですか！
設営した人がMacユーザーだったのでしょうか…。

これは会場で買ったクリアファイル。これはマティスっぽいですが、ちょっと違和感が。

縦に110%拡大してみると、それっぽさが増しましたね。こうやって縦長にすることを、長体といいます。

それから、JR西日本の山陽新幹線40周年記念で運行されている、500系新幹線エヴァンゲリオンプロジェクト。

ちゃんとパンフレットもマティスを使っていますね！

新幹線車内もマティスづくし。

カーテンを開けたら、すみっこにもマティスという芸の細かさ。

Kioskのお土産売り場もマティスということで、フォント好きにもエヴァ好きにも見ごたえ充分のイベントです！

今回は、エヴァの作品世界を彩るフォント、マティスについてお話ししました。

【追記】

公式ストアでも、エヴァンゲリオン公式フォントとして発売されています。

おまけ。エヴァで明朝体のフォントが使われたのは、「犬神家の一族」などの市川崑作品の影響が強いのだそうです。

マティスとは違うフォントですが、デジタル化以前の映画のフォントのことがわかって面白いです！

市川崑のタイポグラフィ「犬神家の一族」の明朝体研究

posted with ヨメレバ

小谷充水曜社 2010-07-12

丸明オールド

Published on 2016年3月12日By mizuho1件のコメント

前回は、日本語フォントの基本形である明朝体とゴシック体についてお話ししました。
そして、ゴシック体には丸ゴシック体があることをお話ししました。

それなら、丸明朝体というものはないの？

はい、あるんです。

それが、カタオカデザインワークス（現・砧書体制作所）の丸明オールド。

丸明朝体

※制作者の片岡朗さんが書かれた「文字本」（誠文堂新光社）の表紙から引用しています

明朝体の特徴である、ウロコのところが丸くなっています。

はじめて使われたのは、サントリーモルツの広告。

明朝体の伝統を活かしながら、まったく新しい丸明朝体というカテゴリーを作り出したフォント。
それが話題になり、今ではさまざまなところで目にすることができます。

たとえば、新しい東京土産として評判の、「東京カンパネラ」。
【東京のお土産】人気のお菓子は「東京カンパネラ」！

そして、ここでも。

あなたの思う福島はどんな福島ですか？

今日も生きていることに感謝。南相馬市出身、広報課の久保川です。
いつも福島県に心を寄せていただき、本当にありがとうございます。

本日の全国紙朝刊をご覧になったでしょうか。県のクリエイティブディレクタ…

ふくしまからはじめよう。さんの投稿 2016年3月11日

東日本大震災から5年、全国紙朝刊に掲載された福島県の全面広告にも、丸明オールドが使われています。

実を言うと、これを知って、その想いに胸を打たれ、すぐにこの記事を書きたくなりました。
伝統と、新しさ。未来への挑戦。

そんな想いを伝えるのに、ぴったりなフォントです。

明朝体とゴシック体

Published on 2016年3月12日By mizuhoLeave a comment

今回は、日本語フォントの基本形、明朝体とゴシック体についてお話しします。

Google Fonts の説明をしたときに、明朝体とゴシック体を引き合いに出したのですが、そういえば、このふたつの違いをしっかり解説してないな〜、と思い至りました。

あるフォントが、明朝体なのかゴシック体なのか。
見れば、なんとなくわかる、という人は多いと思うのです。

じゃあ、具体的に何が違うのか？　と訊かれて答えられるでしょうか。

実際に並べてみましょう。

明朝体（みんちょうたい）は、その名の通り、中国の明の時代ごろに使われていた文字を基にしたフォント。
なので、筆遣いを表現する、「ウロコ」があるのが特徴です。

小説の本文など、伝統や格調の高さを感じさせるフォントです。

ゴシック体は、もう少し幾何学的なかたち。
基本的には、横棒と縦棒の長さが同じになるように作られています。

読みやすく、現代的な印象を受けます。
もちろん同じ明朝体・ゴシック体の中でも、フォントによってその形は様々で、そこに個性が出て面白いところ。

街にあるさまざまな看板。

本屋さんに並んでいる本の表紙。

眺めながら、どうしてこのフォントを使っているのか？　ということを考えると面白いです。

ちなみに、街にあるゴシック体の中には、線の角が丸い、いわゆる「丸ゴシック体」が多いことに気づきます。

なんだか、ちょっとなつかしい感覚をおぼえます。

なぜ、日本の看板には丸ゴシック体が多いのか？
気になった方は、こちらの本をどうぞ（笑）

まちモジ日本の看板文字はなぜ丸ゴシックが多いのか?

posted with ヨメレバ

小林章グラフィック社 2013-11-08

はじめての Web Font (3) – 日本語フォントを使ってみよう

Published on 2016年3月10日By mizuho1件のコメント

前回は Google Fonts によるWebフォントの使い方を説明しました。

今回は、それ以外の日本語フォントサービスを紹介します。

まず紹介するのは、TypeSquare。

TypeSquare は日本の大手フォントメーカー、モリサワによるWebフォントサービス。

プロ向けの印刷物にも使われる、高品質なフォントが多数ラインナップ。

でも、お高いんでしょう…？

と思いきや、なんと。

会員登録することで「1万PV/月」「1ドメイン」「1書体」にかぎり無料で使える「スタンダード無料プラン」が利用できるのです！（2016年3月10日現在）

メールアドレスと氏名・住所などを入れて会員登録後、ログインすると、プランの設定詳細が見られます。

まず試してみて、本格的に使いたくなったら、有料プランに移行できるというのは嬉しいですね。

大好きな丸明朝体フォント、「解ミン」も使えます！

また、既にモリサワのフォントライセンス「MORISAWA PASSPORT」を契約している方は、追加料金なしで TypeSquare が使用可能です。

テキスト装飾の CSSサンプル集も参考になります。（会員登録しなくても見られます）

その他、日本語フリーフォントが使えるWebフォントサービスは、以下のようなものがあります。

最後に、Webフォントを使う際の注意点。

日本語の特徴は、数字・記号・アルファベットだけでなく、ひらがな・カタカナ・そして漢字と、多くの文字が必要なこと。

そのため、フォントデータの読み込みに時間がかかることがあります。

また、古いブラウザではWebフォントの表示に問題があることも。

ただ、今後の技術の進歩やサービスの広がりによって、ますます便利になることは間違いないでしょう。

ブログやウェブサイトを運営される方は、ぜひ一度 Webフォントという世界を覗いてみてください。

はじめての Web Font (2) – Google Fonts

Published on 2016年3月8日By mizuhoLeave a comment

前回は、想いを文章にする上で、フォントを意識して選ぶというのが大事だということをお伝えしました。

そのための仕組み、Webフォントについて今回はお話しします。

もう一度、Webフォントの仕組みを簡単に言うと、Webサーバ上にフォントのデータを置いておき、表示する文章とあわせてダウンロードすることで、思い通りのフォントで表示させることができます。
ところで、ここで注意がひとつ。

フォントというものは、誰かが作ったものです。

コンピュータができる前から使われていた活字や筆文字をもとにしたフォントもあれば、最初からデジタルで作られたフォントもありますが、基本は同じ。
誰かが作ったものなので、そこには著作権があります。

なので、自分が持っているフォントを勝手にWebサーバにアップロードすることはできません。
無償で使える、いわゆるフリーフォントであっても、Webフォントとして使ってよいかはライセンスを必ず確認してください。

なんだか難しそう…と思ってきましたか？

大丈夫、自分でフォントを用意しなくても、Webフォントを簡単に使えるサービスが世の中にはあるのです。

もちろん、基本的には有料のサービスが大半ですが、まずは気軽に試せる、無料のWebフォントをご紹介します。

今回ご紹介するのは、Google Fonts。
その名の通り、Googleが提供しているサービス。

上記のページで、使いたいフォントを選びます。

左上の Filters のところでおおまかな分類を選べます。

ちなみに Serif（セリフ）というのは「ひげ」という意味で、日本語フォントでいうと明朝体に近い雰囲気のフォント。
San Serif（サンセリフ）というのは「ひげがない」、日本でいうゴシック体に相当します。

気になるフォントを選んで「Add to Collection」をクリックすると、コレクションに追加されます。

右下の「Use」をクリックして、さらにスタイル（太字や斜体）を選びます。
画面をスクロールすると、Webフォントの使い方の説明があります。

この文をコピーして、HTMLのヘッダ部分に追加　※Wordpress の場合、テーマヘッダー (header.php)

<link href='https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif' rel='stylesheet' type='text/css'>

この文をコピーして、CSSの使いたい要素に追加　※Wordpress の場合、スタイルシート (style.css)

font-family: 'Noto Sans', sans-serif;

たったこれだけで完成です！

WordPressを使っている場合、さらに簡単に使えるプラグインがあります。

たとえば「Easy Google Fonts」プラグインを使えば、外観のカスタマイズで「Typography」というメニューが追加されます。

こんな感じで、Webフォントを使うことができます。

あれ…？
でもこれ、アルファベットしか変わってなくないですか？

はい。
残念ながら、2016年3月8日現在、この方法で利用できる日本語フォントは存在しないようです。

でも、実は Google Fonts には日本語フォントもあるのです。

それが Noto Sans Japanese。

もともと「No tofu（豆腐・文字化けをなくす）」という目的で作られた多言語対応フォント。

現在は試験的に（？）Webフォントとしても提供されているようです。

Easy Google Fontsプラグインでは対応していないので、直接HTMLファイルとCSSに以下の記述を行います。
<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>
font-family: 'Noto Sans Japanese', sans-serif;

これを適用すると、こんな感じになります。なかなかかわいいです！　よね！

今回は、Google Fonts でWebフォントを使う方法を説明しました。

次回は、それ以外のWebフォントサービスの使い方と、Webフォントの注意点をお話しする予定です。

2016/06/17 追記

Google Fonts がリニューアルされたので、新しく解説記事を書きました。→ Google Fonts がマテリアルデザインを採用してリニューアル