HEX形式のカラーコードの色当てゲームWebアプリを作ったよ！ ～プロンプトもあるよ～
概要
Claudeくんにコードのだいたい全てを書いてもらってこんなWebアプリを作りました。
TOP画面(入門)
マスター
解き終わった後
「楽しみながらHEX形式のカラーコードが読めるようになる」を目標にしています。
僕も最初は全然解けなかったのが、一時間ぐらいぽちぽち遊んでいるとかなり読めるようになってきてノーマルならすいすい解けるようになりました。
なかなかおもしろく勉強できるようにできてると思うので、触ってみてほしいです。
リンクは以下
HEXカラーコード絶対色覚テスト
HEXカラーコードって何？
#FFFFFFのような形式で色を表現する方法のことを、HEX形式のカラーコードといいます。
具体的な色の決まり方としては、最初の2桁が赤、次の2桁が緑、最後の2桁が青の成分を表わしています。RGBの順番ですね。
例えば#FF0000だと、純粋な赤の色の表現となります。
赤、緑、青の各成分の値は16進法で256段階で、00（最も弱い）からFF（最も強い）までの範囲で指定されます。
この3つの成分の強さで、HEXカラーコードでは様々な色が表現できるようになっています。
カラーコードを読むうえで注意しないといけないのは、各成分が強いと、絵の具を混ぜ合わせたように暗くなる（減法混色）のではなく、光の色を足し合わせたように明るく（加法混色）なります。
このカラーコードの文字列を見て色がわかるようになりたいなーと思ったのがアプリを作ったきっかけです。
どうやって作ったの？
Claudeにプロンプトを投げてhtmlファイルにぺたぺた貼り付けて修正したい点を言えばそれだけで終わり！
使ったプロンプト
以下が、ClaudeのClaude3.7Sonnetをブラウザから利用して実際に使ったプロンプトです。
3回ぐらいちょっとずつ最初のプロンプトを変えてガチャを回しましたが、「より良いwebページを作るため、下記の要件を適宜修正してください。」が良かったんでしょうか？ これが一番デザインが好みでした。
（開発の前に要件を修正させたかったのに開発を始めちゃいましたが・・・）
より良いwebページを作るため、下記の要件を適宜修正してください。
「HEX色当てゲーム」というwebページを作りたいです。
・HEXカラーコードを見て、色がどれにあたるのかを当てるページです
・1枚の静的ページによって、HTML、CSS、JSで構成されます
・上部には、問題セクション、下部には、HEXカラーコードの説明がされています。
・難易度は、入門、ノーマル、マスターです
・どれかを選択すると、10問の問題が上部から連なれる形で始まります。
・問題は、HEXの文字列から、色の選択肢をクリックすることで回答します。
・問題は選択すると、即座に正解なら緑、不正解なら赤に囲まれ、不正解の色のカラーコードと正解の色のカラーコードが表示されます。そして選択できなくなります。
・問題を最後まで選択すると、「あなたは・・・あなたの結果は・・・
【10問中：N問正解】
[もう一度挑戦する] [SNS共有ボタン]」というようなダイアログと、Xへのツイートのリンクが出ます
・入門の問題では、HEXの文字列が、3つの色で描画されます。つまり出題を#80818bとするならば、最初の二文字は80ffff、次の二文字はff81ff、最後の二文字はffff8bで色を付けられます。
・ノーマルの問題では、HEXの文字列が、ランダムな1種類だけ色づけられて描画されます。つまり出題を#80818bとするならば、どの二文字を色づけるかランダムで決まり、その色が最初の二文字だとするならその二文字だけが80ffffで色を付けられます。
・マスターの問題では、HEXは色づけられません。
・入門の問題では、色の選択肢はランダムな二種類です。ただし、正解と不正解の色の「色の近さ」が250よりも低い場合は、不正解の色を繰り返しランダムで選択しなおすするようにしてください。
・「色の近さ」とは、HEX値をRGB値に変換し、それぞれの成分の差の二乗和の平方根を計算して求められるものです。
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
function colorDistance(hex1, hex2) {
const rgb1 = hexToRgb(hex1);
const rgb2 = hexToRgb(hex2);
const dr = rgb1.r - rgb2.r;
const dg = rgb1.g - rgb2.g;
const db = rgb1.b - rgb2.b;
return Math.sqrt(dr * dr + dg * dg + db * db);
}
const distance = colorDistance('#ff0000', '#ff00ff'); // 例: 赤とマゼンタの距離
console.log(distance);
・ノーマルの問題では、色の選択肢はランダムな三種類です。ただし、正解と不正解の「色の近さ」が200よりも低い場合は、不正解の色を繰り返しランダムで選択しなおすようにしてください。
・マスターの問題では、色の選択肢は5種類です。
・1つ目：ランダムに決定された正解の色
・2つ目：正解の色から色の距離がおよそ「40」になるようにランダムに選択された色
・3つ目：正解の色から色の距離がおよそ「80」になるようにランダムに選択された色
・4つ目："3つ目の色"から色の距離がおよそ「40」になるようにランダムに選択された色
・5つ目：ランダムな色。ただし、正解の色から、色の距離が「80」よりも小さい場合、再度ランダムに選択しなおす
・全体的に画面は、白を基準とした簡潔な、しかしれがスタイリッシュなページのデザインにしてください。色当てゲームですからね。
・スマホとWeb対応のレスポンシブデザインでお願いします。
・結果として表示するダイアログは以下の通りです。
あなたの結果は・・・
【10問中：N問正解】
[もう一度挑戦する] [SNS共有ボタン]
・ページの一番下部には、以下のような表示をお願いします。「Copy Right： mnao（縁で縁どられた小さいアイコン画像の挿入（これは後程自分がします））、mnaoの文字列と画像に（https://x.mnao_X）へのリンクを」
・HEXとは？というボタンを押すと、以下の説明が展開されて開きます。もう一度押すと閉じて非表示になります。
[HEXとは？]
・HEXは「Hexadecimal」（16進数）の略で、色を16進数の数値で表現します。
・#記号で始まり、その後に6桁の16進数が続きます。最初の2桁が赤(R)、次の2桁が緑(G)、最後の2桁が青(B)の成分を表します。
・00が最も弱く、FFが最も強いです。
（ここはHEXカラーコードの文字列に実際に色を塗りましょう。#FFFFFFのところだけ、グレーで輪郭を取り、白の文字が見えるようにしてください）
[HEXカラーコードの例]・#000000：すべての成分が00なので、光が全くなく、黒になります。
・#FFFFFF：すべての成分がFFなので、すべての色が最大限に強く、白になります。
・#808080：全て80なので、中間のグレー色となります。
・#FF0000：赤色の成分がFFで最大、他の成分が00なので、純粋な赤色になります。
・#00FF00：緑色の成分がFFで最大、他の成分が00なので、純粋な緑色になります。
・#FFC0CB：赤の成分を強め（FF）、緑の成分を少なめ（C0）、青の成分を中程度（CB）にすることで、柔らかいピンク色を表現しています。
（長い縦の二行のテーブルで以下を書いてください）
[16進法の表現]
10進数 16進数
0 00
10 0A
20 14
30 1E
40 28
50 32
60 3C
70 46
80 50
90 5A
100 64
110 6E
120 78
130 82
140 8C
150 96
160 A0
170 AA
180 B4
190 BE
200 C8
210 D2
220 DC
230 E6
240 F0
250 FA
255 FF
これをClaudeくんに投げ込むだけで、今の元となるコードを全て作成してくれました。すごい時代だ・・・
ここから、画像の付け方を聞いたり、いくつかバグを取ったり、画像の手入れなどをして多少修正などしていきました。
プロンプトへの反省としては、正解したときと不正解のときの挙動を明示的に言っていなかったので、「正解の色は#8080FFでした！」のようなコメントを言って、それが分からないから問題解いてるんじゃい！ というようなことがありましたね。具体的な道筋はまだまだちゃんと言ってあげないとまだまだAIはわからないみたいです。
まとめ
- Claudeでこれぐらいの静的ページのクイズアプリぐらいはもはや一発でできる
- バグ取りや内容の修正はまだまだ必要
- 開発の方向性は自分で詰めないと変な実装になるところはある
Discussion