![Jimdo でフォントを活用しよう](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=jpg/path/s0e84577b02fd7261/image/i2f290797bce8ceaa/version/1548320168/jimdo-%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%82%88%E3%81%86.jpg)
私たちが普段目にしている文字にはいろんな形状が存在していて一般的に文字の形状のことを「フォント」と呼びます。Jimdo の「スタイル」機能には、「フォント」を設定できるボタンがあります。文字の種類を変更する機能ですが、「そもそも、フォントって何?」「どんな類があって、どう使えばいいの?」と疑問に思っている方のために、今回は「フォントの基本」について、解説します。
1. フォントって何?
フォントは、「書体」とも呼ばれ、同じ様式で一セットの文字形状をデザインしたものを言います。パソコンなどで文字を表示したり、あるいは印刷したりできるように、文字の形状をデータ化してグループにしています。
・Windows は「コントロールパネル」>「デスクトップのカスタマイズ」>「フォント」という項目
・Macは「Finder」>「アプリケーション」>「Font Book」という項目
を表示させると、自分のパソコンにどんなフォントがインストールされているかがわかります。最初に入っているものの他、後から追加することもできます。
Word や Excel にも、フォントを設定できる機能があるので、「フォント」という名称は知らなくても、以下のような画面は見たことがある方も多いでしょう。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i262aeb087848b575/version/1548310473/image.png)
2. どんな種類があるの?
フォントには、大きく分けて「和文フォント」(日本語フォント)と「英文フォント」があります。各々に更に種類がありますので、まずは「和文フォント」(日本語フォント)から解説します。
和文フォント(日本語フォント)の種類
代表的なフォントには、以下のような種類があります。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/iea88a83e7e98a7f3/version/1548310712/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i52b697b6adf137b2/version/1548310712/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i3cb9c13debde2e07/version/1548310712/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i6974e262328853a1/version/1548310712/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i42d66b700ddf5adb/version/1548310713/image.png)
英文フォントの種類
英文フォントには、漢字やひらがななどが入っていません。アルファベットの大文字、小文字、数字、半角記号で構成されているフォントで、代表的なのは「セリフ (serif) 」と「サンセリフ (Sans-serif)」の二種類です。
「セリフ」は、文字の端にある小さな飾りがついた書体、「サンセリフ」は、「セリフ」のない書体のことを指します。また、セリフは縦の線が太くなっており、サンセリフは太さが一定という特徴もあります。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i91432147ac84ee73/version/1548310778/image.png)
セリフ系
![](https://image.jimcdn.com/app/cms/image/transf/dimension=342x10000:format=png/path/s0e84577b02fd7261/image/ib8c4a8940ce2d2f6/version/1548310885/image.png)
サンセリフ系
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/iae83066fbf54efd7/version/1548310940/image.png)
スクリプト(筆記体)系
![](https://image.jimcdn.com/app/cms/image/transf/dimension=342x10000:format=png/path/s0e84577b02fd7261/image/i6afdae5135b29fd9/version/1548311060/image.png)
手書き系
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/i54dc7795e60dae60/version/1548311072/image.png)
3. フォントを変化させると、雰囲気が変わる!
フォントが活躍する場面はいくつかありますが、そのうちの一つがバナーやヘッダー画像のようなイメージ素材です。同じバナーでもフォントを変えると、雰囲気が違って見えます。
明朝系(リュウミン Pro)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ia0901371ee283946/version/1548311233/image.png)
ゴシック系(新ゴ Pro)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i710651e616ab961a/version/1548311305/image.png)
POP 系(創英角ポップ体)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i9a31606888e5b41a/version/1548311361/image.png)
筆字系(JTC 淡斎行書「彩」)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ief938cf0fc10e30f/version/1548311450/image.png)
手書き(あくびん)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i11ca7419921274b8/version/1548311515/image.png)
4. まずは、「明朝」と「ゴシック」を覚えておこう
ここまでおもにフォントの種類を解説してきましたが、いざ使うとなると、たくさんある中から何を選んで良いのか悩んでしまう方もいるかも知れませんね。ホームページで使用するフォントに関しては、「明朝体」と「ゴシック体」の 2 種類を覚えておけば OK です。この 2 つの特徴を押さえておきましょう。
明朝体
![](https://image.jimcdn.com/app/cms/image/transf/dimension=342x10000:format=png/path/s0e84577b02fd7261/image/ia687c8120a8f6e54/version/1548311737/image.png)
ゴシック体
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/i8a9fe9b4504e1ad4/version/1548311746/image.png)
明朝体は、「ひげ」「ウロコ」と呼ばれる飾りがついていて、縦が太くなる特徴があり、ゴシック体は、太さが均一になっていて、「ひげ」「ウロコ」がついていないという特徴があります。英文フォントで言うと、セリフ=明朝体、サンセリフ=ゴシック体に相当します。
※上の図で●の部分が「ヒゲ」「ウロコ」と呼ばれる飾りの部分です。
押さえておきたい明朝体とゴシック体の違い
明朝体 | ゴシック体 | |
特徴 | 縦画が太く横画が細い | すべての画が同じ太さ |
用途 | 長い文章に適切 | 見出しやキャプション |
適性 |
文章の読みやすさ | 文字のわかりやすさ |
すべての場面でこの通りに使うということではありませんが、各特徴をつかんでおくと、フォントを設定するときに役立ちます。
▼見出しに明朝体、本文にゴシック体を設定してみた例
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ia52abce42540a07a/version/1548312126/image.png)
5. Jimdoに付属しているフォントの種類
Jimdo では、見出しやページタイトルなどのフォントを変更することができますが、Free 版、Pro 版、Business 版で使用できるフォントの数が異なっています。Pro 版・Business 版ユーザーが利用できる「モリサワフォント」は、プロのデザイナーや制作者にも支持されている美しい書体です。
モリサワフォント使用前
![](https://image.jimcdn.com/app/cms/image/transf/dimension=342x10000:format=png/path/s0e84577b02fd7261/image/i854b68f50d5b342c/version/1548312232/image.png)
モリサワフォント使用後
![](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/i9384f5be08cb840c/version/1548312238/image.png)
契約のプラン | モリサワフォントの書体数 |
JimdoFree | なし |
JimdoPro | 15書体 |
JimdoBusiness | 176書体 |
Webフォントとは?
Pro 版・Business 版に付属されている「モリサワフォント」は「Web フォント」と呼ばれており、サーバー上に置いてあるフォントを呼び出して表示させる仕組みを使って表示させることができます。ホームページにアクセスした際に、閲覧者側が持っていないフォントを使っても、ページ上に表示されるため、制作する側の意図した通りに表示させることができます。
従来のフォント表示
![Webフォントの仕組みがなかった時は、モリサワフォントなどを指定しても、その通り表示されないことが多い](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/i4f1c00c36f4cb8ff/version/1548320718/web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%8C%E3%81%AA%E3%81%8B%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AF-%E3%83%A2%E3%83%AA%E3%82%B5%E3%83%AF%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AA%E3%81%A9%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%82%82-%E3%81%9D%E3%81%AE%E9%80%9A%E3%82%8A%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E5%A4%9A%E3%81%84.png)
Webフォントを使用すると
![Webフォントを使うと、制作者が指定したフォントを表示させることができる](https://image.jimcdn.com/app/cms/image/transf/dimension=341x10000:format=png/path/s0e84577b02fd7261/image/ifb37f610c4193366/version/1548320735/web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8-%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%8C%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B.png)
6. スタイル機能を使ってフォントを変更しよう
フォントの設定や変更は「スタイル機能」を使って、おこなうことができます。以下の手順で進めましょう。
1)左のツールバーから「デザイン」を選択後に「スタイル」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=646x10000:format=png/path/s0e84577b02fd7261/image/ieb21b99199848b9a/version/1548327650/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=563x10000:format=png/path/s0e84577b02fd7261/image/i9bcdf6965d8435cf/version/1548327657/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=643x10000:format=png/path/s0e84577b02fd7261/image/i84c852afe0e35b9a/version/1548327670/image.png)
2)マウスカーソルが刷毛状になりますので、フォントを変更したいエリアをクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=649x10000:format=png/path/s0e84577b02fd7261/image/i3d70c6bf933fc7ff/version/1548327716/image.png)
3)以下のような画面が表示されます。フォントの種類が変更できる画面です。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=648x10000:format=png/path/s0e84577b02fd7261/image/icae5674334e814c6/version/1548327744/image.png)
4)フォントの種類を変更してみましょう。
「人気のフォント」には、モリサワフォントの中で特に人気のものが表示されます。その他、「すべてのフォント」の下に表示される「キャラクター」では、選択した言語に関連するフォントのみを一覧表示させることができます。(複数選択も可能)
選択した言語名を再度クリックすると、選択を解除することができます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=648x10000:format=png/path/s0e84577b02fd7261/image/i4b23b00f859c3462/version/1548327788/image.png)
「フィルター」では、「ゴシック」「明朝」「手書き」「装飾」から絞り込んで表示させることができます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=677x10000:format=png/path/s0e84577b02fd7261/image/ic4486d70ea9250b9/version/1548327828/image.png)
5)キャラクターと、フィルターを設定して絞り込んでみました。絞り込まれて選びやすくなります。
▼「キャラクター」を「日本語」、「フィルター」を「ゴシック」にした画面
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i925613d2410df3f4/version/1548327866/image.png)
▼「キャラクター」を「日本語」、「フィルター」を「明朝」にした画面
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i693c63069faf65d8/version/1548327935/image.png)
日本語のフォント名を選択すると、ひらがな・カタカナ・漢字・全角英数で入力した文字の形状(フォント)が変わります。
●フォントの設定が適用される項目
フォントの設定を行える項目は以下の通りです。「スタイル機能」が使える項目の中で、文字を入力できる箇所が該当します。
・ページタイトル(ヘッダータイトル)
・ナビゲーション
・見出し大、中、小
・本文(文章機能)
「本文」(文章機能)は、コンテンツ部分とフッター部分で別々のフォントを設定することができます。
※サンプルの画像はクリックで拡大できます。
●各項目のフォントを変更すると、全頁に変更が適用されます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i4d89567c9429a806/version/1548328276/image.png)
7. モリサワフォントを使ってみよう
JimdoPro/Business では、「モリサワフォント」という高品質のフォントを使用することができます。
使ってみましょう!
※JimdoFreeではゴシック体(sans−serif)と明朝体(serif)の種別設定が可能です。
1)左のツールバーから「デザイン」を選択後、「スタイル」を選択します。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/ifa70538c6e95f3d1/version/1548328352/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=635x10000:format=png/path/s0e84577b02fd7261/image/i990afc262962b71d/version/1548328374/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i2df77f66b4ea4131/version/1548328384/image.png)
2)フォントを変更したい項目に、刷毛型のマウスカーソルを合わせてクリックします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/idb206db5ac48314a/version/1548328416/image.png)
3)「キャラクター」を「日本語」にし、「フィルター」を「ゴシック」に設定します。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i4182b899b7ec0db8/version/1548328452/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/iabd964ebb4bcef5a/version/1548328474/image.png)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/ic85dd02dd4d4fa7e/version/1548328484/image.png)
4)日本語のフォント名が表示されるので、好みのフォントを選択しましょう。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=710x10000:format=png/path/s0e84577b02fd7261/image/i89109fc90b7f350f/version/1548328518/image.png)
【独自レイアウト・旧レイアウトの場合】
独自レイアウトや旧レイアウトを使用している場合は、「見出し」のみフォントの変更を適用することができます。他の項目にもモリサワフォントを適用したい場合は、CSS(スタイルシート)を使って設定すると、設定することができます。詳しくは、下記のページを参考にしてください。
http://jp-help.jimdo.com/design/originallayout/#cc-m-header-12317643290
※独自レイアウト(個人的にカスタマイズしたレイアウト)に関してはサポート対象外となっております。あらかじめご了承のうえ、ご利用ください。
【Jimdoで使用できるモリサワフォントの一覧】
Jimdoで使用できるモリサワフォントの一覧は、以下のページに掲載されいます。選ぶ際の参考にしてください。
▼モリサワフォントの種類
8. 組み合わせて使ってみよう
フォントを組み合わせて使うことで、ホームページの印象を変化させることができます。
Jimdo Meetup vol.25 で JimdoExpert の服部雄樹さんが、取り上げていた「おすすめの組み合わせ」をご紹介します。
※サンプル画像はそれぞれクリックで拡大できます。
スッキリ見せたいときはコレ!見出し「ゴ MB1」 × 文章「中ゴシックBBB」
ポップな雰囲気なら!見出し「新ゴ エンボス」 × 文章「UD 新ゴR」
信頼感を演出する!見出し「MA31」 × 文章「黎ミンR」
番外編「すずむし」・・・レトロな雰囲気です。
このように組み合わせて雰囲気を変えることができますが、本文部分(文章)については、一般的には「ゴシック」を指定した方が、読みやすくなると言われています。
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s0e84577b02fd7261/image/i570f127bdfc354a6/version/1548329057/image.jpg)
フォント活用をご紹介しましたがいかがでしたか? Jimdo には契約の内容に合わせて、いろいろなフォントが選べるようになっているので、自分のホームページ合ったものを設定してみてくださいね。迷ったときは、最寄りの JimdoCafe などで相談してみましょう。
コメントをお書きください