FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

プリ30周年企画に合わせて、らくがき機能に新コンテンツを実装した話

こちらは、2025 Furyu Advent Calendar 20日目の記事です 🎄

はじめに

こんにちは、ピクトリンクアプリの開発をしている nakase です。

2025年12月19日より、プリ30周年特別企画として「DEAR 令和&平成 ウチらの伝説プリ」が開催されており、
過去の人気機種でプリが撮れる、かなりエモーショナルな企画になっています。 www.furyu.jp

アプリでもこの企画を盛り上げ、ユーザに楽しんでもらうべく
らくがき機能に、30周年プリのコンテンツを追加することになりました。
本記事では、その開発の際にチームで行った工夫をいくつかご紹介できればと思います。

※余談ですが、アプリアイコンも期間限定で30周年verに変わっています。

30周年記念アイコン。ホーム画面で目を引く可愛さです!

らくがき機能へのコンテンツ追加

概要

らくがき機能自体は、2025年7月にすでにリリース済みの機能です。
今回はそのらくがき機能に対して、以下の3種類のコンテンツを追加することになりました。

  • スタンプ
  • 一発らくがき
  • コロコロペン

いずれもプリではおなじみの要素ですが、アプリの端末上で操作する前提となるため、
UI・操作感・パフォーマンスなど、考慮すべき点が多くありました。

スケジュール

また、プリ本体と同じく12月19日にリリースする必要があり、
それまでに何をどこまで入れるか、といった判断も合わせて行う必要がありました。

ざっくりとですが、全体的なスケジュールとしては以下のように進めていきました。
(設計・テストなどの細かい工程は図から省いています)

全体スケジュール
リファインメントの期間も含めて、約2ヶ月の開発期間です。

開発時の工夫

1週間単位で確実に成果物を出す必要がある、非常にシビアなスケジュールでしたが、
リリース目標の達成に向けて、チーム内でさまざまな工夫を重ねてきました。
本記事では、その中から4点をピックアップしてご紹介します。

工夫①:開発プロセス〜FBからの改善活動〜

チームでは、1スプリント1週間のスクラムで開発を行っており、
毎週1回、ステークホルダーに対して現在のアプリを共有するスプリントレビューがあります。

そこでは、まず「成果物を操作してもらい、気兼ねなく思ったことを付箋出ししてもらう」よう出席者に促しており
実際、1時間のレビュー中にかなり多くのフィードバックを得られています。

ある日のスプリントレビューボード(個人情報等に関わる箇所はマスクしています)

特に今回のようにUIの変更が多い開発では、プロトタイプの段階でスプリントレビューに通すことで、

  • 操作が直感的でない部分
  • 迷いやすいUI

といった点に早い段階で気づき、再度考え直す機会を作ることができました。

また、受け取った意見についてもすべてを即座に反映するのではなく、
「スプリントレビュー後相談会」を設け、PBI化するもの・しないもの・後でやるものの取捨選択を行っています。

工夫②:UI/UX改善活動

もともとのらくがき機能は、以下のようなブラシ(ペン)を中心とした比較的シンプルなUIでした。

初期のペン(ブラシ)のみのUI
そこに性質の異なる各コンテンツの操作が加わることで

  • 下タブにどのコンテンツを載せるか
  • ユーザが直感的にやりたい行動を取れるか

といった点を、改めて考え直す必要がありました。

チームでの取り組み

アプリチームでは、毎週、UI/UX勉強会を行っており、
エンジニア・デザイナーといったロールに関係なく、チーム全員が参加しています。

今回の開発期間において、この勉強会の議題を「らくがき画面の改善」とし、
他のお絵描きアプリの研究や、プロトタイプについてスプリントレビューで得た意見を元に、
自分たちの画面がどう改善できるかを議論していきました。
開発としても「この方法なら実装できそうだ」という意見をその場で出せるので、
無理なく、現実的な範囲で最適解を目指す動きが取れていたと思います。

UIの変化

上記のような活動を経て、最終的にリリースとなるバージョンのUIが決定しました。 プロトタイプ段階のUIが左、最終的な完成系のUIが右の図です。

プロトタイプ版とリリース版の比較

プロトタイプ段階では新規コンテンツは全てスタンプタブ内に存在していましたが、
以下のような変更が行われ、より直感的に操作しやすいUI/UXとなったことが分かるかと思います。

  • 性質が異なるコンテンツは下タブに分けて配置
  • 消しゴムはペンにのみ有効であることを認識させるため、ペンタブの中に格納
  • コロコロスタンプはペンタブ内に統合し、コロコロペンとして扱う(ブラシと同様の操作感)
  • パレットの開閉ハンドルの追加

工夫③:AIを活用した開発スピード向上

今回、サーバ側の実装こそなかったものの、それでも体感としてはかなり速いスピードで回っていたと思います。 (iOS/Androidでそれぞれネイティブで開発しました)

このスケジュールでリリースまで辿り着けた要因の一つが、
開発メンバー全員が AI(Claude Code)を活用できる環境を持っていたことです。 特に、プロトタイプの早期実装(実現可能性の探索フェーズ)において、
未知の実装方法を試す際に、かなり有効であると感じました。

また、PR作成についてもコマンドで差分から自動生成できるようにするなど、
より実装に時間を使える環境が整えられていた点も、生産性向上につながりました。

現状は エージェントとしての活用がメインで、いわゆるAI駆動開発の形態は取っていませんが、
アプリ開発におけるAI活用は、今後も広げていければと考えています。

工夫④:パフォーマンス改善(特にAndroid)

問題の発生

ブラシツールのみを想定していた頃は問題なかった描画処理が、
コロコロペンなどの要素が複合的に重なることで、特にAndroidでパフォーマンスが落ちるという現象が発生しました。

この課題に対して、Androidエンジニアが1スプリントをほぼ丸ごと改善に充てる判断をし、
描画や削除の仕様の見直しを行いました。
検討の結果、下記の図のようにらくがきの構造においてリアルタイムレイヤーとマスターレイヤーを分離し、
コミット後にマスターレイヤーへBitmapとしてキャッシュする仕組みを採用しています。
(これまではマスターがリアルタイム処理も担っていたため、パフォーマンス低下につながっていました)

パフォーマンス改善方針

この対応により消しゴム利用時の挙動が
「指を離すまではグレーのマスク表示」「指を離すと消した箇所が反映される」
といった形に変更されています。

結果として使用感が変わることにはなりましたが、サービスデザイナーやQAとも密に連携し、
パフォーマンス優先でこの方針で進めることに決まりました。
チームメンバー間の信頼関係や、同じ課題感を共有できていたことが、
この意思決定の速さにつながっているのかなと感じています。

実際の使い勝手については、今後も変更の余地はありますが、スプリントレビューや検証の中では概ね問題ない状態でした。
(興味深いことに、「むしろ消す範囲が分かりやすくて嬉しい」といった意見も出ました)
iOSとの差異をどう扱うかについては、今後の改善活動の中で判断していく予定です。

終わりに

今回の機能開発を振り返ると、想像以上に短い期間でやり遂げたんだな、という驚きがありました。
(体感としては「4ヶ月くらいやっていたのでは……?」という感覚でした)

しかしながら、「今のチームであれば、このスケジュールで行ける」と主体的に判断できたことで
全員が1つの目標に対して走り切れた2ヶ月になったかと思います。

開発における工夫点についての断片的な紹介となりましたが、
既存機能の拡張や、UI/UX改善に取り組む方の参考になれば幸いです。

もし機会があれば、ぜひピクトリンクアプリにて、30周年verのらくがき機能を触ってみてください!