読者です 読者をやめる 読者になる 読者になる

世界が変わったのだから、自分も変わらなくてはならない。

エンジニア兼デザイナーのナカモリのブログです。

スライドショー(画像ギャラリー)にUIついて考える

UI Webデザイン

f:id:takahironakamori:20160213164852p:plain

例えば、1つのウェブページ内で、たくさんの作品を画像で紹介したい場合等に、上の図のようなスライドショー(画像ギャラリー?、以下「スライドショー」と言います)を使うケースがあります。今、実装している案件でスライドショーを使っていますが、スライドショーのUIを作る上で、いろいろ考えなければならないことがありましたので、その記録です。

1.スライドショーの構成要素と表示パターン

よく見るスライドショーには、2つパターンがあります。

(1)大きな写真画像と写真画像のサムネイルが同じ階層にあるパターン

これは下図のように大きな写真画像と写真画像のサムネイルが同じ階層にあるパターンです。ほかの構成要素は下図のとおりです。

f:id:takahironakamori:20160213165429p:plain

(2)写真画像のサムネイルと大きな写真画像が別の階層で表示されるパターン

このパターンは、まずは写真画像のサムネイルだけを一覧表示しておいて、

f:id:takahironakamori:20160213165537p:plain

写真画像のサムネイルとクリックすると…

f:id:takahironakamori:20160213165617p:plain

写真画像のサムネイルの1つ上の層に、大きな写真画像を表示するパターンです。このパターンでも構成要素は上記(1)とだいたい同じです。しかし、(1)に比べ「拡大表示した画像を閉じる」アクションが1手間増えます。さらに、(1)に比べサムネイルをクリックすると大きな画像が表示されることをユーザーに知らせる工夫が必要です。この工夫がないと、ただ単純に小さい写真画像が一覧表示されているだけと思われる可能性があります。

2.デザインする前にできれば確認しておきたいこと

スライドショーのUIを作成する前に、できれば確認しておきたいこととして、

  1. 掲載したい画像の数(今度増やす予定はあるのか?を含む)
  2. 画面の表示領域(特にグローバルナビゲーションをスクロール時に画面上部で固定する場合
  3. 写真のタイトル、説明文の有無とある場合はその量

があります。

仮に大きな写真画像と写真画像のサムネイルが同じ階層にあるパターンでデザインするとします。後になって写真画像の数が多いことがわかると、下記のように大きな写真画像が一部画面外になるまでスクロールしなければ、写真画像のサムネイルがクリックできない状況になる場合があります。

f:id:takahironakamori:20160213173717p:plain

たくさんある写真画像のサムネイルの下部のものをクリックした場合、ちょっと上にスクロールしなければ大きな写真が全部見えません。これは気持ち悪い感じがします。スライドショーは、構成要素全体の高さ(ある程度の先も想定した)を考えながらデザインする必要があります。あまりスクロールしないですむようデザインする方がユーザーは使いやすいです。掲載したい画像が多い場合など、構成要素全体の高さが大きい場合は、写真画像のサムネイルの1つ上の層に大きな写真画像を表示するパターンを用いた方がいいかもしれません。

また、掲載したい画像が多い場合等、構成要素全体の高さが大きい場合の対処法として、写真画像のサムネイルも横1行で並べてスクロールさせるという方法もあります。

f:id:takahironakamori:20160213173933p:plain

写真画像の数が多いということが後でわかって「写真画像のサムネイルの表示方法を一覧表示からスクロール形式に変更して」って頼まれると実装が辛いかもしれません。また、表示される写真画像のサムネイルの数が限られているため、「まだありますよ」を教える工夫が必要です。

スライドショーをどのようにデザインするのかは意外と簡単に決められません。

3.レスポンシブデザインも考慮するとさらに面倒に

今までの内容はすべてパソコンで閲覧した場合を想定しています。「これをレスポンシブデザインで作ります」となった場合にどうするか?を考えなければなりません。

(1)大きな写真画像と写真画像のサムネイルが同じ階層にあるパターン

パソコン版をそのまま小さくすると、スマホで見た場合に、「前の写真を表示するボタン」のように小さいと使えないし、大きいと邪魔という要素があります。そこで、スマホで見た場合は、サムネイルは表示させずにスワイプで画像が切り替わるなど、表示要素を最低限にするという方法が考えられます。

f:id:takahironakamori:20160213180952p:plain

この方法ですと、全部で何枚あるのかを示す工夫が必要です。スタートと終わりを「前の写真へ」「次の写真へ」ボタンを工夫して示してもいいかもしれません。

(2)写真画像のサムネイルと大きな写真画像が別の階層で表示されるパターン

このパターンの場合は、一覧表示されたサムネイルの大きさを工夫すれば、パソコン版とあまり変わらず作れそうな気がします。一覧表示されたサムネイルをタップすると拡大表示されるという動きはスマホに入っている写真アプリのおかげで想像できそうです。しかし、(1)大きな写真画像と写真画像のサムネイルが同じ階層にあるパターンの場合は、スワイプで画像を切り替えることができますが、この方法は、「拡大表示した画像を閉じる」アクションが1手間増えます。

やはり(1)(2)のどちらのパターンを使うのかは、前述の2.デザインする前にできれば確認しておきたいことを確認し、検討する必要があると思います。

4.せっかくだからたくさんの人に気持ち良く見てほしい

せっかく写真画像を掲載するのだから、たくさんの人に気持ち良く見てほしい。見ようと思ったユーザーに対して、操作しにくいものを提供してしまっているということは、ものを作る人間としては申し訳ないと思います。予算、時間、いろいろな事情はありますが、できる限りのことは考えて、デザイン ・実装したいと思っています。