コーディングにおすすめの見やすい&かっこいい&素敵な日本語フォントをインストールする方法

スポンサーリンク
スポンサーリンク


htmlやcssなどをテキストエディタでコーディングする時のおすすめの日本語フォントはどれなの……と思いませんか?

ネットで「コーディング フォント」と調べると、いっぱいいろいろ書いてあってどのフォントをインストールすればいいのだろう…と途方にくれていませんか?

そんなあなたにおすすめの見やすい&かっこいい&素敵な日本語フォントをインストールする方法をお伝えします。

もちろん無料のフォントですのでご安心ください。

コーディング用のフォントについて

『フォントについてちょっと調べてみようかなぁ…』と調べてみると…フォントはデザインに関連する奥深いものなので、相応の知識が必要になってきます。

そのため、書いてあることが難しかったりします。たとえば以下のサイトで、いろいろ詳しく説明してくれています。

プログラミングが超捗る!コーディングにおすすめフォント10選
拘りのあるエンジニアは、プログラミングのフォントも考えているということをご存知でしょうか?フォントを変えることで、コーディングのストレスを軽減させることができるのです。そこで今回は、コーディングにおすすめのフォント10選をご紹介します!
https://agency-star.com/freelance/articles/316/
等幅フォント比較:プログラミング用 - Qiita
プログラミングに使う等幅フォントの主観による比較。観点アルファベットの見易さ日本語フォントの見易さアルファベットO(o)とゼロ(0)の区別0内に斜線が表示されるか。個人的にあるとうれしい。小文字L(l)とバーティカルバー(|)の区…

どれも詳しく説明してくれているページです。

ですが『今のテキストエディタのフォントがとにかく気に入らない!とりあえずすぐに、かっこいい&素敵な日本語フォントを使いたい』という、初心者さんやノンプログラマー・ノンデザイナーである私たちにはちょっと難しすぎますよね。

ということで、詳しい説明については上記掲載のサイトにお任せするとして、上記掲載サイトと以前プログラミングの仕事をしていた私の経験からコーディングにおすすめの見やすい&かっこいい&素敵な日本語フォントを選んでみました。もちろんすべて無料です。

  • Source Han Code JP(=源ノ角ゴシック Code JP)
  • Ricty Diminished
  • Ricty Diminished Discord
  • Myrica
  • MyricaM
  • VL Gothic

というわけで、上記6つのフォントをWindowsにインストールする方法について記述しますね。

フォントのインストールはあまりしないと思いますので可能な限りくわしく書きました。そのため文章は長いです。

しかし作業時間はそれほどかかりませんので、すべてインストールしてからあなたが『このフォントが一番いい』と思ったフォントをテキストエディタで使うように設定すればいいかと思います。

フォントのインストールに途中であきてしまったら、ブックマークしておいて、後日続きをしてもいいかと思います。

インストールさえしてしまえば、変更はいつでも簡単にできますので。

前置きが長くなりました。それでは、はじめますね。

Source Han Code JP(=源ノ角ゴシック Code JP)のインストール方法

Source Han Code JPは、Adobe社の日本語フォント開発チームに所属する服部正貴氏がつくった「コーディング用の見やすい&かっこいい&素敵な無料フォント」です。

日本語の名前として「源ノ角ゴシック Code JP」という呼び方もあります。詳しくは別記事にて作成してあります。インストールはこちらからお願いします。

Adobe社の無料フォントSource Han Code JPをインストールする方法 Windows編
今日はAdobe社が開発したhtmlやcss・JavaScriptなどのコーディング用の無料フォント Source Han Code JP(源ノ角ゴシック Code JP)を、WindowsPCにインストールする方法について説明しますね。...

Ricty DiminishedフォントとRicty Diminished Discordフォントのインストール方法

Ricty Diminishedは「リクティ・ディミニッシュト」、Ricty Diminished Discordは「リクティ・ディミニッシュト・ディスコード」と読みます。Ricty Diminishedフォントをダウンロードすると、Ricty Diminished Discordフォントも一緒にダウンロードしてくれます。

フォントはこんな感じです。

Ricty Diminishedがこれ、

Ricty Diminished Discordがこれ、

Ricty Diminishedとについてのくわしい説明はこちら

GitHub - edihbrandon/RictyDiminished: Ricty Diminished --- fonts for programming
Ricty Diminished --- fonts for programming. Contribute to edihbrandon/RictyDiminished development by creating an account on GitHub.

まずこちらのページにアクセスして、

Releases · edihbrandon/RictyDiminished
Ricty Diminished --- fonts for programming. Contribute to edihbrandon/RictyDiminished development by creating an account on GitHub.

アクセスしたら、

(一番上にある最新バージョンの)zipをクリックし、ダウンロードします。

ダウンロードが終了したら、

[フォルダを開く]をクリックして、ダウンロードフォルダを開いてください。


ダウンロードしたRictyDiminished-3.2.3.zip(3.2.3はバージョンアップされれば変わります)ファイルを右クリックして、[すべて展開]を選択してください。


完了時に展開されたファイルを表示するにチェックが入っていることを確認し、[展開]ボタンをクリックしてください。

展開されたフォルダが表示されたら、

RictyDiminished-3.2.3(3.2.3はバージョンアップされれば変わります)をクリックすると、


展開したフォルダ内に、ttfという拡張子がついたファイル群が格納されています。

これらのttfという拡張子がついたファイル群をひとつひとつダブルクリックして、[インストール]ボタンをクリックしてください。「フォントをインストールしています」というメッセージボックスが表示されて、消えればインストール完了です。

RictyDiminished-Bold.ttf


RictyDiminished-BoldOblique.ttf


RictyDiminishedDiscord-Bold.ttf


RictyDiminishedDiscord-BoldOblique.ttf


RictyDiminishedDiscord-Oblique.ttf


RictyDiminishedDiscord-Regular.ttf


RictyDiminished-Oblique.ttf


RictyDiminished-Regular.ttf


以上で、Ricty DiminishedフォントとRicty Diminished Discordフォントのインストールが完了しました。

MyricaフォントとMyricaMフォントについて

Myricaは「ミリカ」と読みます。MyricaMは「ミリカ エム」(公式サイトに載っていないので確かではありません)でしょうか…

MyricaとMyricaMの違いは、ASCII文字(≒半角英数字)以外のフォントが異なる点です。公式サイトには以下のように紹介されています。

Myrica
ASCII文字は Inconsolata、それ以外の文字は 源真ゴシック をベースとした以下の3フォントをパッケージしたファイルです。

MyricaM
ASCII文字は Inconsolata、それ以外の文字は Mgen+ をベースとした以下の3フォントをパッケージしたファイルです。

引用:プログラミングフォント Myrica / Estable | Myrica (ミリカ)は、フリーなプログラミング用 TrueType フォントです。

『源真ゴシック? Mgen+ ?』という場合でも問題ありません。あなたが最終的に好きなフォントを選べばいいだけですので。

Myricaフォントはこんな感じです。

MyricaMフォントはこんな感じです。

公式サイトはこちら

プログラミングフォント Myrica
プログラミング用フォント MyricaMyrica (ミリカ)は、フリーなプログラミング用 TrueType フォントです。視認性、判別性 が高くなるように、複数のフォントファイルを元に合成/修正しました。フォントの特徴多くの特徴をプログラ

Myricaフォントのインストール方法

まずはMyricaフォントからインストールしましょう。

まずは、以下の公式サイトのページにアクセスしてください

Myrica
Myrica.ttcASCII文字は Inconsolata、それ以外の文字は 源真ゴシック をベースとした以下の3フォントをパッケージしたファイルです。 7z圧縮版 約4MB ダウンロード zip圧縮版 約8MB ダウンロードMyri

アクセスしたら、

Myrica.ttcのzip圧縮版をクリックしてダウンロードしてください。

ダウンロードが終了したら、ブラウザーの[フォルダを開く]をクリックしてダウンロードフォルダを開いてください。



ダウンロードしたMyrica.zipファイルを右クリックして、[すべて展開]を選択してください。


展開したフォルダ内に、Myrica.TTCというファイルが格納されています。


Myrica.TTCをダブルクリックして、


[インストール]ボタンをクリックしてください。「フォントをインストールしています」というメッセージボックスが表示されて、消えればインストール完了です。

実はMyricaフォントをインストールすると、以下の3種類のフォントがインストールされます。

  • Myrica M
  • Myrica P
  • Myrica N

このうち等幅フォント、つまりコーディング用フォントはMyrica Mになります。なのでエディタに設定する場合は、Myrica M を設定します

くわしい説明は公式サイトをどうぞ。

Myrica
Myrica.ttcASCII文字は Inconsolata、それ以外の文字は 源真ゴシック をベースとした以下の3フォントをパッケージしたファイルです。 7z圧縮版 約4MB ダウンロード zip圧縮版 約8MB ダウンロードMyri

MyricaMフォントのインストール

それでは次にMyricaMフォントをインストールしましょう。

まずは、以下の公式サイトのページにアクセスしてください。

MyricaM
MyricaM.ttcASCII文字は Inconsolata、それ以外の文字は Mgen+ をベースとした以下の3フォントをパッケージしたファイルです。 7z圧縮版 約4MB ダウンロード zip圧縮版 約8MB ダウンロードMyri

アクセスしたら、

Myrica.ttcのzip圧縮版 をクリックしてダウンロードしてください。

ダウンロードが終了したら、ブラウザーの[フォルダを開く]をクリックしてダウンロードフォルダを開いてください。



ダウンロードしたMyricaM.zipファイルを右クリックして、[すべて展開]を選択してください。


展開したフォルダ内に、MyricaM.TTCというファイルが格納されています。


MyricaM.TTCをダブルクリックして、


[インストール]ボタンをクリックしてください。「フォントをインストールしています」というメッセージボックスが表示されて、消えればインストール完了です。

実はMyricaMフォントをインストールすると、以下の3種類のフォントがインストールされます。

  • MyricaM M
  • MyricaM P
  • MyricaM N

このうち等幅フォント、つまりコーディング用フォントはMyricaM Mになります。なのでエディタに設定する場合は、MyricaM M を設定します

くわしい説明は公式サイトをどうぞ。

MyricaM
MyricaM.ttcASCII文字は Inconsolata、それ以外の文字は Mgen+ をベースとした以下の3フォントをパッケージしたファイルです。 7z圧縮版 約4MB ダウンロード zip圧縮版 約8MB ダウンロードMyri

以上で、MyricaフォントとMyricaMフォントのインストールが完了しました。

VL Gothicのインストール方法

VL Gothicは「ブイエル ゴシック」と読みます。VL Gothicフォントはこんな感じです。

公式サイトへは、システム上、直接リンクできないので、Google検索結果よりお願いします → VL Gothic | Google検索結果

インストールするには、まず公式サイトのダウンロードページにアクセスして → VL Gothic ダウンロード | Google検索結果

アクセスできたら、

ZIPファイルをクリックしてください。2021年10月12日現在の最新は「VLGothic-20141206.zip」です。

クリックすると画面遷移して、違う画面が表示されますが、

そのまま何もせずにおまちください。

ダウンロードが終了したら、

ブラウザーの[フォルダを開く]をクリックしてダウンロードフォルダを開いてください。

ダウンロードしたVLGothic-20141206.zipファイル(20141206は今後かわる可能性があります)を右クリックして、[すべて展開]を選択してください。


展開したフォルダ内に、VL-Gothic-Regular.ttfというファイルが格納されています。


VL-Gothic-Regular.ttfをダブルクリックして、


[インストール]ボタンをクリックしてください。「フォントをインストールしています」というメッセージボックスが表示されて、消えればインストール完了です。

以上で、VL Gothicフォントのインストールが完了しました。

せっかくなので、VL Pゴシックもインストール

せっかくなので、VL Pゴシックもインストールしておきましょう。プロポーショナルフォントといって文字の横幅が、文字によって横幅が変わるフォントです。コーディングには向きませんが、文章を書くときに使えます。


VL-PGothic-Regular.ttfもダブルクリックして、


[インストール]ボタンをクリックしてください。「フォントをインストールしています」というメッセージボックスが表示されて、消えればインストール完了です。

まとめ

今日は、コーディングにおすすめのかっこいい&素敵な日本語フォントをインストールするということで、Source Han Code JP(=源ノ角ゴシック Code JP)・Ricty Diminished・Ricty Diminished Discord・Myrica・MyricaM・VL Gothicの6フォントをインストールしました。

これでテキストエディタなどで使用できるようになっています。

ただ設定の方法がわかならいこともありますので、各テキストエディタで設定する方法については別記事にてご案内しています。以下を参考にしてください。

VSCodeでフォントを変更する方法
Visual Studio Codeでコーディングフォントを変更する方法を、フォントのインストール方法もふくめて説明しますネ。
Bracketsのフォントを簡単に変更・設定する方法
Bracektsエディタのフォントを変更・設定する方法は? 『インストール直後にBracketsエディタで初期設定されているフォントを変更したいなぁ』と思いませんか?htmlやcss・JavaScriptをコーディングする時に、見た目が素敵...
Atomテキストエディタのフォントを簡単に変更する方法
Atomテキストエディタのフォントは、コア設定画面の「フォント」欄にフォント名を入力して、Atomを再起動することで簡単に変更できます。 Atomで初期設定されているフォントもそこそこカッコいいですよね。しかし中には自分のお気...

コメント

タイトルとURLをコピーしました