【拡散希望！！！】noteの記事内でリアルタイムで結果が変わる「アンケート生成ツール」を無料公開します！
2026/4/7 追伸
本記事でご紹介しているアンケートツールですが、
もしかするとアンケート作成後に動作が重くなっているかもしれません😅
もし不具合などにお気づきの際は、
DMかこちらの記事のコメント欄でお知らせいただけますと幸いです！
原因はまだはっきりしていませんが、
予想以上の反響をいただき、データベースに負荷がかかっている可能性があります🤔
（読み書きのデータ量を見る限り、1日の処理上限には達していないようなのですが…）
それに伴い、ツールに予期せぬ不具合が出る可能性もあります。
ご利用の際は、念のため一度下書きにアンケートを載せて、正常に表示されるかテストしていただくことをおすすめします。
（運用方法の見直しについては、状況を見ながら順次進めていきます🙏）
こんにちは、「まる。」です。
昨日、無料でデータベースを構築する方法を模索していたところ、
ふと面白いアイデアが浮かび、熱量そのままにツールを急造しました！
その名も、「note用アンケート生成ツール」です！！！
noteを書いていて、
「読者の皆さんに意見を募りたいな」
と思う場面、ありますよね？
一応、Googleフォームなどを使う方法もありますが、回答にGoogleアカウントへのログインが必要な場合が多く、
読者の方にとっては少しハードルが高いのが難点でした。😅
また、note上にアンケート結果をリアルタイムで反映させるには、GAS（Google Apps Script）を組むなど…
技術的な壁も立ちはだかります。😇
そこで、
「誰でも簡単にアンケートを作成できて、結果がその場でパッと反映される」
……そんなツールを自作しました！
難しいことはなにもありません！
「回答者側のログイン不要」
「ポチッと押した瞬間にグラフが伸びる快感」
「二重投票の防止」
…など、使い心地にもこだわっています。
（突発的に急いで作ったので、もし不具合があったらごめんなさい！😅
その時はコメント欄で優しく教えていただけると助かります🙏）
🔒 プライバシーとセキュリティについて
本ツールは、利用者のプライバシーを第一に考えて設計しています。
完全匿名投票:
誰がアンケートを作成したか、誰が投票したかという個人に関わる情報は一切収集していません。
管理者側でも特定は不可能です。
情報の最小化:
収集するのは「アンケートの設問」と「投票数」のみです。
作成者や回答者のアカウント情報にアクセスすることはありません。
データの取り扱い:
集計結果はリアルタイム表示のためにデータベースに保存されますが、
これはアンケート機能の提供のみに使用されます。
※noteの公式機能ではなく、個人が開発・提供しているツールであることをご理解の上、ご利用ください。
1.回答者側の操作
お試しで、一つアンケートを用意しています。
こちらを元に投票方法を解説します。
ステップ1：「Run Pen」をクリック
埋め込み枠の中央に表示されている 「Run Pen」 というボタンをクリックしてください。
これがアンケートを読み込むための「起動スイッチ」になっています。
ステップ2：選択肢をポチッと選ぶ！
アンケート項目が表示されたら、あなたが投票したい項目を クリック（またはタップ） するだけで投票完了です。😎
投票した瞬間にみんなの集計結果がリアルタイムに反映され、グラフがググッと伸びる様子が見られますよ！
ステップ3：やり直しも自由自在
「あ、やっぱりこっちの意見に変えたい！」という時は、
下にある 「投票をやり直す」 ボタンを押せば、いつでも回答を修正できます。👍
2.主催者側の操作（アンケートの作り方）
続いて、アンケートを作成する主催者側の操作を解説します。
必要なステップは以下の3つだけです。
事前準備：無料サービス「CodePen」のアカウントを作成する。
作成：専用フォームでアンケート内容を入力する。
公開：CodePenにコードを保存し、noteに貼り付ける。
ステップ1 : CodePen（コードペン）に登録する
このアンケート機能は、ブラウザ上でプログラムを実行できるオンライン開発ツール 「CodePen」 を利用しています。
ジェネレーターが作成した専用コードをCodePen側に渡して「保存」する仕組みになっているため、
あらかじめアカウント登録（無料）が必要になります。
CodePenとは？
本来はプログラミング（HTML/CSS/JS）のコードを書いてリアルタイムで結果を確認できるツールですが、今回は「アンケートを表示するための土台」として活用します。
💡念のためCodePenについて補足！
「海外のサービスだし、あまり聞いたことがないけれど大丈夫？」
と不安に思う方もいらっしゃるかもしれません。
CodePenは、一言でいうと
「世界中の開発者が愛用する、オンライン上のプログラミング専用の道具箱」です。
実は、note運営が公式に「記事への埋め込み」を許可している数少ないサービスの一つでもあります。
世界標準のツールとして信頼されているからこそ、noteでも安心して使えるようになっているんですね。
◾️本ツールの役割
今回のアンケート機能も、その自由さを活かして作っています。
ただし、CodePenは本来、プログラミングの専門家向けのサービス。
noteにアンケートを設置するたびに、自分でイチからコードを書くのはとても大変な作業です。
そこで、「あなたが作りたいアンケート」に合わせて、
面倒なプログラミングを自動で代行してくれるのが、このツールの役割です。
■CodePen
■アカウントの作成方法
アカウントの作成方法についてもご紹介します。
まずはCodePenの公式サイトへアクセスし、トップ画面中央にある 「無料で登録する」 ボタンをクリックします。
必要事項を入力、若しくはGoogleアカウントでサインアップします。
これで準備OKです！
ステップ2 :アンケートを作成する
CodePenの準備ができたら、
専用の作成ツールを使ってアンケートの中身を組み立てましょう。
■note用アンケート作成ツール
画像のように、入力項目は非常にシンプルです。
1. 「質問文」を入力する
読者に聞きたい問いかけを入力します。2. 「選択肢」を入力する
デフォルトでは2つ用意されていますが、
足りない場合は 「＋ 選択肢を追加」 ボタンで自由に追加できます。3. 「CodePenを自動生成する」をクリック
入力が終わったら、一番下の青いボタンを押してください。
ステップ3 : アンケートを保存する
ジェネレーターの「CodePenを自動生成する」ボタンを押すと、
自動的にCodePenの編集画面が開きます。
画面が開いたら、右上に表示されている 「Save」 ボタン（画像の赤線部分）をクリックして保存してください。
ここがポイント！
この「保存（Save）」操作を行うことで、初めてnoteに貼り付けるための「あなた専用のURL」が確定します。
保存を忘れるとアンケートが消えてしまうので、必ずクリックしましょう！
これで、アンケートの作成と保存はすべて完了です！
ステップ4 : URLをコピーしてnoteに貼り付ける
保存が終わったら、noteに張り付ける為のリンクをコピーします。
ブラウザのURLをコピーする
ブラウザの一番上にあるアドレスバー（https://codepen.io/...）を選択してコピーします。noteに貼り付けて「Enter」！
あとはnoteの執筆画面でそのURLを貼り付け、キーボードの「Enter」を押すだけ。
（これで貼り付けられなければ、
note上で「＋」ボタン ⇒ 埋め込み ⇒URLをぺースト
でいけます。）
3.利用規約（という名の、ゆるいお願い）
基本的には、無料でどなたでも・どんな用途でも、好きなだけ自由にお使いいただけます！
事前の利用報告なども一切不要ですので、皆さんのnote活動に気軽に取り入れてみてください。
ただ……もしよろしければ、
この記事への「スキ」やフォロー
「使ってみたよ！」というコメント
（気が向いたら……！）次回の開発の励みになる心ばかりのサポート（投げ銭）
などをいただけると、まる。が小躍りして喜びます😏
🛠️ カスタマイズについて（開発者・上級者の方向け）
このツールのソースコードはCodePen側で公開されていますので、CSSでデザインを変えたり、機能を拡張したりと自由にカスタマイズしていただいて構いません！
※コードを改変して使用される場合は、自己責任にてお願いいたします。
※改変されたツールによる不具合やトラブルについては、作者（まる。）は一切の責任を負いかねますのでご了承ください。
もし「こんな便利な機能を追加してみたよ！」といったアイデアがあれば、ぜひ教えていただけると嬉しいです！
今後のアップデートの参考にさせていただきます！😎
4.今後の運用と「大切なお知らせ」
本ツールは、私が開発中のカードゲーム『HorizonNotes』の公式サイトと同じNetlifyやFirebaseというデータベースの無料枠をお借りして運用しています。
そのため、もし予想を上回る大反響をいただき、
通信量の限界（無料枠）を超えてしまった場合、
一時的に「新しいアンケートが作成できない」という状況になる可能性があります😅
「作成済みのアンケート」は止まりません！
ここが一番大事なポイントですが、
すでに作成してnoteに貼り付けてあるアンケートが、ツールの制限によって動かなくなったり消えたりすることはありません。
このシステムは、アンケートを表示・集計する仕組み（Firebase）を作成ツールとは切り離して設計しているため、
万が一ツール側が止まっても、公開済みのアンケートは元気に動き続けます。
どうぞご安心ください！
アップデートと不具合報告
基本的には「気が向いた時のゆるいアップデート」になりますが、
不具合や「こんな機能が欲しい！」という要望があれば、
ぜひこの記事のコメント欄で教えてください。📗
皆さんの声を聞きながら、少しずつ使いやすく育てていければと思っています。
宣伝
最後に、ちょこっとだけ宣伝させてください！
私は普段、「まる。」という名前で、
最新のゲームエンジン「Unreal Engine 5（UE5）」を駆使して、
完全自作の対戦型カードゲームRPG 『HorizonNotes』 を開発しています。
実は、今回このアンケートツールを作ったのも、
「制作中のゲームのイラスト案やパラメータについて、読者の皆さんの意見をもっと気軽に、リアルタイムで聞いてみたい！」
と思ったのがきっかけでした。
ゲーム開発の進捗は、私の情熱が溢れたタイミングで…🤭
日々更新しています。
もしよろしければ、アンケートツールと一緒に、
この『HorizonNotes』が形になっていく様子も併せて応援していただけると、開発者としてこれ以上の喜びはありません！😆
それでは、素晴らしいnoteライフを！🍀
■開発記事
■ゲーム紹介
■自信作のストーリー紹介記事はこちら
また、ゲームに登場するキャラクター募集企画も実施してますので宜しければご応募ください😆
◾️キャラクター募集企画 記事
#アンケート #note #個人開発 #便利ツール #HorizonNotes #プログラミング #拡散希望 #作ってみた #まる #note用アンケート生成ツール
#アンケート機能
