WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >作業効率化

コーディング時の打ち間違いによるミスで、本来したい動きが実現しないということや、テキストが並んでいることで疲れ目を感じてコードが読みにくくなったりすることはありませんか？
実はコーディングに適したフォントというものがいくつかリリースされており、優れた設計のフォントに変更することで、コードの読みやすさを上げることが可能です。
とはいえ、自分にとっての読みやすさというのは人それぞれあるかと思いますので、おすすめフォントをいくつかご紹介します！

コーディング時の読みやすいフォントの条件とは？

• 数字の「1（いち）」とアルファベットの「l（エル）」、数字の「0（ゼロ）」とアルファベットの「O（オー）」など、テキストが整然と並んでいる中で容易に見分けられる
• エディタ上でカーソルを上下に移動させてもカーソル位置が左右にぶれずに表示されるように文字の幅が等幅に揃っている
• 日本語の場合は、「－（マイナス記号）」と「ー（音引き）」の区別や、コード内に全角空白が紛れていてもすぐに見分けられる

上記の条件は大事なポイントになるかと思います。そのため今回は日本語対応しているプログラミングフォントをピックアップしました！

白源（はくげん／HackGen）

特徴

• 文字幅半角1:全角2の正統派な等幅フォント（文字幅 半角3:全角5バージョンも同梱）
• Hack由来の読みやすく、しっとりとした印象の英字
• 全角スペースの可視化、パイプ記号 | の破断線化（Ricty Discordインスパイア）
• 濁点、半濁点を通常より大きくし、表示サイズが小さい場合でも区別しやすく、長音記号「ー」と漢数字の「1（一）」にアクセントを付け区別しやすくされている
• カタカナ「ヘ」にアクセントを付け、ひらがなと区別しやすくされている

生成元にはプログラミング向け英文フォントHackと、Adobe製作の源ノ角ゴシックに丸みを付けた派生フォント源柔ゴシックが使用されており、個人的に非常に見やすいフォントです！
アクセントの違いがわかりやすいので見落としを防ぎやすいですね。

白源

UDEV Gothic

特徴

• モリサワ社の考えるユニバーサルデザインが盛り込まれたBIZ UDゴシック由来の読み易い日本語文字
• 全角スペースの可視化
• 収録される文字の違い等によって分かれた複数のバリエーションを用意（詳しくはフォントダウンロードページ内、バリエーションの説明を参照ください）

UDEV Gothicは、ユニバーサルデザインフォントのBIZ UDゴシックと、開発者向けフォントのJetBrains Monoを合成した、プログラミング向けフォントです。
英数字の判読性が高いのが特徴的ですね。

UDEV Gothic

PlemolJP（プレモル ジェイピー）

特徴

• IBM Plex Sans JP由来の懐が広く読み取りやすい日本語文字
• IBM Plex Mono由来の判読性に優れた英数字
• 全8種類の豊富なウェイト
• IBM Plex Sans JPでは用意されていないイタリック体を提供
• 全角スペースを可視化

IBMがリリースしたオープンソース日本語フォント「IBM Plex Sans JP」と、同IBM Plexシリーズの「IBM Plex Mono」と組み合わせたプログラミングフォントになっています。
個人的に日本語が見やすい印象です。また先に紹介したフォントよりも記号が特徴的ですね。

PlemolJP

まとめ

いかがでしたでしょうか。長時間コードを見ているとやはり目が疲れてしまう…という方はまずは試しにフォントを変更してみるのも手かと思います！
またコードエラーの見つけやすさを上げるといった点でも役立ちますので、ぜひ自分好みのフォントを見つけてみてください。