mizuho

文字遣い/探索士 ——策を練るのが策士なら、探索するのが探索士だ。

明朝体とゴシック体

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

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

 

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

 

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

 

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

mincho-gothic

 

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

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

 

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

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

 

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

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

 

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

 

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

 

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

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


 

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

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

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

 

 

まず紹介するのは、TypeSquare

 

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

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

 

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

 

と思いきや、なんと。

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

 

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

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

Shot 2016-03-10 22.33.22

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

 

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

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

 

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

 

 

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

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

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

 

 

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

 

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

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

 

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

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

Google Fonts - Choose

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

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

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

Google Fonts - Use

右下の「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」というメニューが追加されます。

Shot 2016-03-08 22.09.32

こんな感じで、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;

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


 

Shot 2016-03-08 22.47.58


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

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

 

2016/06/17 追記

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

はじめての Web Font (1) – フォントで想いを伝えよう

IMG_6954-1503

さて、ではさっそく今回から続き記事をはじめてみます。3回くらいの予定。
あなたは今、どんな画面でこのブログをご覧になっているでしょうか。

 

Windows パソコン?
それとも Mac?
Windows でも、最新の Windows 10 を使っている人もいれば、少し昔のOSのまま使う人もいるでしょう。

スマートフォンで観ている方も多いでしょうね。
iPhoneか、Android か。Windows Phone で見ている人もいたりして。
あっ、あと、ウェブブラウザじゃなくて、RSSリーダーとか何かのアプリで見ている人もいるかもです。
(この場合は、ごめんなさい、ちょっと例外。あくまで、今回はウェブページをそのまま見ているときのお話です)

 

なんであれ、このブログに限らず、ウェブ上の日本語の文章が読めていると思います。

ということは、あなたの環境に、日本語が表示できるフォント(文字を表示するためのデータ)がインストールされているということになります。

2016年現在、ごくふつうのパソコンやスマートフォンであれば、種類は異なれ、いくつかの日本語フォントが標準で組み込まれています。
ウェブブラウザは、そのなかから適切なフォントを選ぶことによって、日本語の文章が表示できるという仕組みです。

 

でもね、本当は。

自分の想いを文章にする上で、伝え手がフォントを意識して選ぶというのはとても大事なことなのです。

 

フォントなんて、文字の区別がつけばいい、と思うでしょうか?

 

でも、考えてみてください。

 

自分がどうしても入りたい学校や会社の、面接試験。
あるいは大切な人の、結婚式。
自分の子供の、入学式。

そんなときに、着れれば何でもいいといって、いつもと同じ服を着ていくでしょうか。
きっと、自分の想いを伝えるため、あるいは相手に敬意を表して、ちゃんとした服装にするのではないでしょうか。

 

フォントを選ぶというのも、同じこと。

普段着のようなフォント。
ちょっと着飾った、よそゆきのフォント。
思わず目を惹く、かわいいフォント。

だから世の中には、そんなふうにたくさんのフォントがあるのです。

 

さて、とはいっても。
残念ながら、先に述べた通り、環境によってインストールされているフォントはさまざま。

もし、自分がインストールしているお気に入りのフォントを使いたいと思っても、見ている人がそのフォントを持っているとは限りません。

 

ではどうするか、ということで登場するのが、Webフォントという仕組み。

簡単に言うと、Webサーバ上にフォントのデータを置いておき、表示する文章とあわせてダウンロードすることで、思い通りのフォントで表示させる、ということが可能になります。
具体的に、どんな風に使えばいいのか、ということは、また次回のお話。

今回は、文章で想いを伝える上でのフォントの大切さをお話ししました。


さあ、漕ぎ出そう。

2016-03-06-213127-1

ようこそ、はじめまして。

今日は、船出の日です。
どうして、このブログをはじめてみようと思ったのか。
それは、道中おいおい…

まずは、タイトルの説明だけ。

 

【凪(なぎ)】を辞書で引くと、「風がやんで、波がなくなり、海面が静まること。朝凪や夕凪。」(大辞泉)とあります。

そして【朝凪】はというと、「陸風から海風に交代する朝方に、一時無風状態になること」。
夕凪は、その逆ですね。

穏やかで、でも今までとは違う世界が始まる予感を秘めた時間。

 

それから、渡し場です。
これも岸から岸へ、人を新しい世界へといざなうところ。

そうやって、訪れた人をまだ知らない世界に連れていく、水先案内のような場所にできたらいいな、
そう思って名づけました。

 

では、具体的に、私の案内できる世界は? と訊かれるでしょうか。

たとえば、デザインとか、フォントとか、プレゼンの方法とか…。
あるいは、世界そのものを、新しい視点で見る楽しみ方とか。

今のところは、そんなところを考えていますが、どうなることやら。

 

よろしければご一緒に、漕ぎ出しましょう。