Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説

Transcript

1. ウェブフォント選定の極意 フォントの基本から最新トレンドまで徹底解説！ 大木尊紀 - デジタルマーケターズサミット 2024 Summer
2. 大木 尊紀 デザインエンジニア@Ubie株式会社 デザインとエンジニアリングが交わるところが最近の主戦場。 プロダクト開発の他にデザインシステムの開発・運用や アクセシビリティ改善にも取り組んでいる。 自己紹介
3. 目次 1 2 3 4 ５ フォントの役割 ウェブフォントの仕組み ウェブフォントを使うべきケースと避けるべきケース ウェブフォントを導入する3つの方法 効果的なフォントを選ぶための５つのポイント
4. フォントの役割
5. フォントの役割 フォントの役割は 文字情報に視覚的な情報を足すこと 使うフォントによって文章の読みやすさや読者、利用者に与える印象が変化する。 どんな視覚情報を伝えたいのかによって適切なフォントは変わる。
6. フォントの役割 Webサイトは文字による情報伝達が 中心なので、フォントが与える影響も 大きくなる
7. フォントの役割 ゴシックは固い印象 丸ゴシックは柔らかい印象 明朝体は繊細な印象 手書き風でポップな印象 ディスプレイ体は特徴的な印象
10. フォントの役割 ユニバーサルデザイン （UD） フォント ディスレクシア（読み書き障害）やロービジョン（弱視）などの障害を抱えた人でも 読みやすいようにデザインされたフォント。 UDフォントを使うことで、様々な人にとって読みやすく使いやすいWebサイトやアプリを 作ることができる。 モリサワはUDフォントに関する実験や調査を行い、その結果をWebサイトに掲載している。 https://www.morisawa.co.jp/fonts/udfont/study/
11. ウェブフォントの仕組み
12. ウェブフォントの仕組み ウェブサーバーから フォントデータを ダウンロードして 使用する 基本的なことは画像や動画を表示するのと同じ。
13. ウェブフォントの仕組み フォントの選択肢が増えるので、 表現の幅が広がる！ デバイスに登録されてないフォントも使えるので、 表現の幅が広がりブランドの世界観を伝えやすくなる。 コーボレートブランドや広告などで使っているのと同じ フォントを使うことができるので、ブランドの統一感を 演出しやすくなる。
14. ウェブフォントの注意ポイント① 日本語フォントはフォントデータが 重く、ウェブフォントに不向きである データが重くなる要因は次の2つ € 文字数が圧倒的に多い（JIS第1水準でも2965字Q € グリフ（文字の形）が複雑なので1文字ごとのデータサイズも大きくなる ファイルが重いとダウンロードに時間がかかる＆通信量を消費してしまう。 Noto Sans JP Regular（WOFF2）： 約3.4MB
15. ウェブフォントの注意ポイント① ファイルサイズを小さくして ダウンロードをいかに速くするかが ウェブフォントの重要なポイント 後ほど紹介するウェブフォント配信サービスは様々な方法で最適化をしている。 WOFF/WOFF2（Web Open Font Format）という特殊な形式に変換したり、 使用頻度の低い文字を削除したりしてファイルサイズを小さくする。
16. ウェブフォントの注意ポイント② フォントデータのライセンスに注意！ フォントデータをウェブフォントとして利用することは、 に該当する。 「フォントデータの改変および再配布」 – フォントデータの形式を変換する → 改‰ – フォントデータをウェブサーバーに配置してダウンロードさせる → 再配布 改変や再配布をライセンスで禁止していたり、ウェブフォントとして利用するには 別途有料ライセンスを購入しなければならないケースもあるので注意が必要。
17. コラム：フォントの著作権 書体には著作権が発生しないが、 フォントデータ（プログラム）には著作権が発生する 書体（文字のデザイン）の主な役割は情報伝達であり一定の制約をうけるため、高い独創性や 美的特性が認めらず著作権は基本的に発生しないという判決がでている。（商標権や意匠権は 別、書道作品などの例外はある） しかしフォントデータにはプログラムとしての著作権が認められている。 ゲームやアプリのデータを複製することが違法であるのと同じ理由。 有名な判決：「Asahi」ロゴマーク事件 https://www.courts.go.jp/app/hanrei_jp/detail7?id=13816
18. ウェブフォントの注意ポイント③ 文字のチラツキが起きる場合がある 基本的にフォントのダウンロードが完了するまでの間デバイスフォントで表示され、 ダウンロードが完了したらフォントが切り替わる。 切り替わりのタイミングで文字がチラついたように見えたりする場合もあるので、 ローディング画面を挟むなどの見せ方の工夫が必要になる場合もある。
19. ウェブフォントを 使うべきケースと 避けるべきケース
20. 使うべきケース① 長い文章を読みやすくしたい、 読み間違いを少なくしたいケース UDフォントやオンスクリーンでの読みやすさを考えて作られたフォント使用することで、 なるべく多くの人にとって読みやすいWebサイトを提供できる。 地方公共団体や病院などのWebサイトでUDフォントが導入されるケースが増えている。
21. UD新ゴ、UD黎ミン
22. こぶりなゴシック
23. 使うべきケース② ブランドの世界観、雰囲気を読者に 伝えることが重要であるケース 製品サイトやLPなどマーケティング観点でブランドを訴求したい場合や、 コーポレートサイトで自社の世界観を表現したいときなどはウェブフォントが活用できる。 ブランドのイメージと一致しないフォントが使われることで、購買意欲が低下したり ブランドに対してマイナスのイメージを抱かれてしまうリスクもあります。
24. りょう Display PlusN
25. LINE Seed JP（LINEヤフーコーポレートフォント）
26. 避けるべきケース① 緊急時などで通信状況が悪くても 問題なく閲覧できなければならない ケース ウェブフォントを利用している場合、表示に時間がかかったりフォントがダウンロードできな かった場合に表示が崩れてしまう可能性がある。（実装で防ぐことも可能） どんなときも安定して閲覧できることが重要な場合はデバイスフォントのほうが適している。
27. 避けるべきケース ② とくにこだわりがないケース 先述の通り日本語ウェブフォントは重いので、 使わなくて問題ないなら使わないほうが利用者にとってやさしい。 「なんか流行ってるし入れとこうかな」というのは 誰も幸せにならないのでやめよう。
28. ウェブフォントを 導入する3つの方法
29. ウェブフォントを導入する3つの方法 1 2 3 ウェブフォント配信サービスを利用する ノーコードWebサイト制作ツールを利用する 自前でウェブフォントを配信する
30. ウェブフォントを導入する3つの方法 1 2 3 ウェブフォント配信サービスを利用する ノーコードWebサイト制作ツールを利用する 自前でウェブフォントを配信する
31. ウェブフォント配信サービスを利用する メリット d 自前でウェブフォントを配信するよりも導入がv d パフォーマンスの最適化をサービス側である程度してくれていY d ライセンスの問題を気にせずにウェブフォントを利用できる デメリット d 従量課金のサービスもあるので、予想以上にお金がかかる場合があY d サービスによって利用できるフォントに限りがある
32. 主なウェブフォント配信サービス Googleが提供するウェブフォントサービス。 無料で使えて導入が簡単。ノーコードWeb制作ツールへの組み込みも可能。 日本語フォントの種類は少なめだが、最近徐々に増えている。 Adobe Fonts Adobeが提供するウェブフォントサービス。 Adobe CCを契約していれば追加料金なしで利用できる。 Google Fontsよりも日本語フォントの種類は多いが、ウェイトが1つしかないなど 制限があるフォントも存在するので注意が必要。
33. 主なウェブフォント配信サービス モリサワが提供する有料ウェブフォントサービス。 スタンダードプランとアドバンスドプランがあり、PV数に応じて選択できる。 MORISAWA、タイプバンク、字游工房などのフォントが利用できる。 SBテクノロジー株式会社が提供する有料ウェブフォントサービス。 スマートライセンス・プラン、アドバンスト・プラン、カスタム・プランがある。 Fontworks、IWATA、Monotypeなどのフォントが利用できる。
34. ウェブフォントを導入する3つの方法 1 2 3 ウェブフォント配信サービスを利用する STUDIOを利用する 自前でウェブフォントを配信する
35. STUDIOを利用する 国産ノーコードWeb制作ツール 日本語ウェブフォントの選択肢が◎ TypeSquare、FONTPLUS、Google Fontsがサービスに統合されていて、7600+のフォン トが利用可能。ウェブフォントを使用しても追加料金が発生しない。
36. https://studio.design/ja/lp/font
37. その他のノーコードWeb制作ツール ) 500書体以上の日本語ウェブフォントが利用可 ) Webサイトだけでなくプレゼンテーションや動画も制作できる ) Proプランで15書体、Business/SEO Plus/Platinumプランだと176書体の
 日本語ウェブフォントが利用可能 ) 18書体の日本語ウェブフォントが利用可能。書体数少なめ。
38. ウェブフォントを導入する3つの方法 1 2 3 ウェブフォント配信サービスを利用する STUDIOを利用する 自前でウェブフォントを配信する
39. 自前でウェブフォントを配信する メリット 7 ウェブフォントサービスを使うよりも安くウェブフォントを使えI 7 追加でライセンス費用がかかる場合はあI 7 ウェブフォントサービスで配信されていないフォントをウェブフォントと して利用できる（ライセンスで禁止されていなければ） デメリット 7 フォントファイルの変換やサーバーの設定、パフォーマンスの最適化、
 ライセンスの確認などの手間が増える
40. 自前でウェブフォントを配信する 個人的には一番おすすめしない 気をつけて実装しないとユーザビリティを損ねる可能性もあるし、ライセンスまわりはとても 複雑なので誤った解釈で利用してしまうと訴訟リクスもある。 素直にウェブフォントサービスやSTUDIOを使ったほうが良い。
41. 自前でウェブフォントを配信する それでも自前で 配信したい場合は 拙著が役立つかも https://nextpublishing.jp/book/9900.html
42. 効果的なフォントを 選ぶための3つのポイント
43. 効果的なフォントを選ぶための3つのポイント 1 2 3 訪問した人に与えたい印象から考える 文字の大きさと読みやすさを考慮する 1つのWebサイトで使うフォントは最大2つまで
44. 1 2 3 訪問した人に与えたい印象から考える 文字の大きさと読みやすさを考慮する 1つのWebサイトで使うフォントは最大2つまで 効果的なフォントを選ぶための3つのポイント
45. 訪問した人に与えたい印象から考える Webサイトの目的から逆算して どんな印象を与えたいのか考える Webサイトの印象によって利用者の行動は変わる。 感性に頼るのではなく、 どういう目的でどんなターゲットに対して何を訴求したいのか ロジカルに考えることが重要。 メッセージとフォントが合致しているかも大事。
46. 訪問した人に与えたい印象から考える Webサイト利用者に期待することを 明確にするとフォントを選びやすい 旅館の雰囲気を感じて宿泊予約をしてほしい 化粧品のブランドイメージから商品を購入してほしい 安心して記事をたくさん読んでほしい インパクトを強くして認知度を上げたい
47. 採用サイトでは応募に進んでもらうことがゴールなので 誠実性や安心感をアピールできるフォントが使われやすい
48. 一致してそう デジタルマーケターズサミット ぼくらの夏休み 志学館高等部 少林寺拳法部 一致していなさそう ￥3,000 ぼくらの夏休み 志学館高等部 少林寺拳法部 メッセージとフォントが…
49. 1 2 3 訪問した人に与えたい印象から考える 文字の大きさと読みやすさを考慮する 1つのWebサイトで使うフォントは最大2つまで 効果的なフォントを選ぶための3つのポイント
50. 文字の大きさと読みやすさを考慮する 文字が小さくなっても読みやすい、 線が太めのフォントを選択する 細いフォントを使用したい場合はタイトルなど大きく表示される部分でのみ使用し、 本文はオーソドックスなゴシック体のフォントを使うなどの工夫が必要。 明朝体は線の太さが変わったりハネたりしている部分が余計な刺激となるため、 長い文章には不向きと言われている。 どうしても本文に明朝体を採用にしたい場合は、 なるべく線が太く均一で変形が少ないフォントを選択する。
51. 文字の大きさと読みやすさを考慮する 太くて見やすい 　さきほど岡田さんが紹介しょうかいかたがたちょっと お話になった通りこの春何か講演をというご注文であり ましたが、その当時は何か差支さしつかえがあって、 ――岡田さんの方が当人の私よりよくご記憶きおくと見 えてあなたがたにご納得のできるようにただいまご説明 がありましたが、とにかくひとまずお断りを致いたさな ければならん事になりました。しかしただお断りを致す のもあまり失礼と存じまして、この次には参りますから という条件をつけ加えておきました。その時念のためこ の次はいつごろになりますかと岡田さんに伺うかがいま したら、此年ことしの十月だというお返事であったの で、心のうちに春から十月までの日数を大体繰くってみ て、それだけの時間があればそのうちにどうにかできる だろうと思ったものですから、よろしゅうございますと 細くて見にくい 　さきほど岡田さんが紹介しょうかいかたがたちょっと お話になった通りこの春何か講演をというご注文であり ましたが、その当時は何か差支さしつかえがあって、 ――岡田さんの方が当人の私よりよくご記憶きおくと見 えてあなたがたにご納得のできるようにただいまご説明 がありましたが、とにかくひとまずお断りを致いたさな ければならん事になりました。しかしただお断りを致す のもあまり失礼と存じまして、この次には参りますから という条件をつけ加えておきました。その時念のためこ の次はいつごろになりますかと岡田さんに伺うかがいま したら、此年ことしの十月だというお返事であったの で、心のうちに春から十月までの日数を大体繰くってみ て、それだけの時間があればそのうちにどうにかできる だろうと思ったものですから、よろしゅうございますと
52. タイトルと本文でフォントを使い分ける例
53. 文字の大きさと読みやすさを考慮する UDフォントは障害を持っていない人 にとっても読みやすいフォント UDフォントは単に読みやすいだけでなく、可読性や視認性、判読性が高くなるようにデザイ ンされているので読み間違いが減るというメリットもある。 例：BIZ UDPゴシック プブ0OIｌCGS38
54. 1 2 3 訪問した人に与えたい印象から考える 文字の大きさと読みやすさを考慮する 1つのWebサイトで使うフォントは最大2つまで 効果的なフォントを選ぶための3つのポイント
55. 1つのWebサイトで使うフォントは最大2つまで 2つより多くのフォントを使うと 読みにくい、世界観がブレる、重い 統一感を出すために、1つのWebサイトで使うフォントは1つか2つにする。 使用するフォントが増えるとダウンロードするデータも増えるので、表示速度や通信量の 観点からも好ましくない。 たくさんのフォントを使いたくなるということは、Webサイトのコンセプトがブレている かもしれない。原点に立ち返ろう。
56. まとめ
57. まとめ 1 2 3 4 5 Webサイトにおいてフォント選びは大事 ウェブフォントで表現の幅が広がりまくり ウェブフォントを使うべきか否か見極めよう ウェブフォントサービスを活用しよう 適材適所でフォントを選ぼう
58. おまけ： 個人的によく使う Google Fontsのフォント
59. おまけ：個人的によく使うGoogle Fontsのフォント IBM Plex Sans JP そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご 沙汰さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三 の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私 の代りに講演をやって下さったのだろうと推測して安心し出しました。 BIZ UDPGothic そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご沙汰 さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三の新聞 にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私の代りに講 演をやって下さったのだろうと推測して安心し出しました。
60. おまけ：個人的によく使うGoogle Fontsのフォント Murecho（牟礼町） そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご 沙汰さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三 の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私 の代りに講演をやって下さったのだろうと推測して安心し出しました。 Zen Kaku Gothic New そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご 沙汰さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三 の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私 の代りに講演をやって下さったのだろうと推測して安心し出しました。
61. おまけ：個人的によく使うGoogle Fontsのフォント Zen Maru Gothic そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご 沙汰さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三 の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私 の代りに講演をやって下さったのだろうと推測して安心し出しました。 M PLUS Rounded 1c そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご 沙汰さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三 の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私 の代りに講演をやって下さったのだろうと推測して安心し出しました。
62. ご清聴 ありがとうございました！