ウェブ制作に役立つAffinity Designerの使い方と注意点

動画版もあります

今回はリモート参加の方向けに動画版も用意したので、読むのが面倒という方はYouTube でどうぞ。14分31秒の動画です（注： 改めて自分の声を聞いてみて、この声には睡眠促進効果があるんじゃないかと疑っています。聞いていて眠くなるかもしれませんのでご注意くださいw）。

Affinityツールを好きな理由

どこぞの牛丼屋じゃないですけど、Affinityアプリは、はやくて、やすくて…w

すごくサクサク動きます。そして、買い切りで各6,100円（2019/12/19現在）というお手頃価格は本当にありがたいです。フリーランスになったばかりの今は特にそう思います。

たとえば、Adobe Illustratorの単体プランで年間プラン（一括払い）が26,160円（2019/12/19現在）なので、それと比べるとAffinityツールはかなり安いですよね。Adobe Illustratorの1年間のサブスクリプションの値段で、Affinity Designer、Photo、Publisherの3つを買ってもお釣りがきちゃいます。あと、お金を払い続けないと使えなくなることもないので、精神衛生上けっこう大きいです。

ちなみに、Affinity Designerは現在バージョン1.7.3なんですが、1.xの更新は同じライセンスで使えるようです。僕は2016年1月にMac版のAffinity Designerを購入したんですが、それ以来一度もお金を払わずに使ってます。逆に開発会社のSerifさんがそれで経営大丈夫なのか不安になります。ただ、2.xになったら新たに購入の必要があるのかもしれません（→ 要確認）。

グラフィックデザインをはじめたい方にも最適

この手軽さでグラフィックデザインに必要な機能がそろっているので、グラフィックデザイナーやイラストレーターを目指す方々にも気軽に始められる良いツールだと思います。いまはAdobeツールが業界標準になってますが、気軽に始めるのにはやっぱりお値段のハードルが高いです。

Affinity Designerが一番好き！

Affinityツールのなかでも、僕はAffinity Designerが一番好きでよく使うんですが、その理由は、このアプリがウェブも、印刷物も、イラストも、なんでもこなせる万能ツールだからです。

このスライドに載せているのは、実際に僕がデザインしたものなんですが、レスポンシブなウェブサイトも、卓上カレンダーのような印刷物も、クリスマスカードのイラストなんかも、すべてAffinity Designerでデザインできてしまいます。

ただ、印刷をしてから加工が必要なものは印刷通販ではAIファイルでの入稿が必須な場合が多いです。なので、封筒や卓上カレンダーのように印刷後に加工が必要なものは、僕はAffinity Designerでデザインを作ってクライアントの承認をもらって、それをイラレで清書するといったことをしています。

あと、Affinityツールは縦書きや日本語の禁足処理ができないなど、弱点もありますのでご注意ください。万能なツールではあるものの、日本語に特化した機能が弱いのは残念です。

Affinityでデザイン、イラレで清書というフローもあり？

ここはちょっと余談になりますけど…

シンプルなベクターシェイプは、Affinity Designerからイラレにコピペが問題なくできます。なので、Illustratorでゼロから作り直す必要はないです。

たとえば、いろいろなデザインのバリエーションを試したり、変更を加えているとデザイン要素のサイズや位置の数値がおかしくなる場合もあるので、それらの最終確認も含めて、一度ツールを変えて「清書」するというフローも悪くないと考えてます。

ページものは、テンプレートだけデザイン承認までAffinity Designerで、作り込みはAdobe Illustratorなんてのもありですかね？まぁ、そこまでしてAffinity Designerを使う必要ないんじゃない？と思われそうですがw

使い心地の良いAffinity Designer

僕はIllustratorをそこまでがっつり使っていたわけではないので比較が難しいですが、Affinity Designerのほうが使い心地が良い気がしています。ツールとしてのUI思想がシンプルなんですかね？あと、動作が軽いというのも、なにげに大きいですよね。

イラレはめちゃくちゃ機能がたくさんありますが、それだけに、難しいというか。複雑というか。

Adobeツールはちょっと価格がお高いだけで嫌いなわけではないので、いろいろ使えるのが良いと思っている派なんですが、Affinity Designerに慣れちゃうと、デザインする際はついAffinity Designerを起動しちゃいますw

こんなふうに使ってます

最近、まさにそんなプロジェクトの依頼が僕に来たんですが、そのプロジェクトではAffinityツールを以下のように使っています。

Affinity Designer

• ロゴのデザイン
• 名刺のデザイン
• フローチャート
• ワイヤーフレーム
• デザイン・カンプ
• 素材の書き出し
• その他の印刷物（Adobe Illustratorと併用する場合もあり）

ロゴや名刺のデザインからウェブサイトのデザインカンプ、そして、最終画像素材の書き出しまで、ほとんどをAffinity Designerで作っています。ただ、先述した通り、封筒や卓上カレンダーのような印刷後に加工が必要なものにはAdobe Illustratorを併用しています。仕方がないのでAmazonで割引があった際に、年間プランを購入しました。

Affinity Photo

• 写真の加工

Affinity Publisher

• ロゴの利用ガイドライン

ロゴの利用ガイドラインや提案書のような、複数ページ必要な資料についてはPublisherを使っています。

余談1: Notion

Notionについては、プレゼンの際も動画でも触れてないんですが、やっぱり便利なツールですね〜。要件や仕様の整理、ノートやメモの管理、調査資料の整理など、たとえば、Affinityツールで作った画像やPDFを貼り付けてまとめておくこともできるし、2020年は有料版で使っていこうと思っています。

余談2: ツールは適材適所で選ぶのがいい

Affinityツールに向いているプロジェクトもありますが、逆に

• ちょっとした動きを入れたプロトタイプを作りたい場合はAdobe XD、
• チームでデザインするのが必須な時はFigma、
• 他のアプリとの連携が必須の場合はSketch

など、向き不向きはあると思うので、ツールは適材適所で使うのが良いと思います。なので、どれも使えるようになっておくと良いのかなぁ、と思ったりw

ウェブ制作に役立つ便利な使い方

さて、前置きがめちゃくちゃ長くなりましたが、ここからが本題のAffinity Designerのウェブ制作に役立つ便利な使い方のご紹介です。基本的な機能のように思えるものも多いかもしれませんが、ある意味痒いところに手が届くこれらの機能は、作業効率を大きく上げてくれます。

違う種類の画像の書き出し

複数解像度の画像だけでなく、たとえばSVGとPNGといった違う種類の画像ファイルを書き出すのも簡単にできます。

モダンな開発者の方々はあんまりやらないのかもしれませんが、SVGのフォールバック用にPNG画像も書き出しておきたいなんて時にも便利です。

やり方

さきほどの書き出しペルソナのスライスパネルで、今度は違うところにある「+」アイコン（❶）をクリックすると、他の種類の画像（SVG、JPG、GIFなどなど）を書き出し画像として追加できます。追加後に書き出しアイコン（❷）をクリックすると、設定した画像を一気に書き出せます。楽ちんですねぇ〜

アセットとシンボル機能

ワイヤーフレームやデザインカンプを作る時に便利なのがアセットとシンボル機能です。

アセット機能

アセット機能は、よく使うデザイン要素を登録しておく機能で、Affinity Designerでは独自のカスタムセットをカテゴリに分けて登録ができます。先日、17ページ分のウェブサイトのワイヤーフレームを作ったんですが、アセットをAtomic Designの考え方でAtoms、Molecules、Organismsにカテゴリ分けして使ってみたんですが、なかなか作業が捗りました。僕はワイヤーフレームの要素はプロジェクトに特化したデザインを入れ込まないシンプルなものにしているので、アセット登録しておくと他のプロジェクトでも使いまわせて便利です。

アセットパネルはメニューから「表示 → スタジオ → アセット」で表示できます。あと、環境設定のキーボードショートカットから、ショートカットを登録しておくとパネルの表示・非表示を簡単にできるので便利です。

キーボードショートカットのドロップダウンで「デザイナー」と「その他」を選ぶと「アセットパネルを切り替え」という項目があるので、そこでショートカットを設定できます。

シンボル機能

シンボル機能は、複数箇所で使用するデザイン要素を登録しておくと、あとで一気に変更ができる機能です。デザインカンプをつくる際に、複数ページで共通して使用するヘッダーやフッター、ロゴ、矢印アイコンなどを登録しておくと、あとで一気にサイズや色を変えられるのですごく便利です。

シンボルのある特定の部分だけ個別の設定をする機能もあるので、使いこなせるとさらに便利になります。

シンボルパネルはメニューから「表示 → スタジオ → シンボル」で表示できます。シンボルパネルにもショートカットキーを設定しておくと便利です。先程の環境設定のキーボードショートカットパネルのドロップダウンで「デザイナー」と「その他」を選ぶと「シンボルパネルを切り替え」という項目があります。

公式チュートリアルビデオがわかりやすいですよ

アセットとシンボル機能の基本的な使い方は、以下の公式チュートリアルビデオがわかりやすいです。ビデオ自体は英語ですが日本語字幕がついてます。

• アセットパネル | Affinity Designerデスクトップ版のチュートリアル
• シンボル | Affinity Designerデスクトップ版のチュートリアル

アートボードを個別ページとしてPDFで書き出し

先日、17ページ分のワイヤーフレームを作ったんですが、クライアントチェックの際にPNGに書き出して送ったら、なぜか見られないということがあって、PDFに書き出して送ったら見られた、なんてことがありました。Affinity Designerではページごとに、また、すべてのアートボードを1つのPDFとして書き出せます。17のファイルを送るより、17ページの1つのPDFとして送れるほうが煩雑にならずにすむので重宝しました。

すべてのクライアントがパソコン操作に慣れているわけではないので、こういった融通の効いた対応ができるAffinity Designerは便利なツールです。

少数ピクセルに注意

まず一つ目は、少数ピクセルについてです。

以下のいずれかに小数点以下の数値が含まれていると、上のスライドのように、ピクセルで書き出す際に図の境界線がにじんでしまうので注意が必要です。

• オブジェクトのサイズ
• オブジェクトの位置
• アートボードの位置

上のスライドのツールバーのキャプチャ画像にあるように、Affinity Designerには「ピクセル配列を強制的に適用」や「ピクセル全体で移動」などの補助機能があって、ある程度までならサイズや位置に小数が含まれないようにコントロールできます。

それでも、以下の場合はどうしても少数が発生してしまいます。

• グループをリサイズするとき
• テキストにスナップするとき
• 計算式でリサイズするとき

グループをリサイズすると、グループ全体は整数でも、なかにある要素のサイズや位置が少数になる場合もあります。テキストはそもそも小数を含むサイズになってしまう場合が多いので、テキスト要素に他の要素をスナップさせると位置に小数が含まれてしまいます。また、変換パネルで計算式を使ってサイズの変更をすると、意図せずに小数が発生することもあります。

これらに気をつけないと、書き出したら境界線がにじんでいたなんてことや、画像サイズがおかしくなることもあります。意識していないと知らぬ間にこういったことが起こっている場合もあります。デザインの全工程を通して気をつけて作業したほうが良いです。後で苦労します。僕は後で苦労しました。。。

環境設定のユニットタイプの小数位の設定にも注意

あと、環境設定のユーザーインターフェイスパネルに「ユニットタイプの小数位」という設定があって、ここのピクセルの設定を「0」に変えても上で紹介した問題は解決しませんのでご注意ください！

僕は勘違いしていて、ここを「0」に設定すれば、デザイン要素のサイズも位置も小数を含まないようにできるのかと思ったら、ユーザーインターフェイスでの表示だけでした。

実際には小数を含むサイズなのに、ただ表示されていないだけです。これも、僕はやってみて気づいて後で苦労したのでご注意ください！

質問など遠慮なくTwitterでお声がけください。@rriver でお待ちしてます。