ゼロから始めるAffinity3 Affinity初心者講座その15 スタイルとインポート

2026-02-25

Affinity Affinity初心者講座 パソコン関係

t f B! P L

Affinity V3 初心者講座 第15回 スタイルの使い方解説アイキャッチ画像
ゼロから始めるAffinity3 Affinity初心者講座その14 レイヤーエフェクト の続き

さて、今回は知っているとめちゃめちゃ便利な「スタイル」について学んでいきましょう。

スタイルの使い方

1.メニューから「ウィンドウ」-「ベクター」-「スタイル」をクリックする

スタイルパネルが表示されます。
Affinity V3 のウィンドウメニューからスタイルパネルを有効化する手順

2.文字や図形を選択して、好きなスタイルを適用する。

クリックした効果が、選択中のオブジェクトに適用されます。

ちなみに、スタイルパネルから見本をドラッグ&ドロップでも適用することができます。スウォッチと同じ。
スタイルパネルから図形オブジェクトにドラッグ&ドロップでスタイルを適用する様子

Topics テキストと図形で、スタイルの結果が違う?

同じスタイルを適用しているのに、テキストと図形で結果が違うことがあります。
テキストオブジェクトと図形オブジェクトでスタイルの適用結果が異なる比較画像
メニューから「ウィンドウ」-「ベクター」-「アピアランス」パネルを見ると分かるのですが、テキストは境界線と塗りつぶしだけなのに対して、図形の方は塗りつぶしが3つ重ね掛けされています。

本来は図形のような効果になるハズですが、テキストは「境界線と塗りは1つだけしか付けられない」ため、塗りが複数付けられていると、入りきらない塗りが勝手に削除されてしまいます。
アピアランスパネルで確認する、図形とテキストの塗りつぶし階層の違い
ダウンロードしたスタイルの結果がなんかおかしい、という時は、もしかしたら文字非対応のスタイルかもしれません。
デフォルトのスタイルは、「ユニコーン」以外非対応です。

今回、初めて登場した「アピアランス」パネルですが、ひとつのオブジェクトに複数の境界線や塗りつぶし設定できるパネルとなっています。

Illustratorでは文字装飾する際に必須となるパネルですが、レイヤーエフェクトで大体のことができてしまうので、詳しい解説はまた今度にします。
正直、あまり使わない(=・ω・=)
アピアランスパネルのUIと設定項目

作成したスタイルの保存の仕方

スタイルの左上部分をクリックすると、カテゴリを選択することができます。
早速自分オリジナルのスタイルカテゴリを追加して、講座その14で作ったスタイルを保存してみましょう。
スタイルパネルのカテゴリー選択プルダウンメニュー

1.スタイルパネルの右上の▼から、「スタイルカテゴリの追加」をクリック。

スタイルパネルのハンバーガーメニューからスタイルカテゴリの追加を選択する手順

2.好きな名前を付けて、「OK」

今回は分かりやすいように、「作ったの」というスタイルカテゴリ名にします。
スタイルカテゴリ名の入力ダイアログ

3.プルダウンメニューから、登録したカテゴリを選びます。

新しく作成したスタイルカテゴリを選択する様子

4.変更した文字の上で右クリック-「スタイルを作成」をクリックする

「スタイルを作成」で、作成したスタイルを保存することができます。
キャンバス上のテキストを右クリックしてスタイルを作成メニューを選択する操作
作ったのを選択して、スタイルパネルのプロパティからも追加可能。
スタイルパネルのメニューから選択内容からスタイルを作成を選択する手順
または、メニューの「編集」-「スタイルを作成」からも登録可能です。

スタイルの削除

スタイルの名前を変えたり、スタイルを削除したいときは、スタイルの上で右クリックすればできます。

残念ながら、並べ替えはまだできないようです。機能改善を求む(=・ω・=)
スタイルパネル内のスタイルを右クリックして表示される名前変更や削除のコンテキストメニュー

スタイルのインポートの仕方

インポート(import)=外から中へ取り込む、ことです。スタイルをソフトに追加します。

Boothにて、Affinity3用のスタイルを無料配布してます。
頑張って作ったので、このBlogが役に立った場合など、ぜひとも支援を……!(=・ω・=)✨

もちろん、完全無料、商用利用可でお使いいただけます。
その際、お友達にAffinityを勧めたり、この解説ブログを勧めたりして頂けるとありがたいです!

【無料】Affinity3用テキストスタイル175種類 - 3046Studio - BOOTH
thumbnail
Affinity3用スタイル詰め合わせです。 全部で175種類あります。 太Verと細Verの2種類ご用意しました(=・ω・=) 「オブジェクトのスケール」を使って、 文字に合わせていい感じに調整して下さい。 ⚠️ 利用規約 ・再配布禁止:ファイルの無断転載・販売不可 ・改変自由:色変更/効果追加などの加工OK ・クレジット表記不要:SNS投稿時も記載不要 ・商用利用OK:ECデザインや動画サムネイルにも! 【使い方】 1.「ウィンドウ」-「ベクター」-「スタイル」でスタイルパネルを表示する
https://3046.booth.pm/items/7928847

1.ダウンロードしたZipファイルを解凍し、好きな場所に置く。

2.スタイルパネルの右上の▼をクリックし、「スタイルをインポート」をクリックする。

スタイルパネルのメニューからスタイルをインポートを選択して外部ファイルを読み込む手順

3.ダウンロードして解凍した「3046スタイル175_●.afstyles」を選択して、「開く」

4.スタイルのプルダウンメニューから「3046スタイル175_●」を選択する

太いのと細いのを用意しましたので、使いやすい方を充てた後、文字の拡大縮小と「オブジェクトのスケール」を使って太さを調節してください。
文字の大きさや文字列の長さによって太さが変わります。

また、オフセットなどの固定値は拡大縮小ではうまく調整できないので、個別に直してあげて下さい。

ちなみに、「○○.afstyles」をソフト上にドラッグ&ドロップでもインポートすることができます。こっちのが簡単。
けど、他の項目でも使えるように、プロパティパネルからのインストール方法を解説しました。
ブラシやアセット、スウォッチなど、その他の項目もすべて同じようにプロパティからインポートすることができます。

また、横に向かってグラデーションがかかっている時は、文字列の長さによってグラデの感じが変わってしまうので、塗りつぶしツールで適宜調整してあげて下さい……って、しまった。グラデーションの説明してなかった(´・ω・`)
グラデーションが適用されたテキストと塗りつぶしツールの関係性
というわけで、次回。塗りつぶし・グラデーションツールについて解説します。
使う順に解説してるので、こういうこともまぁある(=・ω・=)

ゼロから始めるAffinity3 Affinity初心者講座その16 に続く

検索

最新の投稿

フィルタ―⑯/Affinity3 照明

フィルタ―⑮/Affinity3 エッジ・水平方向のエッジ・垂直方向のエッジ・シャドウ/ハイライト の続き

フィルタ―⑯/Affinity3 照明

人気の投稿

Twitter(X)

アフィリエイトについて

このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。

QooQ