お問い合わせ

デザイン・開発間での作業効率を高める幾つかの方法

UI開発者 泉口

「デザイナーがデザインしたものを開発者がコードを書いて実装する」、一言で表すと簡単そうなフローですが、デザインと開発の分業による従来のWeb制作フローではお互いが相手の作業を理解する機会が生まれない限り、Webにおいて再現不可能なデザインが入稿されてしまったり、開発者へデザイン趣意が伝わらず、意図したデザインに仕上がらないなどの問題が発生し、制作フロー上のボトルネックになる可能性が多くありました。

しかし、昨今ではデザインを行う制作環境の幅は広がっており、Sketchを用いたデザインからCSSを書き出したり、インタラクティブ表現ができるプロトタイプツールから基盤となるデザインを決めることができるようになるなど、開発者にも関連のある環境になってきています。

また、各種ベンダーブラウザにおけるデベロッパーツールの進化によりインブラウザデザインが発達し、デザイン・開発者両者にとっての垣根は徐々に薄くなりつつあります。

今回はその中でも、デザイン・開発者間にとって作業効率化を望めるツールを抜粋し、実用例を想定してみたいと思います。

Sketch APIと、ExtendScript

Sketch APIとは、Sketchに標準バンドルされているJavascript APIで、Sketchを操作したり、機能拡張ができるようになります。Sketch APIでの成果物はプラグインとして提供することができるため、サードパーティ製のプラグインも多分に存在しています。ExtendScriptについては昨年度のブログにも記載している通り、ECMAScriptに準拠した、Adobe製品を操作することができるようになるスクリプト言語です。

アプリケーション実行に関わる機能や、デザインに必要なアプリケーションの機能拡張、繰り返し工程の自動化など、自由度が高い反面、JavaScriptの技術が求められますが、デザイナーでもJavaScriptを扱える方も多くなっているのも事実です。

また、これらのスクリプト言語による拡張は開発者でも容易に行うことができるため、デザインに関連しなかった開発者がレイヤー構造や配色・サイズ・配置、作業工程を把握することでデザインに対する知識を学び、その副産物としてデザイナーの作業時間を削減するツールを提供するなど、両者間にメリットのある状況を作り出すことも可能になるかもしれません。

Craft

Craftとは、プロトタイプ作成からデザインレビューまで行うことができるサービス「InVision」から提供されているSketch、Photoshopのプラグインです。インストールのみでCraftの機能が使えるため、標準機能の使用が目的であれば、コードを書くなど特別何かの設定を行う必要はありません。

Craftでは主に同期、プロトタイプ、データ、ライブラリ、複製の5つの機能が扱えるようになりますが、特に「データ」に関しては、次の項目の通り、開発者との連携が図りやすく、とても強力な機能になっています。

  • ローカル上のデータを登録し、1クリックで配置できる
  • 外部APIとの連携が可能になり、APIからデータを取得することができる
  • Webとの連携が可能になり、Google Docsなどのデータをアプリ上から参照することができる
  • JSONファイルを投入することでデータ構造を展開し、正確なデータをそのまま使用することができる

データの連携についてはワイヤーフレーム上、デザイン上に加え、成果物としてのHTML、どれか一つでも更新が入った際は全てを並行して更新していく必要がありましたが、Craftのデータ機能を用いることで、データを一カ所に統合し、効率化を図ることができるようになります。

また、Craftのライブラリ機能においては、UIパーツを登録した上で共有することができるので、ファイルの受け渡し工程が無くなり、デザイナー間でのルールの統一などもスムーズに行えるようになります。

※2016年12月現在ではダウンロードにInbox by Googleが必要です。
※Photoshopの対応バージョンは、CCのみとなります。

npm

Node.jsのパッケージ管理、npm（Node Packaged Modules）において、「psd」と言う、Photoshopの拡張子名そのままのパッケージがあります。このnpm psdを用いることで、わずか数行のJavaScriptとNode.jsを用いてPSDファイルからJavaScriptのObject形式に出力するなど、PSDファイルの解析を行うことが可能になります。

テキストデータを出力したり、Photoshop内のレイヤーを繰り返し処理によって構造化するJSX（ExtendScript）は過去にも存在していましたが、都度Photoshopを起動する必要があり、ラップトップなどのメモリが少ない環境や、他のAdobe製品を同時起動している環境では、ちょっとした作業のためにPhotoshopを起動することに懸念のある方も多いのではないでしょうか。

次のJavaScriptコードででは、幾つかの例を元にnpm psdを活用する方法をご紹介します。

※npm psdの実行にはNode.jsのインストールが必要です。

npm psdのインストール

任意のディレクトリ（以下、作業ディレクトリ）からコマンドプロンプトを起動し、次の内容を実行します。

npm install psd

index.jsの作成

エディタから次の内容を記述し、作業ディレクトリへindex.jsとしてファイルを保存します。この時、fromFileの引数にPSDファイル名を指定しますが、こちらは任意のPSDファイルに書き換えてください。

var psd = require('psd').fromFile('PSDファイル.psd');
var data;

// 該当PSDファイルの解析を実行する
psd.parse();
data = psd.tree().export();

例1. PSDを解析したデータをJSONに書き出す

index.jsへ次の内容を追記し、コマンドラインからindex.jsを実行してください。実行完了後、作業ディレクトリへPSDの情報が記載されたJSONデータが出力されます。

require('fs').writeFile(`psd.json`, JSON.stringify(data, false, '  '), 'utf-8');

出力される内容に関しては、npm psdのExporting Dataに記載されている通り、PSDのドキュメントの縦・横幅、グループ・レイヤーごとの座標、縦・横幅から透過度、テキストデータ、フォント、フォントサイズ・カラーなどの情報を取得することができます。

例2. テキストデータのみを抽出し、txtファイルに書き出す

JSONでは扱いが難しい、または単純にテキスト情報が必要なだけであれば、index.jsへ次の内容を追記し、コマンドラインからindex.jsを実行してください。実行完了後、作業ディレクトリへPSDレイヤー上のテキスト情報だけが記載されたtxtファイルを出力されます。

var txt = '';
var recursive = (target = data.children, param = 'text') => {
    for (let val of target) {
        txt += (!!val[param] ? val[param].value : '') + '\n\r';

        if (!!val.children) {
            recursive(val.children);
        }
    }
};
recursive();
require('fs').writeFile('psd.txt', txt, 'utf-8');

例3. PSDの全景を1枚のPNGに書き出す

上記例の他にも、npm psdにはPSDからPNGファイルを書き出す機能も備えています。index.jsへ次の内容を追記し、コマンドラインからindex.jsを実行してください。実行完了後、作業ディレクトリへPSDの全景PNGが出力されます。

psd.image.saveAsPng('psd.png');

npm psdの使い道

例から想定できる使い道は次のような項目になります。

  • PSD上のテキストデータに誤記が無いか、文字列比較で確認する
  • フロントエンド開発者へUIパーツの幅や高さなど正確な数値を伝達する
  • 出力されたデータを元に、簡易的なHTML/CSSを出力し、レイアウトの概要にする

また、npm psd単体ではファイルのメタデータや容量などを取得することはできませんが、ある程度npmを使いこなしている方であれば、本npmを組み合わせることでAdobe BridgeのようにPSDのサムネイル化を行ったビューワー的なアプリケーションを作成することも可能です。

このように、デザイン・開発間で共通認識を持たせるためのツールや技術は日々発達しています。より良い成果物を制作するためには、デザイン・開発どちらかの片方だけに偏らず、幅広い視野でのアプローチができれば、効率化への第一歩に繋がるかもしれません。

2016年の記事一覧に戻る