こんにちは！UI デザインの松野です。
今日は iPhone 5 の発売日ですね！フェンリルでも長いとか軽いとか、実機テストしたりとかでいつもより少しだけ賑やかです。
もちろん Sleipnir や他の iOS アプリも、この新しい iPhone 5 に（もうすぐ）対応します。Sleipnir Mobile for iPhone / iPad、Sleipnir Linker、FlickAddress のアップデートを準備／申請中です。リリースまで今しばらくお待ちください！
さて、そんな iPhone で特徴的な操作のひとつに “引っ張って更新（Pull to Refresh）” があります。
ちょうど先日 iOS 6 でもメールアプリで採用されたことですし、今日は引っ張って更新について取り上げてみようと思います。
引っ張って更新って？
引っ張って…
離す！
テーブルを画面上端でさらに下に引っ張ると、更新できるという操作です。iOS ではもはやお馴染みですね。
元々は Tweetie という Twitter クライアントで最初に搭載されました。Tweetie は Twitter for iPhone（公式アプリ）の前身です。
Twitter のタイムラインは上に行くほど最新なので、上端でさらに引っ張って更新する操作は自然そのもの。この操作のスマートさが流行り、iOS アプリに数多くのフォロワーを生み、取り入れられました。
基本形
オリジナルにしてスタンダードな引っ張って更新をいくつか並べてみます。
引っ張って、離す、その操作をくるっと回る矢印で伝えます。離したときに引っ張り出したエリアが留まり、そこでプログレスインジケータをぐるぐるするところも合理的です。
Tweetie での初登場時には、すでにこの形が完成していました。
Facebook もほぼ同じ形態です。
こちらは Dribbble クライアントの Balllin’ です。
他にも数多くのアプリが、この形で引っ張って更新します。
表現のバリエーション
同じ引っ張って更新でも、色々な表現で操作を伝えるアプリたちもいます。
特に秀逸と感じるのが RSS リーダーアプリの Reeder です。
引っ張って…
離す！
折り畳まれた部分を引っ張り出します。現実の物に例えた表現で、矢印より感覚でわかります。
ちなみに Reeder では、更新ではなく次／前の記事に移動する操作に使われています。
Tweetbot では回転するゲージで引っ張り加減を表示します。
Tapbots のアプリらしく、メカっぽい感じが出ています。
Readability は更新アイコンで、動作自体を直球で伝えています。
Apple の引っ張って更新
iOS 6 の引っ張って更新も一見同じに見えますが、少し動きが違います。
引っ張って…
あれ？
引っ張るところは同じですが、充分に引っ張ったら離さなくても更新します。なるほど、これだと離すことがわからなくても偶然気づける確率が高いかもしれません（まぁ、ふいに更新し過ぎる気もしますが）。
引っ張ると伸びて、ちぎれたら更新。見た目もユニークです。この引っ張って更新は iOS 6 標準となっていますので、サードパーティのアプリでも使えます。
Flud News でもびよーんと引っ張ります。
発展形
テーブルを引っ張ることが多い引っ張って更新ですが、他の用途やシーンへの応用もあります。
更新も引っ張る Facebook ですが、写真を閉じるときにも引っ張ります。
Twitter for iPhone で返信するときに引っ張ると、相手のツイートが確認できます。
やはり Tweetie の頃からありました。Tweetie は他にも、セルをスワイプして
アイコンを出すなど多くの発明を残しました。
ちょっと趣旨と違いますが、iBooks の本棚を引っ張るとアップルロゴが…。
あくまで装飾でしかありませんが、ちょっと面白い使い方です。
Sleipnir Mobile では
実は Sleipnir Mobile にもあります。
右端のタブからさらに右に行こうとすると…
新規タブします！
矢印がくるっとプラスアイコンに変わる動きが見どころです。
もはやスタンダードになった引っ張って更新、今ではデバイスやプラットフォームを越えた広がりを見せています。しかしこのように、アプリごとにちょっとずつ違いがあるのがわかります。
今後も色んなところで見かけると思いますが、そんなときは用途に合わせてどのようにアレンジされているかを観察してみるのも面白いのではないでしょうか。
関連記事
