雑談から生まれた、「あったらいいな」を届ける デザイナー × エンジニアの社内ツール開発 – stmn tech blog

Uncategorized

プロダクト開発部でTUNAGの開発をしているhisaです。最近公開された「ひゃくえむ。」がとても良く、久々劇場で涙を流しました。
今回は少し前になりますが、デザイナーと協業でリリースした社内ツール開発について紹介できればと思います。

はじまりは、何気ない雑談から

「バナー、毎回同じような構成で作ってるんだけど、テンプレートにできたら楽かもね」
「Zoomの背景も、各自Googleスライドで作ってるから、ばらつき出ちゃってて…」

そんな、オフィスでの雑談からこのプロジェクトは始まりました。
デザイナーとエンジニア、それぞれの 気になっていたこと を持ち寄って、「じゃあ、作ってみようか」と動き出しました。

もともとの課題

今回取り組んだ背景には、2つの あるある課題 がありました。

① バナー作成の手間と属人化

  • イベントや発表のたびに、バナーを毎回新しく作る必要がある
  • 一定の構成パターンはあるものの、毎回手作業で時間がかかる
  • デザイナーに依頼が集中しがちで、ちょっとした更新にも時間がかかる

② Zoom背景のバラバラ感

  • 社内ではメンバーが各自で背景を作成（Googleスライドなど）
  • 統一感がなく、資料やスクショで見たときに違和感が出る
  • 「ちゃんとデザインされた感」が伝わりづらくなることも

デザイナー × エンジニアでつくったもの

作ったのは、社内向けの画像ジェネレーターです。
イベント用バナーやZoom背景などを、誰でも簡単に、統一感のあるデザインで生成できるツールです。

  • テンプレートに沿って、イベント名・日付・名前などを入力するだけ
  • バナー画像やZoom背景が即座に生成される
  • デザイナーが設計したテンプレートをベースに、エンジニアが画像生成やUI部分を構築
  • 非エンジニアでも使えるUI、かつ実用レベルでの品質を意識

技術的な挑戦とトライ

今回の取り組みでは、いくつか新しい挑戦も行いました。

  • 画像生成ライブラリの選定と検証
    弊社主力サービス TUNAG では使っていないライブラリを選定し、初めて導入してみました。
    特に文字の縦位置揃えや、Canvas描画の比率など、調整には細かな工夫が必要でした。

  • 技術的に試したかったUI設計
    普段使っている技術とは異なるUI構成で、柔軟なデザイン反映にチャレンジ。
    デザイナーが意図したトンマナを壊さず、かつ汎用化できる設計に落とし込んでいます。

  • 非エンジニアの開発参加（AIエージェント活用）
    Cursorなどのツールを用いて、デザイナー自身がスタイル調整や軽微な修正を担当。
    「ちょっと試してみる」が現実的にできる環境があることで、参加のハードルが下がりました。

やってみてよかったこと

リリース後、社内からはこんな声がありました。

  • 「統一感が出て、資料に載せやすい」
  • 「サクッと作れるのがありがたい」
  • 「非デザイナーでもレイアウトが整うのは助かる」

小さな機能でも、ちょっと便利 / ちょっと嬉しい を確実に増やすことができました。
プロダクト本体とは別文脈で技術を試し、協業の型をアップデートできたのも良い循環です。

これからやっていきたいこと

  • 開発のハードルをさらに下げ、誰でもツールを作れる組織へ
  • デザイン・エンジニアの境界をゆるやかにし、共創を当たり前 に
  • 雑談ベースの課題感から始まる小さなプロジェクトを、もっと増やしていきたい

おわりに

今回の社内ツールは、「ちゃんと課題を解決したい」ではなく、「これ、あったらちょっといいよね」から始まりました。
その ちょっといい を一緒に形にできたのは、職種を超えたコラボレーションのおかげです。

小さな一歩の積み重ねが、働き方や関係性そのものを変えていく気がしています。
これからも、いろんな あったらいいな を拾って、形にしていきます！

このブログのサムネイル画像も、今回開発したジェネレーターで作成しました。

弊社ではプロダクト開発に関わる全ての領域で、プロダクトを共に良くしていけるメンバーを募集しています。
私たちと一緒に最高のチームとプロダクトを作りましょう！

herp.careers




Source link

命名設計の基本 - Qiita 前の記事 システムを作る人がまず理解すべきシステム思考の基礎 - じゃあ、おうちで学べる 次の記事

関連記事

コメント

この記事へのコメントはありません。