WEB制作に特化したデザインツールであるAdobeのFireworksですが、最終バージョンであるCS6での開発終了が発表されてからかなりの時間がたちました。すでに大多数の方が他のデザインツールに移行されているかと思いますが、まだ現場ではFireworksを使用されているところもあるようです。長い目で見ると今後はOSなどの環境が変わることによりFireworksが全く使えなくなる恐れがあります。たとえばMacのOS最新バージョンであるSierraではCS6がサポート対象外になっています。   今回はFireworksから他のデザインツールに移行する際に、Fireworksでよく使う便利機能を他アプリケーションでの代替機能と合わせてまとめていきたいと思います。  

Fireworksの便利機能と他アプリケーションでの代替機能

Fireworksの便利なところはWEB制作におけるデザイン周りの作業に便利な機能が揃っている点だと思います。例えばベクターデータとビットマップデータを並行して扱えたり、スライスの書き出しに特化していたり、オブジェクトからCSSが抽出できたりなどです。   また「Extension Manager」というアプリでプラグインのような拡張機能を追加することができます。これらを使うことでFireworksをカスタマイズすることも可能です。     Fireworksユーザーにとってはこれらの機能は最低限ほしいところですよね。できるだけワークフローを変えずに制作で切るのがベターです。もちろん他のデザインツールであるアプリケーションにも代替機能は搭載されています。今回は「Photoshop」「Sketch」「affinity designer」のアプリケーションで見ていきたいと思います。   1. パスから選択範囲を作成しビットマップ画像を切り抜く ペンツールでパスを描き、そのパスから選択範囲を作成してビットマップを切り抜きます。写真からオブジェクトをサクッと切り抜く時には特によく使う機能です。 【Photoshop】では ・「ペンツール」で（作業用）パスを描画後、パスウィンドウよりパスから選択範囲を作成し切り抜きを行う →ほとんどFireworksと変わらない操作、選択範囲の微調整ができ細かい作業に適している 【Sketch】では ・「Vector」でパスオブジェクトを描画、マスクをかける →Sketchではパスから選択範囲を切り取ることはできないので、マスクで対応することになります 【Affinity Designer】では ・「ペンツール」でパスを描画後、パスオブジェクトを選択し右クリックのメニューから下のレイヤーにマスクをかける →Affinity Designerではパスから選択範囲を切り取ることはできないので、マスクで対応することになります   2. 選択ツールから選択範囲を作成しビットマップ画像を切り抜く 自動選択ツールで選択範囲を作成しビットマップを切り抜きます。写真内で広範囲を一気に切り抜きたい時も簡単に切り抜くことができます。 【Photoshop】では ・「自動選択ツール」で選択範囲を作成し切り抜きを行う →ほとんどFireworksと変わらない操作感、選択範囲の微調整ができ細かい作業に適してい 【Sketch】では ・ビットマップの編集モードより、「Magic Wand」で選択範囲を作成し切り抜きを行う →Fireworksと比較すると簡単に素早くできるが選択範囲の精度はそこまで高くないかも 【Affinity Designer】では ・「ピクセルペルソナ」モードに切り替え、「選択ブラシツール」で選択範囲を作成。切り抜きを行う →Fireworksと同じ感覚で作業が可能   3. ビットマップ画像の色調補正 プロパティパネルのフィルターギャラリーから色調補正のフィルターを追加します。そこまでリッチな画像加工が必要でないが、少しだけ調整したい、というような時もすぐに対応できるのがありがたいですね。 【Photoshop】では ・「調整レイヤー」を新規作成し色調補正を加えていく、もしくは「レイヤー効果」を加えていく →ほとんどFireworksと変わらない操作感、明度と彩度やトーンに加えて階調やグラデーションマップなどより豊かな表現が可能 【Sketch】では ・「Color Adjust」から色相、彩度、明度、コントラストの調整を行う →簡易的な編集になるので、細かな表現は難しい 【Affinity Designer】では ・「調整」メニューから調整レイヤーとなる各種色調補正が可能。全て調整レイヤーとして色調補正を行う形になります。 →Photoshopと同じく、Fireworksより色調補正のバリエーションが揃っています。   4. オブジェクトからCSSを抽出する ウィンドウ → CSSプロパティ でCSSプロパティパネルが表示され、オブジェクトを選択するとCSSが表示されます。デザイン作業とコーディングをスムーズに連携することが制作の効率化で非常に重要です。 【Photoshop】では ・該当するオブジェクトを選択し「CSSをコピー」でクリップボードにコピーされる →ほとんどFireworksと変わらない操作感、古いバージョンには搭載されていない機能になる 【Sketch】では ・該当するオブジェクトを選択し、Edit ＞ 「Copy CSS Attributes」でクリップボードにコピーされる →ほとんどFireworksと変わらない操作感、Fireworksよりも精度が高く癖がない印象 【Affinity Designer】では ・各オブジェクトからCSSを抽出する機能はありません。 →Illustratorのような立ち位置のアプリだからでしょうか。   5. スライス書き出し効率化 拡張プラグイン「SequenceNumSlice」で自動連番でスライス名を設定し、最適化パネルで画像書き出し方法を一括指定ができます。こちらのプラグインは先述の「Extension Manager」を使って導入します。スライス画像が多い場合やスライス画像のネーミングルールの統一化に効果的です。 【Photoshop】では ・該当するオブジェクト（レイヤー）を選択し「アセットを抽出」ウィンドウで書き出しサイズの指定や拡張子を設定 →一括でそれぞれの書き出し設定ができる上に、アセットで書き出したものをファイル保存時に自動更新することも可能 【Sketch】では ・該当するオブジェクトを選択し、「Make Export」からサイズや拡張子を設定 →Fireworksと比較すると簡単に素早くできてスライスごとの微調整も楽にできる 【Affinity Designer】では ・「ペルソナ書き出し」モードに切り替え、オブジェクトを選択ひスライスを作成します。書き出し効率化の機能は特にありませんが、書き出す際のファイルフォーマットは豊富に揃っています。 →デザイン作成とスライス書き出しをモードで切り分けているので、スライスとデザイン要素が混ざらないのはいいですね。   6. テクスチャの適用 プロパティパネル内でテクスチャの選択肢から登録されているテクスチャを選択して適用することができます。フラットデザイン全盛の近年では使用頻度が少なくなりましたが、リアルな質感を表現するデザインや高級感などを演出したい時、また背景にパターンを使ったデザインを作成する場合にはまだまだ便利な機能です。 【Photoshop】では ・「レイヤー効果」のパターンオーバーレイから設定する →Fireworksより若干手間がかかる印象だが、細かな調整が可能で仕上がりも綺麗になる 【Sketch】では ・該当するオブジェクトを選択し、Fill ＞ 「Pattern Fill」からパターンを選択して設定する →Fireworksと比較すると簡単に素早くできてパターンをその場で登録することも可能 【Affinity Designer】では ・「塗りつぶしツール」でタイプを「ビットマップ」に設定し、テクスチャ用の画像をファイル選択します。拡張を「回り込み」もしくは「ミラー」に設定することでテクスチャとして適用します。 →ハンドルが表示され、操作することでテクスチャの表示方向やサイズを自由に調整できるのは面白いですね。このテクスチャ自体の描画モードは設定できないので、基本的にこのオブジェクト自体を他のレイヤーなどに重ねる形で使うのでしょうか。   7. オブジェクトの属性をコピー＆ペースト 色、ドロップシャドウ、フォント（サイズ、書体、スタイル）、ボーダーなどの適用されているスタイルを一括してコピー＆ペーストできます。メニューの 編集 → 属性をコピー（ペースト）もしくは、shift + cmd + alt + C（V）でできます。デザインのスタイルを毎回設定する手間が省けますので制作スピードがかなりアップします。 【Photoshop】では ・「レイヤースタイルをコピー」して「レイヤースタイルをペースト」する →あくまでレイヤーに対して加えられたスタイル属性のみコピー＆ペーストすることができる 【Sketch】では ・オブジェクトを選択している状態でコピーし、属性をコピーしたいオブジェクトを選択して、「alt ＋ cmd ＋ V」もしくは「Paste Over Selection」 →ほとんどFireworksと変わらない操作感で行うことができる 【Affinity Designer】では ・オブジェクトをコピーし「スタイルをペースト」もしくは、shift + cmd + V で適用させることができます。 →レイヤーに対して適用させたエフェクトもコピペできるようです。  

---

  Fireworksからの乗り換えデザインツールとして、今回はFireworksに近い代替ソフト3つをあげていますが、それぞれ特徴がありますので作業効率や必要な機能に応じて選択することが重要です。主観になりますがおおよそ次のような印象があります。   【Photoshop】 Fireworksの上位互換、機能的にはほぼ全てカバーされており、使う上での違和感もあまり無い。より機能が充実しているので細かいところまで作り込めるが、スピーディーな作業は難しく、データも重くなりがち。 【Sketch】 WEBデザインに特化しており、クオリティの高いデザインをスピーディーに作成することができるよう洗練されている。プラグインも豊富で拡張性がある一方、日本語の文字組みやビットマップデータの編集に弱い。 【Affinity Designer】 ビットマップデータとベクターデータをバランスよく扱えて、動作もスムーズでファイルサイズも軽い。基本的な機能も充実しているのでFireworksでやっていたことはカバーできるものの、スピーディーな作業をするのが慣れるまで難しい。   またSketchやAffinityDesignerは月額制ではなく、買取になるのでコスト面も検討材料に加えるのもいいのではないでしょうか。Fireworksは今後使えなくなっていきますが、優秀な代替ソフトがどんどん登場するのは助かりますね。