

HTML/CSS を構築するにあたってできればコーディング不要、つまりグラフィカルなツールでの編集・プレビューを行いたいのですが、
何か良いツールはありませんでしょうか。 静的なページというよりは、何かしらのWebフレームワーク (Ruby on Rails, CakePHP,
Django 等) と組み合わせるためのデザインを構築する際に使えるグラフィカルツールを必要に感じています。

過去（もちろん現在にも…）には、 ホームページ・ビルダーや Dreamweaver が活躍している時代もありましたが、 それでできあがった HTML/CSS
は構造としてあまり美しいものではなく、 プログラムと連携させるのにとても苦労した、という話をよく聞きます。

Strikingly, Wix, Weebly, Jimdo
等々のブラウザ上でグラフィカルにページデザインを行えるサイトは登場していますが、あくまでもそれらのサイトの枠組みに沿ったものを作れるだけに過ぎず、たとえばそれを独自Webサービスのデザインとして使おうとするのは簡単ではありません。

現在私の知っている限りでは、(独自Webサービスの) HTML/CSS の編集には、タグやスタイルを直打ち、または Jade, Sass, SCSS
等々のエンジンによって「コーディングの」効率化を図っているところが関の山です。
もう少し、上レイヤーな手段、つまりはグラフィカルツール的な操作でデザインを構築できるWebオーサリングツールが、もしありましたらご紹介いただきたいです。


CC BY-SA 3.0
2014-12-13T02:45:05.780
1578
2015-02-03T06:21:36.623
2014-12-13T03:00:20.410
728
2140
question
css html
大枠をコーディング不要で作成できる Webオーサリングツール


HTMLソースが綺麗かどうかはわからないのですが最近紹介されているコーディング不要のWebオーサリングツールの記事を幾つか。

# Adobe Muse [(link)](http://muse.adobe.com/)

[アドビ、ウェブデザインツール「Muse」を公開--
コーディング不要の新アプリ](http://japan.cnet.com/news/service/35006175/)

> Adobe Systemsは米国時間8月14日、手動コーディングを学習したくないユーザーに向けたウェブデザインツールへの取り組みを拡大させた。

出力されるHTMLは期待できないかもしれませんが。

# Adobe Edge Reflow [(link)](https://creative.adobe.com/ja/products/reflow)

[デザイナーだけでWebページ制作をしてみた件について](http://www.atmarkit.co.jp/ait/articles/1408/22/news034.html)

この記事の 2ページ目の最後に

> それならば、Edge Reflowを使えばレスポンシブデザイン対応のサイトを書き出せる。手直しは機能強化されたEdge Codeを使ってみよう。

という文があります。Photoshopとも連携できるようです。 [Edge
Code](https://creative.adobe.com/ja/products/code)は現在は
[brackets.io](http://brackets.io/)になりました。
bracketsはエディタですがPhotoshopファイルから色を取り出したりすることができるみたいです（その機能は使ったことはないです）。

# Mecaw [(link)](http://macaw.co/)

ツールの最後はAdobeじゃないです。最後に挙げておきながら個人的には一番気になってます。

[未来のWebデザインツール「Macaw」がバージョン1.0に到達](http://www.softantenna.com/wp/software/macaw-1-0/)

>
> 要するに、イメージエディタを使ってWebサイトのデザインを作成し、HTMLを書き出すことができるという、結構ありがちなツールなのですが、レスポンシブ対応であったり、Alchemyというレイアウトエンジンを使ってきれいなコードを書き出せるところが特徴のようです。

とありますので、これが本当であれば一番目的に合うのかもしれません。


CC BY-SA 3.0
2014-12-13T03:34:52.637
1579
2014-12-13T03:34:52.637
728
1578
answer


上の回答では紹介されなかったオーサリングツールを挙げておきます。

## [Webflow](https://webflow.com)

  * [1日でプロに匹敵するwebサイトをデザインから公開まで完結できる「Webflow」正式版に驚愕！](http://plus.appgiga.jp/masatolan/2014/03/25/51290/)

オンライン上で動作するツールですが、ビジュアルデザインそのものをコーディング不要で行なうことが出来ます。Webflow独自のWYSIWYGでデザインが完成したらそのままこのツールがHTMLを吐き出してくれます。

Adobe Edge
Reflowに少し似ている(というかどちらかが多分影響している)ツールで、似たような操作感でレスポンシブデザインもオンライン上でできます。


CC BY-SA 3.0
2014-12-16T06:50:10.127
1694
2014-12-16T06:50:10.127
953
1578
answer


こちらも候補になりそうなので遅い回答ですが。。

# Google Web Designer

<http://www.google.com/webdesigner/>

[Adobeはもういらない!?「Google Web
Designer」がすごすぎる](http://matome.naver.jp/odai/2138396282976722601)

> 描画ツール、テキスト、3D
> オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な
> HTML5、CSS3、JavaScript を出力できます。Google Web Designer
> では、広告クリエイティブを作成する際に、コンポーネント ライブラリから画像ギャラリー、動画、広告ネットワーク ツールなどを追加できます。コード
> ビューでは、構文の強調表示機能やコードのオートコンプリート機能を使用して簡単にコードを記述でき、エラーの少ない CSS、JavaScript、XML
> ファイルをすばやく作成できます。

こういったツールはソースが綺麗に吐出されるのかというところがネックになりそうですね。


CC BY-SA 3.0
2015-02-03T06:21:36.623
5833
2015-02-03T06:21:36.623
2020-06-17T08:14:45.997
-1
7455
1578
answer