🧐

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

3 min read

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

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

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

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

大きすぎるアイコン

Before

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

After

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

iPhone X-XS-11 Pro – 1

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

Bafore

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

After

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

iPhone X-XS-11 Pro – 3

余談ですが、テキストに擬似要素でアイコンや矢印が付いているデザインを実装する時って以前はよく親に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画面には収まった/
iPhone X-XS-11 Pro – 4

またしても余談ですが、この続きの文章がチラ見えする透過グラデーションの実装は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の課題はたくさんあるので今後も頑張ります💪

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

🔔 採用情報

記事をご覧いただきありがとうございました。

オンライン家庭教師マナリンクでは、一緒にオンラインで本当に良い先生と出会える場を創るエンジニアを募集しております!

マナリンクは、オンライン家庭教師と生徒と保護者を繋ぐプラットフォームを運営している事業です。大きく分けて3つの性質の違うプロダクトを開発しています。

  • オンライン家庭教師を集客するメディア
  • 保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト
  • 宿題やチャットなどの機能でオンライン指導ができるWebアプリおよびネイティブアプリ

ビジネスモデルと技術選定、およびその意図に関して以下の図にまとめておりますので、ぜひ拡大してご覧ください。

マナリンクのビジネスモデルと技術選定

現在の採用情報は以下のNotionをご覧ください。

https://www.notion.so/noschool/Web-8b37ebb8d2344b58b0fd88acff0e21af

開発したい新機能も多いし、改善したいところも多いので手を貸してください🙏🏼
手が回っていなくて心底困っています。

ご応募はもちろん、一度話を聞いてみたいと思っていただければカジュアル面談の申し込みも大歓迎です。
ご連絡をお待ちしております!

Discussion

ログインするとコメントできます