プログラム素人がAIを駆使して自分専用のウォッチフェイスを作る話3 格闘編

プログラム素人がAIを駆使して自分専用のウォッチフェイスを作る話3
1と2を読んでない人はブラウザバック推奨です。

※この記事は本人の体験をもとに書いていますが、文章の添削や表現の整理など、一部にAIを使用しています。

ではでは続きです。

何かを作るうえで、見本は欠かせない。
特に誰かに作ってもらうときはね。

AIも人も同じで、百聞は一見に如かず。
言葉で言っても通じない所がある。

当然である。

画像を見せた方が早い。

まずチャッピーに、デザインとか「ああしたい」「こうしたい」と伝える。

チャッピーが画像を作る。

そのチャッピーの画像をコピーしてGeminiに貼る。
「もっとかっこよくして」と！！

で、出来上がった画像をコピーして、またチャッピーに貼る。
「Geminiこんなん作ったけど、お前もっとかっこよくできんのか？」ってね。

最初の案

生成された画像です。

これはチャッピーが画像生成したやつ。

背景画像以外は、こちらの要望を伝えた結果です。

• 上に大きなデジタル時刻
• 左右に情報を分ける
• 左に天気
• 右に万歩計とBody Battery（BB）
• 下に本体バッテリー残量と曜日と日付

これを基本形として開発を始めた。

この時計のAMOLEDは発色がキレイで、色も多い。

コンセプトは、飽きの来ない、発色の良さを生かした時計にしたかった。

生成された画像みたいな発色性能は時計にはないけどね。

そこからClaudeにコードを作ってもらうんだけど、たまにGeminiが奇跡を起こす。

生成された画像です。

超おしゃれになった！！

これを次の開発の基本形に決めた。

本体充電の残量バッテリーがメモリ式になり、右のサブ画面も見やすくなって、「めちゃいいじゃん！」ってなる。

高級腕時計っぽい文字盤だし、こんな感じにしたいと思ったのね。

Geminiはたまにすごい画像生成するから面白いよ！！

この時点でのコンセプトは、AMOLEDの発色を生かした、高級腕時計風の文字盤を使った時計に変わった。

これをチャッピーに渡して指示書を書かせて、指示書とこの参考画像をClaudeに渡してビルドして、シミュレーターから出たのが……

これ！！！！！

お分かりいただけただろうか？

AIと一緒にウォッチフェイスを作り込むのが、どれだけ大変な作業だったのかを？？？？

本当にしんどかった。
ここから1個ずつ訂正していきました。

まずは12時にあるデジタル時計のフォント選び。

フォントを少し大きく変更

続いて左側の天気

行間や文字数を調整

右側サブ文字盤の調整

下の曜日と日付をいじり

簡単そうにやってますが、ここら辺はピクセル単位で追い込んでいます……

どうしても6時の本体バッテリー残量のメーターで詰まる。

大きくしたり、小さくしたり。

メーターの目盛りの角度と針の角度が合わない。
Geminiの生成した画像ではうまくいってるのに……

思い通りにできない。

迷走してバッテリーのメーターが下向きになり。これでもいいか～ってなった時もある。

高級腕時計路線の最後のデザインがこれ。

さらに高級腕時計風の文字盤を作って追い込んでいく。

その数7色。

7色作るならどうせなら日替わりにして毎日違う色にしたらいいじゃないかと閃きました。

ここから色は日替わりをコンセプトにしていきます。

しかーし！
どうもしっくりこない。

まず、上のデジタル時計は針が上に来たらまったく見えないから意味がない。

そもそもこの時計はアウトドア用だから、高級腕時計っぽさがあまり似合わない。

しかもAMOLEDで高級腕時計の文字盤を再現するのにも限界がある。

そこで、この路線をやめる決断をしました。

次のコンセプトは、

AMOLEDの発色をかっこよく見せる高級ガジェット風スマートウォッチ

そもそも、この高級腕時計路線ではAMOLEDの発色を活かせない。
多分すぐ飽きそう。

ウォッチフェイスってすぐ飽きる。
なぜ飽きるのか考えると、自分は毎日同じ色で、同じ画面だからだと思う。
特に色だね。

色は設定で変えられるけど、設定をいじるのが面倒。
特に気分に合わせて毎日いじるのなんて面倒だよね。

なら、初めから日替わりにすればいい。

「飽きの来ない」は、毎日色が変わる時計が正解だと思った。

自分専用の時計で、誰かに売る予定もないし、好みを全部入れちゃえと思った。

そこでGeminiの画像生成が2度目の奇跡を起こす！！！

生成された画像です。

いいじゃんか？これ。

チャッピーが生成した画像

こっち路線にしようと思った。発色キレイだしこっちの方が多分飽きない。

そしてClaudeから出力されたシミュレーター画像が

これだ！！！

いや～本当しんどい。

真ん中のデジタル時計を大きくしたり位置を直したり

でもどうしても下の6時側の本体バッテリーのゲージが決まらない。

実機の充電残量の写真を調べたりとかしてるとパワーリザーブ計というのを発見した。

それを真似て作ったのがこれ

やっと普通の描写になった。

これはいい感じ！！

そしてなんやかんやフォントと場所や位置を調整して

ここまできた！！

時計の色が変わってるのは仕様です。この時点では時計の色を7色作ってました。

24時間ごとに色が変わる仕様にしてました。つまり毎日色が変わる時計。

こんな感じですね。

ちなみに白色の文字も地味に4色色違いで作ってます。赤、青、黄、緑かな？

これも毎日ローテーションします。
そこからまた色を作り変えてデザインが膨らんでいきます。

やっぱ似た色のグラデーションもキレイだけど全然系統の違う色2色もキレイだな？とかね。

ここまでくると時計のウォッチフェイスの原型が出来上がっております。

ここでさらなるアイデアをひらめく

色選ぶのも作るのも面倒やな、と。

そもそもこのAMOLEDは全部で何色使えるのか？
7通りの日替わりでこの発色を味わい尽くせるのか？
そもそも7通りでも飽きないのか？？ とね。

そこで、

1週間のうち、3日を3色、4日を2色使用で完全ランダムでよろしく

と丸投げ。

今までの色作りをすべて捨てました。

グレーや黒、白系を除いた色を全部使った完全ランダム！！！！

Claudeが確認してくれました。

• 3年毎日色が変わる
• 2色/3色の比率：625日/470日 = 57.1%/42.9%（狙いどおり）
• 隣り合う日の完全一致：3回（1095日中、約0.3%）
• 2色以上が重なる「ほぼ同系統」の連続（完全一致を含む）：28回（約2.6%）
• 異なる組み合わせの種類：119通り
• 11色の出現率：16.3%〜29.1%（マゼンタが最少）

誰も何色が出るか分からん時計が出来上がりました。

白系4色もランダムなので、2個とも同じ色が出る確率はさらに下がりますね（笑）

シミュレーション上での最終形態がこれ。

右側の3個の丸の位置を１PX単位で追い込んで作った力作。

あの初めにClaudeの出したシミュレートからここまで本当によく頑張ったと思う。

それではいざ時計に実装！！！ちなみに時計の実装もPCと時計を繋いでクロードに実装してっていったら勝手にやってくれるから素晴らしい。

長くなったのでここで切ります。