Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

【Adobe MAX 2014】PhotoshopファイルからのHTMLコーディングワークフローを一新させる「Creative Cloud Extract」

Adobe MAX 2014セッションレポート

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/10/16 14:00

 アメリカ・ロサンゼルスで開催中のクリエイティビティ・カンファレンス「Adobe MAX 2014」のセッション「Screen Design: Comp to Code between Designers and Developers Made Easy」を参考に、Photoshopファイル(PSDファイル)を元にコーディングを行う際の、新しいワークフローを探ります。

目次

PSDファイルをデベロッパーに渡すときの苦労

 色々なWebデザインツールがありますが、一番使われているのはPhotoshopでしょう。しかし、それをもとにHTML/CSSを作るのは大変なことです。画像を切り出すことはもちろん、会社やプロジェクトによっては、スタイルガイドを作ったり、デザインに赤字で色やフォントサイズなどを書き込んで、デベロッパーに分かるような資料を作ることもあり、デザイン修正のたびに資料の内容を更新するのは大変です。

 そこで、今回アドビのクリエイティブ制作ツールおよびクラウドサービス群である「Creative Cloud」に登場したのが、「Creative Cloud Extract」(エクストラクト、日本語では「抽出」といった意味)です。PSDファイルのレイヤー、色、オブジェクト間の距離などを、Photoshopで開かなくても見られるようにする機能です。

 利用方法は簡単です。PSDファイルをCreative Cloudに保存するだけ。PSDファイルの中身をブラウザやDreamweaverから直接参照できるようになります。

PSDファイルを作る際の注意点

 どんなPSDファイルでもうまく利用できるわけではありません。PSDファイルから特定の情報を取り出しやすいように、次のような点に注意してデザインしましょう。

  • テキストは変形させない
  • フォントなどの指定には、できるだけ「文字スタイル」を使う
  • できるだけシェイプスタイルを使う
  • レイヤーは階層化し、ちゃんと「レイヤー1」以外の名前をつける
  • レイアウト違いの複数のデザインを作る際には、「レイヤーカンプ」機能を使う

 その他、Photoshopエチケットのサイトも参考にしてください。

生産性が増したPhotoshopからのアセット抽出

 デザインからコードへのワークフローを助ける機能は従来からあり、「Generator」などと呼ばれていました。ただ、これまではレイヤー名に拡張子や特殊なタグを書く必要があり、レイヤー名が呪文のようになる上に、作業に時間がかかって仕方がない感じでした。

 今回のPhotoshopでは「アセットを抽出」という機能が追加されて、パネル上のマウス操作で画像のフォーマット、サイズを選べるようになりました。凄い数のアセットも、PSDファイルを更新するたびに自動で簡単に書き出すことができます。

 アセットの解像度を設定した場合は、Photoshopが一番上のトップレベルのレイヤーに情報レイヤーを作るようです。これはレイアウトなどには影響しない情報だけが記録されたレイヤーなので、気にせずに残したまま作業を進めてください。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 石川 修一(イシカワ シュウイチ)

    株式会社ニューロマジック 執行役員 早稲田大学大学院 基幹理工学研究科 招聘研究員 慶應義塾大学大学院メディアデザイン研究科附属メディアデザイン研究所 リサーチャー デザイン、フロントエンドからクラウドまで、新しいことに興味がありすぎて時間が足りない、Web制作会社の制作部門統括。Adobeイ...

バックナンバー

連載:【Adobe MAX 2014】セッションレポート
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5