PhotoshopをWebオーサリングツールに変える「psd2css」

フォトショ画像が1クリックでCSS＋HTMLに！

2009年03月23日 08時00分更新

文● 小橋川誠己／企画報道編集部

　Web制作の画像素材作成にも活躍するPhotoshop。ロゴやアイコンといったパーツのデザインに限って使う人から、デザインカンプの制作～スライスまでこれ1本でこなす人まで……と、その活用法は人それぞれ。だが、Photoshopを簡易Webオーサリングツールとして使う方法があることをご存じだろうか？　それを実現するのが、「psd2css」というユニークなオンラインサービスだ。


psd2cssのトップページ。「Dynamic Web Pages from your Photoshop Designs in Seconds」と魅力的なキャッチコピーが記載されているが……

PSDファイルをCSSレイアウトのWebページに変換する

　psd2cssは、その名のとおり、PhotoshopのPSDファイルをブラウザーからアップするだけで、CSS／XHTMLファイルに自動変換してくれるサービスだ。……と、さらっと書いてはみたが、よく考えるとこれはスゴい。Photoshopにある「Web用に保存」機能を使えば、Web用に最適化されたJPEGやPNG画像と一緒にHTMLを書き出すことはできるものの、スライス作業は不可欠だし、作られたHTMLも複雑なテーブルレイアウトで構成されていたりして、残念ながら大幅に手を入れないと使えないことが多い。

　ところがこのpsd2cssなら、Photoshopで作ったWebページのデザインカンプを、わざわざスライスしなくても、フルCSSレイアウトのWebページにしてくれるという。しかも、変換後のXHTML（XHTML 1.0 Transitional）は、W3C（World Wide Web Consortium）のバリデーターをパスできる、とも説明されている。この説明どおりだとすると、これはかなり画期的なサービスのはず。というわけで、さっそく実際の使い勝手はどうか、試してみた。

まるで使えない？　PSDなら何でもいいわけではなかった！


トップページにある「Upload your PSD」からさっそく画像をアップしてみる

　psd2cssの基本機能は現在のところ、無料で利用できる（ユーザー登録も不要）。有料プランの「Unlimited」（月額19.95ドル＝約2000円）を契約すれば、「Drupal」や「Joomla」といった米国で人気のCMSのテーマファイル（テンプレート）へ変換したり、JavaScriptを使ったリッチな画像ギャラリーも作れるとのことだが、まずはシンプルな無料版を利用してみた。

　無料版は、psd2cssのトップページから、「参照」ボタンを押してPSDファイルをアップロードするだけで使える。ところが、手っ取り早く変換精度をチェックしようと、手元にあったPSD形式のデザインテンプレートをアップしてみたら、結果はボロボロ。レイアウトは崩れた状態で、画像の分割もまったくうまくいかなかった。


変換失敗例。左のPSDファイルを「psd2css」にアップして変換した結果が右の画面。かなりショックな変換結果だ

　それもそのはず、psd2cssが変換できるのはどんなPSDファイルでもいいわけではなく、ちゃんと条件があったのだ（まぁ当たり前なのだが）。気を取り直して、チュートリアルとドキュメントをちゃんと読んでみると、psd2cssの変換のカラクリにもつながっている、PSDファイル作成にあたっての“ルール”が分かった。

前へ 1 2 3 次へ

ツイートする