ホームページ作成ツールBiNDupのWebフォント機能『TYPE』がこの秋にアップデートします。
今回はTYPEの概要から新しくなったポイント、設定方法まで網羅して解説したいと思います。
そもそもWebフォントとは？という解説記事は下記をご覧ください。
TYPEとは
懐かしきBiND6.5（2013年）で初登場となった初代TYPE
TYPEは2013年のBiND6.5で登場し、まだ一般的ではなかった日本語Webフォントをいち早く取り入れた機能でした。
フォントワークスとの共同開発で、プロの現場でも使われている高品質なフォントが画面から選択するだけで簡単に組み込める画期的な機能として、今やWebサイト制作とは切っても切り離せないものとなっております。
当時、フォントを使った文字表現は画像が主流でしたが、スマホ普及による高解像度対応が求められた時期でもあり、Webフォントへの移行は必然的な流れでした。
BiNDupではフォントワークス提供フォントの他にも日本語フリーフォントやGoogle Fontsからも選択可能で、その数1,000を超える膨大なフォント群となっています。
→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験
TYPEリニューアルのポイント
今回大幅リニューアルとなるTYPEの中身を解説していきます。
システム刷新で表示スピードがアップ
まず最大の変化となるのがシステムの刷新です。
これまでの仕組みを根本から見直し、Google Fontsの仕組みなどを参考に高速かつ安定的なパフォーマンスを発揮できる様にフォントワークスと共同開発を行いました。
今までは表示スピードに於けるSEO評価などの課題があり、高速化の課題がポイントとなっておりましたが、今回のシステム刷新で大幅に解消出来る事が期待されます。
現在既にTYPEでWebフォントを設定しているサイトは自動でシステムが入れ替わりますので、新たな設定は特に必要ありません。
利用可能なフォントの入れ替え
今回のリニューアルで新たに利用できるフォントと残念ながら提供終了するフォントがあります。
追加フォントとしては、筑紫系のバリエーションを中心に、オーソドックスに使えるゴシック体や明朝体が多数、『パルラムネ』や『桔梗』、『パルレトロン』など個性的なフォントも提供開始します。
白舟系フォントと勘亭流フォントの提供が今回で提供終了になります。
→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験
Webフォントの設定方法について
今回のリニューアルで一部設定方法が変更になりますので、そこも踏まえてTYPEの設定方法を解説します。
フォントファミリーとフォントウェイト
まず最初にフォントの構成について学びましょう。
フォントはまずファミリーと呼ばれる大きな集まりがあります。一般にフォントと呼ばれるものはこのフォントファミリーを指しています。
続いてフォントウェイトですが、文字の太さを表しています。同じフォントでも太さのバリエーションを持っているフォントがあります。
多いものでは10種類ほどのウェイトバリエーションがあるものもありますが、全くバリエーションを持たないフォントもあります。
またウェイトだけでなくイタリック（斜体）のバリエーションを持つフォントもあります。
①TYPEを起動
まずはTYPEを起動してみましょう。
サイトエディタから指定する方法とDressから指定する方法の2通りあります。
サイトエディタからは各段落スタイルごとにフォントを指定できるほか、「フォント1」〜「フォント10」に指定しておくことで文中の個別フォント指定が可能になります。
特定のテキストにのみフォントを指定できる
Dress指定の場合は段落スタイルだけでなく、要素ごとの組み合わせ条件など複雑な指定が可能になります。
サイトエディタにある個別フォント指定には対応していません。
ちなみにDressとサイトエディタでそれぞれ同じ要素にフォント指定を行った場合は、Dressの設定が優先されます
もしサイトエディタでフォントを設定したのにフォントが変更されない場合は、既にDress側でフォントが指定されているかもしれませんので確認してみましょう。
②フォントファミリーを指定
TYPEが起動したらフォントファミリーを指定してみましょう。
TYPEでは日本語フォントと欧文フォントを一緒に指定する事が可能です。
その際英数字などは欧文フォントに置き換えられ、その他は日本語フォントで表示されますので少し高度な使い方になります。
それぞれカテゴライズされてますのでお好みのフォントをクリックしてみましょう。
既にお目当てのフォントがある場合は検索ウィンドウから直接検索する事も可能です。
③フォントウェイトを指定
今回のバージョンアップでフォントウェイトの選択方法が変更されています。
以前はフォントウェイトもフォントファミリーと同列に選ぶ必要があったのですが、今回からフォントファミリーに内包されるUIとなり分かり易くなりました。
フォントファミリー一覧にウェイトバリエーションの表示がありますのでそこでもチェックが可能です
→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験
フォントウェイトの新しい設定方法
今回のバージョンアップによりフォントウェイトをCSS（Dress）で指定する事が可能になりました。
これまでは同じフォントファミリーでも見出しは太く、本文は細く設定したい場合、それぞれ個別にフォント設定を行ってましたが、今回からはページ全体でフォントファミリーを指定して、それぞれ段落のスタイルに対してDressでウェイトだけを設定すれば同様の表現が可能になります
この様に設定しておけば後からフォントファミリーを変更したくなった場合、大元のフォントファミリーを変更するだけでサイト全体のフォント設定を変更する事ができる様になります。
少し高度な使い方になりますが覚えておくと良いでしょう。
まとめ
如何でしたか？
モバイル時代に最早欠かせなくなったWebフォントですが、今回のリニューアルで更に強みが増しました。
テキストはWebサイトに於ける大きな要素のひとつですが、Webフォントはその表情を如何様にも変化させてくれます。
色々なフォントを試してあなたのWebサイトの魅力を更に高めましょう。
BiNDupでは、2024年9月2日から10月16日まで、新作テンプレートがセットになったお得なキャンペーンも行っております。ぜひこの機会にお申込みください。
POINT
- サブセットフォントを予め用意しておくシステム変更により表示スピードがアップ
- 筑紫系のバリエーションを中心に様々な用途に利用可能な新しいフォントを多数追加
- フォントファミリーからフォントウェイトを指定する方式に変更、フォントウェイトはDress（CSS）でも別途指定が可能