ESP32 LVGLチュートリアル：タッチスクリーンUIを作る

01 /12

概要

これは初心者向けのESP32 LVGLチュートリアルです。最終的には、ESP32向けのタッチスクリーンUIをビジュアルにデザインする方法（何百行ものLVGL Cコードを手書きせずに）、ブラウザ上でリアルタイムにプレビューする方法、そしてESP-IDF・Arduino・PlatformIOプロジェクト向けにフラッシュ対応コードをエクスポートする方法がわかります。

ESP32 UIエディタや明確なESP32 LVGLガイドを探していた方に向けて、ブラウザベースのビジュアルLVGLエディタであるPicoPixelを使ったフロー全体を解説します。インストール不要、クレジットカード不要です。

02 /12

ESP32 UIにビジュアルエディタを使う理由

従来の方法でESP32のタッチスクリーンインターフェースを作るのは時間がかかります。各ウィジェットを配置するためのLVGL Cコードを手で書き、色とサイズを設定し、ボードにフラッシュし、ディスプレイを見つめ、数ピクセルを調整し、また書き込む。小さな変更のたびにハードウェアとのラウンドトリップが必要です。

ビジュアルエディタはそれを逆転させます。LVGLウィジェットをキャンバスにドラッグし、クリックでスタイルを設定し、即座に結果を確認できます。満足したらCコードをエクスポートするだけです。再コンパイルに費やす時間をデザインに充てられます。

NOTE

PicoPixelはLVGL 8.xを対象としています。エクスポートするコードは独自ランタイムなしでLVGL 8.x標準のAPI呼び出しを使用するため、すでにLVGL 8.xを実行している任意のESP32プロジェクトに組み込めます。（LVGL v9サポートは計画中です。）

03 /12

必要なもの

以下があれば始められます：

ディスプレイ付きのESP32ボード（LVGLが動作する任意のESP32バリアントで使用可能。対応ボードについては下記を参照）。
ファームウェアツールチェーン（ESP-IDF、Arduino、またはPlatformIO）、LVGL 8.xが追加済みでディスプレイ＋タッチドライバが動作していること。
無料のPicoPixelアカウント。このガイドの内容はすべてブラウザ内で完結します。

TIP

まだボードでLVGLが動作していない場合は、ディスプレイライブラリ（TFT_eSPI、LovyanGFX、またはESP LCD panel API）を使ってまずスクリーンにシンプルな「hello world」ラベルを表示させましょう。LVGLのテキストが1行でも表示されれば、本格的なUIを組み込む準備ができています。

04 /12

ステップ1 - ディスプレイサイズを設定する

エディタを開いて新しいプロジェクトを開始します。最初に正しく設定すべきは解像度です。デザインが物理スクリーンにピクセル単位で一致するようにします。

ディスプレイに合ったプリセットを選択します：

320×240：最も一般的な小型SPIのTFTパネル（ST7789、ILI9341）。
240×240：GC9A01などの丸型ディスプレイ。
480×320、480×480、または800×480：大型および正方形パネル。

最初に正しく設定することで、デザインしたものがデバイスにそのまま表示されます。

05 /12

ステップ2 - ドラッグ＆ドロップでデザインする

いよいよ楽しい部分です。パレットからLVGLウィジェットをキャンバスにドラッグします。ボタン、ラベル、スライダー、アーク、スイッチ、チャート、ドロップダウンなど30種類以上のウィジェットが使えます。配置したら、サイドパネルで色・フォント・スペーシング・角丸をビジュアルに設定します。この段階ではCコードは不要です。

作業中に知っておくと便利なこと：

複数スクリーン対応。 必要な数だけスクリーンを追加し、スクリーン間のナビゲーションを設定できます。メニュー・設定ページ・ダッシュボードに最適です。
最初からタッチ対応。 ウィジェットはタップに反応し、コンテナはスクロールするため、静的なレイアウトだけでなく実際のタッチスクリーン操作をデザインできます。
フォントと画像もファーストクラス。 組み込みデバイスのテキストとグラフィックはLVGLが保存できる形式に変換する必要があります。PicoPixelがそれを代わりに行います。フォントを小さく保つ方法の詳細はフォントガイドを、アニメーション付きのマルチステートウィジェットが必要な場合はスプライトガイドをご覧ください。

TIP

テンプレートから始めると、空白のキャンバスより速く進められることが多いです。テンプレートを開いてテキストと色を変えるだけで、良いスタート地点になります。

06 /12

ステップ3 - リアルタイムでプレビューする

ハードウェアに触れる前に、プレビューを実行します。PicoPixelは実際のLVGLエンジンをWebAssemblyにコンパイルしてブラウザ上で直接実行するため、表示されるのはモックアップや大まかな近似ではなく、本物のLVGLレンダリングです。

ボタンをタップし、スライダーをドラッグし、スクロールして、スクリーン遷移を確認します。ここでレイアウトの問題を修正するには数秒で済みますが、デバイス上で修正するには書き込みサイクルが必要です。チームメートやクライアントにフィードバックをもらうためにプレビューリンクを共有することもできます。

07 /12

ステップ4 - プロダクション対応のCコードをエクスポートする

デザインが完成したらエクスポートします。クリーンで標準的なLVGL 8.x Cコードが入ったpicopixel_lvgl_ui.zipが得られます：

ui.c / ui.h：エントリーポイント。ui_init()とui_tick()を含む。
screens.c / screens.h：スクリーンとそのレイアウト。
styles、fonts、images、actions、vars：デザインで使用するすべてのもの、自動生成されます。
README.md：エクスポートの説明（ステップ5で扱います）。

独自の依存関係はなく、追加すべきPicoPixelランタイムライブラリもありません。バニラLVGLなので、ESP-IDF・Arduino・PlatformIOのどれを使っていても同じように動作します。

08 /12

ステップ5 - ESP32プロジェクトにUIを追加する

エクスポートをプロジェクトに解凍します（多くの人はui/フォルダの下に配置します）。ファームウェアで必要な作業は2つだけです。LVGLとディスプレイ/タッチドライバのセットアップ後に一度ui_init()を呼び出し、メインループでui_tick()を呼び出します。

Arduinoスタイルのスケッチでは次のようになります：

cpp

#include <lvgl.h>
#include "ui/ui.h"          // exported by PicoPixel

void setup() {
  lv_init();
  // ... initialize your display + touch drivers here ...
  ui_init();                // builds the UI you designed
}

void loop() {
  lv_timer_handler();       // let LVGL render and handle input
  ui_tick();                // keep PicoPixel's screens updated
  delay(5);
}

実行時にスクリーンを切り替えるには（たとえばボタンが押されたとき）、目的のスクリーンを指定してloadScreen()を呼び出します。これで統合は完了です。コンパイルしてフラッシュすれば、ESP32上のUIがブラウザで確認したものと同じになります。

TIP

AIアシスタントに組み込みを任せたい場合は、エクスポートしたzip（README.mdを含む）をClaude Code・GitHub Copilot・Codexなどのコーディングアシスタントに渡してみてください。そのファイルにはプロジェクト構造・パブリックAPI・ウィジェットに必要なlv_conf.hの設定が説明されているため、アシスタントがUIをプロジェクトに組み込んでビルドできるようにしてくれます。

09 /12

対応するESP32ボードは？

PicoPixelは標準的なLVGL Cコードをエクスポートするため、LVGL 8.xが動作するほぼすべてのESP32で使えます。バリアントの簡単なガイド：

ESP32-S3：ほとんどのディスプレイプロジェクトに最適。PSRAMを搭載したデュアルコアで、リッチなUIに十分な余裕があります。
ESP32（オリジナル）/ ESP32-S2：シンプルなインターフェースに適しています。メモリ予算に注意してください。
ESP32-C3 / C6：軽量なシングルコアRISC-Vチップ。小規模なUIに向いています。
ESP32-P4：Espressifの最も強力なチップ。専用GPUを搭載し、スムーズな高解像度インターフェースが実現できます。PicoPixelのエクスポートはWaveshareとGuitionのESP32-P4ボードでテスト済みです。

人気の既製ボード（LILYGO T-Display-S3、M5Stack Core2/CoreS3、WaveshareとSuntonのディスプレイボード、Espressif ESP32-S3-BOX、そしてリーズナブルな「Cheap Yellow Display」）もすべて対応しています。ST7789・ILI9341・GC9A01（丸型）・ILI9488などの一般的なドライバも使えます。

10 /12

UIをメモリ効率よく保つ

組み込みディスプレイはスマートフォンやラップトップよりもはるかにメモリが少ないため、少しの工夫でUIを高速かつフラッシュ効率の良い状態に保てます：

フォントを適切なサイズにする。 各フォントは固定のピクセルサイズで保存されており、大きな文字セット（特に中国語・日本語・韓国語）はすぐに容量を消費します。フォントガイドでは実際に使う文字だけを含める方法を説明しています。
ディスプレイの色深度に合わせる。 16ビットパネルに32ビット画像は不要です。適切な色深度を選ぶことでアセットのサイズが小さくなります。
重複を避けて再利用する。 ウィジェットを1回作成し、スクリーンやプロジェクト間で再利用します。

11 /12

よくある質問

PicoPixelはESP32で使えますか？

はい。LVGL 8.xが動作する任意のESP32バリアントで、ESP-IDF・Arduino・PlatformIOと共に使える標準的なLVGL Cコードを生成します。エクスポートはESP32-P4ハードウェアでもテスト済みです。

どのLVGLバージョンに対応していますか？

LVGL 8.xです。エクスポートされたコードはLVGL 8.x APIを使用するため、LVGL 9.xの呼び出しと混在させないでください。（v9サポートは計画中です。）

Cコードを書く必要はありますか？

ステップ5の少量のグルーコード（ui_init()とui_tick()の呼び出し）だけです。UI自体はビジュアルにデザインされ、自動生成されます。

無料ですか？

はい。PicoPixelは個人・趣味での使用は無料で、クレジットカードは不要です。商用利用は月額$17（年間$204）からです。

12 /12

次のステップ

アイデアからフラッシュ済みUIまでの完全な流れがわかりました。解像度を設定し、ドラッグ＆ドロップでデザインし、リアルタイムでプレビューし、エクスポートして統合する。ここからは：

エディタを開いてapp.picopixel.ioでプロジェクトを始めましょう。
ボードとフレームワークのサポートについてはESP32 GUIビルダーページをご覧ください。
アニメーションスプライトとカスタムフォントでウィジェットをさらに豊かにしましょう。
他のツールと比較したい場合は、PicoPixelが他のLVGLエディタとどう違うかをご確認ください。

概要