OpenDesignは、デザインシステム、ビジュアル編集、選べるAI環境をひとつにまとめたAI ウェブサイト作成ツールです。ブランドらしいサイトを作成し、プレビューで調整しながら、フロントエンドのファイルを保持できます。
余白を生かした、ブランド・プロダクト・エディトリアルの制作。
プロジェクトを始める
「独立系スタジオのための、落ち着いたエディトリアルサイト。問い合わせへの導線はひとつ、明確に。」
AIが生成した3つのコンセプト画像で、SaaSサイト、ポートフォリオ、製品ローンチの異なる方向性を示しています。ビジュアルの方向性を示す例であり、顧客向けの制作実績、製品画面、テスト済みのウェブサイト実装ではありません。
明るい印象の分析ツールのコンセプト。ダッシュボードのイラストを、製品説明とコンバージョンへの導線の横に配置しています。実際のサイトで使う場合は、承認済みの製品画面と確認済みの根拠を用意してください。画像内のインターフェース、ロゴ、数値はイメージです。
建築ポートフォリオのコンセプト。大きなメイン画像、控えめな補助画像、抑制の効いたタイポグラフィで構成しています。自分の作品をどのような順序で見せるか考える際の参考として活用し、実際のプロジェクト、キャプション、クレジット、画像の使用許可を用意してください。
映画のような製品コンセプト。大きな画像、明確な訴求、コンパクトな仕様セクションのバランスを取っています。画像はアートディレクションの例であり、機能するショップではありません。イメージ上の訴求文や仕様は承認済みの情報に置き換え、購入ボタンは利用するコマースサービスに接続してください。
プロジェクトファイルにアクセスできるローカルコーディングエージェント、モデルに直接アクセスするためのBYOK、またはホスト型モデルを使い始められるOpenDesign Cloudを選びます。次にデザインシステムを選び、ウェブサイトの内容を伝えます。アプリは無料のオープンソースですが、エージェントのサブスクリプション、プロバイダーの利用料、Cloudクレジットには、選んだ方法に応じて費用がかかる場合があります。
写真家のポートフォリオ。画面いっぱいの画像、短いプロフィール、わかりやすい連絡先を。
デザインシステムを選び、独自の素材を追加。対象者、ページ、次のアクションをふだんの言葉で説明します。
デスクトップ、タブレット、モバイルのプレビューで、動作するページを比較できます。各画面幅でコンテンツ、改行、画像の切り抜き、ナビゲーションを確認してください。
編集可能なHTML上でテキスト、画像、リンクを選んで変更できます。レイアウトの大きな変更はエージェントに指定し、仕上がりを確認してください。
Codex
Claude Code
Cursor
承認済みの成果物をテンプレートとして保存するか、HTMLまたはソースと素材を書き出せます。開発や公開を続ける前に、パッケージの内容を確認してください。
生成したウェブサイトと、その背景にある細部を行き来しながら作業できます。OpenDesignは、再利用できるデザインコンテキスト、対応要素のビジュアル編集、エージェントへの注釈付きフィードバック、持ち出し可能なフロントエンド出力を、ひとつの制作フローにまとめます。
OpenDesignでは、デザインシステムを選ぶほか、ウェブサイト、リポジトリ、または承認済みのFigma素材からデザインコンテキストを作成できます。ルールとあわせて、対象ユーザーや目的のアクションも設定しましょう。生成時に見た目の参考情報と目的の両方を反映できます。参考情報が完全に再現されるとは限らないため、結果を確認してください。
OpenDesignの編集可能なHTMLプレビューで、対応する要素を選択して、テキスト、画像と代替テキスト、リンク先を変更できます。ビジュアル操作では、書体、サイズ、余白、配置も調整できます。目についた箇所を修正したら、周辺のコンテンツやモバイル表示での折り返しも確認しましょう。
OpenDesignでは、プレビュー上のセクションに印を付け、フィードバックとともにエージェントへ送れます。対象を示しながら、情報の優先順位を明確にする、画像の見せ方を変える、セクションの配置を変えるといった依頼ができます。注釈は実装の参考情報であり、結果を保証するものではありません。変更後のページを確認してから採用してください。
OpenDesignは、ローカルのコーディングエージェント、自分のキーで接続する対応モデルプロバイダー、OpenDesign Cloudをサポートしています。現在の環境やモデルへのアクセス方法に合わせて選べます。プロジェクトの権限、プロバイダーの利用料金、Cloudクレジットは選択した環境によって異なります。Cloudでのモデル利用は、ウェブサイトのホスティングではありません。
OpenDesignのウェブサイトプレビューでは、デスクトップ、タブレット、モバイルの画面幅を確認できます。見栄えのよいヒーロー部分だけでなく、ナビゲーション全体、長い文章、画像の切り抜き、フォーム、コントロールの状態も確認しましょう。修正を依頼する際は同じデザインコンテキストを使い、レイアウトを変更した後は各画面幅で再確認してください。
OpenDesignでは、承認した成果物をテンプレートとして保存でき、HTMLまたはソースとアセットをエクスポートできます。パッケージの内容を確認し、使用予定の環境でテストしてください。再利用できる出発点があれば次のプロジェクトに役立ち、エクスポートしたフロントエンドはエンジニアリングや公開の作業にも活用できます。
OpenDesignでは、デザインシステムを使った制作フロー、編集可能なHTMLプレビュー、エージェントへの注釈付きフィードバック、3つのAI環境を利用できます。こうした機能を活用して、ブランドをウェブサイトに反映し、制作の進行に合わせて細かな変更を加えられます。
「書体、色、余白のルールを使ってください。選定した実績と、わかりやすい問い合わせアクションを備えたスタジオのウェブサイトを作成してください。」
OpenDesignでは、デザインシステムを選ぶか、ウェブサイト、GitHubリポジトリ、Figma素材から作成できます。OpenDesignは生成にデザインコンテキストを反映するため、ブランドの書体、色、余白、コンポーネントのルールを複数のページで再利用できます。
OpenDesignの編集可能なHTMLプレビューでは、テキスト、画像、リンクを選択し、対応するコンテンツやスタイルを変更できます。範囲に印を付けて、より大きな変更をエージェントに依頼することもできます。どちらの方法でも対象を明示できるため、ページ全体について説明するだけのフィードバックとは異なります。
OpenDesignは、ローカルのコーディングエージェント、自分のキー（BYOK）、OpenDesign Cloudをサポートしています。モデルへのアクセス方法やプロジェクトのニーズに合う環境を接続してください。アプリは無料のオープンソースですが、エージェントのサブスクリプション、プロバイダーの利用料金、Cloudクレジットは別途必要です。
OpenDesignでは、HTMLまたはソースとアセットをエクスポートできます。生成されたパッケージを確認してから、Codex、Claude Code、Cursor、またはお使いのエディターで作業を続けられます。チームは、作り直しが必要なデザイン参照ではなく、編集可能なフロントエンド出力をもとに作業できます。
ブランドを大切にし、公開後も改善を続けるウェブサイトにはOpenDesignを。 ポートフォリオ、キャンペーン、SaaSサイトでは、再利用できるデザインルール、対象を絞ったビジュアル変更、次に担当する人も使えるフロントエンドファイルが役立ちます。この組み合わせがOpenDesignを選ぶ理由です。最初の生成で自動的に完成することを約束するものではありません。
一元管理された運用サービスが主なニーズなら、マネージドプラットフォームを選びましょう。 OpenDesignはデザインとフロントエンドの作業環境であり、マネージドCMS、ストア、データベースではありません。公開連携にはプロバイダーの設定が必要です。フォーム、決済、本番データには、接続するサービスも必要です。ウェブサイトを自分で管理したい場合に選び、サイトの裏側で動作する仕組みも計画してください。
サイトはビルダー内のプレビューだけではありません。実際のファイルとコンポーネントを自分のプロジェクトに保存できるため、変更をひとつずつ確認し、Codex、Claude Code、Cursor、または開発チームと仕上げていけます。
Codex
Claude Code
Cursor
Codex
Claude Code
Cursor
それぞれの方法で、異なるブリーフ、構成、完成の定義から始められます。
Figmaからウェブサイトへ既存のビジュアルの方向性を、レスポンシブで編集可能なフロントエンドファイルに生かせます。試してみる
OpenDesignが作成するのは、レスポンシブなページ、再利用可能なコンポーネント、スタイル、手元に残せるファイルなど、目に見えるウェブサイト体験です。インターフェースの背後にあるインフラは提供しません。
プロバイダーを設定したうえで、対応するCloudflare PagesまたはVercelの連携を使うか、対応するホスト向けに書き出せます。公開先は連携機能によって異なります。公開後のサイトで、素材のパス、リンク、フォームを確認してください。プロバイダーのアカウント、ドメイン、料金は別途必要です。
OpenDesignで作成できるもの、ワークフローの続け方、別のツールが必要な場面を紹介します。
AIウェブサイト作成ツールは、自然な言葉で書いたブリーフから、ウェブサイトの構成、ビジュアルシステム、動作するフロントエンドを作成します。OpenDesignは、確認や編集ができ、開発を続けられる、ブランドに合ったレスポンシブなフロントエンドファイルの作成を重視しています。
フロントエンドの方向性を生成し、対応するHTMLの詳細を、最初のバージョンを手書きせずに調整できます。プロジェクトファイルを扱うにはローカルコーディングエージェント、利用するプロバイダーとモデルを選ぶにはBYOK、ホスト型モデルにアクセスするにはOpenDesign Cloudを選びます。アプリは無料ですが、選択したモデルサービスから料金が発生する場合があります。フォーム、決済、認証、本番データには、別のサービスとの連携やエンジニアリングが必要です。
レスポンシブなフロントエンドを依頼し、デスクトップ、タブレット、モバイルのプレビューで動作するページを確認できます。それぞれの画面サイズで、ナビゲーション、長いテキスト、操作要素、画像の切り抜きを確認してください。プレビューはレスポンシブ品質を保証するものではありません。また、上記のコンセプト画像は、モバイル実装がテスト済みであることを示すものではありません。
編集可能なHTMLでは、テキスト、画像、リンクを選択し、コンテンツ、画像ソースと代替テキスト、リンク先、タイポグラフィ、余白を変更できます。大きな変更はエージェントに指定してください。ローカルファイルの実装を変更するには、プロジェクトにアクセスできるコーディングエージェントを使います。承認済みの成果物をテンプレートとして保存するか、引き継ぎの前にHTMLまたはソースを書き出して内容を確認できます。
OpenDesignでは、ローカルの.fig書き出しファイルを、ノードツリー、トークン、素材、プレビューを含む構造化スナップショットに変換し、それをデザインのコンテキストとして使えます。FigmaのURLにアクセスできない場合は、承認済みのローカルファイルを用意してください。生成されたウェブサイトを元のデザインと照合してください。完全に損失のない変換、ライブ同期、レスポンシブ対応とインタラクションのすべての判断が自動的に完了することを保証するものではありません。
フロントエンドには、セマンティックHTML、説明的なメタデータ、適切な見出し構造、アクセシブルな画像テキスト、パフォーマンスに配慮した素材を含められます。これらの基盤はサイトの最適化に役立ちますが、検索順位を保証するビルダーはありません。検索パフォーマンスは、有用なコンテンツ、クロールのしやすさ、内部リンク、サイトの権威性、公開品質、継続的な技術レビューにも左右されます。
OpenDesignでは、設定済みのCloudflare PagesおよびVercelプロバイダー向けの公開連携に対応しており、別の対応ホスト向けにファイルを書き出すこともできます。プロバイダーのアカウント、ドメイン、マネージドCMS、決済サービス、本番用データベースは提供しません。公開先と費用はプロバイダーや連携機能によって異なります。公開後のサイトを確認してください。
マーケティングサイト、ポートフォリオ、SaaSサイト、スタートアップや中小企業、制作会社、個人のサイト、静的サイト、キャンペーンページ、製品ローンチに適しています。視覚的な階層、コンテンツ、レスポンシブな動作、再利用可能なコンポーネントが重要なフロントエンド体験に幅広く活用できます。
デザインシステムから始め、エージェントやモデルを選び、プレビューを使ってウェブサイトを整えましょう。準備ができたら、フロントエンドのファイルを次の工程に引き継げます。
OpenDesignをダウンロード無料・オープンソース · 選べるAI環境 · 編集可能なフロントエンドファイル
