こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。
UIUXチームとは
UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。
UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。
イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @sho
pixivでアルバイトを始めて三ヶ月経った話 @unipota
成り立ち
UIUXチームとして名乗りだしたのは今から2年ほど前のことで、それまではPCとスマホのブラウザ版のSPA化を担当するSPAチームとして活動していました。コードの品質改善・カスタマーサポート業務改善を行う開発支援チームと分かれて業務を担当しており、当時のpixivのフロントエンドのコードはちょうどモダン化を進めている最中で、教育コストの面から実質SPAチームのみがフロントエンドを扱うチームとなっていました。
しかし組織が拡大する中でフロントエンドエンジニアのリソースを持たないおすすめ改善・プレミアム会員の体験改善を行うチームや、小説・マンガをメインに扱いUIを含めた改善サイクルを回すチームが発足しました。これらのチーム増加に伴い、UIの品質担保や教育体制が問題となりました。そこでフロントエンドエンジニアのいないチームからの依頼を受けたり、フロントエンドエンジニアの初期の教育を行うチームとして動くべくUIUXチームとして名称を変更することとしました。
UIUXチームの歴史
そんなUIUXチームはpixivで様々なプロジェクトを遂行してきました。代表的なプロジェクトをご紹介します。
- 2018年06月 作品ページリニューアル
- 2018年10月 プロフィールページリニューアル
- 2019年3月 複数枚作品ページリニューアル
- 2019年中旬〜 デザインシステムの制定・導入
- 2019年7月 作品サムネイルクロップ機能リリース
- 2019年9月 ログイン前作品ページ・プロフィールページリニューアル
- 2019年11月 検索ページリニューアル
- 2019年下旬 みんなの新着ページリニューアル
- 2019年下旬 作品ページ・プロフィールページのURL変更
- 2019年下旬〜 海外ユーザー向けSEO改善
- 2020年2月 ヘッダーリニューアル
- 2020年6月 ホームリニューアル
- 2020年7月 作品のタイトル・キャプションの英訳機能リリース
- 2020年10月 ダッシュボードリリース
ご覧の通り2019年下旬以降は多くのプロジェクトを実施できているのですが、これは後ほど理由をお話しします。その前に、この中でも特に利用ユーザー数が多く影響力の大きかったページリニューアルをご紹介します。
まずはイラストやマンガ・小説が表示される作品ページのリニューアルです。このリニューアルではクリエイターの作品を大きく表示しファーストビューに入るようにしました。他にもマンガのビューアーの見直しや各導線の配置を再設計しています。
クリエイターのプロフィールページのリニューアルでは、クリエイターが最も見てほしい作品やBOOTHアイテムなどの表示位置をカスタマイズできるようになっています。よりポートフォリオとして使いやすいページを目指しています。
リニューアル後のページは、社内で独自に制定したデザインシステムに基づきデザインとUIの実装を行っています。
デザインと実装をリンクさせるデザインシステム
デザインシステムが策定される前の開発では、デザイナーが意図した通りのデザインと実装に若干ズレが生じていたりエンジニアによって実装が異なり、品質の担保にコストがかかっていました。
デザインシステムではそれらの問題を解決し、統一感のある見た目と体験を提供することで、ユーザーがピクシブ株式会社のpixivやBOOTHなどいずれかのサービスで学習した使い方・使い心地を、そのまま他サービスでも適用できることを目指しています。
現状は複数のサービスで試験運用している段階で、ガイドラインを実装に落とし込んだフレームワークを作成し一部のコードで利用しています。今のところ実感出来ている恩恵としては
- ガイドラインによってデザイナーとエンジニアに共通言語が生まれたためスムーズなコミュニケーションがとれるようになった
- ライトテーマをベースにデザイン・実装をするだけで自動的にダークテーマが出来上がる
- デザインシステムに存在しないサイズのスペース（例えば6pxのマージンなど）や色が設定できなくなるなどコード側に制限を設けた結果、デザインと実装にズレが生じなくなった
- 変更に追従するコードになったことで、デザインのアップデートがしやすくなった
ということが挙げられます。
そんなデザインシステムを導入することを可能にした背景として、フロントエンド技術のモダン化がありました。
フロントエンド技術のモダン化
リニューアルなどのUI変更に伴い、提供したい体験の実現にはレガシーなフロントエンドを置き換えていくことが必要であると考えました。そこで全面TypeScriptへの移行や開発速度向上のためのコンポーネント化、品質保証のための仕組みの導入などを行ってきました。
pixivサイトリニューアルの軌跡 長寿サービスの刷新において大切なこと @do7be
www.slideshare.net
これらのフロントエンド技術のモダン化の結果、SEO改善の一環でWeb Stories(旧AMP Stories)やSPAページのためのDynamic Renderingの導入など、新しい技術をどんどん取り入れることが可能になり開発速度・クオリティは飛躍的に向上しました。
どんなサービスにしたい？ から考えるデザイン @ganchan
pixivで検索エンジン向けにDynamic Renderingを実装した話 @mu-ko
デザインシステムの導入・フロントエンド技術のモダン化によりデザイン・開発のスピードが向上し、上述していた通り2019年下旬頃からは多くのプロジェクトに取り組むことが出来たというわけです。
これからのpixiv
これまでのUIUXチームは閲覧体験の土台を整えることを中心とした活動を行ってきました。これからはpixivにて活動していただいているクリエイターの方々の体験向上・問題解決によりフォーカスしたUI改善・機能提供を行って参りたいと考えています。
ここまで読んでいただきありがとうございました。 ピクシブでは現在UIUXチームにてフロントエンドエンジニア・プロダクトマネージャーを募集しています。今回のブログをご覧いただき興味をお持ちになりましたら、是非下記エントリーフォームの詳細をご参照ください。エントリーをお待ちしております。
フロントエンドエンジニア
プロダクトマネージャー
