Day 14 - 12/14
Dice Art Generator - サイコロモザイクアート生成ツール
StreamlitPython
Claude Code
概要
概要
画像をサイコロの目（1〜6）だけで表現したモザイクアートに変換するWebアプリケーションです。
主な機能
- 画像アップロード: JPG/PNG画像をドラッグ&ドロップで簡単アップロード
- サンプル画像: 8種類のテスト用サンプル画像を内蔵
- パラメータ調整: サイコロ数、コントラスト、明暗反転をリアルタイム調整
- プレビュー表示: サイコロのドットを実際に描画した完成イメージを表示
- 設計図出力: CSV/Excel形式でダウンロード可能
- 購入リスト: 各目（1〜6）の必要個数を自動計算
デザイン
AppleのLiquid Glass UIを参考にした、透明感のあるモダンなデザインを採用。グラスモーフィズム効果、フローティングアニメーション、ホバーエフェクトで洗練されたUXを実現しています。
制作時間
2時間
学んだこと・振り返り
学んだこと
Streamlitの制約
- `st.markdown`内のHTMLは自己完結する必要がある
- 開始タグと終了タグを別々の`st.markdown`に分けることはできない
- Streamlit内部要素は`[data-testid="stImage"]`などで直接CSSターゲティング可能
画像→サイコロ変換ロジック
```python
dice_value = floor((255 - pixel_value) / 256 * 6) + 1
```
このシンプルな式で、暗い部分→6（黒ドット多い）、明るい部分→1（白ドット少ない）のマッピングが実現できる。
Liquid Glass UIの実装
- `backdrop-filter: blur()`で背景ぼかし
- `rgba(255,255,255,0.15)`で半透明の白
- `inset box-shadow`でガラスの光沢感
- `cubic-bezier`で流動的なアニメーション
初回プロンプト（計画）
この動画を見て、サイコロでアートを描くことができることを知りました。
絵やアートワーク、写真からダイスアートワークの制作原本（どの場所にどのサイコロの目を置けば完成するかがわかる図）を作ることはできる？
https://www.facebook.com/share/r/17y24oQby9/?mibextid=wwXIfr
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Claude Code
⭐⭐⭐⭐⭐
良かった点
仕様書を渡すだけで、画像処理ロジック（ピクセル値→サイコロ目への変換）からサイコロのドット描画、Streamlit UIまで一気に実装してくれた。CSSの問題（Streamlitでの開閉タグ分離不可）も原因を特定して修正してくれた。
改善してほしい点
Streamlit特有の制約（HTMLの開閉タグを別々のst.markdownで使えない）を最初から考慮してくれると、手戻りが減ってさらに良かった。
総合コメント
詳細な仕様書があれば、複雑な画像処理ロジックとモダンなUI（Liquid Glass風）を含むアプリを1.5時間程度で完成させることができた。デプロイまでスムーズにサポートしてくれて非常に満足。
公開日: 2025/12/13