美しいWebサイトはDOM構造も奇麗なはず！「DomTree」
DomTreeはWebサイトのDOM構造をツリー化してくれるビジュアル化ソフトウェアです。
奇麗なHTMLはソースを見てもやはり奇麗に記述されているものです。さらにDOMの構成において奇麗にできているかどうか可視化してくれるソフトウェアがDomTreeです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.02.16.1364975857.png)
Googleです。73エレメントで作られています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.02.31.1364975878.png)
MOONGIFT。294とのことです。すごく…密です。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.02.48.1364975903.png)
Yahoo! Japan。CenterやTableタグを使っているあたりはやはりサポートするブラウザの多様性ゆえでしょう。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.03.03.1364975924.png)
楽天。すごい数です。なんと957。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.03.19.1364975964.png)
2003年当時のMOONGIFT。51だそうです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.03.27.1364975983.png)
2008年当時のデザインでは600近い数になっていました。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-03 12.03.51.1364976011.png)
拡大表示もできます。
必ずしも奇麗なDOMツリーになっていることが奇麗なデザインにつながる訳ではないと思いますが、空タグや無理矢理ハックしてデザインを整えたりしているとツリー上も無理が生じている可能性があります。自分のサイトを見てみると面白いかも知れません。
DomTreeはnode.js/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
MOONGIFTはこう見る
プログラミングにおいてエレガントなコードはバグも少なく、見通しもよく、誰でもすぐに理解できるものになっていることが多いです。逆にトリッキーなものやスパゲティーなコードはバグが混入しやすく、間違った使い方をして余計な不具合につながったりします。
デザインにおいてもそれは変わらないでしょう。美しいデザインとはやはりソースを見ても奇麗であるべきです。そのためには余計なハックはなく、Web標準に則り、適切なインデントとコメントが入っているものではないでしょうか。