カメラアプリをつくる上で避けて通れない 撮影画面のお話。
こんにちは！
わりえもん こと Lobi / FILTERS のデザイナーの 割石 です。
去年から OH (http://wariemon.com) という名前でも活動中です。
昨年末にリリースされた カヤックの新規カメラアプリFILTERS 、もう触りましたか？
FILTERS が気になるかたはこちら！
今回は、フィルターカメラアプリの制作時に役立つ
「カメラフィルターアプリの撮影画面UIまとめ」のお話をします！
あなたのつくりたいカメラアプリはどのパターン？
カメラフィルターアプリにはまず大きくこの2パターンが存在します！
この2パターンに分類して、UIの参考になりそうなアプリをまとめていきます。
1. フィルターをかけながら撮影できるアプリ
2. 撮影後にフィルター（編集）をかけるアプリ
あなたのつくりたいカメラアプリはどちらにあたりますか？
1.のパターンの中にはUIの構成が大きく異なる3パターンが存在するので、それはそちらで解説！
この2パターンに分類するとUIの特性、まとめ方がはっきりわかってくるのでチェックしてみましょう！
1. フィルターをかけながら撮影できるアプリ
最近だと "Pomelo" に代表されるフィルターをかけながら撮影ができるアプリです！
今回ぼくたちが制作したFILTERSもここにあたりますね！
こういうアプリは切り替えられるフィルターをどこにおくかが一番課題ですね。
このタイプのUIだと
A. "フィルター" を下に並べる（Pomelo / Path / Camera360）
撮影画面にかぶるため表示領域が狭くなりますが、直感的に操作ができる（スイッチ的ON/OFF表現）
B. 撮影ボタン部分を一時的に乗っ取る（TiltShiftGen2 / FILTERS）
撮影画面の邪魔をせず、必要なときだけ出てくる。画面を邪魔しないがAよりは気づきにくい
C. ジェスチャーでフィルターを変更させる（Cam / Candy Camera）
画面的には一番シンプル。画面自体は必要最低限のUIで構成できるが、ジェスチャーの精度/感度なども重要
というパターンがありますね。
とくにCのパターンだと ジェスチャーをはじめにユーザーに示唆する必要があるのですが、
ここの表現も工夫のしがいがありそうです！
このパターンのUIはこれからどんどん一般のものになっていくと思いますので、今の内に、
説明をする表現 / インフォグラフィックの勉強をしておいてもよいかもしれません！
今回制作した FILTERS では、収納型のUI の TiltShiftGen2 のUIを参考にさせていただきました。
UI構成の時点では CのジェスチャーパターンのUIも制作していましたが、
「フィルターの数などもどんどん増えていくこと」「画面上で表示する内容が多い」ということで、
ジェスチャーパターンだとフィルターの中から特定のなにかを探したりすることも難しかったので、
上記のUIに落ち着きました！
今回紹介したアプリはこちら！
FILTERS
TiltShitfGen2
POMELO - Absolute Filters
Path
Camera360 Ultimate
Camu
Candy Camera
2. 撮影後にフィルター（編集）をかけるアプリ
こちらは みなさんご存知・大好きの、Instragram に代表される
撮影画面はシンプルで、その後のフィルターをかけるのは別ページというパターンです。
この系統のアプリというのは撮影という軸より、編集という軸に重きが置かれている気がします。
事実この手のアプリは VSCOcam が顕著なように、すでにある写真を編集するという機能がメインであったりします。
・Instagramで写真を撮影して、そのまま編集してアップ
という人より、
・撮影自体は標準のカメラアプリなどで撮影して、編集する
というパターンのほうが多いのではないでしょうか。
1. のパターン（フィルターをかけながら撮影）と、2.のパターンでは機能の重心が大きく違うと言えそうです。
参考になりそうなアプリのUIをまとめてご紹介します！
【VSCOcam】
インストールはこちらから
【Instagram】
インストールはこちらから
【Polamatic】
インストールはこちらから
適した撮影画面でユーザーに写真をとってもらおう！
時代に関わらず、大人気のカメラアプリ！
適した撮影画面のUI構成をして、ユーザーに写真を、撮影を楽しんでもらいましょう！
カヤックでは、一緒にサービス・ゲーム・クライアントワークでものづくりができるデザイナーを募集しています！
気になった方はぜひ一緒にUI/UX設計、グラフィック作成など楽しみましょう！！
デザイナーはこちらから！
by わりえもん
OH : http://wariemon.com