カメラを起動する、写真を選ぶ。そんなUIについて考えてみた

    こんばんわ、加藤です。

    最近ちょっと気づいたことがあります。
    それは愛してやまないWebサービスTumblrが出している公式アプリの写真アップロードするときのUIが秀逸なことに。

    Tumblr
    Tumblrの場合

    これです。これいいなーと思ったのでついでに色々他のも見てみてまとめてみました。

    スタンダード(デフォルトのUI)

    2013-03-28 16.11.38
    Mailboxの画像添付画面

    一昔前まではだいたいこの「カメラかアルバムからよむかどっちがい~い?」っていう感じの選択画面を一旦挟む、この標準UIが多かったですよね。
    いまでもブログ投稿アプリやTwitter投稿アプリなんかはこのUIがおおいです。

    とりあえずカメラ起動するパターン

    最近はカメラで撮るほうが多いであろうアプリではカメラをとりあえず起動しておいて、シャッターボタンと別にアルバムを開くボタンを置くタイプが多いです。ちなみに持っているカメラ系のアプリはほとんどこれでした。Stulio、Pinterest、Cameran、Linecamera 等(カスタムUIなので当然デザインはアプリ毎に違います)
    多分、発祥はわからないけどみんなInstagramを参考にしたのかなーと。

    2013-03-28 16.13.16
    stulioの場合

    こういうの。(Libraryをタップでアルバム選択画面になります)

    Tumblrは?
    で、Tumblrをもう一度よくみてみると

    Tu
    Tumblrの画像アップロードボタン押したところ

    カメラUIの下部にアルバム一覧画面が既にぴょこんと出て控えているのです。
    さらにこのはみ出てるアルバム部分をググっと引き上げると

    2013-03-28 16.09.54
    ひっぱりだすとこうなる

    こんなふうにアルバム全景が出てきます。カレーばっかりですね。
    あーこのUI結構すばらしいなぁーと思います。
    何が素晴らしいって直感的ですよね、ボタンに頼らず視覚に訴えているところ、ちょこっと出ているから引っ張りだすっていうのがとっても画面を直接さわって操作するスマホ的です。
    変にこりすぎて逆にわかりづいらいUIも結構スマホアプリには多いですが、これはかなりスマートな解決をしているなぁ、と。

    Instagram
    ちなみにInstagramはやはりカメラ特化型なので、カメラがババーンと全面に出ています。
    基本形態としてはいわゆる「とりあえずカメラ起動するパターン」なのですが(というかこのUI自体Instagramが流行らせた気がしますけど)、最新のバージョンではアルバムの選択ボタンがボタンではなく最新画像のサムネイルになっています。
    右側に出ているサムネイルをタップするとアルバムを開きます。このアルバムの最新の画像が出ている状態っていうのもわかりやすくていいですね。もしInstagramに上げる前に他のアプリで撮影したり加工している場合は大概一番最新にアップしたい画像がありますし。

    2013-03-28 16.10.05
    Instagramの場合

    アルバムを開いた画面も凝っていてリアルタイムに正方形にトリミングした場合のプレビューを備えたわかりやすいものになっています。

    2013-03-28 16.10.15
    Instagram:アルバム選択画面

    とりあえずアルバムの中身開くパターン
    ちなみに画像加工アプリのAviaryはなんせ画像加工なのでアプリ起動後のトップ画面でいきなりアルバム内の画像一覧で始まります。
    「カメラ」タップでカメラが起動します。

    2013-03-28 16.12.00
    Aviaryの場合

    こんなパターンもあることを忘れずに。

    Facebook、Google+も写真アップロードを選ぶといきなりカメラロールが開いて画面の下にあるカメラボタンでカメラを起動するこのタイプでした。リアルタイムにガンガン上げるよりは撮りためたものを複数枚一気にチェック入れてアップロードすることを想定されています。

    2013-03-28 16.15.52
    Facebook/Google+場合チェックが入れられる

    ということで
    ただ、「写真を選ぶ」という動作に対してこのようにUIはいくらでも考えることができるんだなぁ。と思うと面白いですね。
    そのアプリの用途やターゲットユーザ層なんかを考えて最適なUIを作りたいものです。

    ただ、問題はすべてカスタムUIになるのでこれいいなぁ!よし搭載しよう!となった瞬間にデフォルトUIで構築した場合の数十倍の工数が発生してしまう点です。これが結構足かせになります。。。
    企画・デザイン段階でこういった独自のUIを考えるときは工数・予算も念頭に置く必要があるんですね。大人って大変・・・


    関連記事

    • reactNativeを使ってアプリを作ってExpoで公開してみた

      ども 制作部夏目です。 今回のテーマは、reactNativeを使ってアプリを作ってExpoで公開してみたので、その紹介をします。 流れとしては、軽くreactNative,Expoの説明、最後にアプリの紹介でいきます。

      reactNative,Expoって何?

      reactNativeはfacebookが開発した統合環境ですが、開発環境としてはネイティブに関係するものが多く、エミュレータでは動作していても 実機デバッグをしようとした時に動かないといった問題が発生します。 この問題以外にもテスト用のプログラムを配布するには、iOSとAndroidでそれぞれ手間がかかり面倒です。 そこで登場したのが、Expoというサービスです。 ExpoはreactNativeに様々なライブラリを追加した環境を使った簡易的な アプリケーションの配布を可能とするツール群と、Expoで作成されたアプリケーションをexpo.ioから配布を可能にするサービスです。

      百聞は一見にしかず

      ここまで聞いてみたものの、自分が理解するには程遠いと思っているそこのあなた。 実際に動かしてみましょう。 reactNativeは、開発環境を整えなくても実行できるのです。 それがSnackと呼ばれるものです。 早速開いてみましょう。 すると 何やらゴニョゴニョと書いてありますね。 詳しくみていきましょう!!! まずimport〜 ですが、こちらは必要なモジュールやライブラリを読んでします。 次にexport〜ですが、こちらが表示部分を作っているところです。 最後のconst stylesはcssみたいな役目です。 exportで作った部分をどう見せるのか? スタイルを当て込むところです。 もう気づかれた方もいると思いますが、reactNativeはjava scriptを使って書かれています。 なので、java scriptをある程度書かれている方であれば、使いこなすのにさほど時間はかからないと思います。 実際に動かすには、 画面上部にある「▶︎Run」を押して、出てきたQRコードをお手持ちのスマートフォンで読み取ります。 動かすにはExpo Clientというアプリが必要になるのですが、ただアプリを動かすだけなら無料で使えますので、 インストールしてみてください m( _ _ )m iOSの方はこちら Androidの方はこちら さて、このReactNativeの何がすごいかというと、 iOSとAndroidの両方で動くアプリを作れるということ(クロスプラットフォームであるということ) 今まではiOSならswiftで、AndroidならJavaScriptもしくはGoで書いていましたが、 ReactNativeを使えば、AndroidもiOSもその垣根を関係なく、作れるということ。 今まで、iOSで実現できてたけど、Androidでは実装できない。なんてことがあったかもしれませんが、 reactNativeならそんなことはおきない(はず。。。😅)です。 長くなってしまいましたが、最後に今回作成したアプリの紹介をします。

      どんなアプリ?

      作成したアプリは、ぐるなびAPIを用いて、現在地付近のぐるなび掲載店を地図上に表示するアプリです。 何をいっているか、わからない方のために、実際に動かした画像をみてみましょう。 実装したのは、現在地検索機能、絞込み機能です。 苦労した点としては、既存のそれがそうであるように、地図上を移動した時に、その付近でもお店を検索できるようにしたこと、 現在地検索を押した時に現在地を中心にする処理です。 こちらは無料で公開していますので、下記URLからどしどしダウンロードしてみてください https://expo.io/@tnatsume/gurunavi これをAppStore、Google Play Storeでもダウンロードできるようにするのが次の目標です。 では、また次回の記事でいお会いしまShow🌟
      2019/10/22 技術 / デザイン / 制作