Affinity Designerの使い方: 初めて使ったときに戸惑ったことのまとめ

Advertisement

Affinity Designerを初めて使った時に戸惑ったことをまとめてみました。最初の戸惑いをクリアすれば、すごく使いやすくサクサク動くオススメのアプリです。無料試用版 もあるので、ぜひ、お試しください。

目次

2016年1月の記事の初期公開当時はバージョンが1.4.1でしたが、2020年5月21日現在、バージョンが1.8.3になっています。バージョンによって機能が変更されている場合がありますがその辺はご容赦ください。

Affinity Designerがおすすめな理由

Affinity Designerがおすすめな理由をざっくりまとめてみます。

  • 買い切りで6,100円(通常価格 / 2020年6月現在)。Adobeツールと違って毎月払う必要がありません
  • サクサク、ストレスなく軽快に動きます。そして、ツールとしての使い心地が良いです
  • ほぼフル機能のiPad版もあります。Apple Pencilでスケッチ → デスクトップで清書が快適です
  • ベクターとラスターを切り替えて使うユニークなワークスペース。イラストの可能性が広がります
  • 機能面ではAdobe IllustratorやSketchにも負けない(かも?)。さらに、独自の発想で開発された機能 が創作意欲をくすぐりますw
  • ウェブ制作にも役立つ、超便利な書き出し機能(Fireworksっぽいやつです)があります
  • ユーザの声を聞いて頻繁に更新されている。現在バージョン1.8.3ですが、かなり進化してます
  • ウェブ制作にも、UI制作にも、印刷物にも使える万能ツール
  • Affinity PhotoとPublisherと合わせて使うとさらに便利!

おしいところ

  • 日本語の禁則処理が弱い(Publisher 1.8.4で改善の兆しがあり、Designerにも導入されるとはずです)
  • 縦書きがサポートされていない(方法はあります が、個人的には現実的ではないと思ってます)
  • AffinityツールからのPDF入稿を公式でサポートしているPrintExpress のような印刷会社もありますが、イラレしかサポートしていない場合は使えない

2015年にApple Design Awardを受賞

Apple Design Award 2015にも選ばれたAffinity Designer ですが、紹介ビデオがあまりにもかっこ良かったので割引キャンペーン中に衝動買いしちゃいました(2016年1月の記事執筆当時)。

アニメーションと音楽のシンクロ、かっこ良すぎでしょw

2015年の半ばに買っておいたものの、あまり触る機会がなく2015年の年末に年賀状をデザインするために使ってみたら、かなり良くてびっくりしました。2015年くらいから話題になってたんですね。

使いはじめに戸惑ったこと

Affinity Designerを使ってみて、はじめに戸惑ったことがいくつかあったので、これからAffinity Designerを始めよう!という方がスムーズに使い始められるようにその辺を書き留めておきます。

以下、2019年7月にMac版のAffinity Designer 1.7.1で操作を確認しています。MacはmacOS Mojave 10.14.5です。2016年1月の記事執筆当時は1.4.1でしたが基本的な内容は変わっていませんでした。

その他のことは、クセはあるものの結構直感的に操作ができて一度やってみればすぐに慣れると思います。最初はわかりにくいものでも、使ってみると「おぉ、なるほどね」と思えるものが多い気がします。IllustratorやSketchよりも直感的に操作できると感じる点が多い気がしています。

では、Enjoy Affinity Designer!

ツールバーやパネルの表示の調整

ツールバーとパネルを分離させる

デフォルトでは以下のようにツール類が全て1つのウィンドウにまとまった状態ですが、これはメニューから簡単に切り離せます。

ウィンドウ > 分離モード

切り離すとこんな感じになります:

パネルの表示の調整

ちなみにレイヤー、カラー、変換などのパネル類は「スタジオ」と呼ばれていて、これらのパネルの表示・非表示は以下のメニューから変更可能です。

表示 > スタジオ

以下のメニューで、デフォルトに戻すこともできます:

表示 > スタジオ > スタジオをリセット

パネルの移動やアレンジは「||」マークをドラッグしたりタブをドラッグして移動するとできます。

レイヤーまわりの操作

Affinity Designerでは、レイヤーパネルで以下の3つの操作ができます(僕が知る限り)。

  1. レイヤー(オブジェクト)の上下の移動
  2. マスク
  3. クリッピング

初期の状態

上の状態で歯車のレイヤーをドラッグするとドロップダーゲット(青い線)が表示されるので、以下のようにドロップダーゲットの表示場所の種類で異なる操作を選べます。

a. レイヤーの上下の移動

サムネイルを含むレイヤー全体にドロップターゲットが表示される状態で移動すると、レイヤーの上下が変更できます。

b. マスク

サムネイルを含まないレイヤー名のみにドロップターゲットが表示される状態で移動すると、移動するレイヤーでターゲットのレイヤーをマスクできます。

c. クリッピング

サムネイルにレイヤーをドラッグしてサムネイルの右にドロップターゲットが表示される状態で移動すると、移動するレイヤーでターゲットのレイヤーをクリップできます。

これらの操作は、以下のチュートリアルビデオでも操作方法が見られます。

Advertisement

カラーピッカーの使い方

Affinity Designerを使い始めたときPhotoshopやIllustratorのようにカラーピッカーがないなぁと思って戸惑いました。

例えば、以下のようにオブジェクトを選択した状態でカラーパネルのスポイトアイコンをクリックすると、スポイト部分で選択されている色に変わってしまいます。

このスポイト部分の色を変更するには、スポイトをドラッグすると以下のように虫眼鏡のカラーピッカーが表示されて画面上から色を拾うことができます。

また、ツールから「色選択ツール」を選んで色を拾うと同じことができます。

ペルソナ(操作モード)の使い方

「ペルソナ」という言葉のせいかイメージがわきにくいですが、Affinity Designerには3つの「ペルソナ」という操作モード(ワークスペース)があります。

  • ベクターツールを使って描画する「デザイナーペルソナ」
  • ピクセルの操作を行う「ピクセルペルソナ」
  • スライスを作って画像をエクスポートできる「書き出しペルソナ」

このデザイナーペルソナとピクセルペルソナを組み合わせて使うことで、ベクターで書いたオブジェクトの内側にピクセルペルソナでテクスチャを乗せるといったことが簡単にできるようになっています。

たとえば、以下の竜のイラストでは形をベクターで描いて、その中にピクセルペルソナのブラシツールを使ってテクスチャを入れています。

レイヤーの一覧で「(カーブ)」となっているのがベクターのシェイプで「(ピクセル)」となっているのが、ピクセルペルソナのブラシツールで描いたテクスチャの部分です。

Command + Returnでテキストがアウトライン化されてしまう

Adobe Illustratorの操作に慣れていると、テキストツールで入力を確定するときにCommand + Returnを使っちゃいますよね?

でも、これってAffinity Designerでは文字がアウトライン化される「カーブに変換」のショートカットなんですね。僕もAffinity Designerを使い始めたころは手癖で何度もテキストをアウトライン化してしまって困りました。

Affinity Designerではescキーでテキスト入力が確定できます。

僕は慣れちゃいましたが、どうしてもこのショートカットが嫌な場合は変更ができます。

環境設定の「キーボードショートカット」パネルの2つ目のドロップダウンで「レイヤー」を選ぶと「カーブに変換」があります。このショートカットをCommand + Shift + Oとかにしおくと、イラレっぽく使えますね。

オブジェクトを全部囲わないと選択できない

Adobe Illustratorでは選択ツールで選択マーキーがオブジェクトに触っているだけで選択できますが、Affinity Designerではデフォルトでは選択マーキーでオブジェクトを全て囲わないと選択できないようになっています。

これは環境設定の「ツール」パネルで「選択マーキーと交差するオブジェクトを選択する」にチェックを入れると変更できます。

正三角形の描き方

三角形ツールだと正三角形は描けないので、ポリゴンツールを使ってshiftキーを押しながら描画して辺の数を3つにすると描けます。

Affinity関連の情報リソース

使い始めるにあたって知っておくと良さそうなリソースです。

Affinity Help

Affinity Designer、Affinity Photo、Affinity Publisherのヘルプ・ドキュメントをオンラインで見られます。日本語も英語もあるので便利です。キーボードショートカット一覧などもありますよ。

デスクトップ版チュートリアルビデオ

解説は英語ですが、日本語字幕がついています。一度チュートリアルビデオを見て操作を覚えてしまうと、かなり快適にツールを使えるようになれのでオススメです。1つ1つの動画はそんなに長くないです。

Affinity Designerの機能一覧

どんな機能があるのかなぁと、眺めているだけでも楽しいです(マニアックw)。ここを見ていると新しい機能やツールを発見できたりします。

ショートカット一覧

PDF版のキーボードショートカット一覧です。テキストでの一覧よりわかりやすいので一応載せておきます。

ちなみに、このキーボードショートカット一覧は以下の記事で紹介されてました。

おまけ: 便利なコーナーツールとトラックパッドでの操作

たくさん便利機能があるんですけど、とりあえず2つだけご紹介。

コーナーツール

たとえば、三角形の角を丸くするのに便利です。複数のノードを選択して、一気に丸くすることもできます。使い方は以下のチュートリアルビデオでわかりやすく説明されています。

トラックパッドでの操作

トラックパッドのピンチ操作でズームイン・ズームアウトが、二本指でのスワイプ操作でパンができるのが便利です。これ、Sketchでもできるんですけどね。。。

最後に

Affinity Designerは使えば使うほど良さを実感できるツールですね。

日本語メニューにも対応したし、Apple Design Awardをとったことで一層話題になってユーザベースも増えたでしょうし、2016年は昨年にも増して注目のツールになりそうです。Affinityツールを作っているSerifは、ユーザの声を聞いて改善するカルチャーがありそうなので今後のさらなるアプリの改善にも期待できそうです。楽しみですね。

更新情報

  • 「オブジェクトを全部囲わないと選択できない」を追加しました(2020/1/19)
  • 「Command + Returnでテキストがアウトライン化されてしまう」を追加しました(2020/1/19)
  • 目次の追加、古い情報の削除など内容を更新しました(2020/1/18)
  • バージョン1.7.1での操作を確認して内容を更新しました(2019/7/12)

初心者向けAffinity Designerの使い方

初心者向けにAffinity Designerの使い方を記事にまとめています。よかったらこちらもどうぞ。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

“Affinity Designerの使い方: 初めて使ったときに戸惑ったことのまとめ” への1件のコメント

  1. […] 参考 Affinity Designerことはじめ – 初めて使ったときに戸惑ったことのまとめRriver […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です