MenuToggle Menu

レイヤー

ProtoPieでのレイヤーの編集方法は、他のデザインツールとほぼ同様です。 長方形、円、星、ポリゴンなどのベクトルレイヤーを追加した後、それらのサイズと位置を調整します。 シェイプを作成するには、キャンバス上の任意の場所をクリックしてドラッグし、シェイプの境界線上の任意の位置にタッチして、シェイプを自由に拡大または縮小しましょう。

レイヤープロパティ

位置

レイヤーのXとY座標

サイズ

レイヤーサイズ

回転

レイヤーアングル

基準点

レイヤーの位置、サイズ、アングルなどが変化したときの基準点

角数

星またはポリゴンの角の数を設定します

比率

星形の内側の点とその中心の間の距離を調整し、パーセンテージで表します。

フィレット

ProtoPieでは、長方形レイヤーのコーナーごとに異なる曲率の設定が可能です。 各コーナーの半径を設定するときは、対応する角の丸いアイコンをクリックして、半径の値を入力します。

不透明度

レイヤーの不透明度が0％の場合、レイヤーに割り当てられたトリガーは無効になります。

塗りつぶし：単色

カラーコードを使用して、塗りつぶしを設定します。 色の不透明度が0％の場合でも、レイヤーに割り当てられたトリガーは有効となります。

塗りつぶし：画像

塗りつぶしとして画像を選択します。塗りつぶしには、フル、フィット、ストレッチの3種類があります。

フレーム

レイヤーのフレーム枠には、内側、中間、外側の3種類があります。

影

レイヤーに影を追加し、影の色と奥行きなどの値を調整します

タッチエリア

実際のレイヤーサイズを超えるタッチエリアの設定が可能です

下にあるレイヤーをタッチできるようにする

レイヤーの下にある他のレイヤーをタッチできる様に設定します

レイヤーマスクとして使用

レイヤーマスクとオーバーラップした部分のみを表示します。

layer properties

画像レイヤー

画像レイヤーを使用すると、プロトタイプ内で画像をスムーズに統合して改善できます。画像をシーン上にドラッグ＆ドロップして画像を追加するか、プロパティのFillで画像レイヤーを作成してから、好きな画像を選んで画像を追加できます。料金制によってローカルファイルから画像をインポートすることも、エンタープライズユーザーの場合、から画像をインポートすることもできます。セルフホスティングURLから画像をインポートすることもできます。

ProtoPieに対応する画像形式：PNG、JPG、JPEG、BMP、GIF、SVG、WebP。

Fill

背景Fillに使用する画像を選びます。

Fill、Stretch、Fitから一つ選んで当該画像が表示される方式をコントロールします。

ボーダー

画像レイヤーにボーダーを適用します。内部、中央、外部から一つ選んで当該画像に対するボーダーの位置を決定します。

影

画像レイヤーに影を追加して深みと次元を加えます。

image layer property

不透明度や半径、Fillなどの様々な側面をプロパティパネルで微調整して、望みの視覚的効果を得ます。

SVG Layer

SVG（Scalable Vector Graphics）ファイルをインポートし、画像の品質を損なうことなくスケーリングすることができます。
SVGファイルのcolor、border、shadowなどのプロパティを変更したい場合は、「shape layer」に変換します。

  • 現在、グラデーションや複数カラーのSVGファイルはサポートされておりません。
  • インポートされたSVGファイルの一部のプロパティがサポートされていない場合、「Convert to shape」ボタンが機能しないことがあります。(現在、ProtoPieでサポートしているのはpath、ellipse、polyline、polygon、rect、circleおよびlineです。)
[object Object]

Paste SVG codes

Sketch、Figma、Adobe XD、ZeplinからSVG codeをコピーして直接ProtoPieに貼り付けることができます。以下はSVGコードの例です。

SVG code example

<svg width="175px" height="166px" viewBox="0 0 175 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
    <polygon id="Star" fill="#2212D4" points="87.5 137.25 33.7176494 165.525055 43.9891644 105.637527 0.478328759 63.224945 60.6088247 54.4874725 87.5 0 114.391175 54.4874725 174.521671 63.224945 131.010836 105.637527 141.282351 165.525055"></polygon>
  </g>
</svg>
[object Object]
[object Object]

Video Layer

ビデオをシーン上にドラッグ＆ドロップしてビデオを追加するか、ビデオレイヤーを作成してから、好きなビデオを選んでビデオを追加できます。料金制によってローカルファイルからビデオをインポートすることも、エンタープライズユーザーの場合、からビデオをインポートすることもできます。セルフホスティングURLからビデオをインポートすることもできます。

ソース

デバイスでビデオを選択するか、セルフホスティングURLからビデオをインポートしてください。

タッチエリア

活性化すると、レイヤーのタッチエリアは当該レイヤーの可視的境界を越えて拡張します。

音量

映像レイヤーのボリューム属性を調整します。

自動で再生

プロトタイプが実行されたら、自動的に動画を再生します。

繰り返す

動画を繰り返し再生します。

video layer property

ProtoPieはMP4(H.264)、WebM、MOVビデオファイルに最大100MBまで対応しています。しかし、ビデオをProtoPie Studioにインポートする前に、モバイルデバイスでのProtoPie Playerとのスムーズなテストのために、次のような特定の基準を当該ビデオが満たしているか確認することが重要です。

iOS用：

  • 対応する形式にはMP4(H.264)とMOVが含まれます。
    • M4V、MP4、MOVファイル形式はH.265/H.264ビデオで最大4K/60fpsまでエンコードされ、AAC-LCオーディオ最大160Kbps、48kHz、ステレオオーディオでハイプロファイルレベル4.2に対応しています。
    • M4V、MP4、MOVファイル形式はMPEG-4ビデオで最大2.5Mbps、480p/30fpsまでエンコードされ、AAC-LCオーディオ最大160Kbps、48kHz、ステレオオーディオでシンプルプロファイルに対応しています。
    • AVIファイル形式はモーションJPEG(M-JPEG)で最大35Mbps、1280 × 720p/30fpsまでエンコードされ、PCMステレオオーディオでulawオーディオに対応ていします。
  • 参照：

Android用：

Video with Transparent Background

透明背景のビデオ

透明背景のビデオに対応するため、ProtoPieはプロトタイプの性能を向上させながら3Dに向けた先導的な一歩を踏み出しました。

ビデオをProtoPie Studioのシーンにインポートする前に、指定のプラットフォーム(プレビュー画面、ProtoPie Player、ProtoPie Cloud)で最適の性能を実現する以下の基準を、ビデオコーデックと形式が満たしているか確認します。

透明背景ビデオが最高の性能を発揮する条件：

  • Web用: Chromeはアルファチャンネル付きVP9(.webm)に、Safariはアルファチャンネル付きHEVC(.mov, *.mp4)に対応しています。iOS用: アルファチャンネル付きHEVCの使用を推奨します。
  • iOSの不正確なコーデック/形式により、指定のエリア内でコンテンツが正しく表示されないことがあります。
  • Android用: Androidは基本的にアルファチャンネル付きビデオファイルに対応していません。

Lottie Layer

Lottieメディアレイヤーは、BodymovinからエクスポートしたAdobe After Effectsアニメーションを解析したJSONファイルをロードします。Lottieファイルについての詳細をご覧ください。

Lottieファイルをシーン上にドラッグ＆ドロップしてLottieファイルを追加、又はLottieレイヤーを作成後、好きなLottieファイルを選んでLottieファイルを追加できます。料金制によってローカルファイルからLottieファイルをインポートすることも、エンタープライズユーザーの場合、セルフホスティングURLからLottieファイルをインポートすることもできます。

ソース

デバイスでLottieファイルを選択するか、セルフホスティングURLからLottieファイルをインポートしてください。

タッチエリア

活性化すると、レイヤーのタッチエリアは当該レイヤーの可視的境界を越えて拡張します。

自動で再生

プロトタイプが実行されたら、自動的にLottieを再生します。

繰り返す

Lottieを繰り返し再生します。

lottie layer property

Audio Layer

ProtoPieはWAV、MP3、M4Aオーディオファイルに対応しています。

音量

オーディオレイヤーのボリューム属性を調整します。

自動で再生

プロトタイプが実行されたら、自動的にオーディオを再生します。

繰り返す

オーディオを繰り返し再生します。

video lottie audio layer property

Camera Layer

スマートデバイスで撮影した写真をプロトタイプのレイヤーとして活用したり、レイヤーからQRとバーコードを読み取ることもできます(詳しく見る)。スマートデバイスのカメラから出力されたものをレイヤーとして使用でき、ProtoPie Playerでプロトタイプを実行したときに機能します。プレビューウィンドウまたはブラウザでプロトタイプを実行すると、プレイスホルダーが代わりに表示されます。

自動スタート

シーンがスタートする時にカメラが自動的に起動される。

フロントカメラ [前面]

前面のカメラを使用する。

フロントカメラ [背面]

背面のカメラを使用する。

R及びバーコードスキャナー(QR & Barcode Scanner)

プロトタイプ内でQR及びバーコードスキャンをアクティブ化します。サポートされる形式にはQRだけでなく、CODE39、CODE128、EAN13_UPCA、EAN8、UPCEのようなバーコードのサブタイプが含まれます。

すぐにURLを開く(Open URL Immediately)

QRコードをスキャンして、Webブラウザからリンクを開くことができます。バーコードをスキャンするには、追跡維持オプションを使用します。

追跡維持(Keep Tracking)

QRとバーコードに保存された値をモニタリングします。

camera layer property

Text Layer

テキストレイヤーを利用して、テキストの直接入力が可能です。

フォント

パソコンに設置されているフォントはすべて選択できます。システム基本フォントを使えば、プロトタイプで装置を基本のフォントに選択すれば、プロトタイプで装置を基本フォントで使用できる。

ウエイト

フォントの太さを調整できます。

サイズ

テキストのサイズを調整できます。

整列

フォントの左右,上下の整列を調整できます。

テキストリサイズ

テキストレイヤは幅や高さによって自動でサイズ調整、または固定しておくこともできます。

字間

テキストの字間を調整できます。

行間

テキストの行間を調整できます。

Text Property

Missing Font

ProtoPie Studio で使用されているフォントが、実行中のデバイスに表示されない場合は、「missing font」というメッセージが表示されます。 フォントを置き換える場合には、表示される代替フォントから選択してください。

[object Object]

テキストレイヤーにユーザー指定フォントの適用

エンタープライズプランでのみご利用いただけます。

エディターは、次の簡単な手順に従ってプロトパイスタジオでユーザー指定フォントをテキストレイヤーに簡単に適用できます。

  1. 編集できるテキストレイヤーを選択します。
  2. テキストレイヤーのプロパティパネルにあるフォント(Font)メニューにアクセスします。
  3. フォントリストを検索して“ユーザー指定(Custom)”のカテゴリ内で使用できるユーザー指定フォントのいずれかを選択します。このリストには当該のエンタープライズチームおよび/または組織内からアクセスできるユーザー指定フォントのみ表示されます。
  4. 今選択したテキストレイヤーがここで選択したユーザー指定のフォントで表示されます。

参考: チーム所有者とサービス管理者のみ、ユーザー指定フォントをアップロードすることができます。

[object Object]

同じフォントを使用するすべてのテキストレイヤーにユーザー指定フォントの適用

エンタープライズプランでのみご利用いただけます。

エディターは、次の手順に従ってプロトタイプのすべてのシーンで同じフォントを共有するすべてのテキストレイヤーにユーザー指定フォントを簡単に適用できます。

  1. 上段の探索メニューから"編集(Edit)"をクリックします。
  2. オプションの中から"フォント取り替える(Replace Fonts)"を選択します。
  3. フォント取り替える(Replace Fonts)モーダルからユーザー指定フォントと取り替えるフォントを選択します。
  4. “取り替える(Replace)”ボタンをクリックします。
  5. 全体のプロトタイプから選択したフォントがここで選択したユーザー指定フォントに変わります。
[object Object]

Input Layer

インプットレイヤはスマート機器のキーボードや普通のキーボードを通じてSingle-lineまたはMulti-lineのテキストを入力するのに使用します。

１．テキスト

インプットレイヤに予めタイピングされているテキストが必要な時に使用します。

２．プレースホルダ

インプットレイヤにプレースホルダを設定することができます。プレースホルダの色はタイピングされるテキストの色と異なるように設定できます。

３．キーボードタイプ

モバイルキーボードのタイプが選べます。

  • テキスト
  • URL
  • 電子メール
  • 数字
  • テキストパスワード
  • 数字パスワード
4. リターン

下記のものの中で一つを使い、スマート機器の基本キーボードにあるリターンキーを修正できます。

  • 移動
  • 次
  • 送る
  • 検索
  • 完了
  • New Line (複数の行のみ)
５．キーボードテーマ

iOSに限りキーボードのテーマをダーク/ライトの中で選べます。

６．フォーカスアウとオプション

キーボードを解除できる二つのオプションがあます。

  • Returnキーを押す
  • Input Layerの以外の部分を押す。
Input Layer Property

iOS Background Blur Layer

ぼかし効果の適用：Android及びiOSに3種類の基本効果(ダーク、ライト、エキストラライト)を適用することができ、またウェブやiOS 13以上の場合は10種類のぼかし効果を追加適用することもできます。

Constraints

レイヤーに制約を設定することができます。親レイヤーが手動またはResponseを介してリサイズされると、子レイヤーのサイズと位置が自動的に制約に従って調整されます。

1: 位置の制約

親レイヤーに対して左、右、左+右、上部、下部、上部＋下部、中央、またはスケールのいずれかの固定間隔を設定して、レイヤーの位置を維持します。

2: サイズの制約

左＋右、上部＋下部、およびスケールのみが、親レイヤーのサイズ変更に応じてレイヤーのサイズを比例的に調整します。それ以外の制約は位置を維持しつつサイズには影響を与えません。

constraints

Pin to Top Right Corner

右と上部の制約を設定すると、灰色のレイヤーは親レイヤーの右端と上端に対して相対的な位置を維持します。また、親レイヤーがリサイズされても、灰色のレイヤーのサイズは維持されます。

[object Object]
pin to top right corner property

Scale Spacing

幅と高さの両方にスケールオプションを設定すると、灰色のレイヤーのサイズと位置は親レイヤーのサイズ変更に比例して調整され、親レイヤーと同じスケーリング比率を維持します。

[object Object]
center position property

Fixed Spacing

幅に左＋右、高さに上部＋下部を設定すると、親レイヤーの幅が変更された場合でも灰色のレイヤーは左右の間隔を一定に保ちながらサイズが調整されます。

[object Object]
fixed spacing property

よくあるご質問(FAQ)

  • どんな形式のセルフホスティングURLに対応していますか？

    URL形式に特定の制限は設けていません。もしそのURLがWebサイトで機能し、セルフサーバとしてホストしていれば、問題なく機能するはずです。

    ただ、メディアの読み込みに失敗する場合は、CORS制限が原因である可能性があります。ホストサーバーが外部ドメインからのリクエストを受け入れられるよう、適切なCORSヘッダーが設定されているかご確認ください。

  • どんな形式のメディアファイルに対応していますか？

    料金制によってローカルファイルからメディアをインポートすることも、エンタープライズユーザーの場合、セルフホスティング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」ファイル形式に対応していません。別のLottieファイル形式を選択してください。
    • E102:Lottieアニメーションをロード中に時間制限エラーが発生した場合、しばらくしてからもう一度お試しください。
    • E103:Lottie JSONファイルに必要なプロパティ(レイヤー、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が有効でアクセス可能か確認してください。

  • ProtoPieはアルファマスクに対応していますか？

    ProtoPieはアルファマスク機能に完全に対応してはいませんが、この機能をデザインに適用することは可能です。グラデーションレイヤーをPNGとしてエクスポートし、ProtoPie Studioにインポートできます。理解を助けるために次の例を確認してください。

Back To Top