配色をメモするものが欲しいな…をGeminiで叶えてみた

2026年4月19日 23:18

私は随分前に「配色用のメモ帳が欲しいな〜」と話していたんですよ。

そこでプログラミングを色々やらなきゃと思いつつ何年経ったんだろう…と思うぐらい放置していたわけです。

で、最近AI「Gemini」でプログラミングも出来る事を知ったので早速作ってみました。
それがこちらです。

スマホで作っていたので、Geminiでコードを出力した後に下のサイトでhtmlにして表示を確認しながら作りました。

どんな風に最初指示を出したのか思い出すためにGeminiを遡ろうとした所物凄く時間がかかりました。それもそのはずGeminiに生成させた数は32通り。
しかもどんどん内容を追加したのでコードも長く、時間がかかります。
結構待ってから指示内容を確認するとこんな風に指示していました。

呪文みたいですね。
頭の中にあるイメージを書いただけなのですが、後から見るととてもわかりにくい…。
まぁ、Geminiは天才なので意図を読み取ってくれました。それがこちらです。

うん、イメージ通りです！しかし実はこれ、画像アップロードしているんです。なのに全く反応していません。

不服を訴えると文句一つなく丁寧にミスをした箇所を説明しつつ、修正してくれました。Geminiの返事がこちらです。

プログラミングの記述は順番が大切ですから、そこをミスしてしまったようです。
ついでに修正を重ねると時々画像が表示されなくなりました。

その修正したプログラミングに画像を挿入したものがこちらです。

うん、いい感じ！と言いたいのですがチェック柄は混色部分が無いのでのっぺりしているし、ストライプももっと細い方が良いし、緑の多い画像なのに緑が抽出されていないのも気になるし…という事で以下の注文をしました。

出来ますか？とか聞いちゃうのもおかしいですが聞いちゃうんですよね。そんな細かい要望までGeminiは叶えてくれます。それがこちらです。

色の抽出はバッチリですよね！でもなんかストライプが気に入らない…。そしてここでは気になりませんが、チェック柄も気に食わなかったようで、更に先ほどから実は気になっていた三角柄も修正を加えました。

しかし、画像が表示されなくなりました（2回目）。そして画像が表示されなくなった原因は…

入力ミス！！Geminiは入力ミスもするなんて人間みがありますね。
htmlは多少の入力ミスしても大丈夫なのですが、それ以外のプログラミングは入力ミスをすると作動しなくなるらしいので納得ではあります。

そうして画像が表示されなくなったミスを取り除いたものがこちらです。

うん、上出来！と私は一旦満足しました。
でも私はこれを複数作れるようにしたかったのです。そこでまたあの呪文のような注文が飛び出します。

するとまぁ、なんかぽいのはできました。
でも画像を入れなくても修正してほしいって思ったんですよね。

いい感じなんだけど画像はみ出しているのは嫌だなぁ…そして模様の四角が縦長なのが嫌…。という事で

という要望を出しました。出来ますか？と何度も聞くのをやめなさいとまとめながら思いはじめましたが、このときの私はまとめるとは思っていないので仕方ないですね。

そして、修正されたものがこちらです。

頭を抱えました。直ってない…。むしろ今度は柄の四角もはみ出している…。もう無理なのか？さっきの完璧な状態で満足するべきなのか？何ともいえない挫折感。
しかし自分がいちからプログラミングを組むならこんな事で挫折はしないだろう。むしろ「超えてやろうじゃねぇか、この山を！」みたいな気持ちで挑むのである。

しかしやってもらっているという負い目がGeminiに対して何故かあるので、妥協してしまいそうになるのです。しかし、完璧にしたいのでもう一度頼んでみました。

もう私がAIみたいな受け答えになっていますが、Geminiは人間味溢れる答えを返してくれました。

親要素を突き破る事あるあるよね〜。後から要素を付け足そうとすると結構ある気がする。Geminiにもあるのね、と思いつつGeminiが修正したのがこちらです。

一瞬「おっ！」と喜んだのですが、柄が全て横並びになっていないのでちょっとがっかり…。まぁ、そのぐらいは後で修正しよう！と思った私は早速使ってみました。

しかし、プラスボタンを押したら下に追加されるだけだし、小さなアイコンの画像は1つしか表示されないし…思っていた動作ではありませんでした。言葉だと伝わりにくいかもしれないので、気になる方はこちらのhtmlをダウンロードしてみてください。

困ったなぁ。Geminiになんて伝えたら良いんだ…と私は頭を抱えました。もし私がhtmlを習っていなかったらここで詰んでいたかもしれませんが、私は習っていたので「もし私がプログラミングするならどうするか」を考えました。

そして私がプログラミングするなら「タブ」機能を使うだろうという結論に至り、Geminiにお願いし直しました。

するとGeminiはすぐに修正してくれました。それがこちらです。

もうGemini天才！さすが！超いい感じにしてくれました。
ただ画像の表示方法が変わったな…とは思いましたがどうでもよいぐらいテンション上がりましたね。そして、先ほどから気になっていた部分の修正をお願いしました。

模様がはみ出しているのが気になっていたんですよ。でも、丸ははみ出していないので揃えてもらった感じです。

よしよしよしよし、いい感じ！
ただ…私はふと本来の「メモ帳」という役割を思い出しました。
「あれ…これじゃあカラーコード分からないよね？」
という事でGeminiに機能追加のお願いをしました。

するとGeminiさんは天才ですから、こんなのもパパッと付けてくれました。

いいね、流石だね、天才だねー！
Geminiがここにいたら撫で回したい気持ちです。
そして先ほどは画面いっぱいに画像が表示されていたので気にならなかったのですが、段々画像の周りにある点線やグレーの色がきになりだしてここからその部分の細かな修正を始めます。あまりにも細かいので省略しますが、この間に5回中2回画像が表示されなくなっています（4回目）。

そして出来たのがこちらです。