Fireworksというソフトウェアがすごく良かった話

2025年 7月 9日　Posted　野々瀨(フロントエンドエンジニア)

かつてWeb制作の現場で活躍していたFireworks。私も個人的に愛用していました。そんなFireworksはどんなソフトウェアだったのか、私なりにあらためて書き留めておこうと思います。

Fireworksとは

Fireworksは、Webページのデザインの作成を主なターゲットとした画像制作ソフトウェアです。かつてMacromediaによって開発され、2005年にAdobeが買収、2013年5月6日に開発が終了しました。

主に良いところ

挙げたらキリがないかもしれませんが、Fireworksの良いところを一部ご紹介します。

ソースはベクター、出力はラスター

ファイルの内部の扱いはベクターとして、画像で出力するとラスターとして扱うことになります。

書き出し用スライスがレイヤーの一つ

書き出し用のスライスがレイヤーの一つであるため、表示・非表示の切り替えや選択したスライスだけを書き出しといったことが簡単に行うことができます。

また、スライスは出力する形式を簡単に設定することができます。

共通化／辺と角の維持

「シンボル」という、ボタンなど共通して使用するパーツを保存しておくことができます。シンボルとして登録しておけば、色や形などを一括で変更することができます。

また、「9スライス」という9分割し大きさを中央のブロックだけが可変、辺と角の見た目を維持してくれる機能があります。

複数デザインを1ファイルで管理

「ページ」という1ファイルで複数のキャンバスを扱うことができる機能があります。例えば企業サイトで、トップページ、会社概要、お問い合わせといったようなページを一つのファイルでレイヤーを分けてデザインすることができます。

また、マスターページという機能を使うことで、ヘッダーやフッターといった部分だけのページを用意して、共通する部分を共有して表示させることができます。

アニメーションのフレームやアクションパターンの作成

「ステート」（CS4以前は「フレーム」）という、アニメーションのフレームやアクションパターンを扱うことができる機能があります。例えばGIFアニメーションのコマであったり、ボタンの通常時、ホバー時、押した時などの状態のデザインをページ機能と同様にレイヤーを分けて作成することができます。Photoshopでいうタイムラインや、Figmaでいうコンポーネントのバリアントと似たような機能です。

CSSの出力

「CSSプロパティ」パネルから選択したレイヤーのCSS情報を取得することができます。

写真補正

Photoshopにあるようなレベル補正など、写真の補正を行うことができます。

Dreamweaverとの連携

DreamweaverにFireworksのデータを組み込むことで、FireworksのスライスなどからDreamweaverでHTMLや画像、CSSを扱うことができます。なお、Creative Suite (CS)同士でしか対応しておらず、Creative Cloud (CC)は対応していないので注意が必要です。

拡張機能

制作に役立つ便利な機能を追加することができます。自身で開発することもできます。

良くなかったところ

Fireworksにも良くないと思う部分もありましたので、こちらもご紹介しておきます。

保存できなくなる

「内部エラーが発生しました」というエラーメッセージが表示され、保存できなくなってしまうことがあります。特にレイヤーが増えて重くなりますと、その可能性は上がってきます。Fireworksの環境設定の破損やフォントの使用数、パソコンのパフォーマンスなど、さまざまな問題で起こるようです。

グリッド沿っていても塗りの色がにじんではみ出る

パスがグリッドにピッタリ沿っていても、塗りなどの色がにじんではみ出て表現されてしまう場合があります。

パスをほんの少しだけ内側にすることでにじみを抑えることができます。

CS4以降のテキスト問題

CS4以降、テキストの表現が実際のブラウザー上との見た目ではなくなってしまいました。またテキストを編集する際など、選択範囲が不明になるなどの現象が起きます。

SVGに未対応

CS6になってもなお、SVGには対応しておらず開くことも書き出すこともできません。ただし方法はあり、書き出せる拡張機能があるのでそれを使用するか、Illustrator形式へ保存しIllustratorからSVGに書き出すという方法があります。

Illustratorの書き出しの際のバージョン

Illustratorの書き出しがバージョン8のファイルでしか書き出せませんでした。Creative Suiteの最終版Fireworks CS6でもなお、結局バージョン8のままとなっていました。ちなみにIllustratorの読み込みは、CCには対応していないものの、CS6まででしたら開くことができました。

パスで角丸調整ができない

Fireworksには角丸がついた長方形などをツールを使って作ることができます。

ただし通常この状態はシェイプですので、パスに置き換えてしまうと角丸の編集が行えなくなってしまいます。

一応「パス」パネルの「ポイントをシャープ処理」をし、さらに「ポイントのフィレット処理」をすることで角丸を調整することができます。

キャンバスの高さの上限

キャンバスの高さが最大で6.000pxまでですので、それを超える高さのページを作ることはできません。

代わりとなるソフトウェア

Fireworksの代わりとなるソフトウェアはだいたい次のソフトウェアでしょうか。

特にPhotoshopで写真や画像の加工・編集を行い、IllustratorやFigmaなどでデザインを行うという複数のソフトウェアを組み合わせて使う感じでしょうか。

なお、FigmaやXDはプロトタイプツールであり、デザインするためのツールではありませんが、昨今のトレンドとしてプロトタイプツールでも十分デザインできるものであるため、プロトタイプツールでデザインを行う場合があります。

最後に

今回ご紹介したFireworksの機能は一部で他にも便利な機能はたくさんあります。終了してしまったことは非常に残念ですが、プロトタイプツールではあるものの、FigmaなどがWeb制作のデザインツールとして代わりを果たしてくれている感じでしょうか。