画像投稿サービスのサムネイルを、ピンタレスト風から横並びにした話
こんにちはviviONのクリエイター向けWebサービス「GENSEKI」でUI/UXデザイナーをしています、てばさきです。
今回は、GENSEKIでコンテスト応募作品一覧ページのサムネイルを調整し、１作品ずつ見やすく改修してみたことについて振り返ります。
GENSEKIとは？
クリエイターの仕事を中心としたナレッジを展開しているWebサービスです。 主に企業協賛イラストコンテストの開催や、日々の創作における悩み・スキルアップをテーマに扱うGENSEKIマガジンを運営など、クリエイターの自立をサポートするサービスを提供しています。
GENSEKIの詳細はこちらをご覧下さい！
どうしてデザインを改修したのか？
GENSEKIのコンテスト応募作品一覧ページは、ピンタレスト風で同じ横幅の画像が並んでいて、全体がパッと目に入る形だったのですが…
スクロールしていくと画像の上辺がずれてガタガタになる。
横長の投稿画像が、縦長のものに比べて目立たない。
などの”見づらさ”と”不平等感”に課題があるのでは？と言われていました。
一覧ページのサムネイルの”正解”ってなんだろう？
調べてみると
画像の比率が「可変」の場合
絵が全部見せられるので、投稿者が伝えたい内容が表現しやすい。
画像の比率が「固定」の場合
画像を比率に合わせてトリミングする必要があるが、統一感が出る。
と、それぞれにメリット・デメリットがあり、サービスに最適な表示方法を選んで適用するのが大事だと思いました。
判断基準は”視線誘導”と”サービスの性質”から！
①人間工学の視線誘導から考える
Webを見るときの人間の視線の動きは、まず左上から右に動き、次に下に下がり、また左から右に動くF型のパターンだと言われています。
以前のGENSEKIのコンテスト応募作品一覧ページ
改修前の表示に視線誘導のF型を照らし合わせると、2段目からは視線が上下に動いてしまい、それぞれの応募作品を順番に見ていくのは難しそうでした。
②サービスの性質から最適な表示を考える
GENSEKIはコンテストがメインのため、できるだけ応募作品を均等に見られるようにしました。
具体的には、
サムネイルを切り抜かず、画像の見え方が元画像から変わらないようにする
作品が順番に閲覧でき、特定の画像が目立ちすぎないようにする
これらを考慮し、画像全体を見せられる形式を選択しました。
※コンテストの作品はそれぞれ個別に見て選考しているので、一覧サムネイルの見え方がコンテストの選考結果に影響することはありません。
調整後のデザイン
F型の視線誘導を実現しつつ、イラスト全体を見せられる形にするため以下の形でデザインしました。
PC
高さ固定
横幅なりゆき（最大幅を指定）
SP
画角固定
枠内で縦横長辺に合わせる
投稿された１つ１つの作品が順番に見やすくなったと思います。
まとめ
今回の改修を通しての学び
サムネイルの見せ方はサービスの性質によって最適なものが変わる。
ピンタレストなど他サービスのかっこいいUIはマネしたくなるけど、サービスにとって何が最適な表示なのか考えて選ぶ。
参考文献
viviONでは仲間を募集しています
株式会社viviONでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」「新しいサービスのデザインに携わりたい！」などデザインチームの仕事やviviONの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。