参考リンク
Aiderに関するさらなる読み物
公開されているガイドに記載されている、Aiderでデザインするためのチュートリアル、ドキュメント、ウォークスルーです。
Aider 
OpenDesign OpenDesign で
Aider と
デザインする。
OpenDesignでAiderを使ってインターフェースをデザインする方法：改訂ごとに1コミット、ルールブックとしてのCONVENTIONS.md、ブリーフからレビュー済みファイルまでの変更履歴ページのタスク1件、そして始める前に知っておくべき限界について。
ブリーフからインターフェースへ01 / Aider
アイデアを持ち込むのはあなたです↗
“変更履歴ページを、1コミット
につき1リビジョン、簡単に元に戻せるように。”
このAiderガイドへの3つの入り口
Aiderでどこから始めるかを選ぶ
Aiderによる1件の完全なデザインタスク
Aiderのデザインタスク：ブリーフからインターフェースまで
1件のタスクを最初から最後まで示します。渡すブリーフと制約、返ってくる成果物、そして完成前に実行すべきチェックです。以下のインターフェースはこのページ用に作成した例示であり、実際に記録したAiderの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフCLIツール用のチェンジログとリリースノートページを設計してください：バージョン一覧、変更点をグループ化した注目リリース、アップグレードコマンドが必要です。各リビジョンはそれぞれ独立したコミットとして保持してください。デスクトップとスマートフォンに対応させてください。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクションバージョン一覧、アップグレードコマンドのコピー、リリースごとのアンカー
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業の分担：あなた、Aider、OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Aider
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Aider成果物：1440pxと390pxのChangelog Page
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
バージョン一覧、ノート、レールは8pxグリッド上に配置され、リリースの見出しは一覧と揃っています。
階層
視覚的階層
まずバージョンと日付、その後に破壊的変更のコールアウトが続きます。アクセントは現在のバージョンのみに付きます。
レスポンシブ
モバイルレイアウト
バージョン一覧はセレクトになり、ノートは全幅を使用します。
インタラクション
インタラクションの確認
アップグレードコマンドをコピーする、古いリリースにジャンプする、破壊的変更のコールアウトリンクを開く。
適合性
Aiderが適するタスクと適さないタスク
Aiderが適するケース
- モデル不問、BYOK。 ご自身のキーでほぼ任意のLLMを接続でき、視覚認識能力を持つモデルを使って参照画像をレスポンシブなマークアップに変換できます。
- Gitネイティブな反復。 自動コミットにより、デザインの各パスが差分として確認できるようになり、元に戻すことも可能なため、出力がクリーンで追跡可能な状態を保ちます。
- CONVENTIONS.mdコンテキスト。 読み取り専用の規約ファイルが、トークン、プリミティブ、デザインルールを毎回の実行に反映します。
- オープンソース。 Apache-2.0でローカルファーストであり、あなた自身のリポジトリ内のコードに直接作用します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
- このエージェントに必要な認証情報をお持ちでない場合。 必要なもの：ご自身のプロバイダーAPIキー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカル）。OpenDesignは認証情報を提供またはプロキシしません。
- チームがOpenCodeまたはKiloで作業している場合。 それらのエージェントには専用のページがあり、ワークスペースは同じですが、セットアップが異なります。関連エージェントをご覧ください。
互換性
開始前に確認すべきAiderの要件
このガイドでは、OpenDesignデスクトップアプリを通じて接続されたAiderを扱います。公開情報の確認日: 2026年9月6日。
Tool ScopeAider（Aiderによる）
Aiderは、ターミナル上で動作するオープンソース（Apache-2.0）のAIペアプログラミングツールです。コードベースをマッピングし、ファイルをその場で編集し、各変更を適切なメッセージで自動的にコミットします。このページはOpenDesignを通じてAiderでインターフェースをデザインすることについて説明しており、Aider自体のインターフェースについては扱いません。利用可能なエージェントについては、OpenDesignのセットアップに関する注記をご確認ください。
アカウントと認証独自のプロバイダーAPIキー — BYOK（OpenAI、
独自のプロバイダーAPIキー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカル）。独自のプロバイダーAPIキー（BYOK）で認証を行います — 認証情報はお使いのマシン内に留まります。このページはクォータや料金を保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページをご確認ください。ソースからのクイックスタートに記載されているNode.jsとpnpmの要件は、ソースから実行する場合に適用されるものであり、デスクトップパッケージのインストールには適用されません。対応する最小Aiderバージョン：ここでは検証されていません。
接続確認成功の目安
インストールしたバージョンに表示される接続手順に従い、小さなタスクを実行してください。Aiderがそれを処理し、成果物が開くことを確認してください。ダウンロードだけでは、動作する接続が確立されたことにはなりません。
デスクトップアプリから始める
Aiderのセットアップ、3ステップで
まずダウンロードし、インストールしたバージョンに合わせてAiderのセットアップを完了させてから、小さな結果を確認してください。この方法に従うために、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みの場合は、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Aiderの接続を準備する
インストールしたバージョンのAiderの手順に従ってください。独自のプロバイダーAPIキー（BYOK）で認証を行います — 認証情報はお使いのマシン内に留まります。
Aider — ターミナルでのAIペアプログラミング# 1. Install Aider (recommended installer; Python 3.8–3.13) python -m pip install aider-install aider-install # or with pipx: pipx install aider-chat # 2. Start it in your git project and bring your own key cd your-project aider --model sonnet --api-key anthropic=<your-key> # or: aider --api-key openai=<your-key> (also deepseek=, gemini=)公開されているガイドのAiderセットアップに関する注記より。最新のコマンドについてはベンダーのドキュメントをご確認ください。
チェックポイント想定しているエージェントとアカウントを確認してください。利用できない場合は、大きなタスクを試す前に互換性を確認してください。 - 3
Aiderで小さなタスクを1つ実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Aiderのデザインワークフロー
Aiderのデザインワークフロー、5ステップで
ブリーフから検証済みファイルまで、同じチェンジログページのタスクを追っていきます。各ステップでは、あなたが提供するもの、Aiderが行うこと、OpenDesignが提供するもの、あなたが確認する内容を示します。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Aiderブリーフとプロジェクトの指示ファイルを読み込み、曖昧な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Aider1行も書く前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Aiderは、レイアウト、スタイル、インタラクション、安定したフックを含む自己完結型のHTMLファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Aiderセクションを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行して失敗した箇所を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Aiderプレビューに対するコメントを読み、次の修正版を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Aider変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Aiderデザインリソース
制限事項
Aider の制限事項、手動チェック、フォールバック
- 対象範囲このページでは、OpenDesign に接続されたエージェントとしての Aider について説明します。Aider のすべての機能を網羅するものではありません。
- 利用制限利用制限と費用は、使用する認証情報に従います（ご自身のプロバイダーの API キー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカル））。このページでは、無料枠についての言及はありません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
Aider と OpenDesign に関するよくある質問
Aider は本当にデザイン作業ができるのですか？
はい。美的スキル、デザインシステム、そしてコンテキスト内の実際の参照画像があれば、Aider は本番品質のレスポンシブ UI を生成します。また、ビジョン対応モデルでは、スクリーンショットを読み取って出力を参照画像と照合できます。そうしたコンテキストがなければ、汎用的な見た目になりがちで、そこが OpenDesign が補うギャップです。
デザインに Aider を使う際、どのモデルを使用できますか？
Aider はモデルを問いません。ご自身の API キーを用意すれば、Claude、GPT-4o、DeepSeek、Gemini、あるいはローカルモデルなど、ほぼすべての LLM に接続できます。画像を用いたデザイン作業には、GPT-4o や Claude のようなビジョン対応モデルを使用してください。OpenDesign は認証情報を代理送信することはありません。
デザインにおいて Aider が特に優れている点は何ですか？
2つあります。1つはモデルを問わないため、タスクに最適なモデルを選べること。もう1つは git ネイティブであり、変更ごとにコミットされるため、各デザインの反復をレビューし、元に戻すことができることです。どちらも役立ちますが、センスはあくまでご自身が用意するデザインシステム、スキル、参照によって決まります。
Aider はファイルを編集し、Git にコミットしますか？
はい。Aider はリポジトリ内のファイルを直接編集し、各変更を適切なメッセージとともに自動的にコミットします。そのため、すでにお使いの git ツールを使って、AI の作業を diff・管理・取り消しすることができます。
デザインの規約を Aider に渡すにはどうすればよいですか？
トークン、プリミティブ、ルールを記載した CONVENTIONS.md を作成し、/read CONVENTIONS.md または aider --read CONVENTIONS.md で読み取り専用として読み込みます（あるいは .aider.conf.yml に read: CONVENTIONS.md を設定すれば、実行ごとに自動的に読み込まれます）。これにより、Aider はデフォルトの見た目ではなく、あなたのブランドに沿って作業します。
Aider で最初のデザインタスクを始めましょう
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。