UITableViewのインタラクションについて調査してみた件
参考画像：UITableView Class Reference - Apple Developerより
はじめに
どうも。OPENREC事業部でiOSエンジニアをしている辰己です。
OPENRECというのはスマホゲームに特化した高画質プレイ動画録画共有SDKのことです。そして、そのSDKで録画されたプレイ動画と有名な実況主さんたちが投稿した実況動画や攻略動画を観れるアプリであるOPENREC.tvのiOS版の開発を担当しているのが僕です。毎日たくさんの実況動画がアップされて盛り上がっていますので、ぜひAppStoreやGooglePlayからダウンロードしてみてくださいね！
さて、近頃AppStoreで「スタッフのオススメ」に取り上げられているアプリたちはUIだけでなく、インタラクションも優れたアプリであるものが増えてきたように感じます。また、インタラクションをつけることで、同じUIのパーツが全く違ったものに見えることもしばしば。だからこそ、インタラクションをつけることは競合との差別化を図るための重要なファクターになり得ると私は思います。
今回は沢山あるiOSのUIKitパーツの中でもUITableViewに注目して記していこうと思います。
インタラクションとは
まずは、自分の中でそもそもインタラクションの定義が曖昧だったのでググってみました。
インタラクションとは、交流（する）、相互作用（する）などの意味を持つ英単語。形容詞形は「インタラクティブ」（interactive）。ITの分野では、人間とシステムの間の情報のやりとり、操作や入力とそれに対する反応や出力、対話的な操作方法、などの意味で用いられることが多い 。 --- IT用語辞典 e-Wordsより
上記の説明文の中でも注目すべきところは対話的な操作方法というところでしょうか。対話的、アプリとの対話、まるでそのような感覚をもたらす動きこそがインタラクションの重要な役割なのだと思います。
例えば、一つのボタンが画面上にあったとしましょう。そのボタンを押したらボタンには何の変化もなく、そのままボタンのアクションが実行されてアクションが終了するのと、ボタンを押したらボタンが凹んで、あたかも本当のボタンを押したような反応を示し、指を離すとボタンが元に戻ってから、そのボタンのアクションが実行されるのとでは、明らかの後者の方がユーザーにとって対話的なUIに見えるでしょう。
UITableViewのインタラクション
UITableViewにおけるインタラクションはズバリ、スクロールの動きです。ここで本題に入る前に一つ質問してみようと思います。
あなたはUITableViewのインタラクションがどのようなものだったら良いと考えますか？
一目見ればわかるような激しめの動き？ぱっと見では気づかれないようなさりげない動き？正解は特にありません。ですが、多くのユーザーを獲得しているアプリたちを見ていて、私個人が感じたことは、後者の方です。
なぜなら、UITableViewは膨大な同じような情報をユーザーが縦か横にスクロールすることで快適に閲覧できることを目的に作られています。それらがスクロールするたびに激しく動けば、ユーザーがスクロールを止めない限り情報が入ってこないので、時間のロスが生まれてしまいます。
それに対して、さりげない動きのインタラクションなら、UITableViewの本来の目的を損なわず、スクロールする際にインタラクションの目的である対話的な感覚も同時に与えられるのではないかと考えます。
それでは今回の本題であるUITableViewのインタラクションについて、様々なライブラリを交えて見ていこうと思います。
ADLivelyTableView (Objective-C)
デモ動画
このライブラリはApplidiumというフランスの会社がOSSとして提供しているライブラリです。デモアプリを実行してみると、Curl, Fade, Fan, Helix, Wave の５種類のインタラクションが入っています。
動きの激しさを比較すると、 Fade < Wave < Curl < Fan < Helix といった感じがしました。Fadeより激しい動きはもはや、さりげないの域を超えているので、トレンドのインタラクションな気がしませんでした。ただ、これだけの種類のインタラクションを一つのライブラリで提供しているのは、とてもありがたいものだと思えますね。
MMTableCellAnimation (Objective-C)
デモ動画
アイアンマンの画像を使用したデモアプリが特徴的でした。インタラクションはセルが泡のようの浮き上がってくるものでした。これもかなり激しめな動きで、特に下スクロールをした時に激しさが際立っている気がしました。動きとしては今までになく面白そうですが、今風ではありませんね。
DiceTableViewCell (Objective-C)
デモ動画
これは最近、音楽アプリAWAでも使用されているParallaxの動きのライブラリです。セルの中の画像がスクロールに応じて見え方を変え、画面内に奥行きがあるような感覚を与える視差効果を利用しています。これはスクロールにも影響を与えないですし、さりげなくユーザーにワクワク感を与える演出ができるインタラクションだと思います。
WZStoreHouseTableView (Swift)
デモ動画
最後はStoreHouseという海外のアプリや先ほどのライブラリでも紹介したAWAでも使用されているインタラクションの一つです。各セルが位置によって微妙に拡大率を変え、中心にいるほど大きく、周りにいくほど小さくなるというインタラクションで、縦型のドラムを回しているかのような感覚を与えることができます。大きめな動きの割に意識しないとユーザーに気づかれないのですが、気づかれた際には驚きを与えることができる、アハ体験のようなインタラクションだなと感じました。
最後に
いかがだったでしょうか？どのインタラクションも様々に個性があって、面白いものばかりでしたね。ただ、各ライブラリはどれも同じようなメソッドで構成されていたので、そのメソッドさえ使えるようになれば、個々人でオリジナルのインタラクションを実装するのも難しくないと思います。インタラクションハッカソンみたいなものを開催しても良いかもしれませんね。
最後に、新しいインタラクションを考える際は、その動きがユーザーにとって本当に心地良い動きなのかどうかを意識して考えることをお忘れなく。
以上です。ここまで読んでくださり、ありがとうございました。
