Posts Tagged: UI

後で読むサービス、Pocketがいい感じ

後で読むサービスって

みなさん、後で読むサービスは何をお使いでしょうか?
単純に後で読みたいサイトを保存する以外にも、
Twitterで気になったつぶやきを後で読みたいけどふぁぼるまでのアレでも無いな…とか、
いつ使うかわからないけどこのテクスチャまとめサイトとっておきたいな…とか、
そう言う時に便利なサービスですよね。

僕はずっとInstapaperを使っていました。
シンプルかつTwitterクライアントなどのアプリケーションにも保存リンクが組み込まれていたりと登録も容易。
保存したサイトを読むときもログイン状態が保持されるのでどんな端末からアクセスしてもすぐ読む事が出来て快適でした。
オンラインブックマークとしてもとっても便利。

ただ、保存したサイトの整理機能が乏しいので不満でした。
フォルダ毎に分けられますが、ステータスが”Unread”、”Liked”、”Archive”の3種類しか選べません。
また、iPadアプリが有料ということで、なかなか手が出せてません。

そこで最近使うようになったのがPocketというサイト!
Instapaperを少し高機能にしてUIを凝った感じの後で読むサービスです。

以下便利だなー思う点を書いてみます。

保存したサイトにタグがつけられる

Instapaperはフォルダが自由に作成できるけど、
Pocketはタグがつけられます。
Pocketの1番のウリだなーと思う点です。
個人的にタグ付けによる整理方法はとても好きです。
いわゆるコウモリ問題で悩まなくて済むからです^^
検索時もそのタグだけ抽出できるのでとっても便利。

ちょっと不満を言うとフォルダも作成できれば良いのに、って思います。
フォルダ分けとタグ付けによる整理が最強だと思っているので。
だからEvernoteすごい整理しやすいんですよね。
じゃあ後で読むサイトもEvernoteに保存すれば良いじゃんって、一度は考えたんですけど、
あれはあくまでノートとして使う事にしました;
なんとなく保存、閲覧のプロセスがただ後で読むだけのサイトを保存するにしては仰々しいと言うか。。。

色んな端末から保存できる

ブラウザから

ブラウザ(ChromeとFirefox)なら拡張機能から保存できます。
自分はChromeをつかっています。
なのでFirefoxの拡張機能については分からないけど、
Chromeの拡張機能はすごく良く出来てる。
それについては後述。

スマートフォン(Android)から

Androidアプリをインストールすると、
「共有」メニューが使えるアプリならそのリストにPocketが出てくるはずなのでそこから保存できます。
自分はAndroidしか持ってないからiPhoneは分からないけど多分一緒だよね?笑

メールから

専用のメールアドレスにメールを送ると保存してくれるみたい。
最悪、これで保存って感じですかね。

iPad Safariは直接Pocketに保存する方法が無いので、
「リンクをメールで送信」からPocketのアドレスを選んで送信。
これはブックマークレットが使えるInstapaperに比べるとちょっと不便かも。。。

Chrome拡張が凄い

拡張機能をインストールすると右上にこんなアイコンが表示されます。

んでこれをクリックすると今みているサイトを保存できる、と。
こんな感じのウィンドウがべろっと出てきて保存されます。

タグ付けもこのタイミングで出来る。

ここまではフツーの拡張機能っぽいけど、この拡張機能をインストールすると、今までいつも見ていたサイトにちょっとした変化が…。

まず、Twitter。

分かりますか? ふぁぼリンクの横に全然違和感無くPocketのリンクが。
最初、拡張機能の効果だって知らなくて思わず、「すげーTwitterがPocketに対応してる。」とかなんとかTweetしてしまった、笑

Google リーダーも。

iPadアプリが無料

Instapaperは有料だったけど、Pocketなら無料である。
まぁ、専用アプリの必要性は微妙だけど(^_^;)

iPadのTwitterクライアントが対応している

iPhoneはわかりませんが、iPadのTwitterクライアントは後で読むサービスに何を使うか設定できます。
今のところInstapaperとPocketが選べるみたい。

一覧性が良い

保存したサイトの一覧は、
リスト形式と、

グリッド形式で見れる。

グリッド形式はサムネイルも表示されるからタイトルだけじゃ分かりにくいサイトも何のサイトか分かりやすい。
何かを一覧で表示するためにはリストとグリッド、この2大UIに対応するのが一番ですね。
ECサイトの商品一覧もリストとグリッドを選べるようになっているものも多いですし。

他にも色々…

他にもいろいろ便利な使い方がありそうです。
まだ使い始めたばかりだけど、
後で読みたいサイト、
ブックマークして色んな端末で共有したいサイト(オンラインブックマーク)、
この2種類のサイトが1カ所に集められるって言うのは便利。

PocketとInstapaperのほかにもReadabilityが有名みたいだけど、
ちょっと使ってみた感じ、
うん、Pocketでいいや(´・_・`)
って感じでした。

暫くはPocketを使って行くつもりです。
でもフォルダ分けもタグ付けも出来るサービスがあったらそっちに乗り換えるかも笑

ページ遷移の概念が変わった

webデザインを紹介するサイトなんかを見ていると最近、
http://www.vml.com/
とか
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
とか
jQueryでスマフォ版Facebookライクなメニュー表現を実現する「PageSlide」
と行った様な主にタッチスクリーンデバイスで良く実装されているUIを見かける様になりました。

今までになかったインタフェースにインスパイアされたUIがPC向けのコンテンツでも実装される様になって来たという事だと思います。
それはデバイスの垣根が低くなって来たという事かもしれません。
いや、というよりデバイスの垣根をどうにかして低くしようとした結果このようなUIになっている様に思います。

そもそもデバイス(ディスプレイサイズ)の多様化が進んでいる昨今、単独のデバイスのディスプレイサイズを想定していは多くの人にコンテンツを届ける事が出来ません。
そういった状況の中では画面遷移に対する考え方を変えざるを得なかったのだと思います。

確かに一昔前でも何種類かのディスプレイサイズはあったでしょうが、まだそれぞれに対応したデザインを個別に作る事が可能な範囲だったのでは無いかと思います。
その時はディスプレイサイズという決まった「枠」にキッチリはまる様にデザインしていたと思います。
この決まった「枠」にはまる様に、それぞれ画面A、画面B、画面C…と作成して、
ページ遷移は画面Aを表示して次に画面Bを表示して画面Cを…と、それぞれの画面がぱらぱら漫画の様に繋がっていたイメージです。

しかし、今日ではスマートフォン(特にAndroid)の登場によって一気に種類があふれてしまいました。
「枠」の種類が増え、それぞれにきっちりはまるものを用意することが大変な作業になってしまいました。
そう言った状況では”ページをスライドさせる”というアニメーションがとても効果的に働くと思います。
画面A、画面B、画面C…と別々だったものの境目が曖昧になり一枚絵の様なイメージになったと思います。
そして今まで「枠」と見なされて来たものは、その一枚絵の一部を切り取る「窓」のような存在に変わったのだと思います。

これからは「枠」におさまらないデザインを可能にするUIを意識する必要があります。
そうすれば、これからのディスプレイという「窓」からは何かとてもワクワクする世界が見える様になるはずです。