この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。
私は1999年のFireworks 2Jから使用していますが、最近使用しているAffinity DesignerはFireworksと特徴が似ていて、Fireworksが好きだった方にとって後継アプリとして使いやすいのではないかと思っています。
Fireworksと私
私は 神速Photoshop [Webデザイン編] や プロになるためのWebデザイン入門講座 などの本を執筆しています。
私はなぜかFireworksが嫌いな人と思われているようですが、この本の最後に「Fireworksを使っていたが、Photoshopで制作したい」と書いたためではないかと思っています。
しかし、私はFireworksには結構思い入れがあります。
なぜかと言うと、高校生の時初めて作ったWebサイトはWindows版のFireworks 2Jでデザインしたからです。
しかし、2009年から2012年頃「スキューモーフィズムのWebサイトをデザインするときはPhotoshopがもっとも適しているのではないか」と考えていました。
この本はその頃に書いたものです。
しかし、その後スキューモーフィズムが廃れてフラットデザインやマテリアルデザインの時代になると、私は「もしかしたらFireworksのようなアプリが再び返り咲くかもしれない」と考えていました。
Fireworksの特徴、欲しかった機能
私が思うFireworksの特徴はこの辺りです。
私は、Fireworksが返り咲くためにはこの2つの機能は絶対に欲しいと思っていました。
しかし、残念ながらこれらの機能は搭載されないまま開発が終了してしまいました。
Affinity Designerの話
そして時は流れ、2019年の5月頃から私はPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designerを使い始めました。
私が思うAffinity Designerの特徴はこんな感じです。Fireworksと結構似ていますね。
画面左上のアイコンをクリックすると［写真ペルソナ］というラスターデータを扱うためのモードに切り替わり、写真編集などができるようになります。
ネイティブファイルが軽いというのは、たとえばPhotoshopで作ったPSDをAffinity Designer形式で保存しなおすと、平均70%から80%程度、画質はそのままでファイルサイズが小さくなります。
スライスからSVGの書き出しやRetinaディスプレイ対応はもちろん、SketchのようなレスポンシブWebデザインカンプ制作の機能もあります。
Photoshopのような［調整レイヤー］や［レイヤースタイル］、人物写真やペットなど複雑な形の写真を楽に切り抜くための［境界線の調整］機能もあります。
Affinityならではの機能としては、Windows版・Mac版・iPad版のファイル形式が共通なので、たとえば「自宅でMacを使ってデザイン制作をしたのちiCloud経由でiPadで続きの作業をして、また自宅のMacで仕上げ」といったことが可能です。
Affinityの日本語解説サイトを作りました
私はAffinity DesignerやAffinity Photoなどをの日本語解説サイトをつくりました。
Affinity Manual – Affinity Designer・Photo・Publisher日本語マニュアル
これは普段Adobe CCでデザインしている方が初めてAffinityを使う時に、「環境設定をどうすればIllustrator風にできるのか」とか、「どうすれば縦書きできるのか」などの日本人の方から良くある質問をまとめています。
日本語でAffinity DesignerやAffinity Photoなどの使い方を質問したり情報交換するための「Affinity User Group JAPAN」という Facebookグループ や Slack などへのリンクも掲載しています。
よろしければご覧ください。
