【GMO ペパボ サマーインターン 2023】SUZURI 事業部で ショップページ刷新 と SNS シェア文生成機能をリリースした話 (らん)

こんにちは、 らん です。 本記事では、GMO ペパボサマーインターン 2023 にて SUZURI 事業部で行った取り組みやイベントを中心に、インターン参加記録をお送りします。

GMO ペパボ インターンシップ 2023

GMO ペパボ インターンシップ 2023 は、2023 年 7 月 24 日から 8 月 4 日までの平日 計 10 日間にわたって行われました。 1〜9 日目はオンラインで、最終日は渋谷のセルリアンタワーのオフィスで開催されました。

SUZURI、minne、カラーミーショップのいずれかの事業部における課題に合わせて機能開発業務を担当する、というインターンでした。 SUZURI 事業部には、私ともう一人のインターン生 ひでおさんが配属されました。 minne 事業部に配属された xryuseix くんの参加記も投稿されておりますので、こちらもぜひご一読ください〜。

インターン初日は オンボーディングとして、SUZURI サービスのビジネスモデルや技術スタック、そしてインターンのタスクについて紹介いただきました。 2〜9 日目にタスクに取り組み、10 日目にオフィス見学と成果発表会を行いました。

発表会の様子

担当したタスク

私が インターン期間中に SUZURI 事業部にて担当した 2 つのタスクについて最初に紹介します。

ショップページの刷新

SUZURI では、ショップページ(https://suzuri.jp/:user_name)にアクセスすることで、各クリエイターさんが出品したアイテムや投稿したデザインなどを閲覧できます。 例えば、「アイテムタブ」では T シャツやスマホケースなどのアイテムが、「ダウンロードアイテムタブ」ではイラストや 3D モデルなどのデジタルコンテンツが表示されます。 ここで、「すべてタブ」を追加し、アイテムやダウンロードアイテムなどを一覧できる統合的なページを作成したいという要望があり、SUZURI 事業部では導入を進めていました。 既に Figma でのデザインが作成済みで、インターンタスクとしてアプリケーションへの実装に取り組むというものでした。 導入背景や要件は Issue にまとめられ、インターン初日にメンターさんから紹介いただきました。 以降のタスクの進め方については後述します。

リリースは複数回に分けて少しずつ行い、下記画像のように「すべてタブ」が本番環境に反映されました。 本番環境への反映後、実装したページにクリエイターさんの実商品が並んでいるのを見て、高揚感や緊張感、臨場感が込み上げてきたのを覚えています。

また、インターン終了後すぐに、「すべてタブ」の追加に気づいて SNS で共有してくださいっているクリエイターさんをお見かけしました。 気づいた上で、さらにポジティブなフィードバックまでいただけてめちゃめちゃ嬉しかったです…!!! ✨ CtoC 事業の魅力を感じた瞬間の一つでした。

ショップページ

LLM による SNS シェア文生成機能

ショップページの刷新タスクと並行して、LLM による SNS シェア文生成機能の実装タスクも行いました。 このタスクも既に figma でのデザインが作成済みの状態からスタートしました。 ショップページの刷新タスクが早めに終われば「おかわりタスク」としてやるかも〜という案だったので、どこまで進められるか不安でしたが、なんとか β 版としてリリースすることができました。

AIにショップを紹介してもらうボタンのスクリーンショット

タスクの進め方

意義の把握

デザインまで完了している状態から引き受けるタスクだったので、「その改善が SUZURI においてどのような意義をもつか」を把握するところから始めました。 まず、SUZURI では Notion でブランドビジョンが明文化されているとのことだったので見せていただきました。

その上で、事業部のみなさんに機能追加の背景等をヒアリングさせてもらいました。 ショップページの刷新の背景でいうと、クリエイターさんのショップページからの購入フローも多いという現状や、SUZURI が扱えるコンテンツ形式が増えたため統合的なページが必要になったという事情を聞かせてもらいました。 事業成長の一端を担うタスクであることが鮮明になり、より気が引き締まりました。

ショップページ刷新タスクではパフォーマンス面の要件があったのですが、教わった背景を鑑みると「ショップページはいわばクリエイターさんの”顔”になるため、購買意欲を損なわないためのパフォーマンス要件が求められる」という事情もわかってきました。 この要件を考慮して、ファーストビューの表示速度を上げるために、ファーストビューで表示されないコンテンツは lazyload させるという工夫をしました。 要件単体だけでなく、タスクの背景、ひいてはそのサービスが実現したいビジョンまで把握できたことで、ジョイン直後でもスムーズに取り組むことができたように思います。

細かい認識合わせ

SUZURI サービスのアプリケーション実装に慣れていない状態だったので、普段より細かい単位でメンターさんと認識の共有をさせてもらっていました。 簡単なシーケンス図を書いて全体像を把握してみたり、タスク分割をしてワークフローを整理したりして、認識の齟齬がないかを確認していました。

また、メンターさんや SUZURI 事業部開発チームのみなさんに、質問対応やペアプロ・レビューをしていただきました。 とても丁寧に教えていただけて大変勉強になりました ☺️ メンターさんとのペアプロめちゃめちゃ楽しかった!!✨

あと個人的に印象深かったこととしては、技術的な質問に対して Pepabo Tech Portal や登壇資料を引用して回答されていたのが、「めっちゃかっけぇ…」ってなっていました w。 本記事でもそのいくつかを引用していますが、GMO ペパボ行動指針の一つ、「アウトプットを増やす」の体現が感じられた体験でした。

SUZURI を支える技術

ここからは技術面での感想を綴ります。 まず、SUZURI を支える技術は数多ありますが、今回のインターンでは Ruby on Rails、GraphQL、React を中心に触っていました。 特に Ruby on Rails は開発経験が全くなく不安でしたが、この機会に習得するぞという意気込みで取り組んでいました。

また、歴史のあるサービスにおいて、どんなつらさがあってどう改善してきたかというお話も聞けて大変勉強になりました。

ユビキタス言語が羅針盤に

ジョインして間もないプロジェクトで、巨大なソースコードからアタリをつけながら構造を把握していくことは難しい作業です。 「アタリをつける」のに参考になるのはファイル名や関数名などの「名前」ですが、これらと最終的に画面に表示される機能名は必ずしも一致せず、多くの場合は自力でその対応付けを把握していくことになると思います。 ここで、個人的にすごく助かったのは 用語集 の存在でした。 用語集を参照することで各名前の定義や概念同士の関係性を把握でき、さらにドメインへの理解も深まりました。 いわゆるドメイン駆動開発におけるユビキタス言語の効果を感じた瞬間でした。

デザインシステムの威力

SUZURI では Nachiguro というデザインシステムおよび CSS フレームワークが整備・活用されています。 参加して間もない身でも一貫性のある SUZURI らしいデザインを簡単に実装できました。 ガイドラインやアセットもめちゃめちゃ整備されていて、最高の開発者体験が得られました ✨

小さく安全なリリース

今回のタスクではリリースを複数回に分け、ユーザに影響の少ない API から少しずつ変更を反映させていました。 短期間で何度もリリースできたのは、自動化されたデプロイワークフローのおかげだと感じています。 以下の参考記事のように、Slack bot からボタンをポチポチするだけでデプロイすることができました。 最高の開発者体験でした ✨

また、SUZURI のいくつかの機能では Unleash による機能トグル管理を行っています。 機能フラグにより、問題が起きた場合にもその機能をすぐに無効にできるので、小さく安全なリリースが可能になります。 今回開発した機能についても機能フラグを実装していました。

イベント

インターン期間中には、SUZURI 週次朝会や SUZURI エンジニアお茶会、SUZURI 共有会などのミーティングにも参加させてもらっていました。 SUZURI 共有会では、みなさんが各報告に対して丁寧に称賛や感謝を伝え、冗談も交えながらコミュニケーションをとっていたのがとても印象に残りました。 そんな様子を見て、心理的安全性のある組織のために「雰囲気作りめっちゃ大事だ…」と感じていました。

インターン最終日には、渋谷の中華料理屋 パンダ レストラン で昼食をいただきました。 最終日ランチ

インターン終了後には、オフィスでピザパ懇親会をしたり、近くの居酒屋で美味しい海鮮をいただいたりしました。 一歩踏み込んだ深い話も聞くことができてめちゃめちゃ楽しかったです ✨

最終日懇親会 お刺身

さいごに

インターンを通してペパボの文化への理解が深まり、技術的にも大きく成長できたと実感しています。 色々な人と出会えて、仲良くなれて、本記事で書ききれなかった思い出もたくさんできました。 最高の 2 週間でした!ありがとうございました!🙌