- 投稿日：2025/11/13
- 更新日：2025/11/16
まずは、僕が作ったツールを見てみてください。
2つ作成したので、どうかあたたかい目でご覧ください！🙏
※僕はコーディングの知識ゼロです。
①宿題リスト2週間チャレンジ 投稿チェッカー
「#2週間チャレンジ」のリベッター投稿文をここに下書きすると、
✅ ハッシュタグ完全一致のチェック
✅ 140字以内のチェック
✅ 誤字脱字のチェック
✅ ミニアドバイス
をしてくれるツールです。
↑ハッシュタグが間違っていると、このように警告が出ます🚨
「有効な投稿ができてるか」を楽しくセルフチェックできる、小さなAIアシスタントのような存在になるはずです。
②稼ぐ力を伸ばすための10箇条セルフチェッカー
「稼ぐ力を伸ばすための10ヵ条」に、今の自分はどれくらい当てはまってるか？をその場で診断できるツールです。
学長がおっしゃっているセルフチェック10問に答えて、あなたの稼ぐ力の現在地と、伸ばすべきポイントが分かります。
↑このようにレーダーチャートとミニアドバイスがもらえます🎁
自分に足りないことと、次の一歩が見える、そんな自己分析ツールができました💡
③2週間チャレンジ振り返りツール（小金持ち山スタイル診断）
2週間チャレンジを完走して燃え尽きないように、
✅ うまくいったこと
✅ つまずきそうになったこと
✅ 次の一歩をどうすれば良いか
を楽しく・可愛く整理することができます！
↑こんな感じで、選択した回答によってアドバイスが出てくるように設計しました✨
たくさんバリエーションを用意したので、
2週間チャレンジの取り組み方がこんなに違うのか！
とリベ友さんとの違いを楽しむのも良いと思います😊
めちゃくちゃすごくないですか！？😳
もう一度言いますが、僕はコーディングの知識ゼロです。
なのになぜ、こんなツールが作れたのか。
答えは、
チャッピー（ChatGPT）と一緒に作ったから
これです。
専門用語もわからないまま、「こんなツールがあったら便利だな」と思って、少しずつ会話を重ねながら形にしていきました。
「HTMLもCSSも書けないのに、本当にできるの？🤔」
と思われるかもしれません。
でも、できたんです！
しかも、どちらもわずか1時間ほどで。
この記事では、僕が作った「②稼ぐ力を伸ばすための10箇条セルフチェッカー」を例に、チャッピーと二人三脚でWebサイトを完成させた過程を、すべて公開します。
「コーディングできないけど、アイデアを形にしたい」
と思っている方に、少しでも勇気を届けられたら嬉しいです😊
なぜ、Webサイトを作ろうと思ったのか
きっかけは、「宿題リスト2週間チャレンジ」です。
チャレンジを進めていくうちに、
🗣️チャレンジが失敗したらどうしよう
🗣️もっと学びを深めたい
そんな投稿を、たくさん目にするようになりました。
共感しながら読んでいるうちに、
同じように悩んでいる人に、自分なりの形で力になりたい！✊🔥
という気持ちが芽生えました🌱
これが、僕がWebサイトを作った「目的」です。
でもその時、頭の中にすぐマインドブロックの言葉が浮かびました。
😣コーディングなんてできない…
😣Webツールの作り方もわからない…
😣プログラミングってめちゃくちゃ難しそう…
そんな思い込みが、ずっと行動をブレーキさせていたのです。
しかし、シャワーを浴びている時、
「もしチャッピーにお願いしたら、形になるんじゃ…？💡」
とふと閃いたんです。
これが、すべての始まりでした。
「コーディングはわからなくても、目的を形にするぞ✊🔥」
その一言を胸に、試しにチャッピーに相談してみることにしました。
返ってきた答えは、
🤖「できますよ。」
でした。
そこから、僕の「Webツール作りチャレンジ」が始まりました。
Webツール作りの流れ
「Webツールを作る」と聞くと、難しそうに感じるかもしれません。
ですが…！
めちゃくちゃ簡単です！✨
たった5つのステップで完成までたどり着けます。
この先を読み進めれば、その簡単さに衝撃を受けるはずです😎
🧰 準備するもの
この4つだけです。
難しい設定もソフトも必要ありません。
チャッピーが自動でコードを生成してくれるので、コピー＆ペーストだけで動かせます！✨
🗺️ Webツール作成ステップ
僕が作ったときの流れは、たった5ステップでした。
①前提を読み込む：チャッピーに意図を伝える
②たたき台を作る：初期コードを出してもらう
③修正を重ねる：動作やデザインを整える
④装飾を加える：遊び心をプラスする
⑤公開する：ブラウザで開き、完成版を公開する
簡単そうですよね！笑
この順に進めるだけで、知識ゼロからでもWebツールを作り、公開までできるようになります。
次の章では、この5ステップを実際にどう進めたのか。
チャッピーとのやり取りや修正の過程を交えながら、具体的にお見せします。
各ステップの進め方
Webツール作りは、テクニックというよりも、「会話の積み重ね」が大事です。
チャッピーと対話しながら、アイデアが少しずつ形になっていく過程は、コーディングのプロと共同作業をしているような感覚でした。
ここでは、僕が実際に行った5ステップを順に紹介します。
① 前提を読み込む
実は、このステップが1番大切です。
僕が入力したプロンプトが、こちらです。
あなたはプロのプログラマーです。リベシティの教えである、”「稼ぐ力」を高めるための10箇条”の「セルフチェック」ができるwebツールを作りたいです。まずは、以下のブログ記事を読み込んでもらえますか？ https://liberaluni.com/10-boost-earn-point
たったこれだけです。
専門用語は使っていません。
ポイントは、以下の通りです。
💡ポイント💡
①役割を与える（あなたはプログラマー）
②何がしたいかを伝える（webツールを作りたい）
③前提情報を与える（10箇条の情報URL）
もしかするとこれだけでも不充分かもしれませんが、チャッピーは僕の意図を汲み取ってくれました。
② たたき台を作る
次も、めちゃくちゃ簡単です。
「チャッピーからの質問に答える。」
これだけです。
僕の場合は、以下5つの質問が出力されました。
次のステップへ進む前に、要件を一つずつ確認させてください（順に伺います）。実用性を最優先に、最短で“動くプロトタイプ”までお連れします。
[確認Step 1：回答形式・採点方式]
A) 自由記述のみ（内省重視）
B) 自由記述＋自己評価スコア（0〜3の4段階など）
C) 選択式テンプレ＋自由記述（実装が最もスムーズ）
[確認Step 2：結果の見せ方]
A) 10項のレーダーチャート＋改善提案
B) 強み/弱みの上位3つ要約＋次の一手チェックリスト
C) 週間アクションプラン自動生成（各Q→ToDo化）
[確認Step 3：データの扱い]
A) ローカル保存のみ（ブラウザLocalStorage）
B) 匿名クラウド保存（将来の継続利用・進捗グラフ化）
C) サインイン（Google等）対応を視野に当面A
[確認Step 4：対象プラットフォーム]
A) Web（PC/スマホ両対応PWA）
B) iOS/Androidネイティブ（将来）
※まずはAで速攻リリース→利用状況でB検討が定石です。
[確認Step 5：ブランド/デザインの方向性]
A) リベシティ世界観に寄せた明るい配色（青系＋白ベース）
B) あなたの既存ブランドに合わせた配色・UI（例：高彩度・ポップ）
C) 最小限のミニマルUI（実験版）
差し支えなければ、上記Step 1からご希望をお聞かせください。私の方で、即座にプロトタイプ構成（画面遷移図、UIワイヤー、データモデル、採点ロジック）まで具体化いたします。前向きに、着実に組み上げてまいります。
なにやら難しい専門用語も出てきましたが…、
安心してください。
僕も意味わかりません（笑）。
でも、質問には答えられます！💡
以下のように回答しました。
---------------------------------------------------------------------
[確認Step 1：回答形式・採点方式]
B) 自由記述＋自己評価スコア（0〜3の4段階など）
[確認Step 2：結果の見せ方]
A) 10項のレーダーチャート＋改善提案
[確認Step 3：データの扱い]
A) ローカル保存のみ（ブラウザLocalStorage）
[確認Step 4：対象プラットフォーム]
A) Web（PC/スマホ両対応PWA）
[確認Step 5：ブランド/デザインの方向性]
A) リベシティ世界観に寄せた明るい配色（青系＋白ベース）
---------------------------------------------------------------------
そしたら、以下のような長〜いHTMLコードを出力してくれたんです！
はい、意味不明です（笑）。
しかもこの先あと5スクロールくらい続いています。
とりあえず、このステップはここまで。
HTMLコードアレルギーにならないように注意しましょう😳
③修正を重ねる
はい、「修正する」と言われても、そもそもこのコードがどうなっているかがわかりませんよね。。
それも、チャッピーに聞きました。
「HTMLコードをWebページとして表示するにはどうしたらいい？」
すると教えてもらったのが、
Google Sitesを使う
という方法でした。
1.Google Sitesを開く→ログイン
2.新しいページを作る
3.右側メニューで「挿入」→「埋め込む」タブを選ぶ
4.HTMLコードをコピペして貼る
5.保存 → 公開
簡単に図解にすると、こんな感じです。
これで、先ほど出力された「意味不明コード」がどうなっているかがわかります！！
このページを実際に操作しながら、チャッピーに修正点を指摘していくのです。
たとえば、
🙏「0/1/2」の評価がそれぞれ何を表すかの説明を入れてください。
🙏「稼ぐ力を伸ばすための10箇条セルフチェックシート」をタイトルにして、その説明をしてください。
🙏「メモ（任意）」ではなく、「回答」にしてください。
🙏結果はページ下部に出してほしいです。
🙏平均値の出力はいらないです。
🙏提案は①②③の番号を振ってください。
🙏10箇条の全文を記載してください。
🙏「回答：」ではなく「Q1：」「Q2：」…としてください。
といった感じです。
めちゃくちゃ注文が多かったと思います…笑
それでも！
チャッピーは2つ返事で、何度の修正にも数秒で応じてくれました😳✨
コードを自分で修正せずに、意図を伝えるだけで、機能がどんどん進化するという不思議な体験でした。
この繰り返しで、Webツールの完成度を高めていきます。
④装飾を加える
これで完成でも良かったのですが、僕の好奇心が歩みを止めませんでした。
使うだけでは、まだ「心が動くツール」にはなりません。
😤せっかく作るなら、テンションが上がるツールにしたい！
と考えたのです。
そこで取り入れたのが、遊び心。
🙏サイト全体をもっとパステルで彩度を高くしてください。
🙏「リベシティ」であることがわかるような工夫（学長ライオン、お金、勉強、力、など）を施してください。
🙏真面目だが柔らかい印象のフォントにしてください。
🙏もっと柔らかく背中をそっと押すような文体にしてください。
🙏「総評」を入れて、結果をベタ褒めするようにしてください。
ここは正解はありません。
あなたの好みに合わせたWebツールを、チャッピーにお願いしてみましょう✨
この変化を見たとき、思わず笑ってしまいました😆
どうですか！
コーディングの知識がないのに、ここまで装飾できたんです！💡
⑤公開する
すべての調整が終わったら、あとは公開してシェアするだけ。
この方法も、チャッピーに質問します。
1.「公開」の右側「▼」→「公開設定」
2.「ウェブアドレスを作成」→「保存」
3.「公開」の右側「▼」→「公開したサイトを表示」
4.URLをコピー→シェア
これだけです！
公開した瞬間の感覚は、少し特別でした。
「コードを書けない僕が、Webツールを作って公開した。」
という経験です。
これが、たった1時間の出来事だったんです！！😳
チャッピーを活かす3つのコツ
Webツールを作って分かったのは、
チャッピーは
❌「全てを任せる万能AI」ではなく、
⭕️「一緒に考える相棒」だということです。
大事なのは、コーディングの知識よりも活かすコツ。
最後にもう一度、その3つのコツをお伝えします。
① 役割を与える
いきなり「Webツールを作って」と頼むよりも、
「あなたはWebプログラマーです」
と役割を与えるだけで、回答の精度がぐっと上がります。
チャッピーはその役割になりきるAIなので、肩書きを決めてあげるだけで出力が安定します。
② ゴールを伝える
「どんな状態になれば成功か」を明確に伝えます。
「10問に答えたら結果と提案が出るツールを作りたい」
といった具合に、完成形のイメージを先に共有すると、最短ルートで答えにたどり着きます。
③ 前提情報を与える
Webツール作りに必要な情報や制約条件を読み込ませます。
チャッピーは、会話を重ねるうちにこの前提を忘れてしまうこともあるので、途中で何度か再確認させるとより正確になります。
前提をきちんと共有しておくことが、「思っていたのと違う…」を防ぐ確実な方法です。
▼まとめ：チャッピーとWebツールを作ってみよう！
いかがでしたか？
今回の記事は、プロのプログラマーを超えるための話ではありません。
「できない自分でも始められる」
という発想の転換の話です。
「コードを覚える」から「コードを書いてもらう」という発想を持つこと。
その一歩で、新たな世界を覗くことができます。
難しい専門知識がなくても、チャッピーに意図を伝えながら形を整えていけば、「できない」が「できた！」に変わるんです。
必要なのはたったひとつの好奇心。
「これ作ってみたいな😊」
その発想さえあれば、チャッピーはきっとあなたの右腕になります！
ぜひ、チャレンジしてみてください！
それでは最後に、恥ずかしすぎる僕の「稼ぐ力スコア（25年11月現在）」でお別れです。
最後まで読んでいただき、ありがとうございました！💡
（無傷を恐れず前に進みます！！！恥）
