✍️
注意事項
ご注意ください！Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。
Properties
プロパティパネルは、正確性と操作の入り口です。プロパティパネルを使用して、要素を微調整し、その見た目を調整し、イージングでインタラクションを設定する作業を簡単に行えます。利用できるプロパティは、選択されている要素によって異なる場合があります。
位置とサイズ
1. 素早い整列および分布
これらのアイコンをクリックして、デザイン全体か、または現在格納されているコンテナのいずれかに対しての相対的な位置を調整します。
複数の要素が選択されている場合、右端のアイコンで垂直方向または水平方向に分布させることができます。
2. 位置
要素を移動して、X軸またはY軸に沿って正確に揃えます。デザインの場所を知るには、ここを参照するか、または数値を変更して移動させます。
3. サイズ
要素の大きさを確認したり、またはその長さおよび幅を素早く調整します。高さの右側にある「縦横比を固定」アイコンを有効にすると、一方の寸法を変更すると、もう一方の寸法も比例して変更されます。
4. 回転
要素の角度を変えて回転させます。数値を入力して変更するか、またはバウンディングボックスの四隅にあるカーブしたした矢印アイコンをドラッグすることで要素を回転させることもできます。
5. 角丸の半径
数値を0よりも大きな値に設定することで、シェイプの角に丸みを付けることができます。
オーバーフローとポイントシェイプ
プロパティパネルは、変更している要素の種類によって、一部変化します。
コンテナの調整時、オーバーフローの設定が、プロパティパネル内の、位置とサイズのコントロールの下に表示されます。
同様に、パスの調整時、ポイントシェイプオプションが利用可能となります。
これらの機能の使用方法に関する詳細な説明については、それぞれのページを確認してください。
変形
変形パネル内の「基準点を編集」パネルは、折りたたむことができます。
1. 基準点
変形パネルで最も一般的な機能は、アンカー ポイントとも呼ばれる基準点に関連しています。基準点の調整と使用に関する詳細は、基準点の特集ページで説明しています。
2. 拡大縮小
拡大縮小を使用して、要素の寸法をX軸とY軸に沿って変更します。これは幅と高さを直接編集するのと似ていますが、違いは、拡大縮小によって線や境界線に膨らみや非対称のセグメントが生じることです。
3. 傾斜
要素の傾斜値を調整することで、要素に傾斜を加えます。傾斜は水平 (X) または垂直 (Y) に調整し、それぞれのフィールドに対して比例角度を付けることができます。
色と境界線
1. 不透明度
パーセンテージダイヤルは、要素の不透明度または透明度を設定します。ドロップダウンセレクションは、要素の色がその背後にある形状にどのように影響するかを設定する「ブレンドモード」を選択します。ブレンドモードの詳細は、以下で説明します。
2. 塗り
各塗りレイヤーは、要素全体に色を追加します。プラス (+) アイコンをクリックしてレイヤーを追加し、HEX カラー値や不透明度を調整できます。
カラー ボックスをクリックすると、カラーピッカー ウィンドウが表示されます。
カラーピッカーから、特定のプロジェクトのスタイルに合わせて任意の色を選択できます。キャンバスに既に存在する色を素早く選択するには、スポイトツールを使用します。
デフォルトでは、色値は16進数 (HEX) 値に従って表示されます。ドロップダウンメニューをクリックして色モードを変更し、RGB、HSL、HSB のいずれかを選択します。
値はドロップダウンメニューの下で直接変更でき、同様に、不透明度も編集できます。
塗りは、最初は単色で作成されますが、画面上部のボタンをクリックしてグラデーションを編集できます。グラデーションの詳細については、このページの後半で説明します。
3. 境界線
境界線、またはストロークとも呼ばれるものは、要素の外側に追加できる色です。塗りの場合と同様に、プラス 
アイコンをクリックして境界線を追加します。塗りと同じ色と不透明度の設定を適用でき、同じグラデーションも使用できます。
アイコンをクリックして境界線を追加します。塗りと同じ色と不透明度の設定を適用でき、同じグラデーションも使用できます。不透明度の右側にある 境界線幅
を変更できます。
を変更できます。さらに、境界線をシェイプの外側の境界に対して相対的に位置を変更することも可能です。
境界線のための一連の専門的なオプションを表示するには、三点リーダー アイコンをクリックします。これらは、境界線の詳細 セクションで説明されています。
4. 効果
プロパティ パネルの一番下に、[エフェクト] オプションがあります。現時点では、Phase にはトリム パスだけがエフェクトとして利用可能です。このエフェクトを使用すると、形状や線の一部を表示したり非表示にしたりして、動きや変形の錯覚を生み出すことができます。
トリム パスはアニメーションに非常に便利な機能であり、詳細についてはトリム パス に関する特集記事で説明しています。
境界線の詳細
1. 結合形状
線を接続する角は結合点と呼ばれ、これらの結合点の外観やサイズを調整できます。
- マイター
: デフォルトの結合ポイントオプションでは、線が直角で交わり、尖った結合が形成されます。 - ラウンド
: 線が交わる場所に丸い角が形成されます。このオプションは、柔らかく有機的な見た目を作りたい時によく使われます。 - ベベル
: 線が角度で交わり、角が面取りされるか平らになります。このオプションは、すっきりとしたモダンな外観を作る際に一般的に使用されます。
✍️
注意事項
結合形状は、楕円形および2つのポイントからなるパスには影響しません。
2. 破線と3. 間隔
破線と間隔の両方の値を調整することで、線を点線にすることができます。どちらかの値が0の場合、線は完全なままです。
破線の値は線分の長さを制御し、間隔の値は線分間の空間のサイズに影響します。
4. マイター角度
この設定では、マイターとベベルの結合形状を組み合わせることができます。
この設定値未満の角度を持つ結合は面取りされます。一方で、この値を超える角度を持つ結合にはマイター形状が適用されます。
5. 線端
 直線端 |  丸線端 |
パスの先端部分の見た目を操作できます。
- 直線端
: 線は端点で直角に切り取られ、四角形のエッジを持ちます。 - 丸線端
: 端点から線の幅と同じ直径の円が広がり、端が丸く見えます。
✍️
注意事項
線端設定は、端点が突出しているパスにのみ影響します。
グラデーション
これらは2色以上の色を滑らかに変化させる視覚効果です。色が突然変化する代わりに、グラデーションは色の段階的な混ざり合いを作り出します。
1. タイプ
前面のシェイプは、設定された不透明度に応じて、背面のシェイプを隠します。
 線形グラデーション |  放射状グラデーション |  円錐形グラデーション |  ひし形グラデーション |
グラデーションは、デザインに深みや立体感、視覚的な面白みを加えます。Phaseでは、カラーメニュー内にそれぞれのアイコンで表示されます:
- 単色: 領域は1つの色で完全に塗りつぶされ、グラデーションは適用されません。
- 線形: グラデーションが一方向に流れます。
- 放射状: グラデーションがシェイプの中心から均等に広がります。
- 円錐形: 要素の中央から線が突出し、その線の周りからグラデーションが回転します。
- ひし形: グラデーションが中心から広がり、4方向に追加の重みを持たせて菱形を作ります。
2. グラデーション終了位置
グラデーション終了位置の機能は、精密な制御を提供し、グラデーションを柔軟にカスタマイズできます。以下は、この機能を最大限に活用するためのステップバイステップガイドです:
- キャンバス上の要素を選択します
- 「塗り」セクション内のカラーボックスをクリックします
- グラデーションタイプを選択します
- スライダーの左端の停止点を動かして、開始色を設定します。これがグラデーションの最初の色になります。
- 右端の停止点を動かして、終了色を設定します。これがグラデーションの最後の色になります。
- スライダーの任意の場所をクリックして中間点を追加します。
この機能は、スライダーの停止点をドラッグするか、パーセントインジケーターをクリックして左右にドラッグすることで、インタラクティブな拡大縮小を使用できます。また、要素にある大きな点を直接ドラッグして、スライダーの動きに合わせて動的に調整することも可能です。
3. グラデーション反転
このボタンは、色の停止点の順序を反転させ、色が逆方向に遷移する視覚効果を作り出します。それぞれのグラデーションに異なる影響を与えます。
 線形グラデーション |  放射状グラデーション |  円錐形グラデーション |  ひし形グラデーション |
反転グラデーションは、デザイナーがデザインをカスタマイズし、創造的な探求を
通常
不透明度の設定に従って、前面にあるシェイプがその背面にあるシェイプを隠します。
 |  |  |  |
暗く
前面のレイヤーが下のレイヤーより暗い場合、2つの明度の差によって色が置き換えられます。
 |  |  |  |
明るく
「暗く」の反対で、前面のレイヤーが下のレイヤーより明るい場合、2つの明度の差によって色が置き換えられます。
 |  |  |  |
焼き込みカラー
前面のシェイプの領域では、色のコントラストが強調され、色の差異を元に、より暗く、彩度の高い部分が作られ、レイヤーが掛け合わされます。
 |  |  |  |
覆い焼きカラー
カラーバーンの演算を反転させた機能です。色を反転させてから明度を乗算し、コントラストを弱めます。その結果、色は明るくなり、彩度は低下しますが、中間色はハイライトに比べて彩度が高くなります。
 |  |  |  |
乗算
前面と背面のレイヤーの明度を乗算し、生成された色で背面のレイヤーを置き換えます。これにより、より暗い色が生成されます。
 |  |  |  |
スクリーン
乗算の逆の処理です。色を反転させた後、明度を乗算します。生成された色でレイヤーが置き換えられ、結果としてより明るい色が生まれます。
 |  |  |  |
オーバーレイ
前面のシェイプが、背面にあるシェイプの上に微かに表示されます。この効果は2つのエフェクトを組み合わせて適用されます。前面の色が暗い場合は、乗算が半分の強度で適用され、前面の色が明るい場合は、スクリーンが半分の強度で適用されます。
 |  |  |  |
ソフトライト
オーバーレイ効果をソフトにしたものです。このエフェクトでは、前面のシェイプの後ろにあるレイヤーに「明るく」と「暗く」の半分の値が適用されます。
 |  |  |  |
ハードライト
オーバーレイ効果を強調するため、色の変化の計算が、乗算とスクリーン効果の組み合わせに基づいて行われます。その結果、より強いコントラストの調整が行われます。
 |  |  |  |
差分
背面にあるレイヤーのRGBカラー値が、前面のレイヤーから引かれます。前面のシェイプが明るい色の場合、背面のレイヤーは反転され、前面のシェイプが非常に暗い場合、背面の色はほとんど変化しません。
 |  |  |  |
除外
差分エフェクトに似ていますが、色調が抑えられた効果です。色が明確な白黒の場合、色の変化や反転は起こりません。
ただし、前面レイヤーの色が灰色に近いほど、結果として生成される色も灰色に近くなります。通常、多少彩度を下げる効果があります。
 |  |  |  |
色相
前面のシェイプの色調が使用されますが、背面のレイヤーの彩度と明度が適用されます。
 |  |  |  |
彩度
前面のシェイプの彩度が使用されますが、背面のレイヤーの色調と明度が適用されます。
 |  |  |  |
カラー
前面のシェイプの色調と彩度が使用されますが、背面のレイヤーの明度が適用されます。
 |  |  |  |
輝度
前面のシェイプの明度が使用されますが、背面のレイヤーの色調と彩度が適用されます。
 |  |  |  |
アニメーション制作を始めましょう
無料のウェブベースプラットフォームで始めます。