ドラッグ＆ドロップで組み込み UI を作れる LVGL エディタ・GUI ビルダー。
PicoPixel の使い方
PicoPixel なら、ドラッグ＆ドロップで組み込み UI を作れます。画面上でデザインし、実際の LVGL エンジンを使うシミュレーターで確認して、製品に組み込める C コードを出力。インストール不要で、すぐに作り始められます。
無料で始めるデザインからデバイスまで 6 ステップ
インターフェースをデザインする
ブラウザで PicoPixel を開き、パレットから LVGL ウィジェットをキャンバスへドラッグします。見た目を確認しながら、ピクセル単位で調整できます。ダウンロードやインストールは不要です。
- •ボタン、ラベル、スライダー、スイッチ、アーク、チャート、ドロップダウン、ローラー、チェックボックス、テキストエリア、タブビュー、コンテナ、画像
- •ターゲットのディスプレイ解像度をハードウェアに合わせて設定
- •色、ボーダー、パディング、フォント、不透明度、グラデーション、シャドウのスタイルを設定
- •アライメントと配置ツールでウィジェットを正確に配置
- •複数画面の UI に必要な画面とレイヤーを整理
操作に動作を設定する
イベントエディタで、操作に応じた動作を設定します。C コードを書く必要はありません。PicoPixel が LVGL イベントコールバックを自動生成します。
- •ボタン押下 → 別の画面に遷移
- •スライダーの値変更 → ラベルを更新
- •チェックボックスのオン・オフ → パネルの表示/非表示
- •ドロップダウンでの選択 → スタイルを変更、または処理を実行
- •ウィジェットにアクションをドラッグ — コールバックコード不要
ライブシミュレーターでプレビュー
PicoPixel は LVGL を WebAssembly にコンパイルし、ブラウザで直接実行します。プレビューは実際の LVGL レンダリングエンジンです — モックアップではありません。
- •UI がハードウェアでどのようにレンダリングされるかを正確に確認
- •タッチ操作、スクロール、アニメーションをテスト
- •インタラクションオーバーレイでタップやスクロール可能な要素を表示
- •チームやクライアントとシミュレーターリンクを共有 — 開発環境不要
製品に組み込めるコードをエクスポート
プロジェクトを整理された LVGL C ソースとしてダウンロードできます。標準の LVGL API を使い、独自ライブラリに依存しないため、既存の LVGL プロジェクトに組み込めます。
- •ウィジェット定義とレイアウトコード
- •スタイル宣言
- •イベントハンドラーの設定
- •フォントと画像アセットの参照
- •標準 LVGL 8.x API — PicoPixel ランタイムライブラリなし
プロジェクトに組み込んで書き込む
エクスポートしたファイルを ESP-IDF、Arduino、または PlatformIO プロジェクトに追加します。コンパイルして書き込めば、デバイス上の UI はシミュレーターとピクセル単位で一致します。
- •ESP32、STM32、Arduino、Raspberry Pi Pico、および LVGL 互換プラットフォームで動作
- •UI ヘッダーをインクルードし、ディスプレイドライバーの設定後に ui_init() を呼び出す
- •ほとんどのセットアップでビルドシステムの変更は不要
- •または zip を AI コードアシスタントに渡して統合を任せる
チームで改善を重ねる
チームメンバーを招待し、同じキャンバスで同時に作業できます。内蔵のバージョン管理で変更を記録し、必要な時点に戻せます。
- •リアルタイム共同編集 — ライブカーソル、フィードバック、注釈
- •詳しい作業履歴を備えた内蔵バージョン管理
- •任意の以前の状態にロールバックしてバージョンを比較
- •関係者レビュー用にシミュレーターリンクを共有
LVGL を画面上で設計するメリット
従来の LVGL 開発では、C コードに座標を書いてウィジェットを配置し、関数でスタイルを設定し、変更のたびに再コンパイルしていました。細部まで制御できる一方で、コードから完成形を想像し、表示を確かめながら調整するには時間がかかります。
PicoPixel では、ボタンを置き、サイズや色を変え、ラベルを追加した結果をその場で確認できます。LVGL シミュレーターは実機での見た目を再現します。完成後は、ESP32、STM32、Arduino などの LVGL 対応環境でコンパイルできる C コードを出力できます。
画面を見ながら作ることで試作が速くなり、デザイナーとエンジニアも同じキャンバスで協力できます。生成されるコードは、手書きと同じ標準の LVGL コードです。PicoPixel の全機能や、他の LVGL エディタとの比較もご覧ください。
よくある質問
PicoPixel を使うのに何かインストールが必要ですか？
いいえ。PicoPixel は完全にブラウザで動作します。エディターの URL を開き、サインインして、デザインを開始してください。デスクトップアプリ、プラグイン、SDK のインストールは不要です。
エディターではどの LVGL ウィジェットが使えますか？
PicoPixel は、ボタン、ラベル、スライダー、スイッチ、ドロップダウン、ローラー、アーク、バー、チャート、画像、チェックボックス、テキストエリア、タブビュー、コンテナなどのコア LVGL ウィジェットセットをサポートしています。対応するウィジェットは順次追加しています。
ライブシミュレーターはどの程度正確ですか？
シミュレーターは WebAssembly にコンパイルされた実際の LVGL レンダリングエンジンを実行します — モックアップや CSS の近似ではありません。プレビューに表示されるものは、ターゲットハードウェアとピクセル単位で一致します。
コードはどの形式で出力されますか？
PicoPixel は、読みやすく整理された LVGL C コード（.c および .h ファイル）を含む zip ファイルをエクスポートします。出力にはウィジェットの作成、スタイリング、レイアウト、イベントハンドラーの設定が含まれます — すべて標準 LVGL API 呼び出しを使用し、独自ライブラリへの依存はありません。
エクスポートされたコードを ESP-IDF、Arduino、PlatformIO で使用できますか？
はい。エクスポートされたコードは標準 LVGL API 呼び出しを使用するため、ESP-IDF、Arduino IDE、PlatformIO を含む LVGL をサポートするあらゆるビルドシステムで動作します。プロジェクトにファイルを追加し、ディスプレイドライバーの設定後に ui_init() を呼び出すだけです。プラットフォーム固有の詳細については、ESP32 ガイドをご覧ください。
PicoPixel は無料ですか？
はい。PicoPixel は個人・趣味目的での使用は無料で、クレジットカード不要です。商用利用は月額 17 ドル（年額 204 ドル）からとなります。充実した無料プランは常に提供されます。