ajike switch

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×

だからサクサク読めるのか!マンガアプリのUIまとめ4選

モテキの番外編をスマホで読んでいたところ、思うところがあったので、
スマホで漫画を閲覧する時のUIについて考えてみました。

スマホで必要な要素

スマホで漫画を閲覧する時に必要な機能/要素を書き出します。

  • 画の表示
    • 片面、見開き
  • ページ送り機能
    • 次へ、前へボタン
    • 左右スワイプ
  • ページ数表示
    • ページャー
    • その他

では、各サイト、アプリがどのような構造なのか見てみます。

iBooks

まず思いつくのがiBooksでしょうか。
ibooks01

 

      • 画の表示
        • ポートレート(縦置き)の場合は見開きで表示されているものを片面ずつ閲覧します。ランドスケープ(横置き)にすると見開きで両面見ることができます。
      • ページ送り機能
        • 左右のスワイプ/タップで行います。両面が終わる時にページめくりのアニメーションが入ります。
      • ページ数表示
        • 画面中央付近をタップするとメニューの機能が表示されます。

雑感

ネイティブアプリだからこその表示の滑らかさアニメーションが活かされています。
ただスマホの狭い画面でランドスケープ/見開きで見るのは文字の見づらさがあるので、漫画はポートレートで見ることになると思いますが、その際読んで戻ったりする際のアニメーションの多さが少し煩わしく感じます。
iPad等のタブレットでランドスケープで閲覧する分には見やすいのでは?と思いました。
(前のバージョンは設定で縦の無限スクロールに変更できた気がしたのですが..)

Kindle for iPhone

次にアプリだとKindle かと
kindle01

      • 画の表示
        • ポートレートの場合は見開きで表示されているものを片面ずつ切り替えて閲覧します(見開きの途中で表示を止めることはできない)。ランドスケープの場合はiBooksと同じですが、ページめくりのアニメーションはありません。
      • ページ送り機能
        • 左右のスワイプ/タップで行います。ページめくりのアニメーションはありません。
      • ページ数表示
        • 画面中央付近をタップするとメニューの機能が表示され、ページの進捗がパーセントで分かるようになっています。

雑感

基本iBooksと同じですが、ページめくりのアニメーションが無いのでいつ両面が終わったのかが分からなくなることがありそうです(左右の余白で判断する等)。

読書のお時間です

「スマホ 漫画」で検索したところ上位に表示されました。
アメーバが運営しているようです。
dokusyo01

      • 画の表示
        • ポートレートの場合はiBooks、Kindleと同じですが、ランドスケープでは片面が拡大されて表示されます。また、横遷移前提なのでブラウザのツールバーが常に表示され画面の窮屈さを感じます。
      • ページ送り機能
        • Kindleと同じです。ただiOS7で画面の左端を右にスワイプすると前のページに戻ってしまうのでご操作が発生しそうです。
      • ページ数表示
        • 画面中央付近をタップするとメニューの機能が表示されます。

雑感

ブラウザではあるものの表示の遅延やスワイプのご作動がほぼ無く表示されるので、あまり違和感は無いのですが、ブラウザのツールバーが表示され続けているのが少し気になります。(iPhoneはホーム画面に追加でフルスクリーンになりますが.)

モアイ

冒頭で出したモテキです。
moae01

      • 画の表示
        • 片面づつ表示され、見開きは横いっぱいで表示されます。ポートレートで縦スクロールを前提として作られており、縦に長い絵巻のようになっているので前のページに容易に戻れます。
      • ページ送り機能
        • 縦スクロールで行います。
      • ページ数表示
        • 左下に常時表示されます。

雑感

他とくらべて紙の漫画の操作感は踏襲していませんが、操作する上で最低限の機能やスマホに馴染みやすい縦スクロールで構成されているので操作する上でのストレスが少なく感じました。
アプリでは無く、ブラウザでスマホ向けに漫画を見せる場合は、この構成が読みやすさの点では優れているとかと思いました。

まとめ

スマホのUIを考える上で漫画/雑誌のように元になるものがある場合は、参照にしつつもスマホ独自の見せ方を考えた上で構成を作成した方がよいかと思います。(なんか当たり前の事を言っていますが..

“モアイ”に繋がるものとして、最近気になる縦に長くアニメーションを伴うスマホ対応サイトを紹介して終わります。

カヤックの年賀サイト 2014
http://nenga2014.kayac.com/

頭の悪い人向けの保険入門
http://hokensc.jp/kikaku/atama_warui.html

servi