Be Mindful of Fonts

2026/03/15のKCS 春合宿 でのLT会の発表資料です．
スライドやサイトを作るときにフォントにも注意を向けてほしいと思って書きました．
フォントの専門家ではないので間違っているところがあるかもしれません．

Transcript

1. Be Mindful of Fonts ～ For Better Presentation Slides ～ Be Mindful of Fonts © 2026 Latte72 1 / 21
2. スライドを作るとき 何のフォントを使うか 気にしてますか？？？ Be Mindful of Fonts © 2026 Latte72 2 / 21
3. そもそもフォントを気にしないのは論外 おすすめのゴシック体フォント Noto Sans JP ヒラギノ角ゴシック おすすめの明朝体フォント Noto Serif JP ヒラギノ明朝 游明朝・游ゴシックはデザインが崩れやすいのであまり良くない Be Mindful of Fonts © 2026 Latte72 3 / 21
4. 設定しないとどうなる？ Windows なら 游明朝・游ゴシック，メイリオ，Noto Sans CJK などが 使われることが多い． Mac や iPhone / iPad なら ヒラギノ角ゴシック，ヒラギノ明朝などが使 われることが多い． Android なら Noto Sans CJK などが使われることが多い． Linux だと環境によっては日本語を表示できるフォントが入っていない こともある． Be Mindful of Fonts © 2026 Latte72 4 / 21
5. 今から２つの文字列を出します 違和感を感じ取ってください （文章もおかしいですがそれは置いておいて...） Be Mindful of Fonts © 2026 Latte72 5 / 21
6. 安全を確保する為には以下を 導入する必要が有ります Be Mindful of Fonts © 2026 Latte72 6 / 21
7. 当社は迅速で具体的な公平を 所望し編入します Be Mindful of Fonts © 2026 Latte72 7 / 21
8. フォントが おかしい！ Be Mindful of Fonts © 2026 Latte72 8 / 21
9. 「中華フォント」問題 適切にフォントを設定しなかった場合，日本語以外の言語用のフォント が利用されて違和感のある表示になってしまうことがある． 海外のサイトを見ているときに「なんか文字が変だな」と思ったことが ある人も多いかも． 簡体字と繁体字など純粋に Unicode として異なる文字である場合もあ るが，同じ文字であってもフォントが異なると見た目が大きく変わるこ とがある ． Be Mindful of Fonts © 2026 Latte72 9 / 21
10. Noto には様々なバリエーションがある コンピューターで表示できない文字があり，豆腐（□）が表示される問 題を無くすために作られたのが Noto フォント．(No Tofu) 文字の形が異なる言語ごとに様々なバリエーションがある． Noto Sans JP （日本語） Noto Sans SC （中国語簡体字・中国本土） Noto Sans HK （香港語） Noto Sans TC （中国語繁体字・台 湾） Noto Sans KR （韓国語） Be Mindful of Fonts © 2026 Latte72 10 / 21
11. Noto Sans JP 類社尊平認及視侮迫逆諸進 連再層遍関念導達公安全社 Be Mindful of Fonts © 2026 Latte72 11 / 21
12. Noto Sans SC 類社尊平認及視侮迫逆諸進 連再層遍関念導達公安全社 Be Mindful of Fonts © 2026 Latte72 12 / 21
13. Noto Sans HK 類社尊平認及視侮迫逆諸進 連再層遍関念導達公安全社 Be Mindful of Fonts © 2026 Latte72 13 / 21
14. Noto Sans TC 類社尊平認及視侮迫逆諸進 連再層遍関念導達公安全社 Be Mindful of Fonts © 2026 Latte72 14 / 21
15. Noto Sans KR 類社尊平認及視侮迫逆諸進 連再層遍関念導達公安全社 Be Mindful of Fonts © 2026 Latte72 15 / 21
16. どれを使う？？？ 表示する内容が日本語なら Noto Sans JP を使えばよい． 海外の言葉を表示する場合は適切なフォントを選ぶ必要がある． ちなみに，前のスライドで紹介した東アジアの言語以外にもアラビア語 やタイ語など様々な言語に対応した Noto フォントがある． Google Fonts からダウンロードして利用できる． Be Mindful of Fonts © 2026 Latte72 16 / 21
17. おまけ：コーディングフォントは？ コーディングフォントもお気に入りのものを探すとよい 等幅でないフォントはコードの見た目が崩れるので論外 日本語を表示するなら日本語を含んでいるフォントが必要 半角文字と全角文字の幅が 1:2 で表示されるフォントが良い Be Mindful of Fonts © 2026 Latte72 17 / 21
18. コーディングフォントの種類 代表的なコーディングフォントには以下のようなものがある Source Han Code JP HackGen Bizin Gothic ← 個人的推し 日本語に対応した様々なコーディングフォントがあるので自分の好みに 合うものを探してみるとよい Be Mindful of Fonts © 2026 Latte72 18 / 21
19. Bizin Gothic #include <stdio.h> int main() { // 範囲は 1 から 30 まで for (int i = 1; i <= 30; i++) { // if 文で条件分岐して出力する文字列を決定 if (i % 15 == 0) printf("FizzBuzz\n"); else if (i % 3 == 0) printf("Fizz\n"); else if (i % 5 == 0) printf("Buzz\n"); else printf("%d\n", i); } } Be Mindful of Fonts © 2026 Latte72 19 / 21
20. おわりに 適切にフォントを設定して細部までこだわったスライドを作成しましょ う！！！ Be Mindful of Fonts © 2026 Latte72 20 / 21
21. Thank You! Be Mindful of Fonts © 2026 Latte72 21 / 21