Affinity Publisherを最強のプロトタイピングツールとして使うために知っておきたいこと

この記事の内容

この記事は、2019年7月19日に開催した「Affinity User Group JAPANミーティング」というイベントで私がお話しした内容をまとめた記事です。
以前話題になった PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売という記事の続編のような内容です。

主に以下の内容について書いています。

Affinity PublisherによってWebデザインのワークフローがどのように改善するのか
「Affinityは軽い」と言われるが、軽いと何が良いのか
おすすめの環境設定
脱Adobeへの第一歩

動画で観たい方は以下の動画をどうぞ。音声あり、約24分です。

※他の登壇者の方の内容は、後日別の記事として投稿予定です。

Affinityが目指しているもの

あくまでも私の個人的な私見ですが、AffinityはAdobe CCの100%完全互換のクローンアプリを目指しているのではなく、各アプリケーション間の親和性（Affinity）を高めることで、デザインのワークフローを改善することを目指していると思います。

Adobe CCの場合、Photoshop・Illustrator・Adobe XDはそれぞれグラフィックエンジンやテキストエンジンが異なります。

そのため、Illustratorで制作したオブジェクトをPhotoshopにコピーペーストすると、スマートオブジェクトか、ピクセルか、シェイプレイヤーなどに変換しなければいけません。

見た目を保持したければスマートオブジェクトやピクセルにしなければいけませんが、Photoshop上でそれらを編集することはできません。

Photoshop上で編集したければシェイプレイヤーにする必要がありますが、見た目を保持できない場合があります。

逆にPhotoshopで作ったものをIllustratorで使いたい場合はPSDファイルをリンク配置などする必要がありIllustrator上ではそれを編集することができません。

Affinity Photo・Affinity Designer・Affinity Publisherの場合、すべて同じグラフィックエンジンやテキストエンジンを使用しています。

たとえばPhotoshopのような新規調整レイヤーはどのアプリでも同じように使うことができます。

テーブル（表組み）機能はAffinity Publisherにしかありません。
しかしAffinity Publisherで作成した表を写真編集アプリであるAffinity Photoにペーストしても、行や列の挿入や削除ができます。

StudioLinkによるワークフローの改善

そしてAffinity Publisherには「StudioLink」という、Affinity PhotoやAffinity Designerの機能に切り替えて使うことができる仕組みが用意されています。

ウインドウの左上の［デザイナーペルソナ］や［写真ペルソナ］のアイコンをクリックすることで、Affinity Designer・Affinity Photoの機能に切り替えることができます。

私はパブリッシャーペルソナをAdobe XD、デザインペルソナをIllustrator、写真ペルソナをPhotoshopのようなものだと思って使っています。

Adobe CCでWebデザインを作っていた頃は、カメラで撮影した写真はRAWデータと呼ばれるJPEGよりも情報量の大きい写真データをLightroomで現像して、大きなJPEGファイルをPhotoshopで読み込みLightroomではできない写真加工をしてWeb用に小さく縮小したJPEG写真を書き出し、Adobe XDに貼り付けていました。

アイコンはIllustratorで制作し、SVGデータを書き出してからAdobe XDに貼り付けていました。

しかし、Affinityに移行してからはすべてPublisherだけで済むようになりました。

たとえば写真は、Affinity PublisherのデザインカンプにRAWデータを「そのまま」貼り付けてマスクし、調整レイヤーで明るさなどを補正することができます。

これが何の役に立つかというと、デザインカンプに写真を配置した後で「やっぱり写真の明るさを変えて」と言われたり、「写真を並べると明るさや色があってないな…」と思ったときにLightroomによる現像からやり直す必要がなく、デザインカンプ上で調整レイヤーを調整するだけで済みます。

「それってAdobe CCでもできないの？」と思う方もいらっしゃるかもしれませんが、Adobe XDやIllustratorにはRAWデータをそのまま貼りつけることはできません。

「ではPhotoshopではできないの？」と思うかもしれません。
PhotoshopでWeb用のデザインカンプを作ってそこにRAWデータを貼り付けようとドラッグ&ドロップしても「Camera RAW」という現像ダイアログが起動してしまうため貼りつけることはできません。

仮にPhotoshopで広い色域を維持したデザインカンプを制作しようとして、カラーモードを32bitなどの広色域にすると、［調整レイヤー］で明るさ・コントラスト・トーンカーブ・自然な彩度などが実行できなくなってしまいます。
Photoshop CCは、残念ながら多くの調整レイヤーは8bitの狭い色域でないと使用できないのです。

しかし、Affinity Publisherなどでは32 bit HDR、つまり広色域のドキュメントを新規作成し、そこにRAWデータを貼り付け、すべての調整レイヤーを使用することができます。

たとえばWebデザインカンプにRAWデータを貼り付けた状態を考えてみます。
この写真は非常に暗く映っていますが、本物のRAWデータなので、レベル補正の調整レイヤーをかけて大胆に明るさを変更することが可能です。

先ほどの滝の写真は2400万画素ですが、人によっては4800万画素など、もっと高画素のカメラを持っている方もいらっしゃるかもしれません。
そういった方は動作が重くないか不安に思うかもしれませんので、ここでは富士フイルムの新製品発表会でお借りした1億200万画素の中判ミラーレスデジタルカメラで撮影した写真をそのままデザインカンプに貼り付けて、ライブフィルターで放射状ぼかしをかけてみます。

Photoshopでは放射状ぼかしはプレビューすらできませんが、Affinityでは1億200万画素の写真に放射状ぼかしのライブフィルターをかけ、それをライブプレビューしてもサクサクと動作しています。

もしかしたら「このプレゼンで使用しているMacBook Proの性能が高いのでは？」と思われる方がいらっしゃるかもしれませんので性能をお見せします。
このMacBook Proは2016年のTouch Barの中で1番安いモデルで、メモリは8GB、GPUは外部GPUなし、Intel Iris Graphics 550です。

次に「RAWデータをそのままデザインカンプに貼り付けたり、高画素のデータをそのまま貼りつけるとファイルサイズが重くなるのでは？」と気になると思います。
そこでPSDの場合とファイルサイズを比較してみました。

PhotoshopではRAWデータをそのままデザインカンプに貼りつけることはできないため、1億200万画素のJPEG画像を1枚デザインカンプに「リンク貼り付け」してPSD形式で保存しました。すると4.5MBでした。
同じことをAffinity Publisherでおこなうと、613KBとなり容量は86%減少したことになります。

続いて「写真を埋め込んだ場合は重いのでは？」と思われるかもしれませんので、このようなブログ風の4枚のアートボードによるデザインカンプを制作し、すべての写真を埋め込んでPSDで保存してみました。するとファイルサイズは60MBでした。

それをAffinity Publisherで開き .afpub 形式で保存し直すだけでファイルサイズは17MB、つまり72%減少しました。もちろん画質はそのままです。

アプリで使用される用語とカスタマイズ方法

Adobeアプリで使われている用語とAffinityアプリで使われている用語はこのような違いがあります。

ツールをカスタマイズするにはメニューの［表示＞ツールをカスタマイズ］をクリックします。

Macでウインドウの上の方にあるツールをカスタマイズしたい場合はツールバーを右クリックし［ツールバーをカスタマイズ］をクリックします。

環境設定

環境設定ダイアログではさまざまな設定を変更することができます。

環境設定＞一般

「AffinityでPSDやIllustratorのデータを開いた時に思ったように開けなかった」という話を聞くことがありますが、ぜひ［環境設定＞一般］で［忠実度よりも編集可能テキストを優先する］のチェックボックスをオンの状態とオフの状態の両方で開いてみてください。

Affinityは環境設定ダイアログを開いたままでさまざまな作業をおこなうことができます。
チェックの状態をオンオフを変更するためにダイアログをいちいち閉じる必要はありません。

左の画像は［編集可能テキストを優先する］をオフの状態で開いたものです。テキストレイヤーがラスタライズされてしまっています。
右の画像はオンの状態です。テキストレイヤーがそのまま保持されています。
見た目を優先したい場合はオフの方が良い場合もありますので、ぜひ両方でご確認ください。

そのほかPSDはAdobe XDで開くこともできますので、XDで開いてから、コピペでAffinityに持ってくるという方法もあります。

環境設定＞カラー

CMYKカラープロファイルは初期設定で［US Coated］になっていますが、Illustratorに近づける場合［Japan Color 2001 Coatedを選択すると良いでしょう。
そのほか［Japan Color 2011 Coated］を選択することも可能です。

環境設定＞パフォーマンス

macOS 10.12 Sierra以降をお使いの場合、必ずパフォーマンスの項目でディスプレイのプルダウンから［メタル］を選択してください。
メタルを選択することにより、Adobe XDと同じくらいサクサクに動作するようになります。

［Metalアクセラレーションの計算を有効化］にもチェックを入れておいてください。

環境設定＞ユーザーインターフェース

ユーザーインターフェースで画面の明るさを変えることができます。UIカンマのスライダーを左右にドラッグすると明るさの微調整ができます。

ピクセルを［0］にすると、幅や高さなどのサイズに小数点が表示されなくなります。
あくまでも小数点が「隠れているだけ」で、この設定だけでは小数点が付いてしまうことがあるので気をつけてください。

小数点を出さないようにするには、画面上のツールバーの磁石のアイコンの隣にある▼をクリックして、プリセットから［UIデザイン］を選択します。

環境設定＞ツール

Affinityは初期設定ではPhotoshop CC 2019のように写真オブジェクトを変形するとき、初期設定で縦横比が固定されています。そして長方形のシェイプオブジェクトは縦横比が固定されていません。
これは人によっては混乱すると感じられることもあるかと思います。

Illustratorのように［shift］キーを押している間だけ縦横比を固定するには、［移動ツールの縦横比制約］というプルダウンから［デフォルトで制約しない］を選択してください。

［モディファイア微調整距離］というのは［shift］キーを押しながらカーソルキーを押したときの移動距離を指しています。
10pxの場合、［shift］キーを押しながらカーソルキーを押すと10pxずつ移動します。

［ツールUIサイズ］を［最大］にした場合

［ツールUIサイズ］では、バウンディングボックスの表示サイズやアンカーポイントの表示サイズを5段階で変更することができます。

「アンカーポイントが持って大きい方が見やすい、ドラッグしやすいのに…」と思った事がある方は［最大］にすると良いかと思います。

アンカーポイントなどの用語について

Affinityではアンカーポイントのことを「ノード」と呼びます。
またオープンパスのことを「カーブ」、クローズパスのことを「シェイプ」と呼びます。

先ほどの図をよく見ていただくと、ノードにさまざまな種類がある事がわかると思います。
四角形で表示されているものは尖点ノード、またはシャープなノードと言います。
これは、ノードからハンドルが伸びていない直線のノードです。

ノードからハンドルが伸びている場合は滑らかなノード、またはスムーズノードと呼びます。

Illustratorの曲線ツールで描いたようなノードのことを「スマートノード」と言います。
これらは相互接続が可能です。
始点となるノードは赤色で表示されます。

環境設定＞キーボードショートカット

私は、Affinityのキーボードショートカットは基本的にIllustratorに合わせています。
私が変更したキーボードショートカットは以下の表にまとめています。

私はAffinityを使い始めた頃、テキストを入力して確定するとなぜかアウトライン化、つまり「カーブに変換」されていることに悩まされていましたが、それは標準のキーボードショートカットでは［command］+［enter］が［カーブに変換］だからということに気づきました。
そこで、カーブに変換のキーボードショートカットは［command］+［shift］+Oに変更しました。

Affinityの［複製］は英語版では［Power Duplicate］というのですが、Illustratorの複製よりも強力な機能です。
標準のショートカットキーは［command］+ Jですが、私はIllustratorに合わせて［command］+ Dにしました。

標準のショートカットでは100%は［command］+1、200%は［command］+2 などはそのまま活かしたいので、Illustratorではロックが［command］+2ですが、ここは変更せず200%のままにしています。

テキストオブジェクトの初期設定を変更

初期設定ではテキストオブジェクトを新規作成すると「Arial」というフォントになりますが、これを日本語フォントにしたりフォントサイズを変更するには、デフォルトにしたいテキストを制作し、それを選択して、メニューの［編集＞デフォルト＞保存］をクリックしてください。

Adobe XDの「リピートグリッド」の代替方法について

Twitterでリピートグリッドの代替方法について聞かれたので、ここで回答します。

Adobe XDの場合、繰り返しの途中に広告が挟まっているとリピートグリッドを解除しなければならず面倒です。
Affinityの場合、リピートグリッド機能はないのですが、私だったら［オブジェクトを別々に変換］という機能を使用します。

テキストの行数を1行や3行に変えたいときは、テキストだけを選択して［オブジェクトを別々に変換］のボタンをオンにします。
そしてバウンディングボックスを調整して高さを変更すると、すべてのテキストの高さを1行や3行に変換することができます。

次に画像を配置する場合ですが、Adobe XDでは複数の画像ファイルをアートボードにドラッグ&ドロップするとファイル名順に入ります。
これは「プロトタイプ」、つまり「試作品」を作るには良いのですが、デザインカンプのようなものを作るのであれば「画像を入れる順番は自分で決めたい」ということもあるでしょう。

Affinity Publisherでは［ピクチャフレーム長方形ツール］を使用して画像の枠を作り、それらを選択して［ファイル＞配置］で複数の画像を選択すると、クリックした順番に画像を挿入することが可能です。

脱Adobeへの第一歩

これはWeb制作者向けの脱Adobeの話です。
「Adobe CCをやめたいけれど、Affinityだけでは日本語組版や印刷そしてPSDのテキストレイヤーの互換性などが厳しく、Adobe CCを止められない」と思う方もいらっしゃると思います。

私は、脱Adobeへの第一歩として「Illustrator単体プラン」をおすすめします。
Illustrator単体プランがあれば、たとえば縦長のバナーに縦書きの文字を入れたい場合、Illustratorで縦書きの文字を作ってアウトライン化してコピーしてAffinityに持ってくるということができます。

また、たまに名刺を印刷する場合などIllustratorがあると安心できることもあるでしょう。

IllustratorがあればPSDの読み書きもできます。
そしてAdobe XDは無料で使用することができます。

多くのWeb制作者の方はIllustrator単体プランと、無料のAdobe XDと、Affinity三兄弟があれば一般的なWeb制作には困らないのではと思います。

.ai ファイルをAffinityから書き出したい

AffinityではIllustratorファイルの書き出しができないという話を聞くこともありますが、実はアートボードが1枚だけであればPDF形式で書き出し、その拡張子を .ai に変更すればダブルクリックしたときに警告ダイアログなしでIllustratorで開くことができます。よほどIllustratorに詳しい方でなければ、Illustratorで制作したデータと区別するのは難しいでしょう。