OpenDesign Showcase：
AIデザイン事例

OpenDesignでAIデザインの作例を作る方法

1. OpenDesignをダウンロードしてインストール

   macOSまたはWindows向けのデスクトップアプリをダウンロードしてインストールし、初期設定を完了します。普段お使いのモデルプロバイダーに接続すれば、ご自身のキーを使ってOpenDesignをお使いのマシン上で実行できます。

   ダウンロード

2. アイデアに近いケーススタディから始める

   上のケーススタディを出力タイプで絞り込み、作りたいものに近い事例を開きましょう。ブリーフ、使用モデル、説明されているレイアウトの判断を読み、活かしたい点と変更したい点をメモしてください。

3. 見た目を決める前にブリーフを書く

   出力タイプ、画面やセクション、サンプルコンテンツ、重要なインタラクションを1つ明記します。どの情報が実データで、どれが仮のものかも示し、デザインが事実を作り出さないようにしましょう。

   おすすめのプロンプトプロンプトをコピー

   架空の街のパン屋のウェブサイトをデザインしてください。今日の焼き菓子を紹介するヒーロー、午前と午後に分けたメニュー、営業時間、入力欄が明確に示された事前注文フォームを含めてください。ナビゲーションは具体的にし、すべての見出しを実際のテキストで作成し、読みやすいモバイルレイアウトも用意してください。

4. モデルを選ぶ、または2つを比較する

   レイアウトやコピーに信頼できるモデルを選びましょう。同じブリーフに2つのモデルがどう対応するかを比べるには、 LLM Arena まずは、このページのArenaの事例のように。

5. ページ全体に広げる前に、1つのセクションを磨く

   変更はセクションごとに依頼しましょう。情報の優先順位、余白、状態、コピーを調整します。ページ全体に効果を広げる前に、モバイルレイアウトと動きを抑えた状態を確認してください。

6. 書き出して共有リンクを取得

   完成したデザインをHTMLとして書き出し、OpenDesignの「共有」からリンクを取得します。別のブラウザーウィンドウで開き、意図したバージョンとアセットが読み込まれることを確認してから共有してください。