縦に長いページを地味〜にUI改善した話

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。

本日、マナリンクの先生紹介ページの改修を行いました。

先生紹介ページには指導コースが縦積みに表示されているのですが、これまたスマホで見るとめちゃくちゃ長く…。
特に指導コースの長い先生のページは、下部にあるブログや自己紹介エリアにたどり着くのが大変です（私の短い指だと10〜15スクロールくらいかかります笑）。

そんなわけで特に大きなリニューアルではない細か〜〜〜い調整を経てシェイプアップされたデザインのビフォーアフターをご覧ください👁 ｶｯ!!

大きすぎるアイコン

Before

薄々感じていたちょっとデカめのアイコン…。
その下の動画にも先生が映っているので主張が激しく感じますね。またナビゲーションも固定されていないので、一度クリックして下まで移動してしまうと上に戻るまで（ん？ナビ？そんなもんあった？）程度には存在を忘れてしまう状態でした。

After

アイコンとその周辺のフォントサイズなどを調整しました！
指導コース1つ目のタイトルまで見えるようになりました🦄 ＜ヤッタネ!!
ナビもフッター固定にしたので長いページをスクロールで行ったり来たりしないですみそうです。

カードデザインのシェイプアップ

Bafore

指導コースの各カードデザインの中に指導コースタイトルとタイトル付きのサムネが横並びで入ってます。読めなくはないのですが、情報として重複していますし、サムネのデザインによっては、ぱっと見ごちゃついた印象を受けることも…。

After

お分かりいただけただろうか？👁 少〜〜〜しだけダイエットに成功しています。
サムネを削除してタイトルのフォントサイズを大きくしました。また『コース詳細を見る』というリンクテキストも控えめにしました。
（ちなみにカードをクリックした先でサムネは見れます）

余談ですが、テキストに擬似要素でアイコンや矢印が付いているデザインを実装する時って以前はよく親にposition: relative;をあて、擬似要素にabsoluteでちまちま位置調整していました。
が、最近は圧倒的にdisplay: flex;です！
この方が理論的に位置が決まるので、扱いやすいと思っています。

@mixin arrowLink($font-size: 14px) {
  color: colors.$primary;
  font-size: $font-size;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  &::after {
    content: '';
    display: block;
    width: 7px;
    height: 12px;
    margin-left: 0.5rem;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background-color: colors.$primary;
  }
}

感謝の声の返信をコンパクトに

Before

マナリンクでは生徒さんから先生へ『感謝の声』が届くのですが、『感謝の声』は生徒さんの熱い先生へのお礼のメッセージなので全文が長いことが多く、そんな熱いメッセージほど対する先生の返信も比例して長くなり、1セットが画面に収まらないことが多いです。

After

先生の返信を読みたいのは基本的にその生徒さんなので、基本は口コミとして機能させたい生徒さんメッセージのみ残し、先生の返信は2行半くらい見えるようにして透過グラデーションでコンパクトにしました。
＼なんとか1画面には収まった／

またしても余談ですが、この続きの文章がチラ見えする透過グラデーションの実装はmask-imageプロパティを使って実装しました😄

.reply-message {
  white-space: pre-wrap;

  &--read-more {
    max-height: 70px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(colors.$white, colors.$white, rgba(colors.$black, 0));
    mask-image: linear-gradient(colors.$white, colors.$white, rgba(colors.$black, 0));
  }
}

感想

マナリンクは他の家庭教師サービスと比較して先生のプロフィールがサイト上で詳しく確認できることが強みです。
そのため先生紹介ページはどうしてもコンテンツがモリモリになってしまうのですが、生徒さんや保護者さんが無理なく先生の情報を事前に確認でき、よりよいマッチングを実現できるように、今後もアップデートしていきたいなと改めて思いました。
今回修正したところ以外にも、まだまだUI/UXの課題はたくさんあるので今後も頑張ります💪

以上！誰かの参考になれば幸いです😊