Webフォントを使う、届ける – REALTYPE

ウェブサイトを読む相手に対して、想いを届ける手段のひとつ、Webフォント。

まだ Web フォントになじみのない方は、過去に書いた記事を、ぜひお読みください。

今回ご紹介するのは、2016年よりオープンした新しい日本語Webフォントサービス、REALTYPE(リアルタイプ)です。

REALTYPE

template page

まずは、利用できるWebフォントを体感できる「Webフォントシミュレーター」を試してみます。

公式ホームページからURLを入力すると、どのWebサイトもフォントを変えて表示させることができます。

凸版文久体もラインナップに入っていました。公式キャラクターのぶんきゅうくん&ぶんきゅうちゃん、かわいいですね。

凸版文久体(ぶんきゅうくん) (@toppanfont) | Twitter

The latest Tweets from 凸版文久体(ぶんきゅうくん) (@toppanfont). 凸版文久体の公式アカウントです。凸版文久体開発のプロジェクトメンバーがつぶやきますよ、どうぞよろしくお願いします。凸版文久体ファミリー全5書体が完成しましたよ!

 

丸明オールドでおなじみの砧書体製作所による iroha シリーズもあります。

 

実際にWebフォントを使うには、会員登録して、フォントプロジェクトページにログインする必要があります。

URLは http、https の両方を同時に指定可能。

無料プランに対応するフォントであれば、Webサイトにバナーが表示された状態で利用できます。

有料プランでも、料金は一文字ずつの計算となっています。フォントにタグが設定されていて選びやすい。

また、おもしろいのはユニットというグループ機能が利用できること。

複数人で一つのWebサイトを管理することができるので、個人サイトだけでなく組織で用いる場合などにも便利そうです。

 

そして実は、REALTYPEならではの特長は、ここから。

REALTYPEでは、ほかのWebフォントサービスのようにフォントを使うだけでなく、自分で作ったフォントを配信することもできるのです。

 

フォントを利用するときと同じく、プロジェクト名を決めて、フォントファイルをアップロードすると、審査が行われたのちに公開されます。

ユニット機能を使えば、一般には公開したくないフォントを特定の範囲で公開することもできます。

将来的には、フォントの制作を複数人で分業することも考えられているそうです。

 

スマートフォンやパソコン向けのアプリケーション配信と同じように、フォントを作り、届けることがもっと身近になる、そんな日がやってくるかもしれません。

LINE BLOG の Webフォントを試す (2)

引き続き、LINE BLOG で使えるフォント、残り20種類を試していきます。前回の記事はこちら

 

UD 角ゴ

lineblog-21

UD はユニバーサルデザインの略。スマートフォンの小さい画面でも読みやすいフォント。ちょっと縦長のコンデンス書体が使われているようです。

 

ロダンわんぱく

lineblog-22

ロダンわんぱく、名前がかわいいですね(笑)。

直線と曲線を自由に組み合わせたひらがなやカタカナ、こどもといっしょにパズルを解いているような楽しさがあります。

 

スーラキャピー

lineblog-23

前回紹介したスーラよりも、もっとゆるい雰囲気のスーラキャピー

リリースされたのは1987年(昭和62年)だそうなので、ちょっと昭和を感じるというか、思わずキャピキャピという言葉(死語?)を連想したのですが、関係があるのかどうかは知りません。

 

学参丸ゴ

lineblog-24

学参というのは、学習参考書のこと。丸ゴシックでも、スーラよりちょっとまじめな雰囲気にしたいときにどうぞ。

 

ニューシネマ

 

lineblog-14

名前の通り、映画の字幕に使うことを想定したニューシネマ。観た映画の感想を書くとき、ぜひ使ってみたいです。

 

ハミング

lineblog-15

丸ゴシックのように見えて、よく見ると筆の強弱がリズミカルなハミング。筑紫書体と同じく、フォントワークス藤田重信さんのデザイン。

 

ライラ

lineblog-16

ロゴでもよく使われるライラ。このあたりのデザイン書体は、長文で表示されるとちょっと読みにくいかもしれません。

いまのところ、タイトルと本文のフォントを変えることができないようなので、なるべく短い文章のときに使ってみては。

 

アーク

lineblog-17

LINE BLOGのアプリをインストールして、いくつかのブログを検索していたところ、このアークが使われているものを見つけて一目惚れしました。

このフォントを使うだけで、女子力の高いブログになりそう。

 

マティスみのりやまと

LINE BLOG - マティスみのりやまと

マティスの漢字と、うねりのあるひらがなやカタカナを組み合わせたマティスみのりやま

ちょっと、まだ使いどころが想像できません。

 

マティスえれがんと

lineblog-3

これもひらがな・カタカナだけデザインが違う、マティスえれがんと。昔の少女漫画ふう、くるくるっとした巻き毛のイメージ。

 

スランプ

lineblog-18

スランプは以前まちなかで見かけましたね。これも長い文章を書くというより、短文で使いたいフォント。

aichi_triennale_fushimi-7

 

 

万葉行書

LINE BLOG - 万葉行書

 

万葉草書

LINE BLOG - 万葉草書

行書体草書体もちゃんとあります。

 

万葉古印ラージ

LINE BLOG - 万葉古印ラージ

これは古印体。つかもうぜ、ドラゴンボール!といいたくなる世代(笑)

 

ミステリ

LINE BLOG - ミステリ

ミステリと言うより、ホラー?

 

大江戸勘亭流

LINE BLOG - 大江戸勘亭流

いわゆる江戸文字のひとつ、歌舞伎の看板などに使われた勘亭流

 

古今江戸

LINE BLOG - 古今江戸

読みやすく力強いデザインの古今江戸。江戸文字というジャンルにとらわれず、いろいろと使いどころがありそう。

 

ラグランパンチ

lineblog-9

マティスに負けず劣らず人気のラグランパンチ。そのうち別途取り上げます。

 

ベビポップ

lineblog-20

すずむしにも近い雰囲気で、かわいいベビポップ。育児・子育て日記をベビボップで書くと合いそうです。

 

ドット明朝

lineblog-21

まるでオチのように、リストの最後に用意されています(笑)。

あえて、昔のコンピュータゲームや携帯電話の雰囲気を出したいときに使ってください。それ以外でドット明朝を使われると、正直ちょっと…。

 

 

以上、LINE BLOG 全31種のフォントを、ざっとご紹介しました。

 

LINE BLOG のおかげで、Webフォントの垣根がぐっと低くなったように感じます。

自分で記事を書いていくうちに、また新たな使い方を発見していくこともあるでしょう。

いろんな人の、いろんなフォントの使い方を見ていくのも楽しそう。

 

自分の想いを表現する手段のひとつとして、フォントを楽しんでみましょう。

 

 

LINE BLOG の Webフォントを試す (1)

LINE BLOG が一般ユーザーでもアカウントを開設できるようになって、話題になっています。

特徴のひとつになっているのが、アプリから、簡単にWebフォントを設定できること。

 

そこで、実際にどんなフォントがあるか試してみました。

iOS版の2016/11/24現在、iOS版のバージョン1.0.1で設定できるフォントはフォントワークスの書体を中心に、なんと31種!

毎日ブログを更新しても、一ヶ月のあいだ、日替わりでフォントを変えることができることになります。

そこまでしなくても、記事の雰囲気に合ったフォントを簡単に選べるのは大きな利点です。

 

今回は、そのうちの11種類を試してみます。

 

標準フォント

lineblog-2

iOSの標準フォントということで、ヒラギノ角ゴシックでしょうか。

Androidで見た時は、どうなるのかは不明です。誰か試してください(^^;

 

筑紫明朝

lineblog-1

ふたつめにフォントワークスの筑紫明朝をもってくるラインナップが素晴らしい。格調の高い明朝体。

 

筑紫アンティーク

lineblog-8

筑紫書体だけでも5書体も選べます。アンティーク明朝は、普通の明朝体より時代を感じさせます。

 

筑紫ゴシック

lineblog-5

筑紫書体のゴシック体もあります。「あ」の、ぐっと曲がった横棒がかっこいい。

 

筑紫オールドゴシック

lineblog-6

 

筑紫オールドゴシックは、文章がくっきりと目立って見えます。

 

筑紫A丸ゴシック

lineblog-4

筑紫書体のラストは、Macでもおなじみ、かわいい丸ゴシック。

せっかくなら、人気の筑紫Aオールド明朝もほしかったですね。今後に期待です。

 

マティスV

lineblog-10

マティスといえばエヴァンゲリオン公式フォントで有名なあのフォントですが、マティスVはそこまで文字が太くなく、現代的に見えます。

 

テロップ明朝

lineblog-11

テロップ明朝は、その名の通りモニタ上で見やすくデザインされた文字。筑紫明朝が少し見にくいと思ったら、こちらを選んでみるのもいいでしょう。

 

グレコ

lineblog-1

グレコは、すっきりした楷書体。和風の雰囲気がよく出ています。

 

ニューロダン

lineblog-2

こちらも読みやすいゴシック体。

 

スーラ

lineblog-13

スーラ! ゆったりとしていて自然体の丸ゴシックです。
なかなか気に入ったので、初投稿はこのフォントにしてみました(^^)

 

今回はここまで。最初はオーソドックスなフォントを紹介しましたが、次はもっと個性的なデザイン書体も試してみます。(つづきはこちら

漢字に触れて楽しむ、漢字ミュージアム

今回は、この6月、京都の祇園にオープンした漢字ミュージアムのご紹介。
漢検 漢字博物館・図書館 [漢字ミュージアム]

京阪電鉄・祇園四条駅から徒歩5分。と案内の上ではありますが、一大観光地のなかにあるので人も多く、たどり着くのには時間がかかります。

市バスだと「祇園」バス停すぐですが、渋滞がひどく確実に遅延するので、時間に余裕をもって行きましょう。17時閉館ですが、16時半には受付終了となります。

漢字ミュージアム

漢字ミュージアム

正式名称は「漢検 漢字博物館・図書館」というそう。

これも隷書ですが、DF隷書体ではなく、モリサワの陸隷に見えます。ロゴのほうはちょっとアレンジしているようです。

陸隷はTypeSquareでも使えますが、さくらのレンタルサーバで使えるWebフォントには入っていなかったので、かわりにこの記事のタイトルは「隷書101」にしてみました。

 

漢字ミュージアム

となりのビルのモザイク画、ちょっとひらがなの「」に見えませんか?

というのは、中のロビー部分で「漢字のある風景」というフォトコンテストの展示をしていたので、あとで写真を見返して気づいたこと。

漢字に限らず、文字に見える風景をさがすというのも、まちあるきの新しい楽しみ方になりそうです。

 

さて、受付で入館料(大人800円)を払うと、体験シートという冊子をもらえます。

よくある展示案内とは一味違って、実際にこのシートを使っていろいろと楽しめる工夫がされています。

漢字ミュージアム

まずは甲骨文字占い。漢字のもとになった甲骨文字が印刷されていて、展示のところにある金属片でこすると、漢字と占い結果が出てきます。

他に団体で来ていた人の様子を見ても、ひとりひとり違う文字が印刷されているようです。

わたしの結果は…

新 - 新しいことが何かはじまるよ

このあとの、よきかな商店街イベント(というか二次会の交流)を思うと、当たっていたかも…!

 

漢字ミュージアム

さらに、万葉仮名や、ひらがな・カタカナのもとになった漢字のスタンプが並んでいます。

スタンプで自分のなまえを押すと、漢字として結果が押されます。

万葉仮名とは、日本に漢字が伝わった当初に使われていたもので、漢字を意味ではなく音として使ったもの。

知識としては覚えていても、ひらがな・カタカナのもとの字とはまた違うものだというのが、こうしてみると実感できました。

 

1Fは他にも、漢字の成り立ちから今に至るまでの歴史までが絵巻になって解説されていたり、書・印刷の道具が展示されたりしています。

漢字ミュージアム

漢字ミュージアム

定番の金属活字に、和文タイプライターまで。

 

2Fに上がる前に、階段の横にある大きな柱に注目。漢和辞典に採録された約5万の漢字が全面に印刷された「漢字5万字タワー」になっています。

漢字ミュージアム

漢字ミュージアム

青色の大きな文字は教育漢字。オレンジ色は常用漢字。

自分のなまえを探そう! と言われても、これだけあって探せるのか…と思ったら、偶然にもあっさり見つかりました(笑)

 

2Fは、さらに漢字と触れて楽しめる体感スペースになっています。

漢字ミュージアム

ワークショップも多数。あっ、どうしてここでPOP体を使ってしまうのか…。

漢字ミュージアム

気を取り直して、お待ちかねのフォント(書体)のコーナー!

漢字ミュージアム

フォントの実例のチョイスが、何故か丸明オールドじゃなくて丸明Fujiだったりと、ツッコミどころが少々(笑)

 

漢字ミュージアム

「乾拓であそぼう」のコーナー。

日本や中国の昔のコイン(復元)を紙の上からこすって、文字を浮かび上がらせます。

漢字ミュージアム

 

漢字ミュージアム

9月30日までは、「漢字縁日」というイベントも実施中。

縁日の屋台を、漢字で再現。

漢字ミュージアム

漢字しおり、釣れました!

 

全体を通しての印象は、ここはひとりで学びに行くより、誰かといっしょに行ったほうが楽しい施設ですね。

夏休みとあって、親子連れの姿も目立ちました。

いつか結婚してこどもができたら、ここに連れてきて、漢字や文字の楽しさ、奥深さに気づいてもらいたい…そんなことを思いました。

もちろん、大人同士でも楽しめます。ぜひ、知人・友人を誘って、訪れてみてください。

 

 

さくらのレンタルサーバで、モリサワの日本語Webフォントが無料で使える!

以前、モリサワの日本語Webフォントサービス「TypeSquare」をご紹介しました。
このサービスでは、無料で一種類だけフォントが使えるというのが特徴ですが、見出し・本文など、複数のフォントを使いたいというシーンは多いと思います。

そんな中、なんと、さくらインターネットの提供する「さくらのレンタルサーバ」では、モリサワと協同し、30種類のフォントを無料で使えるようになりました。

そして、幸運なことに、このブログ「凪の渡し場」も、さくらのレンタルサーバを使わせていただいています。

実はブログ開設のとき、他のレンタルサーバとも比較して迷ったのですが、今回ほど、さくらインターネットにしておいてよかったと思うことはありません。

もちろん、けっしてステマではありませんよ(笑)

むしろ、これを機会に、ほかのレンタルサーバでもさまざまなWebフォントサービスとの提携が広がっていくことを期待しています。

 

さて、ではさっそくブログ運営者向けに、試したかぎりの使い方をご紹介。
詳しくは公式FAQも参照ください。

ブログ運営者以外の方は、フォントテーマによる違いのスクリーンショットだけでもご覧ください(^^)

 

Webフォント利用ドメインの設定

まず大事なことは、Webフォントは一ドメインでしか使えないようです。
サブドメインや、独自ドメインを運用している方は、コントロールパネルにログインして、Webフォントを使いたいドメインを選んでおきます。

 

プラグインの有効化

次は、Wordpressの管理画面でプラグインを有効化します。

新規に契約した人は、Wordpressをインストールする際に自動でプラグインがインストールされるようですが、既に運営中の場合、「TypeSquare Webfonts さくらのレンタルサーバ」という名前のプラグインをインストールして有効化します。

sakura_webfont_01

プラグインの設定

プラグインを有効化すると「TypeSquare Webfonts」というメニューが設定に現れます。

フォントテーマ設定」で、ブログ全体のフォントテーマを選ぶことができます。
フォントテーマを更新する」をクリックすると、すぐにブログに反映されます。

 sakura_webfont_02

フォントテーマによる違い


sakura_webfont_03

ファッション」を選んでみると、こんな感じ。見出しは以前も使っていた「解ミン 宙」がB(ボールド/太字)になったものなので、けっこう似た雰囲気になっていますね。


sakura_webfont_06

小説」だと、こう。見出ミンとA1明朝という組み合わせ、本当に書籍でよく見られる明朝体を再現できるのは感動的です。


sakura_webfont_05

最後に「モダン」。見出しのすずむしフォントがめちゃめちゃかわいいですね!(^^)

 

上級者向けのカスタマイズ

見出し、リード、本文として設定するクラス(タグ)をカスタマイズすることもできます。

たとえば、標準では h1,h2,h3, entry-title タグが「見出し」と認識されますが、このブログでは記事中のサブセクションにh3タグを使っているので、h3タグは「見出し」ではなく「リード」のフォントを適用してみることにしました。

カスタムフォントテーマ」では、各クラスに適用されるフォントを自由に組み合わせてカスタムのテーマを作ることもできます。

また、「フォントテーマ個別表示設定」を「表示する」にすると、個別の投稿ページでテーマを切り替えることができます。

このブログのように複数のジャンルで記事を更新している場合、記事によっては、デフォルトで設定したテーマは合わない…ということもあるので、そういうときに重宝しそうです。

ちなみにこの記事は「ニュース」を選んでみました。

要望としては、カテゴリごとにテーマを設定できるようになると便利かもしれません。

 

これから、ますます日本語Webフォントの世界が広がりそうです!


さくらのレンタルサーバ スタンダードのお申込みはこちら(公式ページ)