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

01/12

概要

このチュートリアルでは、ESP32 向けのタッチスクリーン UI を初めて作る方向けに、設計から実機への組み込みまでを説明します。何百行もの LVGL C コードを手書きせずに、ブラウザ上でデザインとプレビューを行い、ESP-IDF・Arduino・PlatformIO のプロジェクトで使うコードを出力します。

ESP32 の UI エディタや、手順に沿って学べるESP32 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アカウント。UI の設計とプレビューはブラウザで行えます。

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 - ドラッグ＆ドロップでデザインする

ここから UI を作っていきます。パレットから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を追加する

エクスポートした zip をプロジェクト内に展開します（多くの人は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エディタとどう違うかをご確認ください。

概要