2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。無事にブラック案件を駆逐できるのか!?【今回の話】突然、ランディングページを作れという案件が降って湧いて来た。PhotoshopのカンプをParfaitとDreamweaverを使ってWebページに仕立てる流れを動画付きで解説する。制作業をしていると、いわゆる「ブラック案件」に遭遇することが結構ある。今回、筆者のチームはLP(ランディングページ)の制作を受注した。LP制作なら数日あれば何とかなるだろうと思っていたところ、クライアントからのメールの最後に、このような一文が書かれてあった。明日15時までにいただけますと幸いです。22時間で作ってお渡ししろというわけだ。これは、もう災いである。次回「それ、動かないの?」デザイナーが高速でデザインを終えてくれて、運良くクライアントの承認がすぐに降りた。後はコーディングをしていくだけだ。降って湧いたブラック案件とはいえ、きちんと仕事はこなしておきたい。できることならちゃんと寝たい。作業時間を短縮しつつ、きっちりクオリティは担保できる、そんな夢のようなツールがあればいいのに、残念ながらそう都合が良いものはこの世には存在しないだろう......。2014」(以下、CC)では、さまざまな機能強化が図られた制作ツール群と連携が強化されたクラウドサービスによって、これまで以上に効率的な作業が行えるようになっているという。2014の最新機能を活用し、Webサイト制作業務の効率化を追究してみることにした。PSDを解析できるWebサービス「Parfait」Photoshopで作られたPSDデータは、コーダーが再びPhotoshopで開いてスライスして画像を書き出す必要がある。CSSを書く際に必要なマージンなどの長さを計測する必要も出てくる。計画され設計されているWebサイトなら、仕様書にまとめてあることが多いが、このような案件の場合、仕様書は存在しないことがほとんどだ。よくてA4の紙1枚だ。運が良ければデザイナーが「ここは20pxです」と教えてくれることがあるが、それすらない場合はコーダーがPhotoshopの定規ツールなどで長さを計測するしかなかった。2014では、Photoshopの外部利用を拡大するリリースも行われた。これまでもPhotoshopをスクリプトで制御する機能は公開されていたが、それをさらに拡張して、Web上でPhotoshopの機能を利用したり、モバイルアプリに転用したりできるようにしたのだ。Parfait」(以下、Parfait)と呼ばれるWebサービスがリリースされた。これは、ブラウザー上でPSDファイルを解析できるツールだ。レイヤーや要素を画像やCSSに書き出す機能も提供している。筆者はPhotoshopの生成メニューにある「Generator」を常用しているのだが、これと同等の機能もParfaitで利用できる。今回はこのParfaitを活用してみることにした。Parfaitのページ。Files」を介するため、利用にはCCのアカウントが必要になる。ParfaitにPSDファイルをアップロードまず、Parfaitのページを開く。PSD]ボタンがあるので、それをクリックすると、PSDファイルをアップロードできる。ファイルのアップロードは、下図のようにPSDファイルのドラッグ&ドロップで完結するようになっている。アップロードすると、すぐさま解析が行われ、ブラウザー上でPSDファイルが展開される。完了すればクリックして開くことができるようになる。画面右側には[Layers]タブでレイヤー構造が表示されており、Photoshopを利用するようにレイヤーの切り替えが行えるようになっている。画面上の各要素はマウスオーバーで簡単なプロパティが表示される。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。