自己紹介がもっと楽しくなる！Procomに「10の質問」テンプレートを導入しました！

プロコム開発チーム

こんにちは、Procom開発チームです。

今回は、プロフィール欄をもっと魅力的に・もっと簡単に埋められる新機能として、「10の質問テンプレート」を導入しました。
SNSやポートフォリオで自己紹介を書こうと思っても、何を書いたらいいのか分からず止まってしまう……そんな経験、ありませんか？

Procomのユーザーページに「10の質問」ボタンを設置することで、誰でも気軽に・楽しく・自分らしいプロフィールを作れる仕組みを実現しました。

本記事では、

なぜ「10の質問」を導入したのか？
どんな質問があるのか？
実装の裏側や技術的ポイント
今後の展望

について、詳しくご紹介していきます。

Contents

1 🔍 なぜ「10の質問」テンプレートを導入したのか？
2 ✨ 質問内容は？楽しくて、ちょっと深掘りできる設計
3 🧪 実装の裏側：プロフィール編集にボタン1つで挿入
4 💅 ボタンデザインにもこだわりました
5 🧭 今後の展開：「みんなの回答」一覧表示へ？
6 ✅ まとめ：書きたい気持ちをそっと後押しするUIを目指して

🔍 なぜ「10の質問」テンプレートを導入したのか？

Procomは、ダンサー・YouTuber・フリーランスなど、個人で活動するすべてのクリエイターのためのSNS集約プラットフォームです。

プロフィールページに自分の写真やSNSリンクを載せるだけでも十分に情報発信が可能ですが、「やっぱり自己紹介文があると、もっと親近感が湧く」という声が多数寄せられました。

しかし、

「何を書いていいか分からない」
「書き始めるのが面倒」
「文章に自信がない」

という悩みも非常に多く、せっかくのプロフィール欄が空白のままになっているケースが目立っていました。

そこで、「だったら質問形式で誘導してあげればいいんじゃないか？」というシンプルな発想から、このテンプレート機能の開発がスタートしました。

✨ 質問内容は？楽しくて、ちょっと深掘りできる設計

質問は、堅苦しくなく、読んでいて「クスッ」と笑えて、かつその人らしさがにじみ出るように工夫しました。

以下が、現在の「10の質問」テンプレートです：

1. 活動ジャンルは？
2. 一番好きな作品・活動は？
3. 得意なことは？
4. 苦手なことは？
5. 黒歴史は…ある？
6. 好きな時間の過ごし方は？
7. 無人島に1つだけ持ってくなら？
8. 最近ハマって？いることは？
9. これからの目標は？
10. 最後に一言！

これらの質問はあくまでテンプレートなので、全部答えても、気に入ったものだけでもOKです。
空白のままでも問題なく、「とりあえず書き出すきっかけ」に使ってもらえれば大成功だと考えています。

🧪 実装の裏側：プロフィール編集にボタン1つで挿入

技術的には、「プロフィール編集」モードの中に次のようなボタンを設置しました：

<button
  onClick={() => setBio(TEN_QUESTIONS_TEMPLATE)}
  className="ten-questions-btn"
>
  🎀 10の質問を挿入する
</button>

この TEN_QUESTIONS_TEMPLATE は、上記の10個の質問を改行付きの文字列として保持しています。
ユーザーがボタンをクリックすると、現在のプロフィールテキストエリアにそのテンプレートが一括挿入されます。

また、誤って上書きしてしまったときのために、キャンセルボタンで元の内容に戻せるようにも対応済みです。

もちろん、挿入された質問は自由に書き換え可能。
「10の質問」という仕組みそのものが、書く楽しさを広げるトリガーになれば嬉しいという思いで作りました。

💅 ボタンデザインにもこだわりました

デザイン面でも、「ただのボタン」ではなく、少しポップで可愛く、思わず押したくなるような見た目にしています。

たとえば：

.ten-questions-btn {
  background-color: #ff99cc;
  color: #fff;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}
.ten-questions-btn:hover {
  background-color: #ff66aa;
  transform: scale(1.05);
}

ピンク系のグラデーションとふわっとした拡大エフェクトで、**「ポチッと押して試したくなる感じ」**を演出しています。

Procomでは今後もこういったちょっとしたUIの遊び心や温かさを大事にしていきたいと考えています。