LIFE is 日々一歩(124)[コラム]私が使ってる、フォントたちの話
── 森 和恵 ──

投稿:  著者:



こんにちは、森和恵です。

先日、運営しているYouTubeチャンネルに「動画のサムネがヘン」というコメントがあり、涼しい顔を見せてはいるものの超凹んでおります。トホホ。

さてさて。気を取り直して、本編を始める前のお知らせから。

先週放送した《Flexboxでページのヘッダーを作ろう 前編・後編》をレポートしました。

▼Flexboxでページのヘッダーを作ろう 前編・後編
https://r360studio.com/youtubelive20200715-csslayout11/

ここ数回お届けしている実践編では、Adobe XDでデザインしたトップページのカンプを元に、flexboxを用いたコードの解説をしています。

このまま進むと6回の放送で終われそうですが、トータル時間としたら8時間以上となるんですね。

ちょっとした講習会ぐらいのボリュームになってます。無料で視聴できますので、ぜひご覧になってみてください。

……ということで、本題のフォントを紹介へ戻りましょう。





●フォントの違いって意識してる?

文字があれば、その形「フォント」があります。世の中のにあるたくさんの文字には、さまざまなフォントが使われているのですが、フォントの違いを意識して見ていますか?

例えば、ボラギノールさんの公式サイトでは、ロゴのフォント・冒頭アイキャッチの雰囲気のある明朝体、説明文の読みやすい細ゴシック……と、さまざまなフォントが使われています。

ボラギノール公式サイト
https://www.borraginol.com/

いろんなフォントを適切に組み合わせることで、企業イメージが表現されているなと感じました。

※ボラギノールさんのウェブサイトを例にしましたが、おかげさまでお尻は健康です。仕事柄、いろんなサイトのデザインを研究してます。

さて。私自身のフォント事情はどうかというと、普段使いのスタメンフォントをいくつか決めています。制作する時にフォントを悩むのが面倒だという気持ちもありますが、フォントを絞っておくとイメージが統一するのでは? と思ってのことです。

●普段使いのフォントたち

ゴシックと明朝に分けて、使いやすいフォントを2つづつ決めています。

〇普段使いのゴシック

“たづがね角ゴシック”
https://www.monotype.com/jp/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/%E3%81%9F%E3%81%A5%E3%81%8C%E3%81%AD%E8%A7%92%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF

誰が見ても読みやすく、どんなところに使っても印象がよく、人とはちょっと違うゴシックフォントが欲しいと思っていました。

1ウェイトで18,000円ぐらいするフォントですが、「これをウチのゴシックにしよう」と思い、10ウェイト揃えました。清水の舞台の買い物でした。

※フォントの「ウェイト」とは、太さ違いのこと。きちんと設計されたフォントでは、同じ形の太さの異なるフォントが複数あります。

数年使い続けていますが、ここ一番で迷わずにしっかりとした画が作れる良いフォントだと思います。

“源ノ角ゴシック”
https://ja.wikipedia.org/wiki/%E6%BA%90%E3%83%8E%E8%A7%92%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF

AdobeとGoogleが共同開発した、フリーライセンスのフォントです。

他者とデータ共有する時や、ウェブフォントとして公開する時は、こちらを使っています。フリーライセンスのフォントをひとつ決めておくと、共有するデータを出す時に、ライセンスを気にしなくても良いため便利です。

読みやすさを追求したフォントというだけでなく、4ウェイトも準備されており、フリーフォントながらも使い勝手のよいフォントだと思います。

また、“源柔ゴシック”や“源暎フォント”など、このフォントを元にした派生フォントも多くあり、ちょっとしたアクセントに併用することもできて便利です。

プログラミング用のフォントとして、“源ノ角ゴシック Code”や“Myrica”というフォントも使っています。

※プログラミング用フォントとは、「0(ゼロ)」と「o(オー)」など、見分けが付きにくい文字のデザインが工夫されていて、プログラムのミスを防ぐためのフォントです。
https://myrica.estable.jp/

〇普段使い明朝

“りょう Display PlusN”
https://fonts.adobe.com/fonts/ryo-display-plusn

“貂明朝テキスト”
https://fonts.adobe.com/fonts/ten-mincho-text

どちらも、Adobe Fontsライセンスの明朝体でAdobe製のフォントです。

Adobe Fontsは、Adobe Creative Cloud内のサービスなので、追加料金を気にすることなく導入できるのが嬉しいところです。

5ウェイトある“りょう”は、「明朝体が必要だ」という時にしょっちゅう使っています。ウェイト数の多い明朝体フォントは、フリーフォントにはなく、購入しないと手に入らないので、Adobe Fontsで利用できるのは助かります。

“貂明朝”は、太・細の2ウェイトしかないのですが、女性らしいやわらかさがあり、しっとりとしたよい雰囲気に仕上がります。

●ワンポイントに使う、リリーフフォント

形が風変わりなフォントは字数が多いときには使いづらいですが、字数少なめでキャッチコピー的に使うと、キラリと光って味となります。そんなリリーフフォントは、フリーフォントや数千円で買いきりのフォントを使うことが多いです。

〇フロップデザイン
https://www.flopdesign.com/

フロップデザインさんのフォントは、とにかくため息が出るほど「かわいい」です。

雰囲気がありすぎるだけに組み合わせがむずかしいのですが、写真やイラストと共にレイアウトして、このフォントがバチッとはまればとても可愛いものが作れます。

数あるフォントで、特にわたしが好きなのは“本丸ゴシック”シリーズです。

〇フォントな
http://www.fontna.com/category/gallery/

フリーフォントの“やさしさゴシック”、“ロゴタイプゴシック”、“ラノベポップ”でおなじみの“フォントな”さんのフォントは、やさしさにあふれています。

それほど我が強いわけではないですが、スパイス的に使うと雰囲気が演出でき、欠かせないフォントです。

〇ふい字
http://hp.vector.co.jp/authors/VA039499/

フリーフォントの“ふい字”は、近所のあこがれのお姉さんの手書きフォントという雰囲気です。手書きが欲しいな、と思ったときは、こちらを使います。

●憧れのフォントたち

フォントをレンタルするサービスで、前々から利用したいなと憧れているのが『mojimo-live』です。

mojimo-live|mojimo
https://mojimo.jp/live/

1年間で約1万円程度の費用で、動画のアイキャッチによく合う40書体がレンタルできます。

“くろかね”、“ベビポップ”、“ラグランパンチ”など、バラエティやテレビアニメでおなじみの、太めで味のあるフォントが揃っています。

「動画のサムネがヘン」といわれた私も、これを使えば少しはYouTuberっぽくイケた感じになるのかしら……。

レンタルスタートすると費用がかかり続けるので、しっかりとYouTubeの配信体制が整ったら借りようと目論んでおります。

……というわけで、今回はこちらまで。

昨日から #もりかず昔語り というハッシュタグをつけて、私自身の昔の仕事の思い出をつぶやき始めました。

https://twitter.com/hashtag/%E3%82%82%E3%82%8A%E3%81%8B%E3%81%9A%E6%98%94%E8%AA%9E%E3%82%8A?f=live

思い返すと昔のできごとを驚くほど覚えていないことに気づかされ、本当に忘れてしまわないうちに、防備録代わりのツイートすることにしました。

わりと面白いと評判なので、ぼちぼち続けていこうと思います。

ではまた、次回お目にかかりましょう!
(^^)


【 森和恵 r360studio ウェブ系インストラクター 】
mail: r360studio@gmail.com
YouTubeチャンネル: https://youtube.com/r360studio
サイト: http://r360studio.com/