私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。
最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。
しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。
ここ最近はたった1つのアプリでWebデザインを完結させるワークフローを実践していますが、とても快適なのでその方法についてこの記事で紹介したいと考えています。
このワークフローは現在WindowsおよびMacで実践可能です。今後iPadでもできるようになるはずです。
なお、そのワークフローについては以下の動画をご覧いただければおおよその概要がわかると思います（この動画は声があります）。
この記事には続編があります
この記事の続編となる記事を書きました。以下の記事では、Affinity Publisherをプロトタイピングツールとして使用するための設定やメリット、Adobeとの互換性などについて書いています。
このワークフローでは「Affinity Publisher」を使用しますが、先にAffinity PhotoとAffinity Designerについて解説する必要がありますので以下解説します。
既にご存じの方は読み飛ばしても結構です。
Affinity Photoとは
Affinity PhotoはPhotoshopによく似た写真補正アプリケーションです。
調整レイヤーのような基本的な機能はもちろん［コンテンツに応じた修復ブラシ］のような高度な機能まで搭載されています。
Affinity Designerとは
Affinity DesignerはIllustratorによく似たベクターグラフィックツールです。
基本図形の作成に関してはIllustratorよりも圧倒的に豊富で、さまざまなバリエーションの図形を一瞬で作成できます。
Affinity Publisherとは
そして2019年6月にAffinity Publisherが発売されました。
Affinity Publisherも非常に高機能なアプリケーションですが、それに加えてAffinity PhotoやAffinity Designerを所有している場合、ウインドウの左上からそれらの機能に切り替えて使用することができます。
しかしながら、Affinity Publisherは現時点では日本語組版の機能が弱いため、日本語の印刷物を制作するのは非常に厳しいです。
とても多機能で便利なアプリなのに、日本語組版の機能が弱いために使い道がないというのはもったいないなーと思いながらTwitterを眺めていたところ、以下のようなツイートを見つけました。
cao.さんはゲームのUI制作にAffinity Publisherを使用できないか実験されているそうです。
Affinity PublisherはPhotoshopのような機能もIllustratorのような機能も使えて、ゲームの画面に表示するような日本語テキストの入力であればとくに問題なく行えるため、確かにそれは使い勝手が良さそうだと感じました。
そしてゲームのUI制作に使えるのであれば、Webデザインのプロトタイピングやスマートフォンアプリのデザインにも使えるのではないかと感じました。
思いついてすぐにWeb制作者の勉強会があったのでこの記事の冒頭の動画のようなプレゼンを行ったところ参加者の方に好評いただき、もっときちんと調査してプロトタイピングに本格的に利用してみようと考えるようになりました。
Adobe XDの特徴
Adobe XDのキャッチコピーは「思考の速度でデザインする」ですが、そのキャッチコピーのとおり非常に高速にキビキビ動作します。
機能的に大きな特徴としては、「リピートグリッド」と呼ばれる機能があります。
リピートグリッドは垂直方向または水平方向に繰り返しの要素を作り、そこに画像を挿入したりテキストを挿入したりするのに適しています。
Adobe XDの問題点
あまり知られていないかもしれませんが、Adobe XDはカラーマネジメントに対応していません。
リピートグリッドは規則的な繰り返ししかできませんが、実際のWebサイトは記事の一覧の途中に広告が挟まることもあります。その場合、リピートグリッドを解除しなければいけなくなります。
リピートグリッドに写真を入れる際、基本的にはファイル名順に入れることになります。
しかしファイル名が「dog.jpg」「cat.jpg」「rabbit.jpg」など数字始まりでない場合などに、思った順序に入らないということが起きます。
これらの問題はAdobe XDを純粋なプロトタイプ、つまり試作品を作るだけであればそれほど問題にはならないと思います。
しかしながら、現在WebデザインがスマートフォンアプリのUIなどはフラットデザインをベースにしているため、Adobe XDで最終的なデザインを作ってしまう場合が多いと思います。
その場合、これらのことが問題になる場合があるでしょう。
Affinityを使用した場合
Affinityスイートは初期から「OpenColorIO」というマルチプラットフォームのカラーマネジメントシステムをサポートしています。
Affinity DesignerやAffinity Publisherにはリピートグリッドの代わりに［オブジェクトを別々に変換］と呼ばれる機能があります。
たとえば長方形などのオブジェクトを複製したあと、それらのサイズを変更したくなったとします。
その場合、複数のオブジェクトを選択してから［オブジェクトを別々に変換］を有効にし、サイズをドラッグで変更するとすべてのオブジェクトが個別にサイズ変更されます。
この時、途中に広告など別の物が挟まっているとか、そういったことを気にする必要はありません。
また、［パワー複製］と呼ばれる強力な複製機能を使えば水平方向垂直方向だけでなく円形に配置したり、複製したオブジェクトが回転したり少しずつ大きくなったりといった複雑な繰り返しのレイアウトも実現可能です。
写真を配置するときは、クリックで自由に順序を決めることができます。
したがって、「dog.jpg」を1番目、「cat.jpg」を2番目、「rabbit.jpg」を3番目といったような順序を任意で変更可能です。
繰り返しの要素のマージン（間隔）を変更したい場合も、XDのリピートグリッドだとマウスで頑張って調整していたかと思いますが、AffinityならIllustratorライクな整列機能を使用してマージンを設定できます。
Affinityを使用したプロトタイピングページ遷移付きのPDFの作成について
Adobe XDの場合、プロトタイプモードに変更してから選択したオブジェクトから青いつまみを伸ばして別のページにドラッグすることで、ページ遷移のあるプロトタイプをつくることができます。
制作したプロトタイプは［共有＞プレビュー用に共有］を選択するとURLが発行され、Webブラウザーを使って確認することができます。
Webブラウザーでプロトタイプを確認した時、他のユーザーがテキスト形式のコメントを残すこともできます。
Affinity Publisherの場合、特定のボタンをタップすると別のページに遷移するようにするためには［ピクチャフレームツール］を使用して空（から）の画像ボックスを作成し、［ハイパーリンク］パネルを使用して別のページへのハイパーリンクを作成することができます。
そしてPDF形式で制作したものを書き出すことで、たとえばMacのQuickLookやプレビュー.app、PDFビューアなどを使用して「ボタンをタップすると別のページに遷移するプロトタイプ」の動作を確認することができます。
プロトタイプがPDFであることのメリット
プロトタイプがPDFであるということは、他の方に見せた時にPDFビューアーの注釈ツールなどを使用してコメントをもらうことができます。
その際、コメントはテキストだけでなく、たとえばiPadのPDFビューアアプリでは指やApple Pencelを使って「この画像をここまで大きく」とか、「このボタンをこの位置に移動」といったことをわかりやすく指示することができます。
たくさんの方にPDFを見せてWebブラウザー経由でコメントをもらいたい場合はGoogleドライブやDropboxなどにアップロードし、URLを送る事でコメントをもらうということもできます。
思考の速度で○○する
Adobe XDが登場した時、多くのAdobeユーザーの方はその快適な動作速度に驚いたと思います。
なぜAdobe XDが快適に動作するかというと、Appleが推奨する「Metal」という新しいグラフィックAPIを使用してGPUを活用しているからです。
それに対し、PhotoshopやIllustratorはほとんどの機能でMetalというAPIを活用せず、古いグラフィックAPIを使用しています。
AppleはOpenGL/OpenCLのような古いグラフィックAPIを「非推奨」としており、将来のmacOSで廃止すると表明しています。
Affinity Designer、Affinity Photo、Affinity PublisherはMetalでほとんどの機能が動作します。
そのため、図形の制作だけでなく写真編集やRAW現像など、あらゆる作業がまるでAdobe XDのように快適に動作するというわけです。
つまり、Adobe XDが「思考の速度でデザインする」プロトタイピングツールだとしたら、Affinityはデザインだけでなく写真編集やベクターグラフィックの制作など「思考の速度であらゆる作業を行える」アプリケーションであると言えます。
使用例: プロトタイピング制作中にアイコンを制作したい場合
たとえば、「プロトタイピング中に不足しているアイコンがある事に気づいた」という例を考えてみましょう。
先日アンケートを取ったのですが、Adobe XDを使用している方のうちほとんどの方が「ちょっとしたアイコンの制作をIllustratorで行う」と回答しました。
Affinity Publisherを使用している場合、アイコンを制作したい時は［デザイナーペルソナ］に切り替えるだけで、今開いているドキュメントはそのままでIllustratorのほぼすべての機能を利用してアイコン制作が行えます。
制作が終わったらすぐに［パブリッシャーペルソナ］に切り替えてプロトタイピングの続きができます。
Illustratorで制作したアイコンをXDに受け渡すためにファイルとして書き出したり、コピーペーストしたり、別のアプリに切り替えたりする必要はもうありません。
つまり、「作業の途中で時間や思考が中断されない」と言えます。
「プロトタイピングツールにPhotoshopやIllustratorのような高度な編集機能が欲しいと感じた事はありますか？」というアンケートでは半数以上の方が「アプリが重くならないなら欲しい」と回答いただきましたが、そのような方にはぜひ試して頂きたいです。
Affinityはすべてのペルソナ（Publisher、Designer、Photo）がAdobe XDのように快適に動作します。
Affinity（=親和性）とは何を意味しているのか
Affinity DesignerやAffinity Photoが登場した時、私はてっきり「これはIllustratorやPhotoshopの8割ぐらいの機能を搭載して、買い切りで安く提供するのが目的なのかな」と思っていました。
しかし、Affinity Publisherを使用した時、Affinityスイートの目的はそんな低い志にあるのではなく、「高い親和性のあるアプリケーションによってデザイン業務のワークフローそのものを改善することにあるのだ」ということに気づきました。
たとえばAdobe XDを使用してプロトタイプを制作する場合、効率よく制作しようと思えば事前にすべての素材をきちんと用意しておく必要があります。
もし一切の手戻りがなくすべての業務が滞りなく終わる場合は、AffinityよりAdobe XDを使用した方が早いかもしれません。
しかし、すべてのデザイン案件がそんなにうまくは行きません。
たとえば一部の写真がなかなか送られてこなかったり、写真のクオリティが悪くPhotoshopで修正が必要だったり、後になって「やっぱり写真の色味を修正して」と言われることもあるでしょう。
また、一見問題の無い写真がそろっていても、Adobe XDで写真をずらっと並べた時に明るさや色味が揃っていないことに気づいて写真を修正したくなることもあるでしょう。
そのような時、Photoshopで修正してからJPEGで書き出して写真を再配置するのと、その場でぱぱっとPhotoshopのほぼ全機能を使用して修正できるのとではどちらが快適でしょうか？
使用例: 撮影したばかりのRAWをそのままプロトタイピングに利用する
たとえば「今すぐに、仮のプロトタイプを2分ぐらいでパパッと作りたい」というケースを考えてみましょう。
デジタルカメラで写真を撮影し、それをLightroomで現像しPhotoshopに取り込んでからリサイズし…などとやっていては、あっという間に2分経ってしまいます。
しかし、Affinity Publisherであれば一瞬です。
なぜなら、デジタルカメラで撮影したRAWデータをそのままアートボードに配置して、そのままサクサク作業を続けることができるからです。
たとえば、富士フイルムのショールームでGFX 100という発売されたばかりの中判ミラーレスカメラをお借りして1億200万画素の写真を撮影し、そのRAWデータを何枚かAffinity Publisherに配置し、さらにベクターオブジェクトを使用してマスクしてみました。
結果は全く重くならず、そのまま作業を続行できました。
同じRAWデータをAdobe XDに配置しようとしても配置できず、Illustratorに配置しようとするとエラーメッセージが表示されました。
これに何の意味があるかと言うと、「完全に好きな手順で自分だけのワークフローを構築できる」ということと「後で修正作業が発生しても複数のアプリを行ったり来たりしなくて済むので、今までよりも手間がかからずデザイン業務が行えるようになる」ということです。
Adobe CCとの親和性
Affinity同士はあらとあらゆるオブジェクトを互いにコピー・ペーストし、別のAffinityアプリにペースト後も編集が可能ですが、それだけにとどまらずAdobe CCアプリにもコピー・ペーストできる事が多いです。
まず、Adobe CCアプリ同士のコピー・ペーストについて確認しましょう。
最近、Photoshop CCではレイヤーのコピー・ペーストが可能になりましたがそれは残念ながらPhotoshop内部専用で、IllustratorやAdobe XDにPhotoshopのレイヤーをペーストする事はできません。
Affinityアプリ同士は、当然あらゆるオブジェクトをコピー・ペーストできます。
たとえば、テーブル（表組み）を作成する機能はAffinity Publisherにしかありませんが、作成したテーブルをAffinity Photoにペーストすると、ペースト後もテーブルに行や列を追加できます。
AffinityアプリとAdobe CCアプリのコピー・ペーストは以下のようになります。
※Affinity→XDはテキストのペーストは問題ありませんが、ラスタライズされた画像をペーストすると、Macの一部の環境では垂直反転する場合があります。XDにペースト後に垂直反転すれば問題なく利用可能です。
また、AffinityでSVGファイルを書き出し、XDにSVGファイルをドラッグすることでも回避可能です。
なお、△マークが付いている箇所もAffinityからPSDを書き出してPhotoshopに読み込み、Photoshopで作成したPSDをAffinityに読み込み、XDからSVGを書き出してAffinityに読み込みすれば、テキストをテキストのまま持って行けます。
また、「Affinity Publisherで制作したプロトタイプにXDでアニメーションをつけたい」という場合、ページごとにSVGで書き出し、XDで読み込んでアニメーションをつけるということも可能です。
前述した cao. さんに、なぜAffinity Publisherを使用されているのか質問したところ、「ゲーム制作では、レイヤーを保持した状態でページごとにPSDにばらして書き出せるというのが相当大きい」そうです。
Photoshopプラグインについて
Affinity PhotoではPhotoshopプラグインが使用できます。
すべてのプラグインが動作するわけではありませんが、Nik Collection などが動作する事が知られています。
参考: Nik CollectionをAffinity Photoで使ってみる | MacFeeling Blog
まとめると、「AffinityスイートはAdobe CC製品よりAdobe CC製品との親和性が高い」と言ってよいと思います。
Fireworksが好きな方へ
Affinity Publisherを使用したWeb制作に関しては、おそらくFireworksが好き、あるいは好きだった方には気に入って頂けるのではないかと思います。
1つのアプリでベクターとラスターが使えるし動作も軽い、command+2で200%表示、command+4で400%表示、ベクターに対してレイヤースタイルが使える、カラーピッカー開きっぱなしで作業できる、［ファイル＞Designerで開く］を使えば全情報引き継いで本格的なスライス（Retina・SVG対応）も使えます。
Affinityによる3つの自由
1つ目は「好きな手順で作業ができる」つまりワークフローの自由です。
2つ目は「好きな場所で作業ができる」つまり作業環境の自由です。
Affinity Designer、Affinity Photoは既にiPad版が発売されており、ほぼ全機能が搭載されています。
そしてAffinity PublisherのiPad版の発売も予定されています。
これにより、自宅やオフィスだけでなくiPadを持ち歩けるあらゆる場所でデザインができるようになります。
3つ目は「サブスクリプションからの解放」です。
Affinityスイートは全て買いきりとなっています。
Affinity Designerは2014年に買い切りのアプリとしてリリースされましたが、一度も追加料金無く2019年もアップデートを受けられています。
もしかしたらいつかはメジャーアップデートにより有料になるかもしれませんが、少なくとも購入したバージョンは追加料金を支払うことなくそのまま利用可能です。
さらに詳しく知りたい方は
体験版と機能一覧
Affinity Designer、Affinity Photo、Affinity Publisherは以下のページからWindows版とMac版の体験版をダウンロードすることができます。
iPad版は残念ながら体験版はありません。
動作環境（PCやOSなど）と、どのような機能があるかの一覧が見たい場合は以下のページの完全な機能一覧をご覧ください。
一部の機能はAdobe製品とは名前が違うのでご注意ください。
（例: コンテンツに応じる→インペインティング）
Windows・Mac用のDesigner・Photoの体験版は上記サイト内からダウンロードできます。
iPad用の体験版はありません。
Affinityではできないこと
現状、以下の機能は搭載されていないようです。
パスの単純化（今後搭載予定あり）、ライブトレース（ピクセル画像をパスに変換）、高度なアピアランス、縦書き、禁則処理
また、現在確認されている不具合として、日本語を入力し、変換を確定する前にカーソルキーを入力するか、変換候補をクリックすると入力している文字がダブる（同じ文字列が2つ連続した状態になる）バグがあります。
Affinity User Group JAPANの活動として、日本語入力に関する問題を改善し、縦書きや禁則処理などに対応して頂けるよう開発者の方に求めていく予定です。
その他の注意点
Affinity Photo、Designer、Publisherの3つのアプリを購入すると、Affinity Publisherからそのほとんどの機能を利用できますが、以下の機能はAffinity Publisherでは利用できませんのでご注意ください。
（）内のアプリに切り替える、あるいは作業を引き継ぐ事で利用可能です。
Photoshopプラグイン（Affinity Photo）、スライス（Affinity Photo・Designer）、Adobe Camera RAWのようなRAW現像（Affinity Photo）
チュートリアル動画
以下のページに、日本語字幕付きの動画があります。（Publisherの一部の動画はまだ日本語字幕がありません）
- Affinity Designerデスクトップ版のチュートリアル
- Affinity Photoデスクトップ版のチュートリアル
- Affinity Publisherデスクトップ版のチュートリアル
- iPad向けAffinity Designerのチュートリアル
- iPad向けAffinity Photoのチュートリアル
日本語テキストのヘルプは、メニューの［ヘルプ］からご覧頂けます。
SNSで情報交換したい方へ
ヘルプやチュートリアルを見ても分からない事、「こういうことがしたいがやり方が分からない」ということや要望などは 公式の英語フォーラム がありますが、英語はハードルが高いという場合、たとえばTwitterで #AffinityDesigner #AffinityDesigner #AffinityPublisher ハッシュタグをつけてツイートする、Affinity User Group JAPAN のFacebookグループで質問するという方法があります。
Facebookグループは他の方に投稿が見えないよう秘密のグループとなっていますが、お気軽にご参加ください。
渋谷でイベントを開催します
Affinityスイート製品の活用方法を知り、意見交換し、アプリを育てていくための勉強会を開催します。
7月19日の19:00〜21:00開催で途中参加可能です。参加費用は無料です。
以下のイベントページからお申し込みください。
※こちらは既に満席となっておりますが、キャンセル待ちされていた方には無料で講演内容の動画をプレゼントする予定です。ぜひキャンセル待ちにご登録ください。
Affinity User Group JAPANミーティング #1 – connpass
別記事: おすすめの環境設定
AffinityのUIやキーボードショートカットはAdobe CCにかなり似ていますが、一部違う部分もあります。
別の記事で、私のおすすめ設定について書く予定です。
とりあえず最低限チェックした方が良い設定として、MacではAffinityの環境設定（Macはcommand+,キーで表示）で、［パフォーマンス］の［ディスプレイ］から［Metal］を選択し、［Metalアクセラレーションの計算を有効化］にチェックを入れます。
Windowsでは現在は高速なグラフィックAPIなどに完全対応できていないようですが、まもなく対応予定とされています。
関連記事
この記事を公開してからわずか1週間で、海外のAffinityユーザーの方から取材を受けたり、日本でAffinity製品を使用しているプロのWebデザイナーの方のインタビュー動画を撮影したりといろいろな事がありました。
詳しくは以下の記事に書いています。
Affinity製品を使用しているWeb制作者のインタビュー動画と最近のユーザーグループの活動について | Stocker.jp / diary
この記事には続編があります
この記事の続編となる記事を書きました。以下の記事では、Affinity Publisherをプロトタイピングツールとして使用するための設定やメリット、Adobeとの互換性などについて書いています。
