kinjo.me

記事

Google Formに変わるオンライン実験のアンケートフォームシステムの開発

関連

  • 2025/4/14 MTG議事録#67fc96f80000000000c5f0a2

プロダクト名

  • nifty-shift

競合

  • SurverMonkey
  • Qualtrics
  • QuestionPro
  • surveyMars
    • XiNautの競合になるツールを触る

nifty-shift 今後のロードマップ

コンセプト

  • 徹底的なリサーチが完了しました！Nifty Shiftについて理解できました：
  • プロダクト概要
    • 名前: Nifty Shift - かんたんシフト管理・日程調整ツール
    • 解決する問題: アルバイトシフト、イベント日程、会議調整の煩雑さ
    • 主要機能:
      • スケジュール管理（候補枠設定→参加者応募→自動/手動割当）
      • カスタムフォーム（8種類のフィールドタイプ）
      • AI形式アシスタント（フォーム自動生成）
      • QRコード共有、Google認証
  • ターゲットユーザー
    • 1. 飲食店オーナー・アルバイトシフト管理者
    • 2. イベント企画者
    • 3. 人事・採用担当者
    • 4. チームリーダー
  • それでは、魅力的なLPを作成し

github

API

URL

Figma

デザインがざっくりでもいいから欲しすぎる

  • Figmaさえあれば、いい感じにフロントエンドを実装してから、APIの繋ぎ込みできる！！！！
    • 2025/6/1 Layermateに要件を整理して、デザインを作った

Google_Formに変わるオンライン実験のアンケートフォームシステムの開発　動作フロー
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 認証周りの要件
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 スケジュール機能の要件
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 アンケート構築の要件
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 Deploy構成
Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 DB構成

Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 改善点

Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 新規性のシステムフローの優位性を考える

2025/7/26 Google_Formに変わるオンライン実験のアンケートフォームシステムの開発 作業ログ

デザインを作るための動作フローを書き出す
jsonなどで設定項目を作れるようにしたい

  • AI時代にtextはかなり強いので、GUIをぽちぽちさせるのは非エンジニアorリテラシーのない人間だけでいい
  • AIを使っていたら、作門をいちいち手入力するなんて、めんどくさいと思う

ユーザー
事前にすること

  • QRコードを読むと、メアドと名前と年齢と性別を入力する
  • スケジュールから空いている日を選択してもらう

実験本番

  • 事前アンケートを回答してもらう
  • 回答してもらったら、本実験のアンケートに参加してもらう

管理者

  • 実験参加してもらう日を設定してもらう
  • 事前アンケートの項目を構築する
  • 本実験のアンケート項目を構築する
  • 収集したデータをCSVなりで吐き出させるようにする

強み

  • 実験募集の収集から被験者のスケジュール調整ができる
  • 事前アンケートを回答してもらったら、本実験のアンケートをしてもらう

論文系でも、オンライン実験のアンケートにはこういう課題があります的なのがあるので、それに投稿できたらいいなとか思ったりしている
（↑これについては私も詳しくは調べていないのでできるかはわかりません… 【柳】）

既存のシステムの課題

  • google formではセクションの並び替えとかができない
    • 被験者Aには A→B→D→Cの順番でしたいけど，被験者BにはB→A→C→Dの順番でしたい．といった内容
    • 異なるフォームを用意すればできるけど，それらを集計するのが面倒くさい
      • １つのフォームで「入力された被験者番号」や「アクセスした順番」などで振り分けることができないか？
    • これの派生で，例えば聞きたい項目が多量な場合に，被験者によって回答する項目を選別することができると良き
  • 逆転項目とかがあると、集計がめんどくさい ＋ 項目の順番をバラバラにしないといけないので集計がしんどい
    • 逆転項目： 聞きたい項目とは逆の事を聞いて，その値から最大値＋1を引いた値を項目の得点とする
    • 項目の順番：聞きたい要素「α」と「β」がある場合に（↓）
      • 「α」について聞く項目を上から順番に並べてその後ろに「β」について聞く項目を並べるのは△
      • カウンターバランスを取るのであれば，被験者Ａに対しては「α→β」の順番でする一方で
      • 被験者Ｂに対しては「β→α」の順番でする．といった対応をとるか（上の項目で述べている内容）
      • 被験者によって変えないのであれば「α」と「β」について聞く項目を交互に混ぜながら聞く必要がある
        • 参考：https://oshio.kinsta.cloud/wp-content/uploads/2024/04/Big_Five_Inventory_2.pdf
        • こうすると集計がすごい面倒くさいので，データを取る側は「α→β」の順番で並んでいるけど
        • データを入力する側にはランダマイズや混合がされている状態で表示されるようにしたい
        • （＋ この項目を複数回利用する場合は，利用するたびに順番が変わらないようにする）
  • 動作確認用項目（きちんとアンケートを受けているか確認する問題）に間違えた人は即時落とすようにする
    • SurevyMonkeyでは実装されているっぽい？
    • googleFormだと，動作確認の項目を間違っていても回答自体は保存されるので無駄に枠を消費する
      • 除外データがなるべく少なくなるように，間違ったやつはそもそもカウントしないような枠組みがほしい
  • 途中からプレビューを見れるといいと思いました
    • （項目を修正した後にいちいちそこまで進むのが面倒くさい）
  • リッカード尺度（均等メモリ）を配置する際に
    • 横方向だけじゃなく縦方向に並べることができるようにしてほしい
    • （数値に付けるラベルが長い時に横並びだと見にくいので）
  • google formの埋め込みに対応させる
  • 回答時間を記録する
  • 実験募集もできるようにする
    • QRコードで被験者の実験募集を集めることができる
    • スケジュールを選択できる
    • 管理者は管理画面でいつでもユーザー情報を見ることができる

仕様
自分のゼミで満足して使ってもらえるぐらいにはしたい

  • CSVでエスポートできるようにする
    • 統計ソフトに合わせて、エクスポートできるようにしたい
    • どんなソフトがあるのかは知らない
      • SPSS / R studio / あと簡潔な分析だとExcelでする場合もあります【柳】
  • ユーザー側のランダム化された質問表示
  • 質問タイプの選択（スケール、二択、複数選択肢）
    • 私たちの研究室は0~100のスライダを使う方法（VAS法）が良く用いられるので，それを組み込めると良きです
  • 逆転項目と選択肢ランダム表示の設定
  • 実験募集もできるようにしたい
  • 動画の埋め込みがYoutubeのみ&拡大ができない

GPTに仕様をまとめてもらった

競合

  • https://surveymars.com
  • google form
  • Microsoft Forms【追加】
  • Servey Monkey【追加】
  • 少なくとも日本には競合はいなさそう
    • オンラインアンケートシステム(学術特化) + 被験者募集システム&スケジューリング機能

技術スタック

  • インフラ
    • Cloud Run(APIとフロント)
  • DB
    • Neon
    • Postgres
  • Auth
    • Clerk
  • ORM
    • Prisma
  • 画像
    • Claudflare R2
  • API
    • Hono
  • UI
    • React
    • shadcn
  • test
    • jest
    • react-testing-library
  • その他
    • Docker
    • Vite
    • Biome

ロードマップ

  • localの開発環境の構築
    • バックエンド
      • Dockerでlocal開発環境での、起動
      • swaggerの追加
      • 認証周りの追加
      • ステージング環境を整備したい
        • XXX-stg.run.appとかのAPIのURLにしたい
    • フロントエンド
      • pnpmでの起動
      • Clerkの導入して、認証画面の作成
      • ステージング環境のURLにしたい
  • stgでの環境の整備(Cloud Runに載せた時に、base_URLなどの決定)
    • CI/CDの整備

メモ

  • フロントエンドのモック付き画面を作成してから、APIを詰めていくようにする
  • .envの値を本番で使うのではなく、.env.productionファイルを使いたいよな
  • バックエンドのlogをターミナルに表示したい
  • カスタムのsignupコンポーネントから、独自のAPIを叩きたい
    • 無理そうなのでwebhook経由にする
  • APIのHMRがないのがきついな

進捗

  • APIのlocalで動くようにした
    • supabaseに課金して、プロジェクトを作って、DBなどの連携をしていくだけ
      • 俺は強くなっていたので、NeonとPrismaでいいのだ

2025/5/31

  • DBをNeonを使うことにした
    • Supabaseだとプロジェクトがもうなくて、課金しないといけなかった
  • Cloud RunにHonoとNeonの環境構築完了
    • 認証さえ追加したら使えるバックエンドが完成

2025/5/31

  • フロントエンドもアンケート項目のコンポーネントを作成
  • スケジュール周りのコンポーネントを作成
    • LayetmateでFigmaにデザインを作成した
  • フロントエンドのCloud Runにdeploy構築

2025/6/1

← 記事一覧へ
X でシェアはてなブックマーク

© 2026 Shotaro Kinjo