Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ

Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。
もちろん、月額ではなく買い切りのアプリです。

追記: このセールは既に終了しています。

しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。

Affinity DesignerのPhotoshop的な機能

Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。
具体的には以下のような機能です。

ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール等）
色調補正レイヤー（明るさ、露出補正、トーンカーブ等）
レイヤースタイル（グラデーションオーバーレイ、ドロップシャドウ等）
レイヤーマスク

別途、高度な写真補正アプリである Affinity Photo も販売されていますが、Webデザインカンプ制作ではこの程度の機能が使えると便利ですね。

環境設定

ほかの Mac アプリと同じく、command + ,（カンマ）で環境設定を開き、キーボードショートカットやカラープロファイルなどを含む設定を変更することができます。

ウインドウの色を変更することもできますが、ほんの少し色を変更できるだけでライトグレーにはできませんでした。

初期設定では、カンバス（アートボード）の表示が 100% でピクセルプレビューされた状態になっています。
ピクセルプレビューをオフにする設定はなぜかツールバーではできず、メニューの［表示＞表示モード＞ベクター］を選択する必要があります。

基本操作

画像編集アプリが多機能になると、使用したいツールや機能を探すのが大変になってしまいます。
そこで、これまでは使用したい機能に応じて Photoshop と Illustrator を使い分ける方が多かったと思いますが、Photoshop CC 2015 は最近「ワークスペースを切り替えるとツールの内容が切り替わる」ようになりました。

しかし、Affinity Designer には以前からそのような機能が付いていたようで、ウインドウ左上にある［ペルソナ］ボタンをクリックすることで［描画（イラスト&レイアウト向け）］、［ピクセル（写真補正向け）］、［書き出し（スライス）］のモードを切り替えることができます。

ペルソナを切り替えると、画面左のツールの内容だけでなく画面右のパネルの内容なども切り替わります。

画像の書き出しについて

カンバス（アートボード）全体を1枚の画像として書き出したい場合、［エクスポートペルソナ］を使用するより、メニューの［ファイル＞エクスポート（command + shift + option + S）］を使用するほうがおすすめです。

PNG・JPEG はもちろん、PDF・SVG などでの書き出しも可能で、書き出し後のファイルサイズも分かります。

その他の基本操作

それ以外の基本操作は Illustrator や Photoshop とそれほど変わらず、キーボードショートカットも共通のものが多いです。

良いと感じたところ

Illustrator 互換アプリとして図形などの制作ができるだけでなく、Photoshop 互換アプリとしてWebデザインカンプが作れる
Photoshop 互換のレイヤースタイルや調整レイヤーが使える
既存の PSD、ai がほぼ開ける
Photoshop のようなツールバー、Illustrator のようなツールバーが素早く切り替えできる（ペルソナの切替）
レイヤーサムネイルに現在のレイヤーの状態（レイヤースタイル含む）がきちんと反映される
レイヤーパネルでレイヤーをドラッグして順序変更している途中にプレビューできる
トラックパッドでピンチアウトで拡大、2本指ダブルタップで拡大/元に戻すなどモダンな操作ができる
GPU をオンにしてもカンバス（アートボード）が問題なく表示でき、ピンチアウトで拡大などサクサク動く（Illustrator CC 2015 の場合、GPUをオンにすると多くの環境で線1本まともに表示できない。また Photoshop で GPU をオンにした時より滑らかに拡大できる）
インポートしたドキュメントをリアルタイムに編集・反映させられる
スナップ・ガイド・グリッドなどは詳細な設定が可能

既存の PSD、ai がほぼ開ける

サイトトップページの PSD を開いたところ。
存在しないフォントが置き換わっていますが、それ以外は問題なく表示できています。

以前 Croppy というサイトのプロモーションのため Illustrator で制作したチラシを開いたところ。
特に問題なく開けています。

基本の図形ツールの種類が豊富で形の変更も可能

図形ツールは長方形ツールや星形ツールだけでなく、ドーナツ型ツール、吹き出し(楕円)ツール、二重星形ツールなど最初から豊富に搭載されています。

※以下の画像は三角形ツールボタンを長押ししたところ。数が多すぎるので2行に分けて表示しています。

しかも、shift + ドラッグで配置後、オレンジの●部分をドラッグすることにより柔軟に形を変えることができます。
形を変えている時は、キリの良い所でスナップもします。スナップしたくない時は、option + ドラッグします。

後で形を変えたくなった時は、移動ツールでダブルクリックするとオレンジの●部分が表示されるため、変更が可能です。

図形ツールでオレンジの●をドラッグすると、たとえば以下のような図形を作ることができます。

例: キラキラマークを制作する

Illustrator の場合、長方形ツールで shift + ドラッグして正方形を作り、回転ツール等で45度回転させ、メニューの［効果＞パスの変形＞パンク・拡張］を -50% 程度かけることによってキラキラマークを作ることができます。
（詳しい手順はプロになるためのWebデザイン入門講座という書籍に書いています。）

しかし、Affinity Designer の場合［ポリゴンツール］を選択し、画面上のオプションバーで［辺］を「4」に設定し shift + ドラッグして図形を作り、オレンジの●をドラッグするだけでキラキラマークを作ることができます。

Illustrator にくらべて素早く作れるうえ、操作も直感的だと感じます。

良くないと感じたところ

既存の PSD（デザインカンプ）を開いた時に、日本語フォントを再指定する必要がある場合がある
環境設定で Photoshop や Illustrator と完全互換のキーボードショートカットを設定できない
テキストボックスに日本語を流し込むと「長い英単語」とみなされ、自動改行がうまくいかないことがある

既存の PSD（デザインカンプ）を開いた時に、日本語フォントを再指定する必要がある場合がある

Photoshop で制作したデザインカンプの PSD を Affinity Designer で開くと、日本語のテキストボックスなどが別のフォントで表示されることがあります。

これは、Affinity Designer では Photoshop で作成した PSD のフォント名が英語のPostScript名（例: KozGoPr6N-Regular 等）で認識されるものの、フォント一覧では日本語名で認識されているためと思われます。

しかし、一度手動でフォントを修正したあとで別の PSD を開いたところ、フォントは問題なく表示されたため学習機能のようなものがあるのかもしれません。

環境設定で Photoshop や Illustrator と完全互換のキーボードショートカットを設定できない

基本的なキーボードショートカットは Photoshop や Illustrator とほぼ同じなのですが、アプリ内で自分で設定できるキーボードショートカットが少ないようです。

例えば、Photoshop のテキストツールでは、テキストを入力後 command + return で入力を確定できますが、Affinity Designer では「レイヤーのグループ化」になってしまい、これを変更することはできないようです。

※Affinity Designer でテキストの入力を確定するには esc キーを押します。

もちろん、メニューにある項目のキーボードショートカットはアプリの［環境設定＞キーボードショートカット］から変更できます。

レイヤースタイルに存在しない値がある

また、レイヤースタイルに以下の値が存在しないため読み込んだ PSD の見た目が変わったり、Photoshop でできたことができない場合があります。

［光彩(内側)］や［ドロップシャドウ］の［スプレッド］がない
［光彩(内側)］などに［ノイズ］がない
［境界線］の［テクスチャ］がない
［パターンオーバーレイ］そのものがない

そのため、例えばプロになるためのWebデザイン入門講座に掲載している Photoshop の作例を読み込むと、以下のように表面のザラザラ模様がなくなってしまいます。

テキストボックスに日本語を流し込むと「長い英単語」とみなされ、自動改行がうまくいかないことがある

厳密には、テキストボックスの中で「英単語と日本語の両方がある行」では日本語が「長い英単語」とみなされて改行がうまくいかなくなることがあるようです。

この場合、行の最後に改行または半角スペースなどを入れる必要があります。

気づいたこと

ai 形式で保存はできないが、PDF で保存できる
レイヤーパネルでレイヤーの順序を変更する時は、レイヤー名を上下にドラッグするのではなく「レイヤーサムネイルのあたりにドラッグ」する必要がある。レイヤー名を上下にドラッグだと「レイヤーグループに入れる」操作になる
ビットマップ画像をペーストした時にレイヤー名が (画像) になるが、これは Photoshop の「スマートオブジェクト」に相当するものっぽい。［ピクセルペルソナ］で編集するためにはメニューから［ラスタライズ］して、レイヤー名を (ピクセル) にする必要がある
「テキストツールで日本語を入力できない」と書かれているブログが多いが、command + スペースキーで日本語入力に切り替えればできる
移動ツールでドラッグした時、少しでも交差した図形を選択するには［環境設定＞ツール＞選択マーキーと交差するオブジェクトを選択する］にチェック

「テキストツールで日本語を入力できない」と書かれているブログが多いが、command + スペースキーで日本語入力に切り替えればできる

テキストツールでテキストを入力する時に、日本語キーボードの［かな］［英数］キーを押すと半角スペースが入力されてしまうため、他のブログでは「テキストツールで日本語を入力できない」と解説されていることが多いようですが、command + スペースキーで日本語入力に切り替えればできます。

ただ、変換中に左右キーなどを押すと挙動がおかしくなることがあるため、テキストエディターで予め日本語テキストを入力しておくか、control + スペースキーで Spotlight を表示してそこで入力し、コピペしたほうが楽だと思います。

総評

Affinity Designer は、以下の方におすすめできるのでは、と思います。

趣味でWebデザイン制作をしている方
Web制作会社ではなく他業種の社内Webデザイナーの方
ECサイトの更新（メインビジュアルやバナー制作）をしている方
会社では Adobe 製品を使っていて、自宅で自分のサイトを制作したりデザインの練習をしたい方

また、Adobe CC を利用している方でも歯車などの図形の制作のために Affinity Designer を持っておいても損はないかなと思います。
Affinity Designer から Illustrator へのコピペも可能で、日本語テキストもテキストのまま（アウトライン化されずにフォント設定を保持したまま）コピペできます。

逆に、以下のようなケースで使用するのは難しいかなと思います。