コンポーネント

コンポーネントを使うと、レイヤーとインタラクションのセットを保存でき、プロトタイプ全体で再利用できます。再利用したいレイヤーとインタラクションを選択し、コンポーネントに変換して、各シーンにインスタンスを作成します。

コンポーネントが画期的な理由は次のとおりです：

• 繰り返し作業をなくす: 同じ要素やインタラクションを何度も作り直す必要はありません。コンポーネントは一度作成すればどこでも再利用でき、貴重な時間と労力を節約できます。

• 可読性を高める: コンポーネントを使うと、シーンはよりすっきりして理解しやすくなります。冗長な要素でプロトタイプを散らかす代わりに、コンポーネントのインスタンスを使うことで、より整理された効率的なデザインにできます。

• 作業フローを加速する: コンポーネントを再利用することで、プロトタイプを素早く構築し、反復できます。元のコンポーネントに変更を加えると、すべてのインスタンスが自動的に更新され、デザイン全体の一貫性が保たれます。

コンポーネントの使用

シーンでコンポーネントを作成する

ProtoPie なら、レイヤーをコンポーネントに変換するのは簡単です。次の手順に従ってください：

1. レイヤーを選択する：コンポーネントに変換したいレイヤーまたは複数のレイヤーを選択します。

2. 「コンポーネント」アイコンをクリックする：ツールバーでコンポーネントアイコンを見つけてクリックします。あるいは、選択したレイヤーを右クリックして、コンテキストメニューから コンポーネントに変換 を選択します。

3. できました！コンポーネントの準備が整いました：ProtoPie は、選択したレイヤーとそれに対応するインタラクションを使ってコンポーネントを自動的に作成します。元のレイヤーはコンポーネントのインスタンスに置き換えられます。

コンポーネントを直接作成する

コンポーネントは最初から作成することもできます。左側のコンポーネントパネルを開き、プラスアイコンをクリックします。すると、カスタマイズを始められる空のコンポーネントが作成されます。

コンポーネントインスタンスを追加する

コンポーネントパネルからコンポーネントをアクティブなシーンのキャンバスへドラッグすることで、コンポーネントのインスタンスを作成できます。

コンポーネントを編集する

メインコンポーネントを編集する

メインコンポーネントを編集するには、コンポーネント編集モードを開く必要があります。このモードを有効にするには、コンポーネントパネルのコンポーネントをクリックするか、コンポーネントのインスタンスを右クリックして、コンテキストメニューから "メインコンポーネントを編集" を選択します。

メインコンポーネントの編集は、シーンを編集するのと似ています。コンポーネントのレイヤー、変数、トリガー、応答を作成、変更、削除できます。行った変更は、コンポーネントのすべてのインスタンスに適用されます。

コンポーネントの編集が完了したら、「完了」ボタンをクリックするか、画面左上にある左矢印ボタン（←）をクリックしてシーンに戻れます。または、パネル内のシーンをクリックして任意のシーンに移動できます。

インスタンスを編集する

ProtoPie では、コンポーネントインスタンスのサブレイヤーのプロパティを変更するのは簡単です。仕組みは次のとおりです：

• 簡単に上書きする: コンポーネントインスタンス内のサブレイヤーのプロパティを変更すると、その特定のプロパティを上書きしているだけです。これらの上書きはそのインスタンス固有のもので、メインコンポーネントには影響しません。これにより、各インスタンスを個別にカスタマイズでき、コアとなるコンポーネント構造を維持しながら柔軟に扱えます。

• 変更を維持する: メインコンポーネントを変更しても、インスタンスで上書きされたプロパティは変わりません。つまり、カスタマイズ内容を失う心配をせずに、自由に試行錯誤と反復ができます。

• クリックでリセットする: 元の設定に戻したいですか？問題ありません！インスタンスを右クリックして、コンテキストメニューから "上書きをリセット" を選択します。すべての上書きがクリアされ、インスタンスは元の状態に戻って、再びメインコンポーネントを反映します。

メインコンポーネントとして使用する

コンポーネントのインスタンスをそのメインコンポーネントにリンクできます。これにより、コンポーネント編集モードに入らなくても、インスタンスを編集することでメインコンポーネントを編集できます。

変数の上書き

変数の初期値を上書きすることができます。メインコンポーネントの変数で「上書き可能にする」オプションを有効にすると、インスタンスのプロパティパネルで変数値を変更できます。

コンポーネントインスタンスを分離する

分離するとコンポーネントとの接続が切れ、インスタンスはコンテナになります。これはプロパティパネルまたはコンテキストメニューから行えます。使用前に、Labs でこの機能を有効にしてください。

コンテキストメニューからコンポーネントを分離する

1. インスタンスを右クリックする

2. インスタンスを分離 をクリックする

プロパティパネルからコンポーネントインスタンスを分離する

1. コンポーネントインスタンスを選択する

2. プロパティパネルの インスタンスを分離 アイコンをクリックする

インスタンスが分離されると、Detached_ プレフィックスが分離されたインタラクションの名前に自動的に追加されます。インタラクションが分離されたインスタンス由来かどうかを簡単に判別できます。

コンポーネントインスタンスを入れ替える

右側のプロパティパネルで、数回クリックするだけで任意のコンポーネントインスタンスを別のインスタンスと簡単に入れ替えられます。

コンポーネントをグループ化する

コンポーネント名のスラッシュ "/" を使って、グループを作成したり分けたりできます。たとえば、1つ目のコンポーネント名が「ボタン / プライマリ / 標準」、2つ目のコンポーネント名が「ボタン / セカンダリ / 標準」であれば、以下のようにグループ化されます。

プロトタイピングスキルを次のレベルに引き上げる準備はできていますか？

デジタルダッシュボードマスタークラス に参加して、アセットの整理、再利用可能なコンポーネントの作成、スマートなロジックの実装に関する専門知識を身につけましょう。

作業の重複を減らし、効率的に構築し、インタラクションを手軽にスケールさせる方法を学びたいなら、最新の モバイルゲーム・プロトタイピングマスタークラス に参加しましょう。

この高度な知識があれば、より重要なタスクに集中でき、プロジェクトを次のレベルへ引き上げ、最終的には洗練された堅牢な完成品につなげられます。

スキルを向上させ、プロトタイピングのエキスパートになるこの機会をお見逃しなく！