フロントも全部RustにしたくてSlintでUIを作ろうとしたら、再現が難しすぎて断念した話

こんにちは、自作プリントシール機プロジェクト「プリダン」のエンジニアです。

今回は、プリダンのUI開発初期に起きた**「フルスタックRustの夢と、圧倒的な現実の壁」**についてお話しします。

始まり：「フロントも全部Rustで書けば神では？」

プリダンのバックエンドは Rust (Axum + Tokio) で組まれています。 「イベント中に絶対にクラッシュしない」「数十ミリ秒で状態同期ができる」というRustの堅牢性とパフォーマンスに味をしめた開発陣は、ある時こう思ってしまいました。

「え、どうせならUIもフロントエンドも全部Rustで統一すれば最高じゃない？」

そこで白羽の矢が立ったのが、モダンなRust製GUIツールキット Slint でした。

• ネイティブバイナリで動くのでメモリ効率が極めて高い
• 独自のDSL（.slint）で宣言的にUIが書ける
• ブラウザ（Chromium）の重いランタイムを抱え込まなくて済む

「これでWebフロントエンドの泥沼から解放されるぞ！」と意気揚々とプロトタイプ実装を始めました。

突き当たった壁①：プリントシール機特有の「Kawaii-Digital DIY」を表現できない

プリダンのUIデザインシステムは 「Modern Kawaii × Soft Brutalism」 です。

• ぽってりとした丸みのある角（Super-ellipse / Bubble containers）
• 2px〜3pxの境界線 ＋ 4pxのソリッドなベタ影（Hard Dimensional Shadows）
• ボタンを押した瞬間に右下に4px沈み込むフィジカルな触感
• 画面のあちこちに散りばめられたキラキラ（✨）アニメーションや微細なステッカーの傾き

CSSなら box-shadow: 4px 4px 0px #1b1c1c; や Tailwind のユーティリティクラスで数行で書ける表現が、ネイティブGUIフレームワークだと途端にハードモードになります。

影のオフセット、角丸クリッピング、グラデーションの重なり……。 1つのコンポーネントを「プリントシール機らしいカワイイ質感」にするために、大量のネイティブ描画コードやレイアウト計算と格闘することになりました。

突き当たった壁②：手書き「落書き機能」の実装難易度

プリントシール機の最も重要なアイデンティティといえば、撮影後の**「落書きタイム」**です。

• 液晶ペンタブレットによる筆圧検知
• なめらかなスプライン曲線補間（手ブレ補正）
• ペンの種類（蛍光ペン、ネオン、キラキラペン、縁取りペン）
• スタンプの自由な拡大・縮小・回転・ドラッグ

Web（HTML5 Canvas / SVG / CSS）の世界であれば、先人たちが築いた膨大な描画ライブラリや知見があります。 しかしSlint上でこれらをゼロから自作しようとすると、フレームバッファの低レベル操作や座標変換行列の自作といった、「自作ペイントソフト開発」そのものに突入してしまい、プリントシール機の機能開発が完全にストップしてしまいました。

結論：意地を捨てて TypeScript + Vite に戻した

2週間の激闘の末、チームミーティングで出した結論はシンプルでした。

「無理してRustでUIを書くより、Web標準の表現力に頼った方が100倍ユーザーが楽しいUIを作れる！」

現在、プリダンのキオスクUIは TypeScript + Bun + Vite（WebView / ブラウザ配信）に落ち着いています。 CSSのアニメーションも、落書きペンの描画も、SVGフレームのプレビューも、Webフロントエンドなら爆速で試行錯誤できます。

学んだこと

1. 適材適所は正義: バックエンドの並行制御・ハードウェア制御はRustの独壇場。でもリッチでポップな動的UIはWeb技術の独壇場。
2. 「全部同じ言語で揃える」というエンジニアの自己満足に囚われてはいけない。
3. Slint自体は組み込み機器やシンプルなデスクトップアプリには素晴らしい技術ですが、「プリントシール機のUI」は想像以上にグラフィカルで複雑怪奇な世界でした。

技術選定で迷っている誰かの供養になれば幸いです！