📑
M5Stackで綺麗なフォントをお手軽に表示する方法

2025/05/28に公開
80% Organic!

みんな、こんにちは！M5StackはM5Unifiedを使うとそれ単体でも文字は描画できるけど、もっと綺麗なフォントで表示したいと思ったことある？あるよね？TrueTypeフォントをそのまま読み込んで描画もできなくはないけど、マイコンってメモリも限られているから、特に日本語のように文字数が多いフォントはメモリに読み込むのも難しいよね。
そこで、容量を抑えつつ、日本語を含む任意のフォントを使ってM5Stackで綺麗に文字を表示する方法を紹介するよ。VLWっていうフォントファイルを使うんだけど、VLWを使うと、以下のような感じで日本語も綺麗に表示できるよ。
https://x.com/nananauno/status/1915760383979344328?s=46&t=NR3OQIfbodzsDigY2mDZRw

 やりたいこと画面付きのM5Stack (CoreシリーズとかStickなど) でLittleFSに保存したVLWフォントを読み込んで何か文字を表示してみるよ。

 こんな人にオススメM5Stack（Coreシリーズ、Stickなど）で文字を綺麗に表示したい
自分の好きなフォントを使いたい
UIやメニューを綺麗に見せたい

 ざっくり説明ここでは、VLWフォントの概要と作り方をざっくりと説明するよ。

 VLWフォントって？VLWって聞いたことある？ボクもあんま知らないし、ネット上の情報も少ないんだけど、Processingっていうアート向けのプログラミング環境で使用されているフォントファイルなんだって。全然知らないね。通常のTrueTypeやOpenTypeの日本語フォントだと日本語のひらがな、カタカタ、漢字に必要な文字が大体は入っているんだけど、VLWは必要な文字のみのビットマップのみを持っていて、特徴は以下のような感じだよ。
必要な文字のビットマップ（アルファチャネルのみ）を保持
文字数が少ないほどファイルサイズが小さい
フォントサイズが固定
使い方は後で説明するけど、M5UnifiedではこのVLWフォントを読み込むための仕組みが備わっているよ。

 VLWフォントの作成VLWフォントを使うにはVLWフォントを作成する必要があるよ。ここではM5StackさんがWeb上で提供している変換ツールVLW Font Converterを使ったVLWフォントの作成方法を説明するよ。M5Stackさんの変換ツールを使うと簡単にVLWフォントを作成することができるよ。
https://vlw-font-creator.m5stack.com/
M5StackさんのVLW Font ConverterでVLWフォントを作成する手順は以下の通りだよ：
VLWに含める文字を決める
フォントをVLW Font Converterで読み込み
VLWフォントとして埋め込む文字を指定
変換
1. VLWに含める文字を決める

例えば「みんな、こんにちは！これはVLWフォントの日本語表示です」を表示できるようにするには以下の文字が必要になってくるよね。
みんなこんにちはれVLWフォントの日本語表示です
！、
ただ、実際には、以下のように表示したい文をそのまま入れても問題ないみたいだよ。
みんな、こんにちは！これはVLWフォントの日本語表示です
表示する文字を選ぶのが面倒な場合は、例えばよく使われるひらがな・カタカナ・記号・アルファベット・数字＋必要な漢字ぐらいでVLWフォントを作成しておけば良いかもね。
ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをん
ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾ
タダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポ
マミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ
、。・「」（）『』【】〈〉《》［］｛｝ー〜ー…‥：；？！ー‐／＼＠＆＊＋＝％＃＄＾＿｜<>0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
2. フォントをVLW Font Converterで読み込み
VLW Font Converterの各項目に以下のように入力していくよ：

Names: 作成するVLWフォントの名前を入力するよ。例えば「biz_udp_gothic_hello_30」のように、フォント名とサイズを含めると後で管理しやすいよ。

Size: フォントのサイズをピクセル単位で指定するよ。例えば「30」と入力すると、30ピクセルの高さのフォントになるよ。M5Stackの画面サイズに合わせて適切なサイズを選んでね。

TTF/WOFF/OTF File: 「Choose file」ボタンをクリックして、変換したいフォントファイル（.ttfや.otfなど）を選択するよ。Google Fontsなどからダウンロードしたフォントファイルを使ってね。

Preview Text: ここに表示したいテキストを入力すると、下の「Preview」欄でプレビューが表示されるよ。日本語も入力できるから、実際に表示したい文章を試してみてね。
3. VLWフォントとして埋め込む文字を指定
文字の指定方法は2つあるよ：

Range: Unicode範囲で指定する方法だよ。例えば「0x20-0x7F」と入力すると、スペースから「~」までのASCII文字が含まれるよ。日本語の場合は「0x3040-0x309F」（ひらがな）、「0x30A0-0x30FF」（カタカナ）などの範囲を指定できるよ。

Symbols: 直接文字を入力する方法だよ。例えば「みんな、こんにちは！」と入力すると、これらの文字だけが含まれるよ。
どちらか一方、または両方を使って必要な文字を指定しよう。文字数が多いほどファイルサイズが大きくなるから、本当に必要な文字だけを含めるのがポイントだよ。
4. 変換
すべての設定が完了したら、「Convert」ボタンをクリックして変換を開始するよ。変換が完了すると、VLWフォントファイルがダウンロードされるよ。このファイルをM5StackのLittleFSに保存して使用するよ。
LittleFS上に保存できるサイズ

VLWフォントのデータはM5StackのフラッシュもしくはmicroSDカードに保存しておく必要があるんだけど、今回はLittleFSから読み込むから、フォントデータはLittleFSに保存できる容量に収まる必要があるね。
LittleFSのサイズはパーティションの設定次第だけど、M5Stack Core2のデフォルト値は約1.5MBだよ。文字数が多いフォントや大きなサイズのフォントを作成すると、ファイルサイズが大きくなるから注意してね。例えば、ひらがな・カタカナ・基本的な記号・アルファベット・数字を含む30pxサイズのフォントで約300KB程度になるよ。
VLWフォントファイルをLittleFSに保存する方法
作成したVLWフォントファイルをM5StackのLittleFSに保存するには、Arduino IDEのLittleFS Uploaderを使うよ。手順は以下の通り：
Arduino IDEで「ツール」→「ESP32 Sketch Data Upload」を選択する（このメニューがない場合は、Arduino ESP32 filesystem uploaderをインストールしてね）
プロジェクトフォルダ内に「data」フォルダを作成し、その中にダウンロードしたVLWフォントファイルを配置する
「ESP32 Sketch Data Upload」を実行すると、dataフォルダ内のファイルがM5StackのLittleFSに書き込まれるよ
もしくは、PlatformIOを使っている場合は：
プロジェクトフォルダ内の「data」フォルダにVLWフォントファイルを配置する
PlatformIOのタスクから「Upload Filesystem Image」を実行する
これでVLWフォントファイルがM5StackのLittleFSに保存され、プログラムから読み込めるようになるよ！
VLWフォント作成時のよくあるトラブルと対処法

日本語が表示されない: フォントファイルに日本語の文字が含まれているか確認してみてね。すべてのフォントが日本語をサポートしているわけではないよ。

ファイルサイズが大きすぎる: 必要な文字だけを含めるようにしてみてね。特に漢字は文字数が多いから、本当に必要な漢字だけを指定するのがおすすめだよ。

フォントが汚く表示される: サイズが小さすぎると日本語が読みにくくなることがあるよ。20px以上のサイズを試してみてね。

 作ってみよう！実際にVLWフォントを使ってM5Stackで日本語を表示してみるよ！ここでは環境構築からVLWフォントの読み込み、実際の表示までの手順を説明するよ。

 環境まずは必要な環境の準備だよ。以下のものが必要だよ：
ハードウェア:
M5Stack Core2、M5Stack Core、M5StickCなどのM5Stack製品
USBケーブル（デバイスとPCを接続するため）
ソフトウェア:
Arduino IDE（最新版を推奨）
M5Unified ライブラリ
フォントファイル:
さっき作成したVLWフォントファイル
PlatformIOを使う場合

PlatformIOを使っている場合、platformio.iniファイルは以下のように設定するよ:
[env:m5stack-core2]
platform = espressif32
board = m5stack-core2
framework = arduino
lib_deps = 
  m5stack/M5Unified
board_build.filesystem = littlefs
※boardは環境に合わせて適宜置き換えてね。

 VLWフォントの読み込みVLWフォントファイルをLittleFSに保存したら、M5Unifiedを使って読み込むことができるよ。基本的な手順は以下の通りだよ：
フォントファイルをLittleFSに保存する:
プロジェクトフォルダに「data」フォルダを作成する
作成したVLWフォントファイル（例：biz_udp_gothic_hello_30.vlw）をdataフォルダに配置する
Arduino IDEの場合は「ツール」→「ESP32 Sketch Data Upload」を実行する
PlatformIOの場合は「Upload Filesystem Image」タスクを実行する
プログラムでフォントを読み込む:

M5Unifiedを使ってLittleFS上のVLWフォントを読み込むサンプルコードは以下のようになるよ。
#include <LittleFS.h>
#include <M5Unified.h>

void setup() {
  auto cfg = M5.config();
  M5.begin(cfg);

  // LittleFSのマウント
  if (!LittleFS.begin()) {
    M5.Display.println("LittleFS mount failed");
    return;
  }
  // VLWフォントの読み込み
  if (!M5.Display.loadFont(LittleFS, "/biz_udp_gothic_hello_30.vlw")) {
    M5.Display.println("Failed to load font");
    return;
  }

  M5.Display.setTextColor(GREEN);  // 表示色
  M5.Display.setCursor(10, 30);
  M5.Display.println("みんな、こんにちは！");
  M5.Display.setCursor(10, 70);
  M5.Display.println("これはVLWフォントの");
  M5.Display.setCursor(10, 110);
  M5.Display.println("日本語表示です");
}

void loop() {
  // 何もしない
}
このコードの重要なポイントを解説するよ：

LittleFS.begin() でLittleFSをマウントしているよ。これに失敗するとフォントファイルにアクセスできないから注意してね。

M5.Display.loadFont(LittleFS, "/biz_udp_gothic_hello_30.vlw") でVLWフォントを読み込んでいるよ。第1引数にLittleFSを指定し、第2引数にフォントファイルのパスを指定するよ。

M5.Display.setTextColor(GREEN) で文字の色を設定しているよ。他にもRED、BLUE、YELLOWなど様々な色が使えるよ。

M5.Display.setCursor(x, y) で文字の表示位置を設定しているよ。xは左からの距離、yは上からの距離をピクセル単位で指定するよ。

M5.Display.println("テキスト") で実際にテキストを表示しているよ。

 画面に文字を描画フォントさえ読み込んでおけば、VLWフォントを使った文字の描画は非常に簡単で、通常の文字描画と同じだよ。基本的な使い方は以下の通り：
表示位置の設定:
M5.Display.setCursor(x, y);  // x, yは表示したい位置（ピクセル単位）
文字色の設定:
M5.Display.setTextColor(色);  // 例：RED, GREEN, BLUE, WHITE, BLACK など
文字の表示:
M5.Display.print("テキスト");    // 改行なしで表示
M5.Display.println("テキスト");  // 改行ありで表示
応用例：複数の色で表示する
M5.Display.setTextColor(RED);
M5.Display.setCursor(10, 30);
M5.Display.print("こんにちは");

M5.Display.setTextColor(BLUE);
M5.Display.setCursor(130, 30);
M5.Display.println("世界！");
応用例：文字サイズを変える
異なるサイズのVLWフォントを切り替えて使うこともできるよ。例えば、小さいサイズ（20px）と大きいサイズ（40px）のVLWフォントを用意しておいて、以下のように切り替えて使うことができるよ：
// 小さいフォントを読み込む
M5.Display.loadFont(LittleFS, "/biz_udp_gothic_20.vlw");
M5.Display.setCursor(10, 30);
M5.Display.println("小さい文字");

// 大きいフォントを読み込む
M5.Display.loadFont(LittleFS, "/biz_udp_gothic_40.vlw");
M5.Display.setCursor(10, 70);
M5.Display.println("大きい文字");
注意点:
フォントを切り替える際は、新しいフォントを読み込む前に古いフォントをアンロードする必要はないよ。新しいフォントを読み込むと自動的に切り替わるよ。
VLWフォントはサイズが固定されているから、異なるサイズで表示したい場合は、それぞれのサイズのVLWフォントファイルを作成する必要があるよ。
フォントの読み込みには少し時間がかかるから、頻繁に切り替えるとパフォーマンスに影響するかもしれないよ。

 トラブルシューティングVLWフォントを使う際によくあるトラブルと対処法を紹介するよ：
「LittleFS mount failed」エラーが表示される:
LittleFSパーティションが正しく設定されているか確認してみてね。
Arduino IDEの場合、「ツール」→「Partition Scheme」で適切なパーティション設定を選択されているかな？
「Failed to load font」エラーが表示される:
フォントファイルがLittleFSに正しくアップロードされているか確認してみてね。
ファイル名とパスが正しいかも確認してみてね（大文字小文字も区別されるよ）。
文字が表示されない、または文字化けする:
VLWフォントに必要な文字が含まれているか確認してみてね。
フォントサイズが適切か確認してみてね。小さすぎると読みにくくなるよ。
これで基本的なVLWフォントの使い方は完璧だね！自分の好きなフォントを使って、M5Stackで素敵なUIを作ってみてね！

 ライセンスはよく見てねフォントにはライセンスがあって、自由に使えるものや用途が制限されているものなど、色々あるよ。テストで使用したり、個人で楽しむ分には問題ないと思うけど、そういう用途を超えて使用する場合は、フォントを加工して機器に搭載することがフォントのライセンスで許されているのかをよく確認してね。
ボクが今回使ったのはGoogle Fontsで取得可能な以下の日本語フォントだよ。

BIZ UDPGothic
モリサワさんのこのフォントは、SIL Open Font License (OFL) Version 1.1っていうオープンなライセンスで配布されていて、比較的に自由に使えるよ。

 まとめVLWフォントという形式を画面付きのM5Stackシリーズで表示する方法を説明したよ。M5Unifiedを使うことで、LittleFS上に保存したVLEフォントを読み込んで簡単に文字を描画できること分かってもらえたかな？
VLWフォントを作成する一手間はあるけど、綺麗な文字で表示できるとテンション上がるよね？みんなもぜひ自分だけの日本語フォント表示、やってみてね！
じゃあ、またね！
GitHubで編集を提案
やりたいこと

こんな人にオススメ

ざっくり説明

VLWフォントって？

VLWフォントの作成

作ってみよう！

環境

VLWフォントの読み込み

画面に文字を描画

トラブルシューティング

ライセンスはよく見てね

まとめ

Discussion
