スパイスラボ神部です。

もしこのブログを長く読んでくださっている方が５人でもいるとしたならお気づきかと思いますが、本当に毎回いろんなことをやる場面に遭遇します。これなんて器用貧乏？今回は楽しい Fireworks の使い方を調べますよ－。ちなみに Fireworks は「花火」の意味。DreamWeaver、Flash と、Macromedia 製品群にはあんまり統一感がありませんね。あ、今は Adobe か。

-Fireworksが好きだ！ - Favorites!

たまには道具（ツール）に使われてみる

テキストエディタなんかですと、無数にある分いくらでも自分にあったものをこだわり抜いて探し求めることが出来ますが「Ｗｅｂで使う画像に特化した画像オーサリング環境」なんてそうそうありません。Photoshop みたいな万能包丁もありますが、やっぱり基本は紙ですし、そういう意味では Fireworks は隠れたニッチを獲得した未来に化けるクラレなツールな気がします。

そんな Fireworks が備えているのが「納品 png を HTML にスライスする機能」。バリバリのテーブルレイアウトで Web 標準化なんてくそくらえ的な進化のないツールなのですが、時間のないときには助かるツールです。ここは道具に使われてやる的な気分で使い方をがんばってしらべてみましょー。

まずは画像をスライス

まずは画像になりそうなところをスライスしましょう。画像の枠に当たる部分をチョキチョキ。これは簡単です。せっかくなので、スライスの概念について次の記事でおさらいしておきましょう。

-Design Dock -デザインドック- » Blog Archive » Fireworksのスライスあれこれ

次にテキスト部分をスライス

テキストを画像のままにしておくのは、ＳＥＯ的にもよくありません。まずはスライス領域を設定したあと、プルダウンでそのスライスの属性を「イメージ」から「ＨＴＭＬ」にかえておきましょう。これでその部分の画像は背景画像になってくれますので、テキストを記入することが出来ます。

Adobe Fireworks CS4 * HTML テキストスライスの作成

によればダイレクトにテキストを入力したりコピペしたりもできるようですが、あんまり綺麗なＨＴＭＬをはかないので、DreamWeaverがあればそちらで入力するのをおすすめします。

手動で最適化！

これで

Fireworksのスライスツールでファイルの書き出し - ProjectDD Blog

みたいな手順を踏めば書き出しは出来ます。しかし、それでは必ずしもすべてのブラウザで同じように見えず、結構ズレて空白が生まれたりしてかっこわるくなったりします。そこで、スライスの形が複雑なところは出来るだけ境界線をドラッグしてなくし、四角の数が出来るだけすくなるようにしてみましょう。

せっかくスライスという機能があるのに、と思うかもしれませんが、手抜きモードでちゃんとした効果を得るためには、この方法が一番のコツだと思っています。

これで HTML 形式で書き出されたものは完全にテーブルレイアウトです。あとはフォントサイズをスタイルシートで調整するなどすれば、一応イメージ通りのアウトプットで、そこそこ複数ブラウザで見ても崩れない物は出来るかと思います。

ホントはスライスってどう使うべき？

しかし、いつまでもこんな前時代的な使い方をしていたら道具が泣きます。できれば、スタイスツールは素材の書き出しくらいに使ってあげて、テキストエディタや DreamWeaver できっちりスタイルを組んであげましょう。そのあたりの心得は、こちらの質問を読まれるといいかもしれません。

-Fireworksなどのスライスで、CSSレイアウトで書き出せるの？ -OKWave

もっともっと進化してほしい、HTMLオーサリングツール

しかし久しぶりに Fireworks を使ってみると、いまだったらこんな風なオーサリングツールの制作にチャレンジしてほしいな、という物が色々出てきました。

三次元的に視覚化して二次元ボックスの配置を手助けするもの

昔 div 厨なんて言葉がありましたが、結局はCSSで組んでも２次元的なボックスの組み合わせになります。そこで、そのブロックをZ軸方向に可視化してまさしく「ブロック」として三次元テトリスみたいに表示することで、ボックス同士の相関関係が可視化されることで調整がしやすくなるものがあったら、楽しいかも。

弾力のあるボックスで、伸び縮みさせると全体のレイアウトに対する影響がわかる

これはすでにあった気もしますが、オーサリングツール上で「ドラッグ」ではなく「ゴムの伸び縮み」のような感じでちょっと属性の幅を変えた場合、他のパーツが同レンダリングしなおされるか、そんなゴムゴムなクイックプレビューが備わってたりするとこれまた楽しいかもしれません。

テーブルをCSSに変換

これもさすがにそろそろいいものが出てきそうな気がしますが、なんとかならないでしょうか？テーブルレイアウトは碁盤の目だからある意味機械的に出来るけど、CSSって１度頭の中で抽象化作業が必要だから、ちょっと難しいのかもなぁ…

しかしそこは２１世紀のテクノロジーの進歩に期待したいと思います。そのうち、Web ブラウザ上に画像をインプットするとそれを（自動的に・または人力で）、CSS化してくれるサービスがあってもいいかも。まさに Web 上で供給と需要が完結する「サービス」ですね。

こういうのは、ここのサービスを使うといいかもしれません。

-CSS Factory -あなたをお助けする、XHTML+CSSコーディングの工場-

いつか紹介仕様と思いましたが、この記事にたどり着く人からなら、コンバージョン高いのではないかと思います。かんたんに言えば、CSS化支援をめちゃ早で完了してくれるビジネスです。ああ、ちょっと脳みそ貸してほしいです。

最後に

ってことでたまにはスライスをチョキチョキスパスパやってみよう！楽しいよ！（結論）