HTMLButcherはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（New BSD License）です。

画像で作成したデザインからHTMLを起こすのにPhotoshopがよく使われます。スライスツールを駆使して行われているかと思いますが、今回はその専用ソフトウェアHTMLButcherを紹介します。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-06 12.05.02.1375797455.png)
適当な画像を開きます。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-06 12.05.53.1375797459.png)
枠を作ったり、その名称を決めます（これが出力時のクラス名になるようです）。

実例（公式サイトより）。細かく指定することでより正確なHTMLデータが出力されます。

HTMLButcherではテーブルタグを使う、または使わないレイアウトが選択できます。使わない場合はスタイルシートで場所を指定する形になります。レイアウトのマスクを作成して、同じようなレイアウトの画像に対して使う回す事もできます。入力ファイルには通常の画像に加えてPSDも利用できるようになっています。

MOONGIFTはこう見る

実際に出力されるHTMLを見ると、そのまま全く問題なく使えるとは言いがたいかも知れません。しかしこれをベースにすれば後々修正を行った場合にも同じフローで対応できるようになります。

Photoshopは優秀で数多くの機能を持ち合わせているためにどんな場面でも使いたくなりますが、それでも専用ツールは特化している分使いやすさも考えられているはずです。Webデザイナーの方はHTMLButcherを一度チェックしてみても良いのではないでしょうか。

HTMLButcher - PSD to HTML - Advanced HTML slicing application