DLsite comipoリリースに向けたデザインのあれこれ vol.02 - UIデザインのBEFORE/AFTER -

「DLsite comipo」は国内最大級の二次元総合ダウンロード販売サイトを運営するDLsiteが4月からスタートした新サービスです。

Eisys Design noteではDLsite comipoのリリースに向けたデザイン周りについてご紹介していきます。

新サービス「DLsite comipo」リリースに向けたデザインのあれこれ
vol.01 ロゴ制作のプロセス
vol.02 UIデザインのBEFORE/AFTER 編
vol.03 検索結果ページのUI　BEFORE/AFTER 編

第1回目はロゴ制作についてお話ししました！

気になった方はどうぞ！

サービスを作っていく上でWEBサイトのデザインも必要になってきますが、一体どんな感じで作っているのでしょうか？

今回はWEBデザイン周りについてご紹介したいと思います。

リニューアル前のデザインを見比べてみる

DLsite comipoはDLsiteサイト内の全年齢向けのコミックを売るページをリニューアルする形で制作することになりました。

リニューアル前のデザインとどう変わったのか？
まずはFVから見比べてみます！

FVとはファーストビューの略で、一番最初に目に入るデザインのことを表します。サイトの全体的な印象がここで決まります。

PCの場合

BEFORE

AFTER

こうして以前のサイトのデザインと比べてみると、全体的に新しい印象になったのがわかりやすいですね！

DLsite comipoのターゲット層は10代20代ということと、本来のコンセプトであるポップさを感じるデザインに変更しました。

色は明るく彩度の高いものに、左カラムのメニューは項目を精査してマージンを多めにとってあげることで読みやすく、探しやすくなったかと思います。

SPの場合

BEFORE

AFTER

SPデザインもだいぶ変わりました。

大見出しのデザインは目立つ紺色の帯をやめ、細い線にワンポイントカラーというシンプルなデザインに変更しました。

色の占める割合を各要素で考慮しどこが重要かを整理するのが大事だと思います。

次にわかりやすく各要素を取り出してみました。

1.上部メニュー(PC/SP)

コミックを探しに初めてサイトに訪れた方からするとどうでしょうか。
他サービスを知ってもらいたい！ということからページへの導線を設置するのも大事ですが、新規ユーザーに向けたUIではありません。

「コミックを探しに来たのにPCソフトやゲームとあってよくわからない」
「同人とコミックの違いって何？」
「PCとSPとデザインが違うので端末を変えた時に混乱する」
このような問題点が浮かび上がってきます。

一番上のメニューはターゲットユーザーが求めている作品を探しやすい導線にするのが重要になってくるので、コミックにフォーカスした項目に変更しました。

2.大見出し小見出し(PC/SP)

文字の背景に色を敷いてしまうと、サイト全体を見た時に色の占める割合が大きくなってしまいここだけが浮いてしまいます。

大見出し・小見出しはあくまで内容の補足という役割を持っていて、主なメインは中身の部分になります。

大見出しや小見出しに使用するカラーはワンポイントと抑えておく、かつ余白を持たせることで大見出し小見出しとして、エリアごとの区切りや内容をわかりやすくし、かつ中身より目立たないことで、全体のデザインの中で効果的な役割が果たせます。

3.フッター固定メニュー(SP)

こちらも背景に色が敷かれているのをワンポイントカラーに変更しました。

スクロールした時のことを考えると、大見出しの背景色もフッターと似たようなデザインになっているので全体的に見た時に主張が強くなってしまうため、こちらもコンテンツに集中できるよう、シンプルにポイントカラーで抑えた方がすっきりします。

4.左カラムメニュー

最後に左カラムメニューのBEFORE/AFTERについて紹介です！

こちらのメニューも上部メニューと同様に初めてサイトに来たユーザーにとって項目が多くわかりづらくなっています。

一番上の「コミックを探す」から一番下の「違法アップロード対策バナー」まで縦に長くずらっと情報がてんこ盛り状態です。

また、よく見るとなかなか見慣れないジャンルがあったりして探しているジャンルが見つけにくいです。

ニッチなジャンルを見つける場合は検索機能でも詳しく探すことができるので、まずは多くの人が求めているジャンルを目のつきやすいところに配置することで使い勝手の良い左カラムに修正しました。

上部メニュー同様ターゲットユーザーが求めている内容にするのが重要になってくるので、ここもきちんとコミックにフォーカスした項目にします。

BEFORE項目
・コミックを探す（無料作品、割引中の作品、レビュー…etc）
・作品形式（青年コミック、女性コミック、少年コミック…etc）
・ジャンル（ラブラブ/あまあま、学校/学園、ファンタジー…etc）
・その他の販売フロア（R18作品へ、女性向け作品…etc）
・お支払い方法（クレジットカード、コンビニ、後払い…etc）

AFTER項目
・書籍を探す（新刊、ランキング、セール作品…etc)
・カテゴリ（少年・青年マンガ、少女・女性マンガ、TL・レディコミ…etc）

必要な情報だけにぐっと絞り込むことで見やすい左カラムメニューに変わりました。

最後に

FVの全体像のBEFORE/AFTERをわかりやすく載せて終わろうと思います！

いかがでしたでしょうか？

WEBデザインはUIひとつひとつをきちんと解決していくのも大事ですが、サイト全体のバランスを見ながら作成することでより使いやすく見えやすい完成度の高いデザインに仕上がっていくかと思います。

次回はECサイトの要となる、検索結果ページ周りのデザインについて紹介していきます！（お店でいうと商品陳列部分になります）

エイシスでは新サービスを立ち上げています！

株式会社エイシスでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」
「新しいサービスのデザインに携わりたい！」
などなど、デザインチームの仕事やエイシスの社風に興味をお持ちいただけた方がいましたら是非お気軽にご応募くださいませ。