最近これらの問題を解決するサービスを発見し、利用した結果、非常に有用であったためいくつか紹介したい。
Kickstarterでわずか24時間で7万5000ドルを獲得した。デザイナーが使い慣れたPhotoshopとほぼ同じ操作性で利用できるウェブデザインツールだ。ビジュアルエディタで作ったデザインをhtml、cssでつくれる。
Macawの特徴は以下という。
- アニメーションを簡単に作成でき、自動でhtml、css、JavaScriptを書き出すことができる
- 作成したデザインは自動で可変できる
- レスポンシブなデザインが作成できる
- 豊富なテンプレート・スクリプトを使ったインタラクティブなモックアップ作成ができる
- 簡単にグローバルパーツを作成したり編集できる
要するにこれまでのPhotoshop操作性でhtml、cssを作ることができるというものだ。
Macawについての詳細記事はこちら。
UXデザインをする上で、早期にアイデアを実現しユーザーフィードバックを得て改善し続けることは非常に重要だ。もしコーディングに苦手意識のあるデザイナーは、Macawを試してみることをおすすめする。
2つ目はCSS Hat
既にPhotoshopで作ってしまった素材も、レイヤスタイルをCSSに変換してくれる。CSS Hatの特徴は以下という。
- PhotoshopのレイヤスタイルをCSSでリアルタイムに再現
- LESS、SASSに対応
CSS Hatを使えば、過去の素材もCSSで表現できるため便利だ。
3つ目はPageLayers
HTMLをレイヤ分けしたPhotoshopファイルに変換できるソフト。PageLayersの特徴は以下の通り。
- HTML、CSSをPhotoshopのレイヤスタイルに変換してくれる
- div単位でレイヤ分けされるため非常に使い易い
今後、デザイナーとエンジニアの境界線は重なり、どれだけ早くプロダクト開発、検証サイクルを増させるかが鍵となるだろう。この機会にこれらのツールを使って新しい領域に挑戦してみるのはいかがだろうか。
- 大塚雄介
- 2006年、早稲田大学大学院卒理工学修士号取得。同年、ネクスウェイに入社。ネット広告新規法人営業、新事業創出プロジェクトを経て、新規事業（クラウドサービス NEXLINK）のUI責任者に就任。専門はIA/UX/UIデザイン。2013年より、「STORYS.JP」のCMO（最高マーケティング責任者）兼任。Facebookはこちら。
