スライス不要!psdデザインカンプからBracketsでスピーディーにコーディングする方法

スライス不要!psdデザインカンプからBracketsでスピーディーにコーディングする方法

2015.12.4
BracketsJay
ノウハウ

ハロー、エブリデイハロー。
ドワンゴデザイナーのジェイだ。
今日もハイテンションなジェイタイムがやってきた。
寒くなってきたが、みんなは元気かい?

そうか。元気そうでよかったよ。

トゥデイは「Bracketsというコードエディタを使ったpsdファイルから効率よくコーディングする方法」をエブリワンに伝えたい。ちなみにBracketsは「ブラケッツ」と読むんだぜ。今日からブラケッツ・ジェイと呼んでくれ。

よく使っていたデザインツール

今回はpsdファイルを使って、Bracketsでコーディングするテクニックを伝えるわけだが、これまではSketchとSublime Textを使っていたんだ。そもそもなぜこれらのツールを利用していたのに、Bracketsを導入することになったのかをお話したい。

Sketchを利用しているわけ

  • 軽い、すごく軽い
  • UIが直感的でわかりやすい
  • Webでの画像表現が減ったため、Photoshopで一生懸命画像をつくる必要性がなくなった
  • 何より画像の書き出しが簡単

これらの理由でデザイン作業は主にSketchを使っている。もともとFireworksを愛用してたからな。感覚的にも使いやすいんだよ。

Sublime Textを使っていた理由

  • 周りが使っていて、ノウハウの共有をしてもらいやすかった
  • プラグインからのカスタマイズ性
  • こちらもかなり軽い
  • 「恋に落ちるエディタ」だと言われ、惰性で付き合っていた

「恋に落ちるエディタ」といわれたSublime Text。その使いやすさとカスタマイズさで、多くのデザイナーを虜にしてきた。俺もその流れの中で、彼女、いや、Sublimeに目を奪われてしまったんだ。そのままズルズルと惰性で付き合ってきたわけさ。ただ、本心では肌に合わなかったのは気づいていた。いるだろう、クラスの人気者を好きになれないやつって。そう、俺がそうさ。

それに、Sublimeは英語だしな。肝心な時に相手の意志が伝わってこないもどかしさに、切なさを覚えていたんだ。

そんなわけで、コードエディタにはなんとなく不満を感じていたわけだ。

コードエディタを再検討した理由

普段はディレクションをメインに担当しているが、デザイナーリソースが足らなくなると手を動かす時がある。そして、だいたいそんな時は短納期の特設ページが多い。また、他のデザイナーがつくったpsdを引き継いでコーディングをするということもあったりするんだが、正直Photoshopのスライス作業は好きになれない。玉ねぎのスライスの方が早いくらいだ。

そんな訳で以下の要件を満たしたコードエディタを再検討したんだよ。

  • psdファイルのスライス作業を効率化してくれるもの
  • プラグインなどでカスタマイズが可能なもの
  • 日本語でスウィートに対応してくれるもの
  • もちろん軽いもの
  • UIが肌に合うもの

この条件でコードエディタを色々と触った結果、これを満たしてくれたのがBracketsだったわけさ。ライブプレビュー機能や、CSSのクイック編集機能があり、いちいちChromeを開いて「要素の検証」をする必要がないところが肌に合った。まさに俺のパートナーにはぴったりだ。

Bracketsとは

about_brackets
周りがSublime Textばかりだったので、念のためBracketsを紹介させてもらうよ。BracketsはHTML、CSS、JavaScriptで開発されているオープンソースコードエディタだ。Adobeからだしているんだが、HTML、CSS、JavaScript用らしい。だが、様々なシンタックスハイライトが用意されてるから、メジャー言語なら利用できるだろう。見た目を好きにカスタマイズできるし、拡張機能でより効率的な作業を図れるのさ。

ダウンロードはこちらから

早速次からコーディングをスタートするから、ここからBracketsをダウンロードしてくれ。
http://brackets.io/

Bracketsでスライスせずにコーディング

準備はオーケーかい? それではレッツ・トライだ。

BracketsからExtract for Bracketsを起動

Getting_Started
まずはBracketsを起動させたら、右側にある矢印が上に向いているアイコンをクリックしよう。これがExtract for Bracketsだ。Adobe IDのサインインを求められるから、アカウント情報をいれてくれ。

Creative Cloud Files内にpsdをアップロード

psd_up
アカウント情報をいれたらCreative Cloud アセットが表示される。ここにコーディングしたいpsdのデザインカンプをアップロードするんだ。

画像の書き出し

images
psdがアップロードできたら、コーディングを開始しよう。

コーディングを進めつつ、画像を書き出したいところまで行ってくれ。ここからがBracketsの腕の見せどころだ。書き出したいレイヤーを選択して、エディタにimg要素やCSSのbackground-imageプロパティーを記述してみよう。すると、アセットを抽出という画面がでてくるんだ。「Enter」を押して、入力を完了させると・・・。

なんと、画像が書き出されるんだぜ! ファンタスティックだろう。
画像が書き出される際に、任意のパス、ファイル名、拡張子を指定すれば、自分の思い通りの設定を行うことができるぜ。

これで当分、Photoshopとのスライスとはおさらばだ。
空いた時間で最愛の人にリンゴでもむいてあげてくれ。

CSSの抽出もできる

css
またこれだけじゃない。BracketsはCSSの抽出も可能なんだ。
CSSファイルを開き、入力を開始すると一致するコードヒントが表示されるんだ。Cmd + スペースで使用可能な値をすべて閲覧することもできちゃうんだな。

CSSで戸惑うことも減りそうだろう。

レイヤー間の距離も図れる

location
そして最後に地味だが、かなり役立つ機能の紹介だ。
Bracketsはレイヤーを複数選択するとレイヤー間の距離を測定してくれるんだ。marginやpaddingの調整もPhotoshopを使っていちいち確認をする必要はほとんどなくなるな。

これらの機能を使ってコーディングするとあっという間に仕上がってしまう。実際に俺も普通にコーディングするより、圧倒的な速さでコーディングができた。まさにブラケッツ・ジェイだ。

まとめ

今回はBracketsを利用してpsdカンプをスピーディーにコーディングする方法を伝えさせてもらったよ。Photoshopを主なデザインツールとして利用していなくても、Bracketsならスムーズにコーディングができることがわかっただろう。極端に言ってしまえば、Photoshopを持っていなくてもpsdデータをコーディングできてしまうわけだ。本当に素晴らしいツールだ。

まだまだBracketsにはたくさんの魅力があるから、これからも伝えていければと思ってる。

それではまた、アディオス。

 

編集部オススメ

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

あわせて読みたい記事

この記事を書いたメンバー

ジェイ

ジェイ

General Manager

ドワンゴ デザインコミュニケーション室長, ドワンゴデザイナーの統括, 案件の受注フロー、並びに社内外スタッフへの発注フローの設計を担当。dwango creators blogの編集長も兼務している。

ドワンゴデザイナー メンバー募集 ! !