HTML5とCSS3をがっちりサポートするためのグラフィックソフトを考える

2010/04/19 15:27 - Risa Yuguchi

CSS Nite LP9のTLを見て思ったのですが、HTML5/CSS3な時代にこれだ!というウェブ向けのグラフィックソフトってないのでは?とふと気になったので、自分なりにどんな機能が必要かをまとめてみました。

なお、もともとFireworksがこうなったらいいなから書き始めたのを、いやイチから要望をまとめるとこうだよねという感じで書き直したのでとってもFireworksよりな文章になっています。一ユーザーの戯言なのでサラッと読んでいただけると。

CSS3の編集・生成を支援

支援というより、CSS3をレンダリングできるグラフィックソフトという形が理想に近いです。オブジェクト単位でCSS3のプロパティを簡単に設定ができて、ブラウザに任せない効果や編集はグラフィックソフトの方で切り分けて画像として書き出せるとかだと素晴らしい。

CSSのクラス・IDを想定したスタイルの設定

CSSではクラスやIDの組み合わせでレンダリングするスタイルを決めるので、クラスやIDの代わりになるスタイル設定方法が必要です。DTP系のレイアウトソフトには、テキストや段落のスタイルを登録しておける機能があるのでそれに似たもので設定内容がCSS3の範囲である必要があります。

好みが入ってしまうので難しいのは継承の扱い。きっちりHTMLのようにマークアップしてないと再現できないですし、下手にグラフィックソフトで縛ってしまうと自由度がなくなるので、こちらは使う側が考えて擬似的に表示できるほうが使い易いかもしれません。

CSS3でフォローできるフィルター・変形

CSS3のフィルターはそれなりに設定項目が多いのでそれこそ人間がやらなくて済むならやりたくない分野。これが書き出せることはかなり重要な機能です。

フィルターは現在のグラフィックソフトでも大抵の場合オブジェクト(Photoshopの場合レイヤー)単位でサポートしています。しかし、それはグラフィックソフトならではのもので、ウェブブラウザがレンダリングできるCSS3と合致するものではありません。

アニメーション対応

オブジェクトベースでアニメーションがつけられることが必要。CSS3でアニメーション効果をつけた場合、○○地点で~するというアクションが加えられないので、CSSとJavascript両方で書き出せるとより使いやすくなります。Javascriptは複数のフレームワーク対応してたら感激ですが、無茶を言い過ぎているとも思います。

現状のグラフィックソフトならもともとXML/ActionScriptでモーションが記述されるFlashやFlash CatalystにHTML5へ書き出す機能がつくというのがイメージしやすいです。オブジェクトベースのアニメーションになりますので、Fireworksが現在持っているような仕組みでも対応はできるかも。

HTMLを書き出す場合への配慮

HTML自動生成は賛否両論となる話です。HTMLやCSSはもちろんプロとして知っておくのが必須なものだと私自身は考えていますし、W3Cという標準があるならそれを満たしすのも「ユーザーが便利になる・アクセスしやすくなる」だろうから重要だと思います。

ただ、HTML/CSSが製作者にとって100点であることよりも、標準を最低限満たし内容・納期・コストがバランスよく合格点であることが重要なお仕事もありますので、グラフィックソフトから書き出せるのは良いことだと思います。CMSだと考えれば受け入れやすいかな。

ページ内で文章構造を設定できる

デザイナーにとっては、デザイン以外でグラフィックソフトの使い方に制約がつくので厄介な機能ですが、strictなHTMLを書き出すならばこの機能は必要です。使わないとデザインできない機能ではなく、HTMLで書き出す場合には使った方が良い機能として搭載されているのが理想的。

なお、重なり順を考慮するとレイヤーではHTML中での出現順が表現しきれないのでなにか他の機構が必要になります。また、それはレイヤーにidやクラスをつけることで連携していた方が使い勝手が良いです。レイヤーとの連携はGUIで設定できればさらによし。

拡張APIなどで書き出すHTMLのテンプレートが変えられるとより制限のあるお仕事で使いやすくなります。

書き出しの向上

オブジェクトベースで画像の最適化やビヘイビアの設定を

HTML構造の影響を受ける、CSS・Javascriptの双方がオブジェクトベースで機能しますので、各種設定はオブジェクトベースで行いたいところ。

もっとも、スライス自体がオブジェクトとリンクできたり、重ねに配慮されればそちらでもいいかもしれません。

レイヤーを隠したり別のファイルを作らなくても背景画像などがつくれるような考慮を

一つ前の、オブジェクトベースで設定したい一番の理由は、スライスを極力設定したくないという一言につきます。今のウェブデザインのグラフィックソフトにおいてスライスはとっても重要な機能ですが、これをうまく作るにはある程度経験が必要で、意外と時間がかかるポイントです。

また、伸縮できるブロックの背景画像などでは分割上必要な数だけスライスを設定しなければいけませんし、背景画像の場合は画像に入り込んではいけないレイヤーをいちいち隠して書き出しています。(HTML5陣営から意識されているFlashはどうかというと、オブジェクトの9スライスを設定しておけば伸縮自体は自在にできます。Fireworksも編集中にこの9スライスを使って変形できるのですが、これをうまく使って自動で書き出してくれないでしょうか。)

生産効率の向上

繰返し表示が表現/書き出しができる

リストや、複数の人物紹介などの繰り返し表示は、個人・企業・エンターテイメントとどのウェブサイトでも使われています。これをボタン一つで複製ができるとかなり使い勝手がよいです。HTMLの書き出しもして欲しいですね。

共通で使えるパーツが管理できる

シンボルがあるといえばあるのですが、グラフィックソフトのシンボルは、他のファイルからのリンクを出力時に最新チェックしてくれないのでファイルが複数に及んでいると管理が大変です。書き出しの時に最新チェックがあるととても使いやすくなります。

メニューを自動生成できる

構造が変化したときに即座にデザインに反映できたら素敵なので。あればうれしい機能。ただ、これをやるためには、サイト構造を読み込めたり編集できないと実現しづらそうです。

サイト構造を編集できて企画書などドキュメント用に書き出せる

メニューを生成するためにサイト構造を使うならこれも欲しいという程度ですが。

グラフィック関連

現状から差があるとやはりそのソフトウェアを手放せないので、贅沢を言うなら、Illustratorレベルのベクトル画像編集機能、Photoshopレベルのベクトル画像編集機能、Fireworksレベルの手軽さが欲しいところ。

しかし、Illustratorレベルとはいえウェブ向けグラフィックソフトで写真のようなベクトルグラフィックが描ける必要もなければ、Photoshopのマジック!といわれるレベルの写真合成能力が必要かというと疑問です。そうなると、Photoshopレベルの描画能力(サブピクセルのレンダリングなど)と基本はピクセルベース(小数点の位置にオブジェクトがおけない)のレイアウトができるくらいあれば十分です。

もう一つ、ウェブ用で求められるのが、マルチプラットフォーム。携帯電話やスマートフォンからPCまで様々な解像度にあわせて変化したときに画質が劣化してしまっては困るので劣化せずに使いまわせる機能も必要になります。

これで各種デバイスに特化した減色機能がついていれば最高です。

最後に

求める機能は、一歩間違うとグラフィックソフト派生のCMSっぽいですが、サイト全体の「コンテンツ」を管理するのではなく、デザインテンプレートを管理するのが目的になるのです。CMSにも使えるけれど、名前をつけるならそのままの言葉通り、Website Design Management Systemでしょうか。

こんなソフトが出たら欲しいけれど、実際は使うのも難しそうですね。

余談

私自身はHTMLをバリバリ書いている人ではなく、Flashの仕事もしているので、もちろんFlashへシンボルがきっちり書きだせてレイアウトをそのまま持ち込めることも望みます。

また、アニメーションはFlashからHTML5+CSS3+Javascriptで書き出すほうが高機能かつクロスプラットフォームを実現しやすいと思うわけです。

戻る

コメントを追加