初心者ガイド——お使いのPCにOpen Designをインストールして最初のページを作る

このガイドは完全な初心者向けです。ターミナルも専門用語もありません。Open Designを普通のアプリとしてダウンロードし、ワンクリックでモデルを接続し、初めての本格的なWebページを作ります——すべてお使いのPC上で動作し、サブスクリプションは不要です。Where Do I Clickが彼らの動画で示している分かりやすいウォークスルーをもとに、現行リリースに合わせて書き直し、最新化したものです。実際の操作は上の動画をご覧いただくか、テキスト版をそのままお読みください。

Open Designのワークスペース：作りたいものを記述し、モードを選べば、あとはエージェントがやってくれます。

Open Designとは（やさしく言うと）？

Open Designは無料・オープンソースのデザインアプリで、あなた自身のコンピュータ上で動作します。欲しいもの——ランディングページ、アプリ画面、スライドデッキ——を記述すると、AIが本物で編集可能なバージョンを作ってくれます。有料のクラウドツールとの大きな違いは、無料であること、ローカルで動くこと（ファイルはあなたのマシンに残ります）、そして特定の1つに縛られず好きなAIモデルを選んで使えることです。Where Do I Clickの言葉を借りれば、有料のクラウドツールは印象的だが制約が多い——サブスクリプションが必要で、プロジェクトを1〜2件作ればクレジットを使い切ってしまいます。Open Designはその両方の壁を取り払います。

ステップ1——インストールする（簡単な方法：アプリをダウンロードするだけ）

ターミナルに慣れている必要はありません。最も簡単な手順は次のとおりです。

1. open-design.ai/download にアクセスします。
2. Download をクリックしてOSを選びます——Windows と macOS 向けのビルドがあります。
3. 普通のアプリと同じようにインストーラーを実行します。（Windowsでは「Windows によって PC が保護されました」という通知が表示されることがあります——詳細情報 → 実行 をクリックしてください。これは署名なしの個人開発ビルドというだけです。）
4. 常に最新バージョンを入手してください——このプロジェクトは頻繁に更新され、新しいビルドほど多くのバグが修正されています。

（もし開発者向けの手順を試したい場合は、GitHubリポジトリのQuick Startにコピー＆ペーストできるコマンドがあります——とはいえ、ほとんどの人にはダウンロードだけで十分です。）

ステップ2——ワンクリックでモデルを接続する

初めて開くと、Open DesignはすでにコンピュータにあるAIツールを自動的に検出します——Claude Code、Codex、Gemini、Qwenなど——そしてそれらを一覧表示します。1つをクリックして Get started を押します。

コーディングツールが何もインストールされていない？問題ありません。代わりに API provider を選び、Anthropic、OpenAI、Azure、またはGoogle Geminiのキーを貼り付けます。どちらの方法でも、数秒で準備完了です。モデルは後から同じボタンで切り替えられますし、設定ではメディアプロバイダーの追加、言語の変更、ライト／ダークモードの選択、さらには隅にいるデスクトップペットを迎え入れることもできます。

プラグインライブラリ：レジストリから直接スキルをインストールできます——アンチスロップなデザインスキルも含まれます。

ステップ3——見て回る（サンプルとテンプレート）

作り始める前に、Examples をクリックして、このツールで作られた本物のデザインをプレビューしましょう——アニメーションやエフェクトのある複雑なインターフェースです。気に入ったものがあれば？use this prompt を押してそこから始めます。Design systems、image、video のテンプレートタブも同じように使えます：プレビューしてから再利用します。白紙のページに向き合うことなく、何ができるかを見られる親切な方法です。

ステップ4——最初のページを作る

1. Prototype を選び、名前を付けます（Where Do I Clickは不動産仲介のページを作っています）。
2. デザインシステムを選び（またはfreeのままにして）、高精細（high fidelity）を選びます。
3. Create をクリックし、プロンプトを貼り付けて送信します。
4. Open Designはいくつかのディスカバリーの質問をします（デスクトップかモバイルか？トーンは？リアルな画像にする？）——最初から正しいものを作れるようにするためです——回答して送信します。
5. ビジュアルの方向性を選ぶと、ページが作られます：AI生成の画像、本物のコピー、アニメーションを備えた洗練されたインターフェースで——有料ツールの品質に本当に近いものです。

スライドデッキモード：デッキのカテゴリを選び、サンプルを出発点としてフォークします。

ステップ5——コードなしで変更する

調整コントロールをオンにして、変更したい部分をクリックします——たとえば仲介会社の名前です。プロンプトボックスが開きます。やさしい言葉で変更内容を入力すれば、それが適用されます。これがすべての流れです：記述し、生成し、ポイント＆微調整。満足したら、エクスポートするか、さらに反復できます——その間、週ごとのクレジットの壁にぶつかることは決してありません。

ヒント

• アプリをダウンロードする——これがターミナル不要の道で、WindowsとmacOSに対応しています。
• コーディングツールがない？API providerオプションを使う——Anthropic／OpenAI／Azure／Geminiのキーを添えて。
• まずExamplesを見る——プロンプトを再利用して白紙のページを飛ばします。
• ディスカバリーの質問に答える——それが、最初の一回であなたの望みを的確に捉える方法です。
• 調整コントロールを使う——コードなしで、やさしい言葉でテキストや要素を変更します。

よくある質問

コードが書ける必要はありますか？ いいえ。アプリをダウンロードし、モデルをクリックする（またはAPIキーを貼り付ける）だけで、やさしい言葉のプロンプトとポイント＆クリックの調整で作れます。

本当に自分のPC上で動くのですか？ はい——WindowsまたはmacOSにローカルでインストールされ、プロジェクトはあなたのマシンに残ります。

サブスクリプションは必要ですか？ いいえ。Open Designは無料です。あなたが接続したエージェントまたはAPIキーのAIモデル使用分だけを支払います——そして週ごとの別途のデザイン上限はありません。

無料でオープンソースですか？ はい——Apache-2.0です。ローカルで無料で実行できます。あなたが接続したもののモデル／メディア使用分だけを支払います。

---

このテキスト版ガイドはWhere Do I Clickのウォークスルーに基づいています。上の完全な動画をご覧いただき、初心者向けのAIツールガイドをもっと知るにはWhere Do I Clickを購読してください。