最近、Snap Camera Kit を使った WebAR の制作や検証が増えてきました。
その中でずっと感じていたのが、
「クライアントに見せても説得力がある UI が欲しい」
「WebAR をもっとスムーズに、そして“かっこよく”触れないか？」
という課題でした。
そこで今回、
「見た目がよくて、実用的で、クライアントにも伝わる WebAR UI」
を自作し、オープンソースとして公開しました。
GitHub
この記事では、
作った理由
UIの特徴
必要な設定（Token / Lens ID / Group ID）
横向きUIへの対応
デザイン面のこだわり
を技術者向けにまとめています。
なぜ作ったのか
WebAR を扱っていると、次のような課題がよく出てきます。
● UI がないとクライアントへの説明が難しい
ただ AR が動くだけでは、表現のイメージが伝わりづらい。
● UI を毎回ゼロから作るのは効率が悪い
“見た目のクオリティ” まで考えると時間がかかる。
これらをまとめると、
「最初から“イケてる UI”があれば助かる」
という結論になり、今回の UI を制作しました。
UIの特徴
1. “かっこいい” を優先したデザイン
見せ方のクオリティは WebAR でとても重要です。
モーショングラフィックス風の UI
触っていて気持ちいいレイアウト
プレゼンにも使える見栄え
技術検証だけでなく、表現の説得力 を補うためのデザインです。
2. 縦向き・横向きの両方に対応
WebAR は 横向き で魅力を発揮するケースも多いため、
最初から横向きレイアウトを実装しています。
横向きで視野が広く、表示確認がしやすい
案件で横向きを指定されてもそのまま使える
UI サイズ・レイアウト自体を縦横別に調整しているので、
見た目の安定感があります。
3. 使用には 3 つの設定が必要（Camera Kit）
手軽に使える UI ではありますが、
Snap Camera Kit の仕組み上、以下の設定が必須です。
Lens ID
Group ID
Token
Lens Studio → 管理画面 → Token 発行
という流れで準備し、
UI 側に値を入力します。
「開いてすぐ動く UI」ではなく
「必要な設定を済ませた後、効率的に確認できる UI」
というイメージです。
デザインのこだわり
● 触っていて気持ちよいこと
操作していて“テンションが上がる” UI を意識しています。
● カメラ設定確認のフローを最短に
コードを書き換える前に UI で素早くチェックできるよう設計。
● プロトタイプというより“プレゼンにも耐える UI”
ただ便利というだけでなく、
クライアントに見せられる質感 を重視しています。
GitHub
ソースコード・セットアップ方法はこちらにまとめています👇
Issue / PR / Star どれでも歓迎です。
HACK IT INC.として
私は現在、HACK IT INC.
に所属しており、
会社としても AR／WebAR／XR の制作基盤づくりを重要視しています。
今回の公開も、
「クリエイターが扱いやすい AR 表現の環境を広げたい」
という取り組みの一部です。
UI や制作体験を改善することで、
もっと多くの AR 表現が実現しやすくなると信じています。
まとめ
クライアントに見せやすい “イケてる WebAR UI” を作った
Snap Camera Kit と連携し、縦横 UI に対応
設定（Token / Lens ID / Group ID）を入れるとすぐ使える
デザインと操作感を重視
OSS として公開中
興味ある方はぜひ触ってみてください👇