男女の出会いマッチングサービスのLP【Webデザイン添削 vol.02】

先日始めた新たな試み、Webデザイン添削サービス実績の第二弾です。
掲載許可をいただけたサイトのフィードバックの一部分をかいつまんでご紹介します。

そんな人の参考になります。

依頼されたWebサービスの概要

MatchLab | 知的好奇心を共有できるパートナーを見つけよう

なんとまあインテリ系の皮をかぶったマッチングサービスですねw
その辺はオープンに”異性との出会い求めてまっす!”て言わないところがムフフな感じですね。

サービスに登録している人たちの悩みは、高学歴でインテリであるがために、異性と会話が合わないということみたいですね。

そんな人たちをオンラインで繋げて、オフラインでもイベントとか定期的にしてるみたい。とても価値のあるサービスだと思います。
興味がある方は登録してみてください。

サイト全体のデザインのポイント

ベースのカラーが青なのはサービスの特性上とても印象がいい。青の補色にピンクを使っているのも見やすいです。

今回はCSSをお送りして、行高を調整してもらうように提案しました。
依頼主がCSSがわかる場合はCSSを書いてそのまま送ることもあります。

文字周りが特に読みにくいです。全部読まないといけないっとなると”ウッ”てなります。
文字を減らし、イメージしやすい画像や、イラストを使用してはいかがでしょうか。

トップページの添削

今回もaunを使ってフィードバックをお返ししました。
掲載させていただいたMatchLabさま、ありがとうございます。

ログインボタンがあればサービスだサイトだとわかる

サイトの一番右上にログインボタンがあってもいいと思います。
現状のままでは無料登録のボタンで外部サイトに飛んで行ってしまいそうな印象を受けました。

ログインボタンがあれば、このページがログインして使用するWebサービスであることがわかります。

ファーストビューでわかることができれば、”自分にとってふさわしいか”と自分ごととして読むことができます。
名の知れたサービスではないので、このサイトが何を目的に誰のためのサイトなのががわかりませんでした。

ロゴはジェネレーターでも作れるよ

ロゴを作ってみてはいかがでしょうか。
最近はジェネレーターもあるのでデザイナーに頼まなくても簡単に作れますよ。

http://brandmark.io/

ファーストビューで何のサイトかわからない

ファーストビューで一番大切なのはサービス名ではなく、”何が解決できるか”です。
高さを大きくとり、「知的好奇心を共有できるパートナーを見つけよう”を押した方がいいです。

MatchLabを推したい気持ちはすごくわかりますが、ユーザーが知りたいのは、何を解決できるかです。

LPなのにブログっぽい

目的は訴求寄りのランディングページですが、デザインがマガジンのようですね。

なぜそう見えてしまうのかというと、”読むことを前提にしているから”です。

見出しと画像だけでスクロールでだけでわかる内容にてみてはどうでしょう。
なのでサービスの管理画面にある本棚の画像や、登録後の管理画面のイメージを貼った方がいいとご提案させていただきました。
女性でも安心して登録できるように、出会いを全面に出しすぎるのもダメですけどね。

ここのジレンマめちゃ難しい

イベントページの添削

サイトのトンマナは同じものなのでトップページとおおよそ同じでした。

イベントの全体の流れがわからない

当日の流れはイラストなどを使用するといいですね。
なかなか文章ではわかりづらいので、考えなくてもイメージできるようにしてほしいです。

管理画面の添削

実際にログインしてメンバーページに入ってみました。メンバー登録をしたら、すぐに自動返信メールが来て安心しました。
この辺はちょっと驚いたし、親切だと感心しました。


急にトーンが変わってココどこ?ってなった

表側のサイトのトーン&マナーが青とピンクだったのでかなり違和感を覚えました。
違うサービスに登録してしまったかのような不安な気持ちになってしまいます。

色を使用する場合、下記の割合で使用してはいかがでしょうか。
一度ご検討ください。

  • 青:70%
  • ピンク:25%
  • イエロー:5% (もし使うのであれば)

デザイナーでない人に人気のデザイン本はこちらです。
かなりわかりやすい王道の本です。

フィードバックまとめ

なかなかイメージ画像を作ったり、イラストを自作したりは難しいですよね。わかります。
サービスは言葉で説明するよリも、ぐっと敷居を下げて、まずは使ってもらうのが一番の最短ルートですよね。

そこにどう設計の段階からアプローチしていくかはとても難しいです。
今回の添削は自分にとっても勉強になってよかったです。

LPを作るときの情報設計のコツは『立体的に見えるようにつくる』ことです。
最低でも情報の優先度を三階層くらいに分けてからデザインを始めるようにするといいです。

皆さんも知的好奇心をくすぐる異性との出会いを楽しんでみてはいかがでしょうか。 ムフフ。

Web添削依頼お待ちしています

まだ返しきれていない添削依頼もあります。申し訳ございません。
noteでサポートしてくださった方から優先的に添削をしています。

ほなね

あわせて読みたい
Web業界未経験者のポートフォリオ制作【Webデザイン添削 vol.01】
【完全版】IT&Web系デザイナー・エンジニアの転職求人サイト比較まとめ