Skip to main content

作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。


ややうさんくさい感じのするタイトルですが、ホントの話なんです。

海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。

SPECCTRについてごく簡単に説明すると…

フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる

というものです。

これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。
また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄なやりとりが発生してしまっていたことも少なくないと思います。

しかし!

このFireworksプラグイン「SPECCTR」さえあれば、そんな面倒臭さや心配ごとのすべてから解放されます。

前置きはこのぐらいにして、実際の使い方をみながらその便利さをご紹介したいと思います。

1.はじめの準備
インストールはかんたん。SPECCTRのサイトからプラグインをダウンロードしてダブルクリックすると、Adobe Extention Managerが立ち上がって自動的にインストールされます。


2.いざ実践! オブジェクトのプロパティを書き出す


プロパティを調べたいオブジェクトを選択してボタンをクリックすると…


あら不思議! 自動的にプロパティを調べて自動シェイプとして書き出してくれているではありませんか!


3.サイズを書き出す
これもかんたん。調べたいオブジェクトを選択してボタンを押すだけ。


4.スペースの書き出し
これまたかんたん。表示したいオブジェクト2つを同時選択してボタンを押すだけ。
正直なところ、これまで紹介した機能はSPECCTRが無くても大きな差は出ないかもしれませんが、ボタンをポチッと押すだけでレイアウトの間隔を一覧にできようになる、これこそがSPECCTRを使うべき大きな理由ではないでしょうか。

ちょっとそこのあなた!

「たくさん仕様を書き出せても、それでご赤字だらけの原稿みたいに意味不明になったら本末転倒だよね」と思っていませんか!?

大丈夫です、下記の画像をご覧あれ。

そう、マーキングした要素が自動的にレイヤー別になっているのでごちゃごちゃすることが無いので安心!!

嗚呼、あまりに簡単すぎる…。
こんなに簡単にできることのために、どれだけのデザイナーとコーダーが時間を奪われ、終電を逃したでしょうか…。

実際にSPECCTRをデザイナー20人がSPECCTRをテストでつかって作業をしたところ、これまで平均20分かかっていた作業が、たった2分ですむようになり、約80%も時間を節約できたそうです!


僕自身はメインでIllustratorを使っているのですが、FireworksはCS6で高速化してより機能が洗練されてきた上にSpecctrの登場で、いよいよFireworksの時代がくるか!という予感がしています。

SPECCTR自体は、機能制限のあるLite版が無料で、Pro版は49ドルになっています。

え、有料版お高いですって!?

大丈夫、14日間の体験版も用意されているのでじっくりと試せます。しかも、コーディングのたびに節約できる時間×労働日数を考えたら、決して高いものでは無いと思います。むしろ安い買い物です。

ささ、デザイナー、コーダーのみなさん。
SPECCTRを一日でも早く導入して、不毛な作業とやりとりから解放されて一分一秒でも早く帰って有意義なことに時間を使いましょうw

久しぶりのエントリー&深夜に書いたということも相まって妙なテンションになってしまっていますが、このSPECCTR、ホントにオススメです。
悩めるデザイナーとコーダーのみんなにぜひ共有を!

Popular posts from this blog

午前9時41分、Appleが止めた時間の謎。

ついにiPhone 4Sが発表されました。
日本からは2キャリアから出ることになり、乗り換えるのか、そのままなのか、これまで電波の弱さに悩まされてきたユーザーにとっては悩みどころですね。 

さて、あまり変わり映えのしないiPhone 4Sですが、よくよく見てみると、ひとつ気になることが…。
スクリーンショットの時間が、なんとも中途半端な9時41分になっています。

キリの良い9:40でもなく、イベントの開始時間である10:00でもなく、なぜこんな中途半端な時間なのでしょうか。

気になったので過去の製品画像をみてみると…。 なんと全てが「9:41 AM」で統一されています。
ここまで中途半端な時間で一貫しているということは何か意味があるのかもしれないですね。 ジョブズもしくはMac誕生の時間なのか、Appleにとって何かしらのメモリアルな時間なのでしょうか?
気になって海外のApple系ブログを色々と探索していたら、TUAWの記事に、Secret Labsの開発者ジョン マニングが、アップルストアにいたスコット・フォーストール(Apple上級副社長)に時間の意味を質問したという内容の記事がありました。

それによると、プレゼンテーションでプロダクトを大きくお披露目する時間を、約40分で発生するようにkeynoteをデザインし、スクリーンに映し出されたときに観客の時計とズレがないようにしていたらしいのですが、ピッタリ予定通りに行かない事を見越して数分追加した時間なのだそうです。
この40分に対し、スコットは「secret magic time」と名付けていたそうです。
実際にiPhoneが初めて発表された2007年のMacWorldをみてみたところ、プレゼンが開始されてちょうど40分頃にiPhoneのスクリーンが初めて公開されています。
つまり、時間が統一されている理由は、iPhoneのスクリーンが世界に向けて初めて公開されると予測した時間で、合理的な理由がありつつも、Appleにとって記念すべき時間でもあるからということですね。

さて、無事解決したかと思われますが、ここで新たな疑問がでてきます。
その「secret magic time」はなぜ40分なのかということ。
分刻みのプレゼンテーションを組み立てるぐらいですから、そのタイミングにも意味があると思います。 それ…

やはり、紙と鉛筆は良い。

新iPadが登場して思ったこと。

Retinaディスプレイによって、タブレットでも解像度や色の表現力が印刷よりも高くなり、いよいよ紙媒体が置き換えられてしまうのか、存在意義が問われつつある感じですね。
これまで、ものを考えたり記録したりするツールは、紙と鉛筆のようなアナログツールが一般的でしたが、ここ数年でiPadやiPhoneを代表としたモバイルデバイスや、Evernoteのようなクラウドなどの様々なデジタルツールにどんどん置き換わってきているように思います。
しかし、私自身それらを便利だとは感じていても、ものを考えるツールとしては、やはり紙と鉛筆のようなアナログツールが一番良いように思います。
たくさんのデジタルツールがある中で、なぜ「紙と鉛筆」が良いと感じるのか、その理由を様々なツールと比較して、紙と鉛筆の良さを改めて見直してみたいと思います。

テキストエディタ vs 紙と鉛筆 テキストエディタは誰もが使えるほどにシンプルで素晴らしいです。書き残せる事は無制限に近く、携帯などでいつでもどこでもメモをしながら考えることができます。 しかし、ものを考える上での欠点は、記された情報が垂直方向に並んでしまうことで、直線的な思考に縛られてしまうことです。 それに対して紙と鉛筆は、自分の思いつくことを白い紙の上に縦横無尽に書き出していくことで全体を見渡し、それぞれの関係性を見いだすことで、新たな発想へとつなげやすくなります。 「直線思考」か「拡散思考」か、可能性の広がりにおいて紙と鉛筆の方は圧倒的です。

描画ソフト vs 紙と鉛筆 何よりもスピードを重視するならば、あれこれ考えるよりもマウスを手に取ってIllustratorやパワポなどの描画ソフトを使って考えながら手を動かす方が良いかもしれません。 しかし、本当にそうであるならば、何よりも先に紙と鉛筆を手に取る事をオススメします。 思考スピードという点において、描画ソフトでは上図のように手+マウス→ソフトウェア上の仮想ツール→描画と、2つのツールを介すのに対して、アナログツールでは手+鉛筆→描画と、1つのツールを介すだけです。 描画ソフトは必ずしもエラーやフリーズがおきないとは限らず、思考プロセス上にある障害は少なければ少ないほど思考にかかるストレスは低くなり、結果的に質の良いものを作り出す事につながります。 また、早い…

それでも私がSketchを使い続ける理由。

ついにUIデザインツールの大本命とされていたAdobeのProject CometがAdobe Xdとしてリリースされた。
学生時代から10年近くAdobe製品を使い続けていたが、UIデザインでの使い勝手の悪さにウンザリし、ようやく重い腰をあげてSketchに移行したところだった。
そんな中、Adobe Xdは「またAdobeに戻ってもいいかも」と思えるぐらい、Sketchのシンプルさとプロトタイピングツールのエッセンスがうまく統合されていて心が揺れ動くプロダクトだ。
まだプレビュー版で機能などは限定的なので、正確に評価することは難しいが、Adobeが持つ他ツールとの親和性やマーケティング力を考えると、Sketchや既存サービスにとって大きな脅威となるのではないだろうか。
Adobeが強力なツールを出してきた中で、それでもSketchを使い続ける理由はあるのか。

UIデザインに携わる人にとって悩ましいところだが、Sketchの未来はまだまだ明るい。
単純に機能を比較するだけでは測れないような価値がSketchにはあるからだ。

UIだけでなく、プロセスをデザインできる。 プロトタイピングはProttやFlinto、プロジェクト管理まで含めるならInvision、エンジニアとの連携ならZeplinなど、Sketchと親和性の高いサービスが続々と登場している。
Sketchなら、これらをうまく組み合わせることでプロトタイピングやコミュニケーション、開発に至るまでのあらゆるプロセスを効率よく進めることができるようになっている。
質の高い無料のUIテンプレートや素材が無数に存在する中で、表層のグラフィックが作れるだけでは半人前。 UIデザインは意図したデザインが機能するように、ビジネスとエンジニアリングの間を行き来しながらコミュニケーションをうまく行っていくことの方が重要だ。
現状、Adobe製品だけではプロセスに関わるツールを完全にカバーすることは難しい。ここに今後もSketchを使い続けるメリットが充分にある。

ユーザーがプロダクトづくりに参加できる。 正直、Sketchは大嫌いだった。心地良くない文字詰め、謎に空きすぎる行間、独特の描画方法のペンツール…。
Adobe製品と比較して出来ないことだらけで、使い始めた頃は不便も多く「全く使えない」と…