このページの本文へ

前へ 1 2 3 次へ

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

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

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

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

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

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なら何でもいいわけではなかった!

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

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

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

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

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

前へ 1 2 3 次へ

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング