SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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が一番上のトップレベルのレイヤーに情報レイヤーを作るようです。これはレイアウトなどには影響しない情報だけが記録されたレイヤーなので、気にせずに残したまま作業を進めてください。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Creative Cloud FilesでのPSDファイルの閲覧

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
【Adobe MAX 2014】セッションレポート連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8194 2014/10/16 15:50

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング