投稿日:

【UI】画面の片隅だけで全てのページに移動できるタブ型UI

Coard for ipad bluetooth smart keyboard キーボード おすすめ

どもです。
昨年12月にカスタムキーボードをリリースしたわけですが、
今回はそれのキーボードではなくアプリ側のUIのアイデアなどについてお話したいと思います。






style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">



続きを読む 【UI】画面の片隅だけで全てのページに移動できるタブ型UI

投稿日:

【UI】目的のアカウントを素早く手軽に選択する切り替えインターフェイス

どーもです。
先日、拙作アプリ「Twitee i」のバージョン5.1を公開し、新しいアカウント切り替えを搭載しました。
面白いUIができたので、ちょいと(というかガッツリ)紹介したいと思います。



続きを読む 【UI】目的のアカウントを素早く手軽に選択する切り替えインターフェイス

投稿日:

【UI】操作ステップを減らし必要最小限の表示に抑えた一覧選択インターフェイス



どもです。
先日、拙作Twitee iのマイナーアップデートを公開したのですが、Lite版時代から搭載していた「括弧一覧」の入力方法に変更を加えました。




続きを読む 【UI】操作ステップを減らし必要最小限の表示に抑えた一覧選択インターフェイス

投稿日:

【UI】自分が思い描くポストマウス「次世代パソコン操作スタイル」

自分はコンピュータの操作性や使いやすさという部分に神経質な方で、
特にパソコンにおいては、
どうやったらもっと快適にストレスなく操作ができるか
ということを日々(考えたくなくても)考えてます。

特にMacの「トラックパッド」には大きな価値を見出しており、
以前はTrackpad of Macという専用カテゴリまで作っていました。



そこで今回は、僕が思い描く、
わりと現実的な近未来のパソコン操作スタイル(厳密にはマウスポインタ操作スタイル)
をご紹介します。


続きを読む 【UI】自分が思い描くポストマウス「次世代パソコン操作スタイル」

投稿日:

【UI】スマホアプリでのアクセス重視の写真添付インターフェイス



昨日書いたVersioin3.0のこちらの記事
2度目のメジャーアップデート!”Twitee Lite” Version3.0をリリースします! | Fum’style


で、写真添付機能について
「話が長くなりそうなので、この件についてはまた別の記事で書くことにします。」
と書きましたが、その記事がこちらの記事になります。



なぜカメラロールの最後の2枚の写真しか添付できない仕様にしたのか
しっかり説明いたします〜





style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-3481943934845626"
data-ad-slot="8806407289">





撮影した写真をすぐ添付してつぶやけるツイートアプリが欲しかった




みなさんは写真付きツイートをするとき、その写真はいつ撮影したものですか?

あるいはどのアプリで撮影した写真ですか?



僕の場合は、ツイートに添付する写真はたいてい直前に撮影したものであり、
その写真はiPhone標準のカメラアプリであったり、
Apple Walkerさん(@AppleWalker)のOneCamで撮ったものが大概です。








しかし、Twiteeを開発し始める前の1年前。
当時のTwitterクライアントアプリの写真添付方法は
直前に撮影した写真を選択するまでに何ステップも踏まなければならないものばかりでした。



まず「既存のライブラリ」を選択し、

twitee



アルバム一覧から「カメラロール」を選択し、

IMG 0146



そしてようやく直前に撮影した写真にアクセス。
IMG 0147


僕はこの写真を選択する度に何ステップも踏まなければいけないインターフェイスが嫌いでした。

すんごいめんどうだった(笑)





それならばカメラロールの最後の写真にダイレクトにアクセスできるようにすればいいじゃないか
という考えから思いついた投稿専用アプリのインターフェイスがこちらです↓





SyokiTwitee

実際には描いていませんでしたが、頭に浮かんでいたのが↑のインターフェイスです。

はっきりとは覚えていませんが、確か去年の4月頃に思い浮かんでいた気がします。



それぞれ3つの画面を左右スワイプで楽に行き来できるのが特徴です。

中央のツイート画面と右側のタイムライン画面は
まさに今現在のTwitee Liteそのものですね。



自分のツイートタイムラインについてはこちらを参照。

(その2)なぜタイムライン画面を搭載したのか。「Twitee Lite」の真髄 by 開発者 | Fum’style






自分の根拠なき確信とアンケート結果




Twitterクライアントに限った話ではありませんが、
いろんなアプリの投稿画面には
「カメラで撮影」
という選択肢をよく見かけますよね。

そのアプリ内でカメラを起動して撮影し、すぐ添付されるというものです。



どのTwitterクライアントにも当たり前のようにこの機能が搭載されていますが、
僕はまずこの機能は使いません。





写真付きでツイートする時は、先ほども言ったように
愛用のカメラアプリで撮ってから添付します。



これにも具体的な理由があって、
ほとんどの場合、ツイートしたい写真というのは撮影して確認してみてからじゃないと判断できないからです。



「この光景をツイートするぞ」
と息好んで、わざわざTwitterクライアントアプリの投稿画面を開いてカメラを起動する人はなかなかいないと思います。



そして、自分と同じように直前に撮影した写真(つまりカメラロールの最後の写真)をツイートしたいという人は、けっこうな割合でいるんじゃないかという根拠なき確信を抱いていました。
むしろこういう人の方が多数派だろうとさえ思っていました。





そしてこちらがTwitee Liteリリース時に実際にアンケートを取った結果です↓



twitee lite




思ったとおり、カメラロールの最後の写真を添付する人の方が多数派でした。

NOが意外と多かったのには少し驚きましたけどね(笑)





なぜ最後の”2枚”の写真から選べるようにしたのか




この理由は単純で、標準カメラアプリのHDR撮影を配慮した設計です。



標準カメラアプリだと設定によっては
HDR版の写真と未加工の写真の2枚を同時に保存できます。
IMG 0148



2枚保存された写真をTwitee上で見比べて添付できるような設計になっています。


実際、僕自身がこの設定をONにしていて、景色などを撮る際はたいていHDR撮影するので
この仕様は必須だと思いました。



絵で表現するとこんな感じです↓


AboutHDR


3枚や4枚も表示できるようにすると
より多くスワイプしなければならないし、自分の今いる位置がわからなくなってしまうなど
ユーザビリティが悪化してしまうと判断して2枚だけ表示するようにしました。





他のTwitterクライアントの写真添付機能と比較してみる




「直前に撮影した写真を添付する」という点でTwitee Liteと比較してみましょう。



Twitee Liteの場合は、
1.横にスワイプする。
2.写真をタップする(添付される)


この2ステップだけで済みます。





無料で高機能な人気のTwitterクライアント「The World」の場合。

1.”Photo”をタップ。
2.”Photo Album”をタップ。
3.”カメラロール”をタップ。
4.最後の写真をタップ。(添付)


と、4ステップもかかります。

IMG 0149


これはThe Worldに限った話ではなく、
同様のインターフェイスを採用しているアプリならどれも当てはまります。



言ってしまえば
「最も手間のかかるインターフェイス」
でしょう。





お次はFacebookにも投稿ができる投稿専用アプリ「ぽすとん」。

1.”Add Photo”をダブルタップ。
2.”カメラロール”をタップ。
3.最後の写真をタップ。(添付)


こちらは3ステップですね。

IMG 0150



続いてRivawanさん(@Rivawan)の高機能Twitterクライアント「Twittin」の場合。

1.画面上部の写真アイコンをタップ。
2.”最後に保存した画像”をタップ。(添付)


Twiteeと同じ2ステップです。
“最後に保存した画像”というボタンが用意されてるのは親切ですね。

しかし、Twiteeと違って添付するまでその写真をいっさい見ることができず、
添付した写真を見るにはステップ1の画面上部の写真アイコンを再度タップしなければいけません。
そこから戻る際も戻るボタンをタップしないといけないので、
これらを含めると4ステップとなってしまいます。

更にその”写真アイコン”がスクリーン上端にあるので
親指が届きづらいというネックもあります。



Twiteeでは添付してツイート画面に戻った後も、
テキストビューにその写真が薄らと見えるので安心感があります。



IMG 0152




最後に本家の公式Twitterアプリの場合。

1.写真アイコンをタップ。
2.最後の写真をタップ。
3.編集画面の”完了ボタン”をタップ。(添付)


この公式Twitterアプリの写真選択UIは最近改良されたんですよ。

写真アイコンをタップするとキーボードが隠れてカメラロール内の写真一覧が表示されます。
これの何がすごいかって、その写真の並び順が「新しく撮影された順」なんです!

つまり一番上に最後に撮影した写真があるんです。

これだけでも素晴らしいのに上へスワイプするとにょきにょきっと全画面表示にもできちゃいます。

しかも一覧を下へ軽く下げると「アルバム一覧へ戻るボタン」が現れるではありませんか!



この公式アプリの写真UIは本当に素晴らしいです。
HDRとノーマルの写真を見比べられるという点ではTwiteeに部がありますけどね ( ͡° ͜ʖ ͡°)
IMG 0153


ただ残念なのが写真を選択したあと!



写真タップで添付できればいいのに、フィルター編集画面に移っちゃうんですよ。

しかも”完了ボタン”がiOSお約束の右上隅(笑)

せっかくの素晴らしいUIがこの編集画面で台無しになってます。
IMG 0154



とまあこんな感じで写真添付インターフェイスの比較を終わらせていただきます。





まとめ




Twitee Liteの写真添付インターフェイスはいかがでしょうか。

「スワイプしてタップ」

Twitterクライアントアプリの中でもトップクラスの添付のしやすさだと思います。





カメラロール内の他の写真へのアクセスについては搭載するか未定です。
要望次第では検討します。





あと言い忘れていましたが、写真付きツイートのアニメーションも凝ったものに仕上がっています。

どういうアニメーションにしようか数ヶ月悩みましたが、満足のいくアニメーションを作れました。



ちなみに、写真付きツイートの送信に失敗するとTwitee Lite史上
最も迫力のあるアニメーションが見れますw



【追記 7/2】
標準の写真アプリで加工した写真は、その加工はちゃんと反映されるので安心してください(´ω`)b

クロップや回転などを反映したままツイートできます!



課金制ではありますが、ぜひVersion3.0の写真添付機能 試してみてください!


投稿日:

【UI】(前編)Macがタッチスクリーンを搭載すべき理由



最近Macのトラックパッドに関する記事を書いてきましたが、
Macのトラックパッドについていろいろと考えてました。

もっと使いやすくならないかと。



そこでひとつの結論(というか提案)に至ったので書き綴ってみます。

【※2013年に執筆した記事を前編・中編・後編に分割しました】

続きを読む 【UI】(前編)Macがタッチスクリーンを搭載すべき理由