フロントエンドのデザインツールの選定について

Question

現在Webサービスのスタートアップ的なものを考えています。
メンバーは、サーバーサイドのエンジニアが僕ともう一人いるのですが、
デザイナーやフロントエンドエンジニアといった人がおらず知識不足です。
そこで、自分で情報収集もしているのですが恐縮ながらいくつか参考までにお聞きしたいことがあります。

UIデザインツールは何が良いか
デザインの作業を、プログラミングに詳しくないメンバーの一人に任せようと思っています。
直感的に操作できることと、作ったUIをCSSにエクスポートできることが条件です。
調べたところSketchまたは無料から利用できるFigmaというのが良さそうなのですがいかがでしょうか。

CSSデザイン用のエディタはないか
作成したデザインをコーディングする際に、HTML/CSSがリアルタイムで右の画面に表示される、とういようなCSS特化のエディタのようなものがあれば嬉しいです。現在エディタはVS CodeやAtomを使っているのでプラグインでもいいです。似たようなツールはいくらでもありそうですが、有名で便利なものがあれば教えていただきたいです。

以上よろしくお願いいたします。

Answer 1

UIデザインツールは何が良いか

個人的には、Sketchがいいかなと思います。
他のPhotoshopとかExperience Design…などなどありますが
Sketchは価格もそうですがUI Design中心なので、とても使い勝手がいいと思います。
後は実際に触ってみてください
Sketchの使い方について

CSSデザイン用のエディタはないか

matsu1006さんもおっしゃてる通り、bracketsが一番UIとかもきれいで使いやすいかなと思います。
Bracketsとは

Comments

[namenamenameko]

ありがとうございます、Sketchはやはり人気が高いようなので使って見たいと思います。

Answer 2

CSSデザイン用のエディタはないか

bracketsはどうでしょう？
CSSだけに特化しているわけではありませんが、Chrome必須のようですがライブプレビューもあります。
コード補完機能も充実しています。

公式サイト

Bracketsの機能紹介、使い方解説

Comments

[namenamenameko]

ありがとうございます。いただいた記事を拝見したところかなり使い勝手も良さそうです。
このツールの存在を知らなかったので感謝します。

[m.ts10806]

公式サイトのフッター著作権表示的なところに書いてある通りAdobe純正なのでHTML,CSS,JavaScriptとの親和性は非常に高いと思います。ぜひ使いたおしてみてください。