ProtoPie Studio のインターフェース
ProtoPie Studio には、簡単に操作できるわかりやすいインターフェースがあります。このページでは、その主要なコンポーネントについて詳しく説明します。
もうインターフェースには慣れましたか？初めてのプロトタイプを作成する について詳しく学びましょう！
ダッシュボード
ProtoPie Studio にログインすると、ダッシュボードがあなたを迎えます。最近のプロトタイプ（Pies）を表示したり、新しい Pie を作成したり、ローカルまたはクラウドベースの Pie にアクセスしたりできます。
最近の Pie：最近アクセスしたプロトタイプは、[最近の Pie] セクションで簡単に見つけて開けます。進行中のプロジェクトにすばやくアクセスできます。
削除：このオプションを選択すると、Pie はコンピューターまたはクラウドページから完全に削除されます。
最近から削除：最近表示した Pie の一覧から Pie を削除したい場合は、[最近から削除] オプションを選択します。
Pie を開く：ProtoPie Studio では、プロトタイプを開く方法が複数あります。ProtoPie Cloud から直接プロトタイプを開くことも、コンピューターに保存されているローカルの .pie ファイルにアクセスすることもできます。ProtoPie Studio でクラウド Pieを開く方法について詳しく見てみましょう。
新しい Pie：新しい Pie の作成を始めるには、利用可能な 2 つの [新しい Pie] ボタンのいずれかを選択します。また、初めてのプロトタイプを作成する方法についても詳しく確認できます。
学習
ProtoPie Studio の** 学習** タブでは、ProtoPie に最適な学習資料を見つけられます。ログインすると、プロトタイピングを始めるために役立つさまざまなリソースが見つかります。たとえば次のようなものです:
インタラクション テンプレート：インタラクション テンプレートを ProtoPie で直接開けます。どのようにインタラクションが作られているかを確認したり、再利用したりできます。
プロトタイプギャラリー：他の ProtoPie ユーザーが作成したプロトタイプを見て、インスピレーションを得ましょう。
クイックスタートコース：基本機能を 5〜7 分で学べるチュートリアルです。プロになるための助けになります。
ヒント & コツ：真の ProtoPie エキスパートになるまでの道のりで必要なサポートを提供します。
イベント：ProtoPie のライブイベントをチェックしましょう。ProtoPie のエキスパートやお客様からベストプラクティスや業界動向を学べます。
サポート
ヘルプが必要ですか？それともフィードバックがありますか？ブログをご覧いただくか、専用のドキュメントをお読みください。機能要望を送信または賛成票を入れたり、ProtoPioneers コミュニティに参加して、他の ProtoPie ユーザーから学ぶこともできます。
ProtoPie Studio でのプロトタイピング
ProtoPie Studio のプロトタイプは、Web ブラウザーのページのようにタブとして開きます。これにより、プロトタイプ間を簡単に切り替えられ、複数のプロジェクトを同時に作業できます。
1. レイヤーパネル
レイヤーパネルでは、アクティブなシーン内のすべてのレイヤーを、その階層に基づいて一覧表示できます。シーンの仕組みについて詳しく学びましょう。
お気に入りのデザインツールと同様に、レイヤーパネル内のレイヤーに対してさまざまな操作を簡単に行えます。並べ替え、名前の変更、ロック、ロック解除、非表示、表示などが含まれます。
Figma、Sketch、または Adobe XD からデザインをインポートすると、レイヤー階層はそのまま維持され、元のデザインファイルの構造が保持されます。デザインのインポートについて詳しく学びましょう。
2. シーンパネル
デフォルトではシーンパネルは表示されません。表示するには、ウィンドウ左側にあるシーンパネルのアイコンをクリックします。
シーンパネルでは、プロトタイプ内で作成されたすべてのシーンを整理して表示できます。ここでは、シーン間を簡単に移動し、必要に応じて順序を調整できます。シーンについて詳しく学びましょう。
3. キャンバス
キャンバスは、アクティブなシーンとそのレイヤーを格納するコンテナーです。各シーンは個別に表示されるため、1 つずつ集中して作業できます。
キャンバスへのレイヤー追加は、いくつかの方法で行えます。デザインツールからレイヤーをインポートする、新規作成する、手動で追加する、という選択肢があります。レイヤーについて詳しく見る。
キャンバス内を移動するには、スペースバーを押しながら画面上をクリックしてドラッグすると、簡単にパンできます。
4. プロパティパネル
プロパティパネルでは、選択したシーン、レイヤー、トリガー、またはレスポンスのプロパティと設定を確認・調整できます。
複数のレイヤーを同時に選択すると、プロパティパネルにはそれらの共通プロパティが一度に表示されます。
5. インタラクションパネル
インタラクション パネルでインタラクションを作成します。まずトリガーを追加し、1 つ以上のレスポンスと組み合わせます。
インタラクション パネルは、シーン内のすべてのインタラクションをリストとして表示します。レイヤーパネルとは異なり、インタラクションパネルには階層構造がありません。
インタラクションの作成方法について詳しく学びましょう。
6. タイムライン
これは、選択したレスポンスの継続時間、遅延、繰り返しのプロパティを視覚的に表したものです。タイムラインは、プロパティパネルでそれらを編集する際に、その内容を反映します。
タイムラインの使い方について詳しく学びましょう。
7. プレビューウィンドウ
プレビューウィンドウを使うと、インタラクションの動作を確認できます。これにより、プロトタイプを共有する前にインタラクションのエラーを見つけやすくなります。
デフォルトでは、レイヤーやインタラクションに変更を加えると、プレビューウィンドウは自動的に更新されます。
ProtoPie Studio を開いたときやプロトタイプ間を切り替えるときに、プレビューウィンドウをデフォルトで非表示にしたい場合は、[Preferences] でオフにしてください。
8. ツールバー
ツールバーでは、よく使う操作にすばやくアクセスできます:
レイヤーを追加します。
プロトタイプのデバイスを変更します。
プレビューウィンドウを使用します。
プロトタイプをProtoPie Playerで開きます。
プロトタイプをProtoPie Cloudにアップロードします。
9. コンポーネントパネル
シーンパネルと同様に、コンポーネントパネルもデフォルトでは表示されません。表示するには、ウィンドウ左側のコンポーネントパネルアイコンをクリックします。アカウントで利用可能なすべてのローカルコンポーネントとインタラクション ライブラリが表示されます。
コンポーネントとインタラクション ライブラリについて詳しく学びましょう。
10. 変数パネル
シーンパネルやコンポーネントパネルと同様に、変数パネルもデフォルトでは表示されません。表示するには、[Variables] をクリックします。アクティブなシーン、またはプロトタイプ全体のシーンで使用されているすべての変数が保存されています。
変数について詳しく学びましょう。
設定
一般
このセクションでは、言語、外観、キャンバス背景色など、ProtoPie Studio の一般設定を調整できます。現在、ProtoPie Studio は英語、日本語、中国語をサポートしています。
シーン
新しく Pie の作成を始めるときに使用する既定デバイスを設定します。プリセット一覧から既定デバイスの 1 つを選択することも、独自にカスタマイズすることもできます。ProtoPie Studio 内の対応デバイスについて詳しく学びましょう。
ネットワーク
ProtoPie Studio のプロキシ設定は、初期状態では「No Proxy」に設定されています。会社でプロキシサーバーを使用している場合は、ProtoPie でプロキシ設定を正しく構成する方法について、こちらのガイドラインを参照してください。
ラボ
Labs で最新のベータ機能を有効にして試せます。ベータ機能に関するフィードバックがある場合は、ProtoPie Studio 内の「問題を報告」フォームから簡単に送信できます。
または、ProtoPioneers コミュニティに参加して、そこで意見を共有することもできます。
