トマシープが学ぶ

Unity/VR好きのミーハー初心者 記事内容は自分用のメモ。何も求めないで

カメラ背景のUIデザイン事例をまとめる【AR,QRコード,カメラアプリ】

背景がカメラの映像の時、UIは何色がいいのか、どんなふうに見やすさを保つのか。

元々ARアプリのUIについて事例を集めるために始めたけど、カメラアプリやQRコードアプリなども同じだと気づいたのでまとめる。

見つけ次第追記します。無限にあると思うけど

カメラアプリ

Pixel3a純正

ヘッダーは黒背景

フッターは撮影する写真のサイズ比によっての背景色が変わる。

3:4だとフッターも真っ黒で16:9だと半透明の黒

拡大のUIは+とーが半透明グレーの丸背景+白アイコン

その間の。・・・。は多分若干のグレーシャドウがかかった白

iPad純正

半透明グレーの丸に白アイコン

白文字にはうっすらグレーシャドウ。インカメラ切り替えのアイコンは白縁

スクエアの時は黒背景

黄色がアクセントカラー

Foodie

フッダーヘッダーともに白い

twitter

グレーの丸に白

instagram

フッターヘッターともに黒。白アイコンにはシャドウ

LINEカメラ

白アイコン+シャドウ

ビデオ通話

Duo

QRコードバーコードリーダ

DENSO

QRコードの本家

フッターは白背景。

上の方のアイコンは微かに半透明のグレーの枠がついた白。

paypay

フッダーとヘッダーは黒から透明へのグラデーションに白アイコン

 

GU

全体が半透明の黒

Lineの友達追加とかのQRコードリーダー

フッターは白。カメラ部分は全体が半透明の黒。

ちなみにLINEのQRコードリーダーは普通のQRコードも読み取れるよ

LinePay

Lineと全然違った。

黒のフッターヘッター。カメラ部分は濃い目の不透明黒

ビックカメラ

全体が不透明黒

UNIQLO

ヘッターは半透明黒。

下のボタンは半透明の白。ここは不透明でも良さそうなのに

Amazon

フッター部分は黒のグラデーション。白文字はシャドウ付き

商品自体を読み込む時は何もない

その他読み取り

Google翻訳

グレーの不透明フッターヘッダーに濃いめの半透明丸四角

MoneyForward

レシートを読み取るもの。

周りを不透明の黒で囲っている

AdobeScan

不透明ヘッター

付箋カメラ

付箋を読み取って画像にしてくれるアプリ

フッターヘッターともに黒

GoogleLens

ヘッダーはグラデーションに白

アイコンは半透明白に黒。

モグラ

同じ場所や同じものの写真を撮り続けて変化を記録するアプリ

ARマーカー読み取り

松山城AR

ヘッダーフッターともに白背景。リセットの×は半透明白背景に赤っぽい黒

ARAPPLI

白アイコンに薄らグレーのシャドウがかかっている

cocoAR2

半透明フッター。オレンジアイコン

別場面

日経AR

まさかのcocoARだった。フッターも大体一緒。cocoARって組み込めるのか?

組み込めるんだ!下のアイコンもついてくるのかな

https://www.coco-ar.jp/cost/

マーカーなしAR

計測

ios純正のARメジャーアプリ

アイコンは色々。右上左上は濃いめの半透明白+黒アイコン

ARElements

多分Googleが出しているARcoreのお手本アプリ

フッターに半透明でヒントを出している。

デザインまとめ

色々見てきてある程度特徴があった

・白文字や白アイコンを置く場合は微かなグレーシャドウをかける

f:id:bibinbaleo:20191113213314p:plain f:id:bibinbaleo:20191113213318p:plain

・半透明グレーの丸+白文字白アイコン

f:id:bibinbaleo:20191113213351p:plain

f:id:bibinbaleo:20191113213358p:plain

f:id:bibinbaleo:20191113213355p:plain f:id:bibinbaleo:20191113213401p:plain

・カメラが全面である必要がない時はヘッダーフッターをつける

f:id:bibinbaleo:20191113213425p:plain

・バーコードの読み取りはカメラ画面全体を不透明グレーにして、読み取る形の部分だけ透明度100%にする

f:id:bibinbaleo:20191113212440p:plain

f:id:bibinbaleo:20191113212444p:plainf:id:bibinbaleo:20191113212447p:plain

・もしくは四角の線を出すだけでもいい。多分この線に合わせる必要はなくてアフォーダンス的な存在なのかな?

f:id:bibinbaleo:20191113212452p:plainf:id:bibinbaleo:20191113212456p:plain

・読み取り時に画面を上から下に走る線や、四角いパーティクルみたいなのを出すと読み取っている感が出る

f:id:bibinbaleo:20191113212437p:plain

f:id:bibinbaleo:20191113212502p:plain f:id:bibinbaleo:20191113212459p:plain