シェーダー

ベータ版について：シェーダーは現在ベータ版です。機能や操作性には改善の余地があり、ご利用のフィードバックをもとに継続的に改良しています。今後のバージョンでは、利用できる機能や操作方法が変わる場合があります。

シェーダーを使うと、レイヤーにテクスチャ、模様、ピクセル化、色収差などの表現を加えられます。既存のシェーダーを適用するほか、作りたい効果を AI に伝えて独自のシェーダーを作成することもできます。作成したシェーダーは繰り返し適用でき、パラメーターを調整して見た目を変更できます。

このガイドでは、シェーダーの適用、作成、編集、公開と、別のファイルでの利用・更新方法を説明します。

スクリーンショットは中国語の画面です。各機能の表示名は、使用しているインターフェースの言語に応じて変わります。

2 種類のシェーダー

2 種類のシェーダーは、適用先を入れ替えることはできません。塗りと線の設定には塗りシェーダーだけが表示され、エフェクトの設定にはエフェクトシェーダーだけが表示されます。画像の内容を保ちながら見た目を加工する場合はエフェクトシェーダー、模様やテクスチャを生成する場合は塗りシェーダーを選びます。

塗りシェーダー塗りとエフェクトを組み合わせた状態

利用を始める前に

シェーダーを使うには、現在のファイルの編集権限が必要です。カスタムシェーダーを使用する場合は、ファイルが属するスペースの利用条件も満たす必要があります。

ファイルの編集権限があれば、Pixso に標準で用意されているシェーダーを適用できます。

通常のコンテナー、グループ、図形、ベクター、テキスト、画像のレイヤーに適用できます。スライスとセクションには、シェーダーの設定項目はありません。

既存のシェーダーを適用する

塗りや線に適用する

1. キャンバスまたはレイヤーパネルで、対象のレイヤーを選択します。
2. 右側のプロパティパネルで、塗りまたは線の色設定を開きます。
3. 種類を「シェーダー」に切り替え、「シェーダーを選択」をクリックします。
4. 一覧から塗りシェーダーを選び、現在の塗りまたは線に適用します。
5. パラメーターパネルで見た目を調整し、キャンバス上の結果を確認します。

注意：種類を「シェーダー」に切り替えるだけでは、リソースは適用されません。一覧からシェーダーを選択してください。

エフェクトに適用する

1. 対象のレイヤーを選択し、右側のプロパティパネルのエフェクトで「シェーダー」を追加または選択します。
2. 自動的に開く一覧から、エフェクトシェーダーを選択します。
3. そのシェーダーのパラメーターパネルを開き、効果を調整して結果を確認します。

レイヤーにドロップシャドウやぼかしなども設定されている場合、エフェクトシェーダーは通常のエフェクト一覧の下に別枠で表示されます。通常のエフェクトと同じ一覧内には並びません。

一覧からリソースを探す

一覧は初期状態で「すべて」を表示し、標準、ローカル、クラウド、使用中の順に分類されています。リソースの保存先で絞り込むこともできます。

シェーダーのパラメーターを調整する

シェーダーが適用されたレイヤーを選び、対応する塗り、線、エフェクトの設定を開くと、パラメーターを調整できます。調整できる項目や操作部品は、シェーダーによって異なります。

• 特定のレイヤーの見た目を微調整する場合：色、強度、角度、テクスチャの大きさなどのパラメーターを調整します。変更はキャンバスにリアルタイムで反映されます。
• 調整項目を追加する、または効果の仕組みを変更する場合：レイヤーのパラメーターを調整するのではなく、AI でシェーダー自体を編集します。
• 塗りシェーダーは通常の塗りと併用でき、塗り一覧の順序で重なります。塗りの不透明度も調整できます。

塗りシェーダーのブレンドは通常の塗りと同じように設定できます。エフェクトシェーダーはレイヤーの最終的な描画結果を加工するため、塗り単位のブレンドモードは使用しません。下にある内容と合成する場合は、レイヤーのブレンドモードを調整します。

注意：レイヤーの縦または横のサイズが 200 px 未満になると、サイズ表示の横に画質に関する案内が表示されます。小さいレイヤーでは画素の粗さが目立つ場合がありますが、シェーダーの作成失敗を意味するものではありません。また、レイヤーを必ず 200 × 200 px 以上にする必要があるという意味でもありません。

キャンバス上の見た目パラメーターパネル

独自のシェーダーを作成する

新しく作成したシェーダーは現在のファイルに保存されます。別のファイルから利用できるクラウドリソースには、自動的にはなりません。現在は AI で作成できます。シェーダー一覧の上部にある「+」から「AI 生成」を選ぶか、AI チャットで作成したい内容を直接伝えてください。

AI で生成する

1. 塗り、線、エフェクトの設定からシェーダー一覧を開き、上部の「+」をクリックして「AI 生成」を選びます。AI チャットを直接開いて、作成したいシェーダーを説明することもできます。
2. どのような見た目にしたいかと、塗りのテクスチャを生成するのか、既存のレイヤーを加工するのかを伝えます。
3. 色、粒子の大きさ、ゆがみの強さ、角度など、調整できるようにしたいパラメーターを指定します。参考画像もアップロードできます。
4. AI からの質問に応じて必要な情報を補足し、生成と検証が完了するのを待ちます。
5. 生成後に開くシェーダーとパラメーターパネルを確認し、レイヤー上の効果を見ながら調整します。

塗りや線の設定から作成したリソースは塗りと線に、エフェクトの設定から作成したリソースはエフェクトに使用します。これらの設定から作成を始めた場合、AI は選択済みの種類を引き継ぐため、適用先を改めて指定する必要はありません。

AI チャットからシェーダーを作成するとき、適用可能なレイヤーを選択していれば、生成後に直接適用され、パラメーター設定が開きます。適用されていない場合は、対応するローカル一覧からリソースを選択できます。

指示の書き方と例

指示には、必要な効果、適用先、調整できるようにしたいパラメーターを含めます。

• 塗りの例：「背景の塗りに使う、青と白を基調にした大理石模様のシェーダーを作成してください。2 つの色、模様の太さ、粒子の強度を調整できるようにしてください。」
• エフェクトの例：「選択した画像にレトロなモニターの効果を加えてください。画像の被写体は残し、走査線の密度、色収差の強さ、明るさを調整できるようにしてください。」
• 編集の例：「現在の大理石模様のシェーダーに、模様の方向を調整する項目を追加してください。既存の色の調整項目は残してください。」

指示に不足があれば、AI が種類、効果、パラメーターについて確認します。複数のシェーダーを一度に作成する場合は、同じメッセージ内でそれぞれの用途を説明し、基本的なパラメーターだけを調整可能にするか、さらに細かな項目も設けるかを指定できます。

注意：単色、グラデーション、ドロップシャドウ、ぼかしなどは、Pixso の通常のプロパティで設定できます。独自の表現を繰り返し利用したい場合や、細かく調整できる効果が必要な場合は、シェーダーを作成できます。

シェーダーを編集・管理する

パラメーターの調整とリソースの編集の違い

レイヤーのパラメーターは、現在適用されている効果を調整するものです。AI でシェーダーを編集したり名前を変更したりすると、再利用可能なリソース自体が変わります。調整項目の追加、初期状態の見た目の変更、処理の変更を行うには、AI チャットで対象のローカルシェーダーと変更内容を指定し、編集と検証が完了してから保存します。

リソースの変更を保存した後も、適用済みのレイヤーでは案内に従って新しいバージョンを受け入れる必要があります。確認なしに効果が置き換わることはありません。詳しくは「適用済みのシェーダーを更新する」をご覧ください。

自分で作成したシェーダーは、一覧で右クリックして名前を変更できます。独自の効果が必要な場合は、AI に内容を伝えて別のシェーダーを作成することもできます。

リソースを削除する

作成元のファイルで、削除するローカルシェーダーを選択し、削除を確定します。未公開のリソースはローカルと使用中の一覧から、公開済みのリソースは共有リソースと使用中の一覧から削除されます。

注意：リソースの削除と、レイヤーに適用された効果の削除は異なります。すでに適用されているレイヤーには、効果とパラメーターが残ります。特定のレイヤーだけで使用をやめる場合は、そのレイヤーの該当するシェーダーの塗り、線、エフェクト項目を削除してください。公開済みリソースを削除する前に、利用者に確認することをお勧めします。

公開して別のファイルで利用する

作成したカスタムシェーダーは、現在のファイルに属します。別のファイルのクラウド一覧から利用するには、作成元のファイルでシェーダーを公開してください。事前にカラースタイルやエフェクトスタイルを作成する必要はありません。

公開範囲を確認する

注意：公開範囲は、作成元のファイルの場所で決まります。作成しただけで、同じアカウントのすべてのファイルから利用できるわけではありません。また、公開コミュニティへの公開でもありません。作成元のファイルのリンクを共有するだけでは、シェーダーを公開したことにはなりません。

作成元のファイルで公開する

1. 作成元のファイルで該当する種類のシェーダー一覧を開き、ローカルリソースが作成済みで、効果を確認できていることを確かめます。
2. 一覧の公開ボタンをクリックして、公開の確認ダイアログを開きます。
3. ファイルが属するスペースと利用可能な範囲を確認し、公開を確定します。下書きにある場合は、案内に従ってファイルの場所や利用条件を整えてから公開します。

別のファイルで利用する

1. 対象のチームまたは企業に所属するアカウントで、利用先のファイルを開きます。そのファイルの編集権限と、必要なシートがあることを確認します。
2. レイヤーを選択し、塗り、線、エフェクトのうち対応する設定からシェーダー一覧を開きます。
3. 「クラウド」に切り替え、公開済みのリソースを選択して適用します。
4. デザインに合わせてパラメーターを調整します。塗りシェーダーは塗りまたは線に、エフェクトシェーダーはエフェクトにのみ使用できます。

適用済みのシェーダーを更新する

リソースの編集と、レイヤー側での更新の適用は別の操作です。作成元のファイル内で使う場合と、別のファイルで使う場合では、更新を受け入れられる条件が異なります。

公開済みリソースの効果や名前を変更した場合、別のファイルで新しいバージョンを利用するには、作成元のファイルで更新版を公開する必要があります。ローカルで変更を保存するだけでは、別のファイルに新しいバージョンは配信されません。

更新時のパラメーターの扱い

• 新旧のバージョンで対応するパラメーターには、設定済みの値が引き継がれます。
• 新しいバージョンでパラメーターの範囲が狭くなった場合、以前の値は有効な範囲内に調整されます。例えば、以前の値が 100、新しい範囲が 10～50 の場合、更新後の値は 50 になります。
• 新しいバージョンに対応する項目がない古いパラメーターは、レイヤーに保存されていた値ごと削除されます。

注意：更新を受け入れた後は、重要なレイヤーの見た目を再確認してください。特に、パラメーターの追加・削除や値の範囲の変更がある場合は確認が必要です。

よくある質問

作成したシェーダーが一覧に表示されないのはなぜですか？

開いている設定の種類を確認してください。塗りと線の設定にはエフェクトシェーダーは表示されず、エフェクトの設定には塗りシェーダーは表示されません。未公開のローカルリソースは、作成したファイル内でのみ表示されます。別のファイルから探す場合は、作成元で公開が完了していることと、現在のアカウントが対象のチームまたは企業に所属していることを確認してください。

公開ボタンがない、または公開できないのはなぜですか？

作成元のファイルが下書きにないか、ファイルが属するスペースの利用条件を満たしているかを確認してください。下書きからは直接公開できません。公開可能なチームまたは企業のスペースにファイルを移す必要があります。チームのメンバーが利用できる範囲と、企業のメンバーが利用できる範囲は、それぞれ異なります。

作成元を編集しても、別のファイルに反映されないのはなぜですか？

ローカルで保存しただけでなく、作成元で更新版の公開まで完了しているかを確認してください。利用先のファイルで対象のレイヤーを選び、該当するシェーダーのプロパティパネルを開いて、更新アイコンをクリックします。

スタイル、コンポーネント、変数から利用できないのはなぜですか？

現在、シェーダーのカラースタイルやエフェクトスタイルの作成、パラメーターへの変数のバインドには対応していません。コンポーネント、バリアント、インスタンスの塗りとエフェクトの設定には、シェーダーの選択肢は表示されません。シェーダーを含むレイヤーからコンポーネントを作成すると、案内が表示されます。別のファイルで再利用する場合は、スタイルの公開手順ではなく、シェーダー自身の公開機能とクラウド一覧を利用してください。

画素の粗さが目立つ場合はどうすればよいですか？

レイヤーのサイズと画質の案内を確認してください。縦または横が 200 px 未満だと、画素の粗さが目立ちやすくなる場合があります。用途に応じてレイヤーの大きさを変更するか、リソースが提供するテクスチャや粒子のパラメーターを調整し、実際に使用するサイズで見た目を確認してください。