MenuToggle Menu

レイヤー

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

レイヤープロパティ

位置

レイヤーのXとY座標

サイズ

レイヤーサイズ

回転

レイヤーアングル

基準点

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

角数

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

比率

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

フィレット

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

不透明度

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

塗りつぶし:単色

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

塗りつぶし:画像

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

フレーム

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

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

タッチエリア

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

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

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

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

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

layer properties

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

プロトパイは動画レイヤーもサポートしています。h264でエンコーディングされたMP4形式の動画ファイルが使用できます。

音量

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

自動で再生

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

繰り返す

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

video lottie audio layer property

Lottie Layer

Lottieレイヤーは、Adobe After EffectsアニメーションをプロトタイプでレンダリングしたJSONファイルです。詳細についてはLottieをご覧ください。

自動で再生

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

繰り返す

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

video lottie audio layer property

Audio Layer

Audio(オーディオ)レイヤーをサポートしています。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のテキストを入力するのに使用します。

1.テキスト

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

2.プレースホルダ

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

3.キーボードタイプ

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

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

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

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

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

6.フォーカスアウとオプション

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

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

iOS Background Blur Layer

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

Constraints

レイヤーにコンストレイント(制約)を追加します。元のレイヤーがリサイズされた場合、追加するコンストレイントによって、レイヤーそのもののサイズと位置が自動で調整されます。コンストレイントは、元のレイヤーがレスポンスによってリサイズされた時も適用が可能です。

  • 左部分は位置制約を測り、上下左右の4方向で固定スペースを使うことができます。これにより、親レイヤーのいずれの四方に対してもレイヤーのある位置を維持することができるのです。
  • 右側はサイズ制約を測り、固定幅と固定高さを使うことができます。これにより、親レイヤーの幅と高さに対して、レイヤーのサイズを維持することができるのです。

constraints

Pin to top right corner

幅、高さ、上部領域と右上領域を固定することにより、元のレイヤーの右側と上部に対してブルーレイヤーの位置を維持することができます。元のレイヤーがリサイズされても、ブルーレイヤーは指定されたサイズを維持します。

[object Object]
pin to top right corner property

Center position

幅と高さを固定することで、元のレイヤーがリサイズされた時に、元のレイヤーの四方に対してブルーレイヤーは中心点を維持します。

[object Object]
center position property

Fixed spacing

左右の固定領域を使うことで、元のレイヤーの幅がリサイズされた時に、左右のスペースを維持しながらブルーレイヤーを調整することが可能です。

[object Object]
fixed spacing property
Back To Top