インタラクティブなプロトタイプを作成する

ステップ 1 — テンプレートを開く

Community を開き、OpenDesign Landing を選択します。プレビューを確認してから More ways to Use を開き、Remix を選択して、サンプルから編集可能なプロジェクトを作成します。Use ではサンプルのプロンプトから開始し、Remix ではサンプルを編集可能なプロジェクトとしてコピーします。

このテンプレートはサンプルデザインです。テンプレート内のバージョン、件数、推薦文、リンクはすべてサンプルコンテンツです。実際の製品に使用する前に確認し、置き換えてください。

ステップ 2 — ページの目的を明確にする

Design Files から index.html を開きます。Preview にはページが表示され、Code にはそのソースが表示されます。テンプレートの何を残すかを決めます。たとえば、エディトリアル調の書体、温かみのある紙のような背景、コラージュ、セクションのリズムなどです。置き換える製品情報、行動喚起、リンク先を一覧にします。

このランディングページを、架空の独立系デザインスタジオ向けに調整してください。温かみのある紙の質感、コーラルのアクセント、エディトリアル調のタイポグラフィ、コラージュは維持します。ヒーロー、サービス、代表的な実績、お問い合わせのコピーを、明確に架空だと分かるサンプルコンテンツに置き換えてください。ナビゲーションから適切なセクションへ移動できるようにし、実際のアカウントや決済フローの代わりにプレースホルダーのリンク先を使用してください。デスクトップと 390px のモバイル表示を確認してください。編集可能な HTML と、それが参照するアセットを納品してください。

これは調整して使用できる概要の例であり、スクリーンショットがこの概要から生成されたことを示すものではありません。空のプロジェクトから始めるには、Home で Prototype を選択し、AI のセットアップを完了して、参考資料とともに概要を送信します。

ステップ 3 — 小さな修正を直接加える

Edit を選択し、ヒーロー内のイタリック体のアクセント単語を選択して、その Text を taste, から craft, に変更します。Save を選択します。編集モードを終了して再読み込みすると、見出しには引き続き craft, と表示されるはずです。キャンバス編集ガイドでは、タイポグラフィ、色、サイズ、間隔、元に戻す操作について説明しています。

ステップ 4 — 別のビューポートを確認する

キャンバス上部の Desktop メニューを使用して、Mobile (390 × 844) または Tablet (820 × 1180) を選択します。テキストの折り返し、ナビゲーション、間隔、画像の切り抜き、タッチターゲットを確認します。この操作で切り替わるのはプレビューサイズだけであり、デザインが自動的に修正されるわけではありません。

ステップ 5 — 修正範囲を絞って依頼する

Comment を使用して要素に修正依頼を添付するか、Mark を使用してスクリーンショットとメモを送信します。例：「このアクセント単語をコーラルにしてください。イタリック体のフォント、サイズ、位置は維持してください。」コメントを保存しただけでは、エージェントは実行されません。Send to chat を選択する前に、選択したフィードバックを確認してください。フィードバックツールも参照してください。

ステップ 6 — テストして引き渡す

ナビゲーションやボタンをテストする前に、Edit、Comment、Mark を終了します。各セクションのリンクとリンク先を確認してから、Export を使用し、利用可能な形式から PDF、画像、ZIP、または単体の HTML を選択します。参照されているアセットを保持し、完成とみなす前にクライアントの外部で納品物を開いてください。プロジェクトファイルとバージョンおよび共有では、その他の引き渡し方法について説明しています。

Preview が空白の場合

プレビューが読み込まれるまで待ってから、Reload Preview を選択します。Code を使用して、ファイルに内容があることを確認します。空白のままの場合は、Design Files から開き直すか、HTML をエクスポートし、そのアセットとともにブラウザーで開きます。クライアントの外部では動作するものの内部では失敗する場合は、アプリのバージョン、影響を受けるファイル、エラーを報告してください。