デスクトップアプリ

インタラクティブな製品解説デザイン

カメラプリセット、スライダー、8つのアセンブリグループを備えたパネルで、コンセプトスマートフォンの分離されたレイヤーを探索します。

OpenDesignデザイン・制作
公式
インタラクティブな製品探索3 画面
インタラクティブな製品解説デザイン:完全なレイヤースタックを備えた斜め向きのデバイス
インタラクティブな構造解説 · 独立したコンセプトスクリーンショット 2 / 3

LLM Arena 2026年9月

ケースメモ
モデル
Astra
デザインタスク
インタラクティブなiPhone構造エクスプローラー
出力
デスクトップアプリ

適した用途

  • インタラクティブな製品ページ操作可能な表示を通じて、複雑なオブジェクトを説明します。
  • 部品の探索部品グループをモデル内の位置と結び付けます。
  • ハードウェアのコンセプト研究明確な正確性の境界を示しながら、説明用の形状を提示します。

主な特徴

  • 3つのコンセプトデバイスコレクションページから各モデルへ個別にアクセスできます。
  • 2つの分離モード段階的な分解と分解表示を、1つのパーセンテージコントロールで操作できます。
  • 8つのアセンブリグループ名称付きのグループが、構造シェルからより小さなシステムまでを結び付けます。
  • プリセット表示と自由表示見慣れた角度から始め、オービット操作で奥行きを確認できます。

一度に1つのレイヤーを開く製品解説

iPhone Insideは、3つの推測的なデバイスコンセプトを、インタラクティブな構造研究へ進むためのエントリーとして提示します。コレクションでは、各レンダリングデバイスにモデル名、ディスプレイサイズのラベル、Explore insideリンクを組み合わせています。小さなIndependent concept studies注意書きによって、これらが発表済み製品の仕様ではなく、デザインコンセプトであることを示しています。

詳細ワークスペースは、コレクションとは異なる問いに答えます。部品は全体とどのように関係しているのでしょうか。分離スライダー、カメラコントロール、任意で開けるアセンブリパネルによって、その問いに入る方法を複数提供します。すべての部品を認識していなくても探索を始められるインターフェースです。

完全なコンセプトコレクションには、3つのデバイス、それぞれのモデル名とディスプレイサイズのラベル、各エントリーのExplore inside、独立したコンセプトであることを示す注意書きが表示されています。
完全なコンセプトコレクションには、3つのデバイス、それぞれのモデル名とディスプレイサイズのラベル、各エントリーのExplore inside、独立したコンセプトであることを示す注意書きが表示されています。

検査タスクごとに適切なコントロールを選ぶ

有用な製品解説では、1つのコントロールですべてを行おうとはしません。このワークスペースでは、モデルをどこまで開くか、どのように見るか、どのアセンブリを理解したいかを分けて操作できます。これらのコントロールは、密集したツールバーにならずに連携できます。

全体像を失わずに分離を操作する

スライダーはAssembledからEvery componentまで動き、パーセンテージを表示します。キャプチャされた65%の分解表示は、主要レイヤー間の空間を示しながらも、1台のスマートフォンとして読み取れます。これにより、部品が完全にばらばらになった状態よりも、外装と内部の関係が把握しやすくなります。

既知の開始角度を用意する

カメラレールには3/4、B、F、Sのプリセットがあります。閲覧者は、認識しやすい正面、背面、側面の表示から始めて、オブジェクトをオービット操作できます。短いラベルはスペースを節約しますが、適用時にはポインター利用者だけでなく、キーボード利用者やスクリーンリーダー利用者も名称を利用できるようにしてください。

注釈を任意にする

注釈はモデルを常に覆うのではなく、独立した切り替え操作の背後に置きます。これにより、閲覧者はまず形状を比較し、必要なときにラベルを表示できます。ラベルを初期状態で非表示にする場合でも、切り替え操作を見つけやすくし、選択した部品に別の明確な表示を用意する必要があります。

アセンブリ名を3Dワークスペースに結び付ける

構造パネルを開いても、完全なモデルと下部のコントロールストリップは表示されたままです。番号付きの8つのアセンブリには、それぞれ名称と平易な言葉によるサブタイトルがあります。DisplayにはGlass, pixels and touchという補足説明が、Logic boardにはCompute and connectivityという補足説明が付いています。サブタイトルは、技術的なカテゴリーを製品内で果たす役割へと置き換えて説明します。

パネルのフッターには、選択可能な部品が198個あることが示されます。これはこの手続き的なコンセプトにおける範囲を示すラベルであり、実在するスマートフォンの検証済みインベントリではありません。選択肢を8つのアセンブリにグループ化することで、開始時の選択を扱いやすくしつつ、基礎となるオブジェクトが8個の部品だけで構成されているとは示していません。

完全なアセンブリワークスペースでは、分離されたデバイスの横に8つの名称付きグループをすべて配置し、カメラプリセットと下部のコントロールストリップも表示したままにしています。
完全なアセンブリワークスペースでは、分離されたデバイスの横に8つの名称付きグループをすべて配置し、カメラプリセットと下部のコントロールストリップも表示したままにしています。
アセンブリパネルにおける2段階の説明
アセンブリ表示されるサブタイトル答えを導く問い
EnclosureThe structural shell全体の形状を支えているものは何か?
DisplayGlass, pixels and touch視覚面とタッチ面を担うレイヤーはどれか?
Logic BoardCompute and connectivityコンセプトではコンピューティングシステムをどこに配置しているか?
Fasteners and FlexHolding everything together小さな接続要素はどのようにグループ化されているか?

修理ガイドではなく、説明用の構造研究

ソースでは、このデザインをReference-led exterior. Illustrative internals.と説明しています。デバイス名、サイズ、形状、部品数は独立したコンセプト研究に属するものであり、検証済みの製品仕様や修理手順として扱うべきではありません。このローカルプレビューは視覚的なコントロールを示すものであり、実在するデバイス内部の部品配置が正確であることを示すものではありません。

OpenDesignでインタラクティブな製品解説デザインを作成する方法

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

    デスクトップアプリをダウンロードしてインストールし、セットアップを完了してください。デザイン用のプロジェクトを作成します。

    OpenDesignをダウンロード
  2. オブジェクトとアセンブリグループを定義する

    架空または記録されたオブジェクトから始め、開いたときに閲覧者が何を学ぶべきかを明確にします。この新しいデザインプロンプトは、未検証のデバイス仕様ではなく、インタラクションパターンを取り入れたものです。

    推奨プロンプト

    架空の携帯デバイス向けに、インタラクティブな製品解説デザインを作成してください。3つのバリエーションと、コンセプト研究であることを明確に示す注意書きを掲載したコレクションページから始めます。各エントリーを開くと、中央に完全な3Dオブジェクトが配置された、明るく整理されたワークスペースを表示します。AssembledからSeparatedまでのスライダーを追加し、パーセンテージを表示するとともに、段階的な分解と分解レイヤー表示を区別してください。中間設定でもデバイスの形状が認識できるようにします。正面、背面、側面、斜め前方のカメラプリセットを、自由なオービット操作と併せて用意してください。折りたたみ可能なパネルには8つのアセンブリグループを一覧表示し、それぞれに名称と役割を平易な言葉で説明する文を付けます。パネル、モデル、下部コントロールを同時に表示できるようにしてください。注釈は、分かりやすい独立した切り替え操作の背後に置きます。内部形状は説明用であることを明記し、3Dレンダリングを利用できない場合には、読みやすい静的な代替表示を提供してください。

  3. 組み立て済み状態と中間状態を比較する

    分離の度合いが変わっても、同じ向きと部品の識別性を維持するようOpenDesignに指示します。効果を最大化する前に中間表示を確認してください。閲覧者がどのレイヤー同士がまとまっているかを理解できる必要があります。リセットすると、予測可能な開始状態に戻るようにします。

  4. キャンバスに頼らず説明をテストする

    3D表示とは独立して、グループ名、サブタイトル、コントロールのラベルを確認します。コントロールにはキーボードでアクセスできるようにし、正確性に関する注意書きを残します。小さな画面では、オブジェクトを認識するためのスペースを狭めすぎずにパネルを開ける、明示的な方法を用意してください。

  5. エクスポートして共有リンクを取得

    完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応