Day 17 - 12/17
Design Style Finder Pro - AIで使えるデザインスタイル選択ツール
JavaScriptVercel
Claude CodeNotebookLM
概要
概要
非デザイナーがAI（ChatGPT、Claude、NotebookLMなど）で資料を作成する際に、プロっぽい見た目を簡単に実現できるデザインスタイル選択ツールです。
解決する課題
- AIで内容は作れるけど、見た目（配色・フォント・レイアウト）で毎回悩む
- デザインを学ぶ時間がない
- 「ダサい」と言われたくない
主な機能
- 47種類のスタイル: 6カテゴリ（ミニマル、テック、カジュアル、高級、クリエイティブ、ビジネス）から選べる
- YAML出力: AIにそのまま渡せる形式で配色・フォント・レイアウト情報を出力
- 実際の作成例: NotebookLMで生成したスライドやインフォグラフィックのサンプルを掲載
- お気に入り・比較機能: 気になるスタイルを保存して比較検討できる
今回の改善
- NotebookLMで実際に作成したサンプル（Swiss Minimalスライド、Pop Artインフォグラフィック）を掲載
- NotebookLMのスライド生成制限に関する注意事項を追加
リンク
制作時間
5時間
学んだこと・振り返り
技術的な学び
- CSSカスタムプロパティ（CSS変数）を活用した一貫性のあるスタイリング
- aspect-ratioを使った画像カードの比率統一
- 注意事項を複数箇所（ギャラリー内 + FAQ）に配置するUX設計
AIとの協働で気づいたこと
- 「サンプルを掲載したい」という要望から、ファイルコピー・HTML追加・CSS設計・FAQ更新・デプロイまで一連の作業をAIが自律的に進めてくれた
- 本番環境の確認までAIがブラウザ操作で実施してくれるのは非常に便利
次に活かしたいこと
- 他のスタイルのサンプルも追加して、ユーザーがイメージを掴みやすくしたい
- NotebookLM以外のAI（Claude、ChatGPT）での作成例も追加したい
初回プロンプト（計画）
以下のnote記事を読んで、スライドやwebサイト、アプリなどで私の作品と分かるようなデザインスタイルのyamlを構築したい。
NotebookLMのスライド生成で結果を自在にコントロールする方法①
https://note.com/yoshifujidesign/n/nd9c8db0b55b8
・色々と比較して私なりのスタイルを見つけたい。
・色合いやタイポグラフィ、レイアウトの傾向や特徴なども比較したい。
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Claude Code
⭐⭐⭐⭐⭐
良かった点
- プロジェクト全体を素早く理解し、適切な改善箇所を特定してくれた - HTMLセクション追加、CSS設計、レスポンシブ対応まで一貫して対応 - Playwrightを使った本番環境の動作確認まで自動で実施してくれた - コミット・プッシュ・デプロイの流れもスムーズ
改善してほしい点
変更後に自動でコミット・プッシュまでやってくれると、さらにスムーズだったかもしれない
総合コメント
既存プロジェクトの改善作業において、コードの理解から実装、デプロイ確認まで一気通貫でサポートしてくれた。特にPlaywrightでの本番サイト確認は、手動で行う手間が省けて効率的だった。
公開日: 2025/12/16