レイヤー
ProtoPieでは、長方形、楕円、星形、多角形などのシェイプ用のレイヤーだけでなく、画像、動画、Lottieアニメーションなどのメディア用のレイヤーを使用することができます。
レイヤーのプロパティ
情報画像レイヤー
画像レイヤーを使用すると、作成途中のプロトタイプに容易に画像を連動・微調整できます。ProtoPieで利用可能なファイル形式は次の通りです。PNG, JPG, JPEG, BMP, GIF, SVG, and WebP。
画像レイヤーの追加方法
プロジェクトに画像レイヤーを追加する方法は二つあります。 一つ目は、挿入したいシーン(Scene)に画像をドラック・アンド・ドロップ(Drag and drop)することです。 二つ目は、画像レイヤーを作成した後、プロパティパネル(Property Panel)で行う方法となります。 画像の元の大きさに合わせたい場合は、プロパティパネルにある「元の比率を適用」するオプションをクリックしてください。
プランにより、ローカルファイルから画像をアップロードしたり、エンタープライズ(Enterprise)ユーザーの場合は、セルフホストURLよりインポートすることができます。
不透明度、輪郭率、満たしなど、プロパティ(Properties)の右側で様々な表現を調整し希望の視覚効果を表現することができます。
SVGレイヤー
「編集可能にする(Make Editable)」オプションをクリックすることで、画質が劣化することなくSVG（Scalable Vector Graphics）としてインポートでき、シェイプ化が可能です。
ProtoPieで完全に対応していないSVGファイルを「編集可能にする(Make Editable)」する場合、レイヤーの見た目が変更されることがあります。
カラーグラデーションとマルチカラーの塗りつぶしは現在対応しておりません。
Sketch、Figma、Adobe XD、またはZeplinからSVGコードをコピーして、そのままProtoPieに貼り付けることができます。
Figma用のProtoPieプラグインを使用し、ベクトルレイヤーをSVGでインポートすることもできます。
動画レイヤー
使用する動画ファイルをドラッグアンドドロップするか、または動画レイヤーを作成してお好みの動画ファイルを選択することができます。動画の元の解像度を維持したい場合は、プロパティパネルにある「元の比率を適用(Apply original ratio)」するオプションをクリックします。
プランによってローカルファイルから動画をアップロードをしたり、エンタープライズ(Enterprise)ユーザーの場合は、セルフホストURLよりインポートすることができます。
ProtoPieは最大100MBのMP4（H.264）、WebM、MOVの動画ファイルをサポートします。しかし、ProtoPie Studioにインポートする前にProtoPie Player（モバイルアプリ）を使って正常なプレビューを行うためには、その動画ファイルが特定の要件を満たしているか確認することが必要です。
iOS端末の場合：
対応する拡張子：MP4（H.264）、MOV
最大4K／60 fps、H.265/H.264形式でエンコードされたM4V、MP4、MOVファイル。AAC-LCオーディオ、ステレオオーディオの場合、最大160 Kbps、48kHz。プロファイルレベル、ハイプロファイル4.2。
MPEG-4形式でエンコードされた最大 2.5 Mbps、480p/30 fpsのM4V、MP4、MOVファイル、シンプルプロファイルとAAC-LCの組み合わせ、最大160 Kbps、 48kHz、ステレオオーディオ音声。
Motion JPEG（M-JPEG）形式でエンコードされた最大35 Mbps、1280×720ピクセル、30フレーム/秒、音声：ulaw、PCMステレオオーディオのAVIファイル。
参照：
Android端末の場合：
対応する拡張子：MP4（H.264）、WebM
参照：
背景透過ビデオ
ProtoPieでは、背景透過の動画ファイル再生が可能になりました。動画の背景を透過させて3Dのような表現を可能とし、プロトタイプのクオリティを高められます。
ProtoPie Studioにインポートする前に、動画コーディングとファイルフォーマットが以下の基準を満たしているか確認し、プレビューウィンドウ、ProtoPie Player、またはProtoPie Cloudで最適なパフォーマンスが発揮されるか確認してください。
背景透過動画は、以下の条件で最大のパフォーマンスを発揮します。
Webブラウザ: Chromeはアルファ付き（.webm）のVP9をサポートし、Safariはアルファ付き（.mov, .mp4）のHEVCをサポートします。
iOS: アルファ付きHEVCの使用をお勧めします。不適切なコーデックやフォーマットを使用した場合は、プロトタイプに動画ファイルが不正確に読み込まれる場合があります。
Android: アルファチャンネルに対応する動画ファイルを基本的にはサポートしておりません。
Lottie（ロッティ）のレイヤー
Lottieメディアレイヤーは、BodymovinでエクスポートされたAdobe After EffectsアニメーションのJSONファイルを起動します。詳しくは、こちらのLottieFiles（ロッティファイル）をご参照ください。
Lottieファイルをシーンにドラッグアンドドロップするか、Lottieレイヤーを作成してお好みのLottieファイルを選択できます。Lottieファイルの元の比率を維持したい場合は、プロパティパネルにある「元の比率を適用(Apply original ratio)」するオプションをクリックします。
プランにより、ローカルファイルからLottieファイルをアップロードしたり、エンタープライズ(Enterprise)ユーザーの場合は、セルフホストURLよりインポートすることができます。
音声レイヤー
ProtoPieでは、WAV、MP3、M4Aの音声ファイルをご使用いただけます。
カメラレイヤー
スマートフォンの内蔵カメラに表示される映像をProtoPieのレイヤーとして読み込むことができます。また、QRコードやバーコードを読取るスキャン機能を作ることも可能です。ただし、本機能は実機にダウンロードされたProtoPie Player上だけで機能します。パソコン上のプレビュー画面やWebビュー上では、代わりに仮画像のプレースホルダー（Placeholder）が表示されます。
テキストレイヤー
テキストレイヤーは、テキストを画面に表示するレイヤーです。
欠落しているフォント
フォントが欠落している場合は、警告が表示されます。代替フォントを選択して、欠落したフォントを置き換えてください。
カスタムフォントをテキストレイヤーに適用する方法
※本機能はEnterprise（エンタープライズ）プランでのみご利用いただけます。
以下の簡単な手順に従って、ProtoPie Studioでテキストレイヤーにカスタムフォントを適用できます：
編集可能なテキストレイヤーを選択します。
テキストレイヤーのプロパティパネルにある「フォントメニュー」を開きます。
フォント一覧を表示し、「Custom」カテゴリーにアップロードされているカスタムフォントの中からお好みのフォントを選択します。この一覧には、所属しているエンタープライズチームおよび組織でアクセス可能なカスタムフォントが表示されます。
選択したテキストレイヤーに該当のカスタムフォントが適用されます。
注意：カスタムフォントをアップロードできるのは、チーム・オーナー（Team Owner）、チーム・管理者（Team Admin）、「サービス管理者（Service Admin）」の権限を持つユーザーのみです。
同じフォントを使用しているすべてのテキストレイヤーにカスタムフォントを一括適用する方法
※本機能はEnterprise（エンタープライズ）プランでのみご利用いただけます。
プロトタイプ内のすべてのシーンで同じフォントが使用されているすべてのテキストレイヤーに対して、以下の手順で一括してカスタムフォントを適用できます：
上部のメインメニューにある「編集（Edit）」をクリックします。
オプションから「フォントを置換 (Replace Fonts)」を選択します。
フォントを置換（Replace Fonts）のモーダルウィンドウ（中画面）が表示されたら、変更したい元フォントを選択し、置き換えたいカスタムフォントを選択します。
「置換（Replace）」ボタンをクリックします。
プロトタイプ全体で、選択した元のフォントが指定したカスタムフォントに一括で置き換わります。
入力（Input）レイヤー
テキストの入力機能です。本機能を使用すると、キーボードまたはPC上のキーボードを呼び出し、テキストを入力することが可能となります。1行（Single-line）または複数行（Multi-line）の入力設定をお選びいただけます。
背景のぼかし効果（Background Blur）レイヤー
レイヤーの背面に位置するオブジェクトに「ぼかし（Blur）」効果を与える機能です。以下のぼかし効果がサポートされています。AndroidおよびiOS向けの3つのデフォルト効果（Dark、Light、Extra Light）と、Web、iOS 13以降で利用できる10の追加のぼかし効果です。
レスポンシブ配置指定（Constraints）
レイヤーのConstraints（レスポンシブ配置設定）を指定することができます。親レイヤーのサイズが手動、あるいはレスポンスで大きさが変化する場合に、中にある子レイヤーの位置や大きさをあらかじめ指定した基準に合わせて自動調整する機能です。
右上のエッジにピンを留める
Constraintsの設定で、右側（Right）と上側（Top）を拘束することで、親レイヤーのサイズが変更されても、グレーの子レイヤーは常に親レイヤーの右上を基準とした相対的な位置に配置を維持します。また、親レイヤーのサイズが大きくなってもグレーのレイヤーは元の固定サイズを維持します。
比率に合わせて伸縮スケール（Scale）
位置と大きさ（Width, Height）のスケーリング（Scale）を設定すると、親レイヤーのサイズ変更に伴い、グレーの子レイヤーも親レイヤーと同じ比率で可変（伸縮）するようになります。
固定マージン（Fixed）
Width（横幅）でL+R、Height（高さ）でT+Bを指定すると、グレーのレイヤーは親レイヤーのサイズが変更される際、親レイヤーの左右（および上下）のエッジから常に「一定の距離（余白）」を保った状態で、引き伸ばされるようにサイズが自動調整されます。
よくある質問（FAQ）
does-protopie-support-alpha-masks
ProtoPieはアルファマスクに対応していますか？
ProtoPieではアルファマスク機能は完全にはサポートされていませんが、デザインに適用することは可能です。グラデーションレイヤーをPNGとしてエクスポートし、ProtoPie Studioにインポートできます。理解を深めるために、以下の例を確認してください。
supported-media-file-format
サポートされているメディアファイル形式は何ですか？
ご利用のプランに応じて、ローカルファイルから画像をインポートするか、Enterpriseユーザーの場合はセルフホストされたURLからインポートすることができます。
ProtoPieは以下のメディアフォーマットをサポートしています：
画像：PNG、JPG、JPEG、BMP、GIF、SVG、およびWebP。
ビデオ：最大100MBまでのMP4 (H.264)、WebM、およびMOVファイル。
Lottie：ProtoPieは、エクスプレッションを使用するLottieファイルをサポートしていません。
サポートされていないメディアファイルフォーマットを使用しようとすると、エラーメッセージが表示されます。サポートされているメディアファイルフォーマットを理解するために、以下のエラーコードの説明をご参照ください。
E001: 入力したメディアファイルのURLのコンテンツタイプが正しいことを確認してください。
E002: 使用しようとしているメディアタイプは互換性がありません。サポートされているメディアタイプを選択してください。
E100: 入力したメディアファイルのURLが正しく、オンラインでアクセス可能であることを確認してください。
E101: ファイルフォーマット「.lottie」(Dot Lottie) はサポートされていません。別のLottieファイルフォーマットを選択してください。
E102: Lottieアニメーションの読み込み中にタイムアウトエラーが発生した場合は、後でもう一度お試しください。
E103: Lottie JSONファイルに必要なプロパティ（layer、ip、op、fr、w、およびh）が含まれていることを確認してください。
E104: Lottieの読み込みエラーが発生した場合は、Lottieファイルが有効で破損していないか確認してください。
E105: Lottieアセットはローカルパスではなく、URLまたはオンラインリソースを使用する必要があります。
E106: LottieのJSONファイルが空でなく、Lottie用の適切なJSON形式に準拠していることを確認してください。
E200: 入力したHLS URLが正確でアクセス可能であることを確認してください。
E201: ビデオソースのURLがアクセス可能で正しいことを確認してください。
E202: 100MB以下のMP4 (H.264)、WebM、およびMOVファイルを使用してください。
E203: 使用されているビデオコーデックはサポートされていません。
E300: ProtoPieは、WAV、MP3、M4Aなどのオーディオファイルフォーマットのみをサポートしています。
E301: オーディオの読み込みエラーが発生した場合は、オーディオファイルが破損しておらず、サポートされているフォーマットであることを確認してください。
E400: 画像の読み込みに失敗しました。確認してもう一度お試しください。
E500: このファイルフォーマットはサポートされていません。サポートされているフォーマットを選択してください。
E501: ファイルに問題がある可能性があります。確認してもう一度お試しください。
E600: オーディオソースのURLが有効でアクセス可能であることを確認してください。
supported-self-hosted-url-format
セルフホストのURL形式はどれがサポートされていますか？
URLの形式について特定の制限は設けておりません。URLがお客さまのウェブサイト上で機能し、セルフサーバーとしてホストされている場合、問題なく動作するはずです。
ただし、メディアの読み込みに失敗する場合は、CORS（オリジン間リソース共有）の制限が原因である可能性があります。適切なCORSヘッダーを設定し、配信元のホスティングサーバーが外部ドメインからのリクエストを許可していることを確認してください。