DLsite comipoリリースに向けたデザインのあれこれ vol.03 - 検索結果ページのUI BEFORE/AFTER編 -
Eisys Design noteではDLsite comipoのリリースに向けたデザイン周りについて紹介しています。
「DLsite comipo」は国内最大級の二次元総合ダウンロード販売サイトを運営するDLsiteが4月からスタートした新サービスです。
noteではサービス開始に向けてデザイン側でどのような制作を行ってきたのかを第3回に分けて紹介してきました。
第1回目はDLsite comipoができるまでのロゴの制作プロセスについて
第2回目はDLsite comipoのWEBデザインのBEFORE/AFTERについてお話ししました。
今回はDLsite comipoリリースに向けたデザインの紹介は第3回目(最終)ということで、ECサイトの要である商品陳列部分のUIについて詳しく解説していきたいと思います！
ユーザーはどこを重視して探すか？
コンテンツを探すときの表示方法は大体1列表示とタイル表示に分けられます。
説明が多く入れられる1列表示は主に「内容を重視」して探すユーザーに求められ（例：書籍(小説)のECサイト、求人サイトなど）
商品の画像がわかりやすいタイル表示では「見た目を重視」して探すユーザーに重宝されやすいです。（例：服のECサイト、オークションサイトなど）
サイトのコンテンツによって表示方法は検討すべき点ですが、コミック系のECサイトだとどうでしょうか。
DLsiteではユーザーテストを行った結果、本のあらすじや内容を重視するユーザーと絵柄の見た目で購入を検討するユーザーどちらも一定数いる結果になりました。
そしてここから、表紙の画像、本のタイトル、著者名、値段、カートボタン、セール中や割引のラベル…などなど
一列表示とタイル表示でどうやって見せるかを検討してデザインを行なっていくのですが…
ここのUIデザインがめちゃくちゃだとこうなります。
実際検索して出てきた画面がこんな感じだったらどうでしょうか…………
「値段が安いのを目立たせたい！」「カートボタンを目立つようにしたい！」という点は理にかなったデザインになっていますが、これだと本を探しに来たユーザーからするとめちゃくちゃ探しにくい作りになってます。
実際の書店のように、沢山ある中から表紙や帯でピンとくるものを見て判断するという方法もありますが、すぐに内容がわかってすぐに読めるのがネットユーザーの醍醐味。
今すぐ読みたいユーザーに易しく、内容もわかるUIにするにはどうすればいいのか？を考えていきます！
コミックに欠かせない「試し読み」
そこで従来のDLsite コミック販売フロアにはなかった試し読みボタンの設置を検討することになりました。
自分が電子書籍を探す立場になって考えてみると右の方が使いやすいですね。
実際コミックを探しにきたのであってカートボタンには直接的には行かないユーザーが多いので、カートボタンを無くすことによりまずは試し読みしてから買ってもらうという仕様に変わりました。
設置して見比べてみるとイメージがつきやすいです。
また、SPとPCではカートボタン周りのUIが違っていて（ゆくゆくは全ページを綺麗に共通のデザインで揃えたいところなのですが）SPにはサンプルボタンがあってPCにはサンプルボタンが無い状態でした。
クリック領域も狭かったのでスマホとしては少し使いにくいデザインになっていたので、クリック領域を広めて押しやすいボタンに変更しました。
ボタン1つという部分的なUIに着目して解説していますが、こうして見比べてみると一目瞭然ですね！💪
また、タイル表示はこんな感じで評価やレビューの多さなどに偏らずまずは試し読みをして選んでもらえるようなデザインに変わりました。
コンテンツやユーザーによって重要な要素は変わる
今回は「試し読み」が重要な要素になっていましたが、他のコンテンツや求めるユーザー層が違うサイトだったらどうでしょうか。
料理のサイトであれば写真がメインになりますが、ユーザーの求める情報によって適切な表示順序は変わってくるかと思います。
食材が決まっていない・献立が決まっていない・料理の写真を一括で見て決めたいユーザーはタイル表示で、
アレルギーに気をつけたい・家にあるもので作りたいなどなど…様々な条件がついた場合は一列表示にして詳しい中身を掲示できるUIにするのが適切かと思います！
まとめ
第3回に分けて紹介したDLsite comipoでしたが、今回は検索結果部分の細かいUI部分をピックアップして紹介しました。いかがでしたでしょうか！
今後オーディオブックコンテンツも増える予定のDLsite comipoですが、音を聴きたいユーザーと漫画の絵を楽しみたいユーザーとでまたUIの見せ方で凝りたいところです。もっとUIを研究してDLsiteをより良くしていければ…！と思います💪
viviONでは新サービスを立ち上げています
株式会社viviONでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」「新しいサービスのデザインに携わりたい！」などデザインチームの仕事やviviONの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。
引き続き株式会社エイシスをよろしくお願いいたします！
この記事が気に入ったらサポートをしてみませんか？