スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第9回 Webフォントを設定しよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第9回:Webフォントを設定しよう

執筆:服部 雄樹(服部制作室)

2016年12月5日更新

  • このエントリーをはてなブックマークに追加

閲覧数613views

このコラムをPDF形式でダウンロードする

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムではデザインの原則をWebサイトに応用するポイントについて解説しました。第9回目となる今回は、Webフォントをうまく使うポイントを見ていきましょう。

日本語のフォントは選択肢が少ない

Webサイトのデザインにおいて、どんなフォント(書体)を使用するかはとても重要です。しかし、多彩なフォントが使用される海外のWebサイトと違って、これまで日本語のWebサイトではゴシック体か明朝体のいずれかぐらいしか選択肢がありませんでした。

それは、Webサイトがフォントを表示させる仕組みと関係しています。通常、私たちがWebサイトを閲覧するときは「それぞれの端末にインストールされているフォント」を使用して表示します。アルファベットと数字、記号だけで構成される欧文と違って、和文は漢字を含めるとおよそ3万種類の文字があるため、コンピュータに初めからインストールされている和文フォントはそれほど多くありません。

さらに、WindowsやMacなど多彩な端末がある中で、それぞれにどんな和文フォントがインストールされているかを全て把握することは不可能なため、結果的に「ゴシック体か明朝体のいずれか」というシンプルな選択肢となっていました。

端末によって表示が変わることによる問題点

しかしこれには問題もあります。例えば、WindowsとMacでは標準で使用するフォントが違い、Webサイト側で「ゴシック体で表示してね」と指定しても、Windowsでは「メイリオ」というフォント、Macでは「ヒラギノ角ゴ」というフォントで表示されます。

特段大きな問題はないように思われますが、実はフォントによって少しずつ文字の大きさが違うため、改行の位置がずれたり、表示が崩れたりということが起こります。

プロのWebデザイナーは複数の端末を使って表示をチェックするため、通常こういったことは起こりませんが、Jimdoで制作されたWebサイトではしばしばこの問題が発生します。Windowsを使って自分でJimdoサイトを制作したとして、わざわざMacでも表示を確認する、という方は少ないからです。

同じページでもWindowsとMacで改行位置がずれることがある

Webフォントを使うメリット

そこでWebフォントの登場です。Webフォントはこれまでのように端末にインストールされているフォントを使用するのではなく、インターネット上にアップロードされているフォントを使用して表示させる技術です。回線速度の向上に伴い、広く利用されるようになりました。

この仕組みなら端末に依存しない表示が可能で、各社から様々なWebフォントが提供されているので、これまでよりも多彩な文字表現ができます。

Jimdo Proには15種類、Jimdo Businessなら176種類

Jimdoの有償版には、国内フォントメーカー最大手の株式会社モリサワの提供する「モリサワフォント」が搭載されています。Jimdo Proでは15種類、Jimdo Businessではなんと176種類もの日本語フォントを使用することができます。これだけ多彩なフォントから選ぶことができればWebサイトの表現の幅は確実に広がるでしょう。

Jimdo有償版で使えるフォントの一覧

http://jp-help.jimdo.com/design/style/webfont/

とはいえ、この中からどれを使っていいか分からないという声も多く、さらにJimdoでは見出しや本文に別々のフォントを設定できるため、組み合わせが重要になります。そこで、ここからは私のオススメするフォントの組み合わせを紹介します。なお、できるだけ多くの方に活用していただくため、Jimdo Proで使用できるフォントに限定しています。

オススメのフォント組み合わせ例

ゴシック体なら「見出ゴ MB31」+「ゴシックMB101 L」

ゴシック体のオススメは「見出ゴ MB31」と「ゴシックMB101 L」です。
「見出ゴ MB31」は文字通り見出し専用に作られたフォントで、適度な黒みがあり、漢字とかなのバランスがよく目を引きます。

本文には「ゴシックMB101 L」がオススメです。伝統的なゴシック体で、「L(Lightの略)」という細いウェイトなので、長文でもすっきりと見せることができます。

明朝体なら「見出ミン MA31」+「リュウミン R-KL」

明朝体のオススメは「見出ミン MA31」と「リュウミン R-KL」です。
「見出ミン MA31」も先ほどと同じく見出し専用に作られたフォントで、しっかりとした太みのある漢字と、やや細めにデザインされたかなの対比により、可読性が高くなるよう設計されたフォントです。

本文にオススメの「リュウミン R-KL」は、ポスターや雑誌などでもよく使われている基本書体で、均整のとれた美しさが目を引き、長文にも短文にも幅広く使用できます。

Webフォントは使わないともったいない

このように、Webフォントは手軽にWebサイトの印象を変えられる非常に便利なツールです。あまり気負わずに、色々試しながらご自身のWebサイトに合ったフォントを選ぶのが良いでしょう。もしまだ使っていないという方は、是非この機会に活用してみてください。

次回はJimdoのボタンをデザインするコツについて解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/2/12~2017/2/18]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業での開業スケジュールから融資申込に必要な書類が作成できるサービスです

  • 経理通信

    中小企業・小規模事業者の経営者と経理担当者のための経理サポートサイト