このページの本文へ

前へ 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 次へ

ソーシャルランキング
  1. フロントエンド開発の現場で役立つJavaScriptの知恵10選 76
  2. Amazon、Googleだって間違える? よいUX/悪いUXを学ぶ記事13選 10
  3. Google、モバイルフレンドリーテストAPIを提供開始 2
  4. グーグル、日本語検索のアルゴリズム変更を発表、品質低いサイトの順位低下 2
  5. グーグル、翻訳アプリのリアルタイム翻訳が日本語対応 1
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2080
  8. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  9. Sketch 3を使う3つの理由と10の魅力 631
  10. いまさら聞けないSVG——Web制作に便利な3つの理由 591
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング