建設予定地

当面はやったことの備忘録

PIXIV DEV MEETUP2024に参加しました

はじめに

9/20に開催されたPIXIV DEV MEETUP2024(#pixivdevmeetup) に招待いただいて参加してきました。

conference.pixiv.co.jp

PIXIV DEV MEETUP2024 オープニング

会場内の立て看板。可愛い。

友人のぴこぴこ(@picopico_dev )くんに招待いただいての参加でした。大感謝！！

ありがたいことにご縁があって、今年はPIXIV MEETUP 2023に続き2回目の参加でした。

ピクシブの皆さんのプロダクトへの愛とクリエイターへの熱量を肌で感じて、とにかく終始ワクワクさせられるイベントでした。

pixivは、僕も小学生のときからユーザーとしてずっと使っている大好きなサービスなので、中の人のお話が生で聞けることへの高揚感と、同じエンタメ系事業会社で働く身としての共鳴する部分もあって、一ユーザーとしても一エンジニアとしても、心から尊敬の念を感じるお話ばかりでした。

また、多くの方々のセッションやキーノートを聞く中で、「ビジョンの明文化」という文化が組織として根付いている(それぞれの取り組みに対し、何のために取り組むか、という前提の問いかけへのアンサーが常に用意されている)のを感じられたのが印象的でした。

LPサイトについて

こちらのLT発表でもお話がありましたが、イベントのLPサイト がめちゃくちゃ凝っていて素敵でした。

スクロールアニメーションでコンテンツが変化する、独特の「奥行き」が感じられるデザインになっていて、見るたびにワクワクさせられました。

セッションの感想いくつか

ピクシブにおける「ビジョン」の取り扱われ方

speakerdeck.com

ピクシブさんが昨年一新されたMVVの刷新検討プロジェクトの裏側についてのお話でした。

ビジョンの刷新検討とは、何のために「会社としての活動、プロダクトづくり、プロジェクト」に取り組むかの探求であり、このような明文化を重視し

"ピクシブらしい開発を誰でもができるように。"

の明文化のもと、刷新プロジェクトに取り組まれたそうです。

この刷新プロジェクト「プロジェクトシェルパ」の名称は、プロダクト作り＝「険しい山に登るような行為」というところからつけられているそうです。　

「なんのために取り組むか」の明文化を重視し、理想像(ビジョナリーシート)と具体的なアイデア(インセプションデッキ)を使い分ける工夫をしている、というお話がありましたが、実際にプロジェクト推進時にステークホルダーとなる人々の認識(経営陣と開発現場の共通認識など)がブレないように工夫されているのが伝わってくる取り組みに感じられました。

セッション中で、社内向けに作成・運用されているというガイドブックも公開してくださいました。

pixiv.notion.site

Charcoal 2.0: デザインシステムの基盤を再構築

ピクシブフロントエンドのデザインシステムcharcoal のカラーシステム再設計のお話でした。

創作界隈でアクセシビリティは重視すべきなのか？という疑問に対し、絵画の巨匠モネは白内障になってから世界で最も高価な絵の一枚を生み出している、というお話を例に、創作界隈でこそ平均よりアクセシビリティは重視すべき という考えのもと再設計を行った、というお話が印象深かったです。

カラーシステムの設計は、デザインシステムの最も重要な基盤の一つのため、以下の三点を満たせるように試行錯誤しながら再設計を行なったとのことでした。

カラーパレッド5色の状態からスタートし、アクセシビリティを考慮しながら拡張していったとのことでした。 最初はデフォルトテーマ、プレミアムテーマ、リクエストテーマ...など多くのテーマがあるために、ブランドカラーが警告色と重なる、などの苦労もあったそうです。

また、カラーパレットのコントラスト比を揃えるためにOKLCHを採用されているとのことでした。

HSL/OKLCH色空間

HSLの色空間は人間の感覚とずれているため、カラーパレットでは人間の色覚を近似しやすいOKLCH色空間を採用し、APCAを組み合わせることでコントラスト比を揃えているそうです。

(Charcoal Primitive Tokensのデザインファイル はFigmaでOSSとして公開されているのもありがたいです。とても勉強になる......)

pixivのフロントエンド開発のこれまでとこれから

17年間の歴史を持つピクシブのフロントエンドは、PHP + Smarty + js, cssに始まり、SPA以降時にReactとVue.jsを同時に採用していた時代があったとのことでした。

SPA移行当時のReactがバンドルサイズが大きいという課題があって、スマホではVue.jsを採用していたとのことでした。

また開発体制においても、関係者が多い大きなモノレポ(yarn workspaces) を採用しており、影響範囲が広くライブラリアップデートが難しい、デプロイロック待ちの時間が長いなどの課題に直面したそうです。

フロントエンドフレームワークは、このようなデプロイフローの改善と、「広く普及したフレームワークに乗ることで、公式に丁寧なドキュメントに用意されている」という理由から、Next.jsへの完全統一を進めたそうです。

移行を進めるなかでは

  • SPA遷移になってしまうため、ホームタブの移動時にスクロール位置がリセットされてしまう
  • 初回アクセスで表示するコンテンツ量が大きくなってしまう

などの課題があったそうです。

スクロール位置のリセット問題の解決は、BFCacheで対応したが、Safariだとスクロールキャッシュが保存されないなどの苦労もあったとのことで、技術的にも深ぼって聞きたい...！！と思わされるお話でした。

iPadでのお絵描き体験を考える

こちらは今年4/17にリリースされた、新しいiPad向けペイントツール「Pastela」の体験設計と、その試行錯誤についてのお話でした。

PastelaはiPadユーザーであれば無料で使えるペイントツールで、「お絵描きのハードルを下げる」という目的のもと開発されたそうです。

iPadは、PCや液タブと比べると画面が小さく、タップ領域などの制約があります。 iPadの大きくない画面(8-13inch)で、機能数を無限にスケールさせられて、作業を効率化できるか？という点を意識されながら、インセプションデッキとDesigin Docを活用して体験設計を行なったそうです。

例えばパネルスタックのスクロール設計を一つとっても、

iPadのウィジェットのサイドバーが近いのでは？ →サイドバー内のパネルは縦にリサイズできる →Nested Scrollになっている(iPadのウィジェットのサイドバーもNested Scrollになっている)

など課題とどう向き合ったか？というエピソードがあり、技術的にもとても興味深かったです。

リリース直前まで、ユーザーフィードバックをもとにした改善フローを何度も重ねた、というお話が素敵でした。

pixivに新しく「ホーム」タブを追加している話

pixivで2024年7月から順次リリースが進んでいる「ホーム」タブの追加プロジェクト(通称：ストリートプロジェクト)のお話でした。

ストリートプロジェクトは、「pixivに大通りをつくる。(受動的にpixivの体験を享受できる場所、pixivストリート)」という明文化のもと始まったプロジェクトとのことでした。

pixivでは、トップページの設計がプラットフォームごとや作品種別ごとに異なっており、これらすべての体験を統一したものを提供するという目的を持つホームタブの追加は、おおよそ1年に及ぶ壮大なプロジェクトとのことでした。

登録ユーザー数・作品投稿数ともに1億を超える巨大プラットフォームのpixivでは、ユーザー影響の大きさも相当なものであることが容易に想像できます。

プロジェクトを進める際にどのような工夫をしていたのか、観点・手法ともにひたすら勉強になるお話でした。

こちらのセッションでも、課題感・理想像の言語化ツールとして、プロダクトミッションとビジョナリーシートを組み合わせて使っているというお話がありました。

ビジョナリーシートについて、先述のセッションのお話でもありましたが、初めて耳にする概念だったのでとても興味深く聞いていました。

このような取り組みについて、開発は抽象から具体へ近づけることであり、抽象から具体へ繋げるパスが重要(課題感・理想像を言語化する)、という表現がされていたのも素敵でした。

キーノート

キーノートでは、職域を横断した様々な取り組みについて紹介されていたのが特徴的でした。

  • 財務×IT×ピクシブのエンジニアリングなお話
  • ZEN大学では、エンジニア0名、プランナー1名のエンジニアレス(!!)でシステム開発を(GASとスプレッドシートを駆使しながら)スタートしたというお話
  • ベニヤサーバーをすべてOpenStackしたお話(凄い)
  • AI生成作品フラグの導入までの背景のお話

などなど、本当に一つ一つが濃厚なお話ばかりでした。

ブース・懇親会

総合して、「誰もが楽しめる体験設計」が至る所に施されているなあと思いました。

初めましての方はもちろん、お世話になっている色々な界隈の方々に声をかけていただいたり、見つけてお話できたのも嬉しかったです。

(よく会う方もいれば、久しぶりな方もいたりで良かったです。本当に道をゆけば知り合いとお会いするので、実質オフ会でした)

pixivcoban のオリジナルティッシュ、可愛かったです。

寿司打に挑戦したり

辰べえ(@shoryu927) くんにVision Proを試遊させてもらったり、ミラーリングデモを見せてもらったり

Vision Proのミラーリングデモ

果し状をいただいてポーカーに参戦したり

射的に挑戦できたり

萩森じあさんによるPastelaのライブドローイング、凄かったです。

おわりに

ピクシブさん、最高のイベントを開催をしてくださって本当にありがとうございました！！

おまけ

MEETUPの翌日に誕生日を迎えたのですが、二次会で行ったお店にタイミング良くバースデーカクテルがあり、ちょっとほっこりした気持ちになりました。 良い一年になりそう。