TodoアプリのCSSを色々変える

CSSを色々変える

CSS (Cascade Style Sheets)を調べていくと、その表現力はかなり豊富で好感をもちます。一方で、開発を進めていくとユーザ定義のクラスが増加します。覚えるクラスが増してお手上げになるかもしれません。この課題を解決するためにいくつかの手法が考案されているようで、その一つとしてTailwind CSSは位置付けられるでしょう。

Tailwind CSSが有効だとは思うのですが、勉強不足のせいもあるのか、既存クラスの長い組み合わせを手作業で入力するのは中々辛いかなという印象をもっています。そこで、生成AIを利用してCSSを触らずにスタイルを指定することはできないかと考えました。

事例としてTodoアプリのスタイルを対象とします。Todoアプリを生成AIを使って作る例はネットで多く扱われています。シンプルに「Todoアプリを作って」と言えばコード生成してくれます。

この生成されたTodoアプリのスタイルを色々と変更してみようと思います。「もっと親しみ深く」など、シンプルなプロンプトの指示でどれくらいスタイルを変更できるかを本稿では紹介します。使った生成AIはGoogle Geminiです。コード生成とそのプレビューを出すためにCanvasモードを使います。

準備: Todoアプリを作る

Todoアプリは、日常のやるべき事をリストで記録し、実行した事をリストで消してい くアプリです。

Todoアプリの主な操作は以下です。

1. タスクを追加する
まずは、頭の中にあるタスクを書き出します。 画面の入力欄をタップしてタスク名（例：牛乳を買う、資料作成など）を入力して追加ボタンを押します。
2. タスクを確認・整理する
追加したタスクは一覧で表示されます。
3. タスクを完了にする
仕事が終わったら、タスクの左側にある チェックボックス をタップします。ラジオボタンを押すと、対応するタスクだけリストアップされます。

これを、 Gemini で作ります。 詳細操作を指示しなくても「Todoアプリを作って」と言えば通じますが、ここでは少し実装を意識した指定をします。実行前にはプロンプト入力欄下にあるツールボタンをクリックしてCanvasに 設定します。

プロンプト (Gemini Canvas)
SQLite(WebAssembly)とhtml/javascriptとTailwind CSSを使って、一番シンプルなTodoリストアプリを作りたい。コードを生成してプレビューして。

以下が生成されたTodoアプリのスクリーンショットです。

SQLite(WebAssembly)は、SQLiteの公式プロジェクトが提供する、ブラウザ上で高速に動作するリレーショナルデータベースです。データベースサーバを立てずにSQLが確認できるので、 本稼働前にささっとプロトタイプを作って動作を確認することができます。そんな理由だけで採用したのですが、少し大げさだったかもしれません。正直なところSQLの採用は本稿の趣旨(CSSの変更)とは無関係です。もっと簡単な仕組みにしておけばよかったと後悔しています。

画面の右上に</> SQLデバッグボタンがあります。これを押すと下にターミナルが出現して、sql動作ログを確認することができます。ターミナルの右上にDBのリセットボタンがあります。これによりDBの中身を消去できます。消去しない限りずっと残ります。（Chromeの場合）

以下は</> SQLデバッグボタンを押したときに現れるターミナルのスクショ。

Tailwind CSSは、HTML内に規定のクラスを組み合わせて効率的にデザインを構築できるCSSフレームワークです。クラスを定義せずに直接スタイルを記述・適用します。小さいアプリの内はクラスを一つひとつ定義して適用するのが分かりやすいかもしれませんが、ある程度大きなアプリになると定義したクラス数が膨大になり管理が困難になります。Tailwind CSSではこのようなクラスの定義を回避しています。

生成されたTodoアプリ

試しに新しいタスクを２つ入力してみました。「牛乳を買う」が終わったら左のチェックボックスを押します。「牛乳を買う」が完了した印に取り消し線で消されます。

Todoアプリのデザイン表現

本稿では、CSSを編集してデザイン変更するのではなく、以下の画面のイメージをプロンプトで指定してデザイン変更をします。以下のような9例を試しました。 1～5は、形容詞でデザインを指定するものです。

1. 「軽やかな・浮遊感のある」 要素が画面から浮いているような、清潔 感のあるデザイン
2. 「重厚な・信頼感のある」 銀行アプリやダッシュボードなど、堅実 さが必要なデザイン
3. 「親しみやすい・柔らかい」 SNSなどのツールで、ユーザーの心理的ハードルを下げます。
4. 「鋭い・テクニカルな」 エンジニア向けツールや、最新のテクノ ロジーを感じさせたい時に
5. 「動的な・生き生きとした」 ユーザーの操作に対して反応を返す、生命感のある表現

6. three.jsを用いた3Dモデルがマウスに反応する画面: three.jsはWebブラウザ上で3Dグラフィックスを簡単に作成・表示できるJavaScriptライブラリです。
7. ポップにネオブリュタリズム（Neobrutalism）: 太い黒の枠線、くっきりとした影、鮮やかな原色（ビビッドカラー）を組み合わせた、大胆でポップなWeb・UIデザイン
8. RoughNotation（ラフ・ノテーション） 調: Rough Notationは、Webページ上のテキストや要素に対して、手書き風のユニークな注釈（マーカーや丸囲みなど）を追加してアニメーションさせることができる軽量なJavaScriptライブラリです。 グラフィック表現を温かみのある手書き風（スケッチ調）にする人気ライブラリ「RoughJS」をベースに作られており、エンジニアやデザイナーの間でWebサイトの「重要な箇所」を視覚的に目立たせる演出として広く使われています。
9. HP/LP(Landing Page)のデザイン調: 特定のHPまたはLPを指定して、その画面の雰囲気に合わせたスタイルを指定するもの。

以下にプロンプト例と画面のスクショおよび変更点を掲載します。変更点の文章は生成AIが出力したものです。コメントは筆者の意見です。

Todoアプリのデザイン変更 1

プロンプト (Gemini Canvas)
Tailwind CSSを更新して、軽やかな・浮遊感のある画面にして。

主な変更点

1. 背景と浮光エフェクト: 淡い背景グラデーションとゆっくりアニメーションするソフトな発光オーブ（blur-3xl）を追加し、画面全体に奥行きを持たせました。

2. すりガラス風パネル（Glassmorphism）: カードやヘッダーに bg-white/70 backdrop-blur-xl や border-white/80 を適用し、背景の上にふわっと浮かんでいるような半透明の質感に仕立てました。

3. ホバーアニメーション: タスクカードや入力フォームにホバー時の上昇アニメーション（hover:-translate-y-1）と柔らかいシャドウ（shadow-xl shadow-indigo-100/40）を追加し、浮遊感を強化しました。(スクショでは分かりませんが、実画面でカーソルを移動すると分かります。)

4. 角丸とグラデーションアクセント: 各要素の角丸を極限まで柔らかくし（rounded-2xl, rounded-3xl）、メインボタンやチェックボックスにソフトなグラデーション（Indigo to Purple）を適用しました。

コメント：

カーソルを入力域に移動させると入力域がフワッと浮きます。

Todoアプリのデザイン変更 2

プロンプト (Gemini Canvas)
重厚な・信頼感のある画面にして。

主な変更点

1. シック＆重厚なカラーパレット: 浮遊感のあるパステルカラーから、深く落ち着いたディープスレート（bg-slate-950 / bg-slate-900）と金属的なアクセントカラー（ブルー・スチール・エメラルド）を中心とした配色に変更しました。(暗すぎ？)

2. ソリッドで安定した構造: ふわっとした浮遊オーブやアニメーションを撤去し、直線と重みのある堅牢なパネル構造（border-slate-800 / shadow-2xl）に再設計。信頼感の高いエンタープライズ・ダッシュボードのような質感に仕立てています。

3. 角丸とタイポグラフィの引き締め: 角丸を控えめでソリッドな形状（rounded-lg〜rounded-xl）にし、フォントのウエイトやトラッキング（文字間隔）を整えることで、精巧で質実剛健なUIを実現しました。(タスク無しの表現も変わっています。)

コメント：

ちょっと暗すぎたか。全体をもう少し明るく、と指定すべきだったかも。

Todoアプリのデザイン変更 3

プロンプト (Gemini Canvas)
親しみやすい・柔らかい画面にして。

主な変更点

1. 温かみのあるカラーパレット: ダークモードから、柔らかなクリーム・ウォームベージュ（bg-orange-50/40）を基調とした明るく優しいライトトーンへ切り替えました。

2. 丸みを帯びたポップな形状: カードやボタン、インプットの角丸を極限まで柔らかく（rounded-2xl 〜 rounded-3xl）し、手になじむソフトなデザインに仕立てました。

3. 優しく心地よいインタラクション: ぷっくり感のあるボタン（アンバーカラー bg-amber-500）や丸っこいチェックボックス、マイルドな影（shadow-orange-100/60）により、毎日のタスク管理が楽しくなる親しみやすさを与えています。

コメント:

ガラッと変わって面白い温かみのあるデザイン。いつも使う画面として好感触か。

Todoアプリのデザイン変更 4

プロンプト (Gemini Canvas)
鋭い・テクニカルな画面にして。

主な変更点

1. シャープな角丸・直線のグリッド構造: 角丸（rounded-2xl）をすべて排除し、エッジの立ったシャープな形状（rounded-none / rounded-sm）と微細な背景グリッド線（bg-grid）を採用しました。

2. テクニカルなカラーパレット & ネオンアクセント: ピッチブラック/ダークネイビー（bg-[#080c14]）を基調に、ターミナル風のシアン（text-cyan-400）、エメラルドグリーン、ローズレッドを配した高コントラストな高密度UIに変更しました。

3. モノスペースタイポグラフィ: JetBrains Mono フォントを採用し、コマンドプロンプト（> EXEC_ADD_TASK:）やステータスバッジ（[SYS_ONLINE]、SYS.STATUS）など、エンジニアリングダッシュボードのような精密感を持たせました。

コメント:

厳しい仕事を涼しい顔で淡々と仕上げていくのかな。

Todoアプリのデザイン変更 5

プロンプト (Gemini Canvas)
動的な・生き生きとした画面にして。

主な変更点

1. 動的なオーラ・グラデーション背景: 角度が滑らかに移り変わるアニメーション背景（bg-vibrant-animated）と、ゆらゆら動くアンビエント・オーブ（blur-3xl）を配置し、生き生きとしたエネルギー感を演出しました。(背景色が滑らかに変化していきます。)

2. リアルタイム達成度メーター (Progress Bar): タスクの消化率に応じて動的に伸びるカラフルなプログレスバーと、進捗率に合わせて絵文字や応援メッセージが切り替わるダッシュボード機能を追加しました。

3. バウンス＆ポップイン アニメーション: タスク追加時に要素がポンと跳ねて登場するポップイン演出（animate-pop-in）や、ボタン・チェックボックスのクリック時に弾む触感的なマイクロインタラクションを追加しました。(アイコンがバウンスしています。)

コメント:

踊るアイコンや虹色に変化する背景色。日頃のフラストレーションを解消するにはもってこいか。

Todoアプリのデザイン変更 6

プロンプト (Gemini Canvas)
three.jsを用いた3Dモデルがマウスに反応する画面にして。３Dオブジェクトが前面に来るように。

主な変更点

1. Three.js（3Dグラフィックス）の導入: CDN経由でThree.jsをロードし、背景透過（alpha: true）の最前面キャンバス（z-30 pointer-events-none）を配置しました。

2. マウス追従＆インタラクティブアニメーション:

   • マウスの移動座標を取得し、3Dオブジェクト（幾何学トーラスノットとオーブ）がマウスの方向へ滑らかに傾き・追従します。
   • タスクの追加や完了・削除アクション時に、3Dモデルの回転スピードアップやカラフルなライティング変化が起こるインタラクティブ演出を追加しました。

3. UI操作性を維持した最前面配置: pointer-events-none を使用しているため、3Dモデルが文字やボタンの上を漂いつつも、背後のTodoアプリの操作（入力・クリック）を一切妨げません。

コメント:

動き回る3Dオブジェクトをものともしない集中力が要求される。

Todoアプリのデザイン変更 7

前のバージョンではデザイン上書きされていたので、真っ新からスタートすることを強調して「一新して」を加える。

プロンプト (Gemini Canvas)
ポップにネオブリュタリズム（Neobrutalism）を採用した画面に一新して。

主な変更点

1. 太い黒枠 & ハードドロップシャドウ: すべてのカードやボタンに太い黒い境界線（border-3 border-black）とボカシのないべた塗り黒影（shadow-[4px_4px_0px_0px_#000]）を適用しました。

2. ポップ＆ビビッドなカラーパレット: パステルイエローのドット柄背景に、ライムグリーン（#A3E635）、ネオンピンク（#FF66C4）、シアン（#22D3EE）、オレンジ（#FB923C）などの高コントラストなカラーを大胆に配置。

3. 物理的な押し込み感（Press & Click Effect）: ボタンやタスクカードを押した際に、実際に影の分だけグッと沈み込む立体的なマイクロインタラクションを追加しました。

4. ネオブリュタリズム調 3Dモデル（Three.js）: 最前面の3Dオブジェクトも太いブラックワイヤーフレームとビビッドカラーを重ねたポップな幾何学ジオメトリに変更し、世界観を統一しました。

コメント:

こういうのがポップと言うのか、とため息をつく方々に。新進気鋭のデザイナが提案する企画に卒倒しない胆力を付けるために。

Todoアプリのデザイン変更 8

プロンプト (Gemini Canvas)
RoughNotation調に一新して。タイトルを「やるべきこと」にして、手書き風フォント「にゃがじ」を採用して。

主な変更点

TaskFlowをRoughNotation調のポップで手書き感あふれるデザインへ全面リニューアルします。

タイトルを「やるべきこと」へ変更し、手書き風フォント（「にゃがじ」優先設定 + Google Fonts の「Yomogi」「Kiwi Maru」フォールバック）を適用、さらに RoughNotation ライブラリによる手書き風マーカー・枠線・取り消し線の動的描画を組み込みました。

コメント:

やる気あるのかとお怒りの方もあるでしょうが。力の抜き加減を歓迎する人もいるでしょう。

Todoアプリのデザイン変更 9

プロンプト (Gemini Canvas)
QiitaのHPのイメージに合うデザインの画面にして。

Qiitaの公式ブランドデザイン（Qiitaグリーン #55c500 やダークヘッダー、エンジニア向けの洗練されたカード・タブ・タグ UI）に合わせたデザイン画面に変更します。

主な変更点

1. Qiita ブランドカラーパレット:
   • Qiitaグリーン（#55c500）をメインカラー、ダークナビゲーションバー（#2d3748 / #1a202c）を組み合わせた技術ブログ調のクリーンなデザイン。
2. Qiita風 記事カード & タグ UI:
   • TodoアイテムをQiitaの「記事リスト」風にデザイン。LGTM風のストック/完了ボタンや、SQLite・WASM・Todo などのプログラミング言語風タグ（バッジ）を付与。
3. コントリビューション風ステータス・ダッシュボード:
   • 開発者の草生やし（Contribution）をイメージさせるグラフィカルな進捗インジケーターとステータス表示。
4. Qiita風 Terminal / SQL コンソール:
   • コードブロック調の洗練されたダークテーマコンソールで、SQLite WASM の実行ログや生のテーブルデータを表示・確認可能。

コメント:

Qiitaに合わせてTodoの意味付けも変更されています。投稿、未解決、LGTM案件(完了)など。本稿では歓迎しますが、応用する場合意図せぬ変更に注意が必要です。多様な応用が期待される使い方。

以上