おてつたびのUI変遷(TOPページ)
はじめに
初めまして！
現在、株式会社おてつたびでフルスタックエンジニアをしている岩崎と申します。
日本全国の地域を旅行しながら地域の仕事を経験できるマッチングサービス「おてつたび」。
2019年にβ版サイトをオープンして3年。
自分が2021年ジョインして一年ほどですがその間にも色々な変更が加えられて、自分自身もデザインもしていた経験からUI、UX改善をしてきたのですがどのくらい変わったかを紹介していきたいと思います。
こちら2021年4月の状態のTOPページと現在のTOPページです。実際に一年でどれくらい変化しているかを並べて確認してもらうと違いが分かると思います。
大きな要素の変化や追加は無いにしても現在のTOPページに於いてはスッキリとした印象を持ってもらえると思います。
いくつか変更点がありますが以下の3点変更しています。
- ナビゲーションの情報の整理
- 全画面の圧迫感を無くす
- ページ内で少ないスクロールで知りたい情報に到達する
ナビゲーションの情報の整理
一年前のヘッダーの状態だと「はじめてのおてつたび」、「おてつたび先一覧」、「募集一覧」、「体験記」といったページコンテンツと、ログインや検索といった機能が一段目にまとめてあり、正直これ以上コンテンツが増えるとぶつかりあうんじゃ無いかという状態でした。しかし、現在は一段目に機能のみ、二段目はニューススライダーであったのを下げてページコンテンツという風に棲み分けする事で視認性を良くしました。
全画面の圧迫感を無くす
2021年の状態の時にはどことなく圧迫感があり、その原因の一つはメインのスライダーでした。画面を広げた際にスライダーも際限なく広がり横幅だけでなく高さも大きくなるため大きい画面で見ればみるほど想定していたものとはかけ離れました。なので多くなっても1200pxという制限を設けて大きい画面で見てる場合でも圧迫感がないようにしました。
また、バナー下の募集コンテンツ部分に背景色をひいていたのをやめて白に統一する事で変に区切らずにスッキリ見れるようになったと思います。
ページ内で少ないスクロールで知りたい情報に到達する
下記の画像では大きめにスクリーンショットをとっていますが、多くのノートPCで見る場合にファーストビューとして入る場所は2021年時だと小バナーのあたりまででした。多くのユーザーにとってファーストビューでサイトに対しての印象や情報をキャッチアップしてサイトに滞在するかどうか判断すると思います。バナーの飛び先の特集サイトも見てもらいたいのですが、やはり見て欲しいのは最新の募集でした。メインバナーのデフォルトの高さ、上下のマージンをできるだけ最低限取る事でファーストビューにちょうど募集の写真が見切れるくらいに表示することにしました。ユーザーは募集気付き興味を持ってもらえると思います。
2021年〜現在まででTOPページサイト含めて様々な改修を行いましたが、収まりきらないのでここまでにしたいと思います・・・。
終わりに
株式会社おてつたびでは、一緒に働く仲間を募集しています！
自分の経験を活かして様々な事にチャレンジすることが出来る土壌があると思います。
WebとiOSエンジニアを積極募集しております。
ご応募お待ちしております。
Discussion