ランサーズ(Lancers)エンジニアブログ > UI > サービスの全ページをレスポンシブ化する
サービスの全ページを レスポンシブ化する。5年の道のりを振り返る

サービスの全ページをレスポンシブ化する

tetsu|2023年10月20日
UI

ランサーズでデザイナーをしている竹中 @takeboooooo です。フットサルが大好物です。

ランサーズのAndroidアプリが出たよ!

先日、ランサーズ待望のAndroidアプリが出ました。
https://prtimes.jp/main/html/rd/p/000000188.000010407.html

ランサーズ、iOSアプリを大幅リニューアル。Androidアプリも正式リリース

お待たせしました、お待たせし過ぎたかもしれません、、、
ぜひ、いますぐダウンロードしてください 👏

個人的にランサーズのWEB版のモバイル対応に長く関わってきたので、Androidアプリが手元の端末に入ったときは感涙でした。
アプリ開発の裏側は担当者の方がしてくれるので、自分はランサーズのWEB版をモバイル対応した歴史を振り返ってしんみりしたいと思います。

モバイル対応を振り返る

未ログインページのモバイル対応

ランサーズは2008年にサービス開始しており、当時のテンプレートを一部で利用している状態のまま、新しいテンプレートを増やす形でリニューアルや機能追加を重ねていました。加えて、PCビューと別にモバイルビューを作成していたので、どんどん更新が大変になってました。

そして2018年、Googleがモバイルファーストインデックスを本格的に始めると発表。ランサーズは以下にばっちり該当してました。

「動的な配信」および「別々の URL」の構成のサイトは、MFI による悪影響を受けないための対応が必要になることがあります。

引用: https://www.suzukikenichi.com/blog/google-rolling-out-mobile-first-indexing/

あいにく予算会議が終わっているタイミングで、モバイル対応のためのプロジェクトを新しく1本走らせるリソースはどこにもなく。。。仕方なくデザインチームの目標に20%ルールでSEO対策を掲げる形で、モバイル対応を始めました。

当時レスポンシブ対応済みのデザインシステムがスタイルとして整備されてたのが救いでした。Google検索にインデックスされるのは未ログインページだけ。とはいえヘルプやガイド、ランキングや各種検索ページ、無数のLPなど、googleに指摘されていたページ数は1500超

地道にデザインシステム適用を進めること1年弱、未ログイン画面のモバイル対応は完了、ランサーズは無事モバイルファーストインデックスに切り替わりました。

ランサーズがモバイルファーストインデックスに切り替わった知らせがGoogleから届いた
👆 正しくは1年半がかりな

ログインページのモバイル対応

同じく2018年、ランサーズのiOSアプリがリリースされました。嬉しかったですねー。
https://info.lancers.jp/19546

使ってみたところ、ログイン後の画面が全然モバイル対応されてない!!!ことに気付きました。
すでに未ログインページのレスポンシブ対応中でしたが、長旅を認識しました。
モバイルファーストインデックス対応の完了後、ログイン後の画面もモバイル対応を進めたいなと思ったのですが、一つ問題があります。

モバイルファーストインデックスのときと違ってSEO対策ではないものをデザイナーの目標設定に組み込む以上、その活動をする理由を、組織の縦横斜めに説明できる必要があります。そこで着目したのが「脆弱性対策」。

脆弱性対策という大義

ランサーズでは年に一度、外部コンサルの脆弱性診断を受けていて、見事に古いjQueryたちが指摘されていたのです。
https://jvndb.jvn.jp/ja/contents/2020/JVNDB-2020-005056.html

この文脈にねじ込むことにしました(勝手に)。
脆弱性のある古いjQueryたちを、バージョンアップもしくは Vanilla JS に書き直して削除しましょう、のプロジェクトを(勝手に)立ち上げ、その中で「せっかくなので合わせてモバイルも対応しておきました」をやっていく形です。

実際のissue
👆 実際のissue

やること増えるドMなアイデアではありますが、これ以上に説得力のある理由はない。
対応箇所が膨大なので優先順位を「流通貢献」と「難易度」の2軸で決めて、粛々進めました。

協力者

デザインチームだけでこの目標を追うのは時間がかかりましたが、頑張っていると、思いがけない協力者が現れます。
2020年、サービス登録いただいているユーザー(ランサーさん)のエンジニアの方々に社員が仕事を依頼できるように、部長や役員の方々が仕組み化してくれました。
何十人ものランサーさんの力でみるみる脆弱性対応とモバイル対応が進み、2022年下期、ついに事業部のミッションの一つに「全ページレスポンシブ化」を宣言していただき、モバイル対応プロジェクトチームが発足。残りの画面を集中して対応できるようになりました。
勝手に始めてみるもんですね。
2023年4月、開始から5年、ついにランサーズは全ページレスポンシブになりました 🎉

101をやり切った記録

すべてはユーザーのために

UIデザインしかしてなかったデザインチームが、結果としてPHP、Javascript、Reactまで触れるようになりました。もちろんコードを書くこと自体は目標としてません。サービス体験をよくしたい一心で(勝手に)色々やっています。

モバイル対応は完了しましたが、やりたいことは山積みです。WEBもAndroidもiOSも、まだまだ改善していきますのでご期待ください。

「ランサーズ」アプリは以下URLよりダウンロードいただけます。

iOSアプリ: https://apps.apple.com/jp/app/id1331949158
Androidアプリ: https://play.google.com/store/apps/details?id=jp.lancers.lancers