フォントは、人々の印象を司る重要な要素のひとつ。Webデザインにおいて、フォントは単なる文字の表示以上の役割を果たします。
Appleは、なぜWindowsとの差別化に成功したのか。スティーブ・ジョブズ氏がタイポグラフィの美しさに魅了され、フォントにこだわり抜いたOSを開発したからです。美しいタイポグラフィが人々に洗練されている印象を与え、Appleのブランドはより強固になっていきました。
Webデザインにおいてもフォントはデザインを構成する重要な要素です。WordPressテーマにおいてもフォントの重要性は同じです。
昨今のTCDテーマでは、タイポグラフィに力を入れており、フォントの改良を行いました。
目次
TCDに搭載されているフォント – 使い方
国内の一般的なWordPressテーマは、使えるフォントが「明朝」「ゴシック」だけしか使えません。また、古くからあるテーマの場合、明朝・ゴシック自体も刷新されずに古いタイプが使われていたりします。
ウェブサイトのフォントはデザインそのものなので、明朝・ゴシックだけでは表現の幅に限界があると感じました。TCDがフォントを強化しているのにはそうした理由があります。
TCDテーマは、標準のシステムフォントが16タイプに加え、Webフォントが7タイプから選んでウェブサイトに適用することができます。システムフォントはWindows,Mac,Android,iOSなどの主要OSにて美しく表示されるフォントを採用しています。
それぞれの概要と使い方を、以下でご紹介いたします。次の2ステップで使えます。
- 基本設定「フォント」でフォントセットを登録する。
- フォントを設定できる各所でフォントセットを呼び出す。
1. フォントセットを登録する
各フォントセットは、このようなUIで見た目を確認しながら設定できます。
フォントタイプを「システムフォント」「Webフォント」から選ぶと、設定項目が変化します。
システムフォント
用意されているシステムフォントの中から和文・欧文で使用するフォントを一つ選択します。
TCDテーマでは、MacOS、WindowsOS、iOSに入っているシステムフォントの中から、見栄えの良いフォントだけを組み合わせてフォントファミリーを作成しています。
以下のフォントの中から和文・欧文とそれぞれ選択してご利用頂けます。
※デバイス・OSによって、入っているフォントが異なる場合があります。
和文フォント
和文フォントは、明朝、ゴシック、教科書の3タイプです。
- ゴシック体
- 明朝体
- 教科書体
ゴシック体：
明朝体：
教科書体：
欧文フォント
欧文フォントには、サンセリフ体・セリフ体・スクリプト系のフォントが13種類入っています。
サンセリフ体：
- Arial：Win Mac iOS – 最もベーシックなフォント。
- Optima：Mac iOS（※WinではSegoe UI） – 美しいフォルム。
- Helvetica：Mac iOS（※WinではArial） – バランスのとれたフォント。
- Avenir：Mac iOS（※WinではCalibri） – モダンで直線的
- Verdana：Win Mac iOS – 大きな文字間隔と広めの字形
- Tahoma：Win Mac – よりコンパクトな字形
セリフ体：
- Palatino：Win Mac iOS古典的なセリフフォント
- Times New Roman：Win Mac iOS – 最もベーシックなフォント。
- Georgia：Win Mac iOS – 洋書風
- Didot：Mac – 上品で華奢（※WinではTimes New Roman）
- Baskerville：Mac – 細さの緩急大きめ（※WinではGeorgiaで代用）
- Rockwell：Win Mac – タイプライター風（太い）
スクリプト体：
- Zapfino：Mac iOS – エレガントで優雅（※WinではInk Free）
Arial
Optima
Helvetica
Avenir
Verdana
Tahoma
Palatino
Times New Roman
Georgia
Didot
Baskerville
Rockwell
Zapfino
Webフォント
Webフォントを選択した場合、次のフォントから設定できます。
Webフォントの魅力はどのデバイス環境でも同じフォントが表示されることに加え、洗練されているデザインのものが多いことです。
Noto Sans JP
https://fonts.google.com/noto/specimen/Noto+Sans+JP
Zen Kaku Gothic New
https://fonts.google.com/specimen/Zen+Kaku+Gothic+New
Noto Serif JP
https://fonts.google.com/noto/specimen/Noto+Serif+JP
Zen Old Micho
https://fonts.google.com/specimen/Zen+Old+Mincho
Klee One
https://fonts.google.com/specimen/Klee+One
ROBOTO
https://fonts.google.com/specimen/Roboto
Hind Madurai
https://fonts.google.com/specimen/Hind+Madurai
2. フォントセットを呼び出す
次に登録したフォントセットを各所で呼び出します。↓は基本設定 > フォントの設定画面です。
上記はWordPressテーマ「PANDORA」の例ですので、お使いのテーマによって変更できる箇所は変わりますが、基本的には、下記箇所のフォント・文字サイズを設定可能です。
| ベースフォント （サイト全体に適用） |
・フォントタイプ（フォント1, 2, 3） |
| アーカイブタイトル （アーカイブページのヘッダーで適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ別） |
| 記事タイトル （各記事タイトルに適用） |
・フォントタイプ（フォント1, 2, 3） ・文字サイズ（PC/スマホ） |
フォントで印象が変わる。
文字の美しさは、視認性が向上するだけでなく、ブランドの個性の表現にも繋がります。洗練されたフォントをWebサイトで表現することで、サイトの価値も向上します。
人気フォントを搭載したWordPressテーマを使うことで、あなたのサイトはさらに美しくなります。
TCDテーマのフォントの特徴
TCDテーマのフォントの特徴をまとめると次の通りです。
- システムフォント・Webフォントから選べる
- 要素ごとにフォントを設定可能（複数のフォントファミリーを作成可）
- ロゴもフォントで作成できる
管理画面から簡単に変更できる。
キャッチコピーは「ROBOTO」、本文は「ゴシック体」、見出しは「Noto Sans JP」というように、各要素ごとにフォントを変更することも可能です。キャッチコピーなど目立たせたいところだけWebフォントにするといった使い分けが可能です。
管理画面から何度でもやり直しが利くので、気に入ったタイポグラフィになるまで変更するのもありですね。
ロゴも美しいフォントが使える。
ロゴはPNGやSVGなどの「画像」で作成されるのが一般的ですが、ロゴ部分をWebフォントで表示してもおもしろいです。なぜなら、TCDのフォントで作られたロゴは美しいからです。
ロゴに見合うフォント、太さ（ウェイト）を選択することができます。
ロゴもWebフォントで作成できる（PANDORAのデモサイト）
ロゴをWebフォントにするメリットは次のようなもの。
- どのデバイスでも同じ表示になる
- ロゴを作る手間がいらない
シンプルなロゴでとりあえず、という場合にはとても便利です。ロゴ作成が苦手な方でも綺麗なサイトロゴが表示できます。
TCDのフォントの対応状況
販売中のTCDテーマすべてで、本記事で紹介しているフォントオプションが使えます。
ウェブサイトがつくれる
コメント