はじめに
こんにちは
Kiroが話題になりすでに色々と検証して使った方も多いと思います。
私もリリース当日に触っていたのですが、話題になりすぎて途中からClaude Sonnet 4.0がビジー状態で使えなくなったためしばらく使用を控えていました。
Kiroのブームも落ち着いてきている様子だったのでこのタイミングでようやく本格的に検証をしています。
実際にKiroに関するブログ記事やSNSを見ていると実装計画を立てるフロー(spec)をほめているのをよく目にしました。
実際にKiroにspecを作らせてこれはなかなかすごいなと感じていました。
ですが一方でKiroに実際にコードを書かせるとなると実装スピードという部分で物足りなさがありました。
特にClaude Codeを利用していると私と同様にKiroでの実装は少し物足りない部分がある方もいらっしゃるのではないでしょうか？
そこで今回の検証では、
- Kiroにはspecを作ってもらう部分を担当してもらう。
- そのspecを元にClaude Codeが実装をする。
と言った流れを試してみました。
今回は以下のリポジトリを実験場としています。
すでに同様の取り組みをされている方もいらっしゃると思いますがご了承ください。
実際にKiroを使う前にこちらの記事をご覧いただければ嬉しいです。
Kiroフェーズ
specを作ってもらう
specを作るフローでは以下の3つのマークダウン形式のファイルが作成されます。
- 要件定義書(requirement.md)
- 設計書(design.md)
- 実装タスクリスト(tasks.md)
今回はUI/UXの観点に絞った改善案を考えてもらいました。
UI/UX改善案
🎨 UI/UX改善案（ローカル環境特化）
現在のコードを分析した結果、以下のUI/UX改善案を提案します：
1. 情報密度とレイアウトの最適化
現在の問題点：
タスクカードが縦に長く、一覧性が低い
週間スケジュールが固定高さで使いにくい
タブ切り替えで情報が分断される
改善案：
ダッシュボード型レイアウト: タスク一覧とスケジュールを同時表示
コンパクトビュー: タスクカードの情報密度を調整可能
サイドバー導入: ナビゲーションとクイックアクション用
グリッドレイアウト: カスタマイズ可能なウィジェット配置
2. インタラクション改善
現在の問題点：
フォーム表示でモーダルが画面を占有
ドラッグ&ドロップの視覚的フィードバックが弱い
キーボード操作への対応不足
改善案：
インライン編集: タスクの直接編集機能
クイック追加: ヘッダーに常時表示の簡易入力フィールド
キーボードショートカット: 全操作のキーボード対応
ジェスチャー対応: スワイプでタスク操作（タッチデバイス）
3. 視覚的階層とフィードバック
現在の問題点：
優先度の視覚的区別が弱い
進捗状況が分かりにくい
時間情報の表示が不十分
改善案：
カラーコーディング: 優先度・ステータス別の統一カラーシステム
プログレスバー: タスク進捗の視覚化
タイムライン表示: 時系列での作業履歴表示
アニメーション: 状態変更時のスムーズな遷移
4. コンテキスト情報の充実
現在の問題点：
タスクの関連情報が見えにくい
作業時間の把握が困難
過去の履歴が活用されていない
改善案：
情報パネル: 選択タスクの詳細情報を常時表示
時間トラッキング: リアルタイム作業時間表示
関連タスク表示: 類似・関連タスクの自動表示
統計ウィジェット: 今日/今週の進捗サマリー
5. レスポンシブ・アダプティブデザイン
現在の問題点：
デスクトップ環境での画面活用が不十分
モバイル表示での操作性
ウィンドウサイズ変更への対応
改善案：
マルチカラム対応: 大画面での効率的レイアウト
折りたたみ可能パネル: 必要に応じた情報の表示/非表示
ズーム対応: 表示倍率の調整機能
ウィンドウ分割対応: 複数ウィンドウでの同時作業
6. パーソナライゼーション
現在の問題点：
固定的なレイアウト
個人の作業スタイルに合わせられない
テーマ設定が基本的すぎる
改善案：
カスタマイズ可能ダッシュボード: ウィジェットの自由配置
ワークスペース: 用途別の画面レイアウト保存
詳細テーマ設定: カラー・フォント・サイズの細かい調整
表示密度設定: コンパクト/標準/ゆったりモード
7. フィードバックとガイダンス
現在の問題点：
エラーメッセージが簡素
初回利用時のガイダンス不足
操作結果のフィードバックが弱い
改善案：
トースト通知: 操作結果の即座フィードバック
オンボーディング: 初回利用時のインタラクティブガイド
ツールチップ: 機能説明の充実
ヘルプシステム: コンテキスト依存のヘルプ表示
8. パフォーマンス最適化
現在の問題点：
大量タスク時の表示遅延
スケジュール表示の重さ
不要な再レンダリング
改善案：
仮想スクロール: 大量データの効率表示
遅延読み込み: 必要な時のみデータ取得
キャッシュ戦略: 頻繁アクセスデータの最適化
プリロード: 予測される操作の事前準備
🎯 実装優先度
Phase 1: 基本UX改善
- インライン編集機能
- キーボードショートカット
- トースト通知システム
- カラーコーディング統一
Phase 2: レイアウト改善
- サイドバー導入
- ダッシュボード型レイアウト
- 情報パネル
- レスポンシブ改善
Phase 3: 高度なUX
- カスタマイズ可能ダッシュボード
- オンボーディング
- アニメーション
- パフォーマンス最適化
これらの改善により、ローカル環境での長時間使用に適した、効率的で使いやすいタスク管理ツールに進化させることができます。
どの改善案から実装を始めたいか、または特定の機能について詳細な設計を検討したいものがあれば、お知らせください。
要件定義書(requirement.md)
設計書(design.md)
実装タスクリスト(tasks.md)
完成
無事に完成しました。
ここでKiroの役目は終了です。
これだけの作業ですが、途中で何度かretryが発生しました。
まだまだClaude Sonnet 4.0 の場合は動作が不安定な様子です。
Claude Codeフェーズ
実装開始
specに詳細が書かれているため私からの指示は短く的確にしてみました。
> .kiro/配下にあるファイルをみてください。
そこに書かれているtaskを進めてください。
planモードで進めてみます。
しっかりとKiroが作成したファイルを読み取って計画を立てました。
⏺ User approved Claude's plan:
⎿ UI/UX改善実装プラン
.kiro/specs/ui-ux-improvements/にある30のタスクを、9つのフェーズに分けて実装します：
Phase 1: 基本UI改善 (Tasks 1-4)
- トースト通知システム: Toast コンポーネント、useToast フック、ToastProvider を実装し、既存のalert()を置き換え
- インライン編集システム: useInlineEdit フック、InlineEdit コンポーネント、バリデーション機能を実装
- カラーコーディング統一: CSS変数で優先度・ステータスカラーを定義し、TaskCard/Badge で統一適用
- プログレスバー: 見積もり時間と実績時間を視覚化するコンポーネント実装
Phase 2: レイアウト改善 (Tasks 5-8)
- サイドバー: 折りたたみ可能なナビゲーション、クイックアクション機能
- ダッシュボード型レイアウト: タスク一覧とスケジュールを同時表示するレスポンシブレイアウト
- 情報パネル: 選択タスクの詳細、関連タスク、統計情報表示
- クイック追加: ヘッダー常駐入力フィールドでEnterキー即座追加
Phase 3-9: 高度な機能 (Tasks 9-30)
- インライン編集統合、ドラッグ&ドロップ改善、表示密度・カスタマイゼーション
- パフォーマンス最適化（仮想スクロール）、ユーザビリティ向上（オンボーディング）
- モバイル・タッチ対応、アクセシビリティ、包括的テスト
開始点: 現在のタブベースのTaskManagerを改善し、段階的に新機能を追加
技術スタック: 既存のNext.js + TypeScript + Tailwind CSS + shadcn/ui を活用
今回30個もタスクがあったのでPhase2と定義された レイアウト改善までを実装させました。
Phase1の結果
⏺ テストが通りました！新しいコンポーネントのテストカバレッジも確認できます。
Phase 1の基本UI改善（トースト通知、インライン編集システム、カラーコーディング統一、プログレスバー）が完了しました。
実装された機能：
- トースト通知システム ✅
- useToastカスタムフック作成
- 既存のalert()をトースト通知に置き換え
- 成功、エラー、警告、情報の各種通知対応 - インライン編集システムの基盤 ✅
- useInlineEditカスタムフック作成
- InlineEditコンポーネント作成
- テキスト、テキストエリア、セレクト対応
- バリデーション、エラーハンドリング、キーボード操作対応 - カラーコーディングシステムの統一 ✅
- CSS変数での優先度・ステータスカラー定義
- ライトモード・ダークモード対応
- UI定数ファイルの作成
- 既存コンポーネントのカラー統一 - プログレスバーコンポーネント ✅
- TaskProgressコンポーネント作成
- 見積もり時間と実績時間の視覚化
- 進捗に応じた色分け（進行中・警告・完了・超過）
- TaskCardでの表示統合
Phase 2のレイアウト改善に進む準備が整いました。
Phase2の結果
⏺ Phase 2完了！🎉
Phase 2: レイアウト改善 が完了しました！
実装された機能：
✅ サイドバーコンポーネント
- 折りたたみ機能付きサイドバー
- ナビゲーションメニュー（タスク管理/週間スケジュール）
- クイックアクション（新規タスク作成、情報パネル切り替え）
- 統計サマリー表示（総タスク数、完了数、進行中、予定時間）
✅ ダッシュボード型レイアウト
- タスク一覧とスケジュールの同時表示可能
- レスポンシブレイアウト
- パネルサイズ調整機能
- カスタマイズ可能な構成
✅ 情報パネル
- 選択タスクの詳細表示
- 関連タスクの表示（同じカテゴリ・優先度）
- 作業時間統計とダッシュボード
- プログレスバー付きタスク進捗表示
✅ クイック追加機能
- ヘッダー常駐入力フィールド
- Enterキーでの即座タスク追加
- AI見積もりの自動実行
- 最近使用カテゴリの提案
- 展開可能なオプション設定
主な改善点：
- ユーザビリティ大幅向上：従来のタブ切り替えから、サイドバーナビゲーションとダッシュボード型レイアウトに変更
- 効率性向上：クイック追加でタスク作成が高速化
- 情報の視認性向上：選択タスクの詳細と統計情報を情報パネルで一目で確認
- レスポンシブ対応：デスクトップからモバイルまで対応
実際に作成されたPRはこちらです。
Total duration (API): 17m 17.8s
Total duration (wall): 37m 32.9s
Total code changes: 1820 lines added, 307 lines removed
Claude Codeでは実際にこれぐらいの時間がかかりました。
まとめ
Kiroに計画を立ててもらいClaude Codeで実装するという今回の方法は思った以上に快適に実装を完了させることができました。
すでにいろんな方が実践していらっしゃる理由もわかった気がします。
しっかりと計画を立ててコーディングエージェントに指示をするというのは、品質の高いプログラミングをコーディングエージェントにさせるために重要なポイントだと感じました。
KiroのようなspecをClaude Codeに作らせるという方法を試している記事もみましたので、次はそういったアプローチを試してみるのもありかもと考えています。
Kiroはまだまだ発展途上のツールだと思います。
これからのアップデートがとても楽しみですね。
補足
Kiroでも実装したメモ
Kiroにも少しだけ実装してもらったのでその流れと仕上がったPRを残しておきます。
テストを実行したり修正したりと言うのにも時間がかかってしまう印象です。
Phase1のトースト通知システムの実装をしてもらいました。
tasks.mdを開くと今このタスクを実装しているんだよと視覚的にわかるのはいいですね。
Kiroはまだモデルの呼び出しが高負荷で途中で止まってしまうことがあります。
止まってしまうと続きから開発を再開するのではなく、最初からやり直しというのがかなり辛いところですね...
実際にKiroが差分を作成したPRはこちらです。
Discussion