HTML5で制作された国内企業サイト20から現状の制作状況を知る!!

Category : HTML5サイトまとめ | 2011年8月29日

HTML5でのコーディング

最近、HTML5のコーディング案件に関わることがあったのですが、その時にHTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。

尚、サイトを調べていて気づいたのですが、現状(2011年8月)では宣言をHTML5にして内容自体は今まで通りdiv要素を使ってマークアップしているサイトが多いように感じました。新要素を多用して後から間違えが出てくるという可能性を考慮すると、とても理にかなっていると1人で感心してしまいました。今後この流れは変わると思いますが現状(2011年8月)では大切な考え方の1つだと思っています。

それともう１つ、多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。調べて見つけるとWEBの制作会社サイトであることが非常に多いように感じました。とても参考にさせていただきました。私も取り残されないように日々精進したいと思います。

もし、上記以外でみなさんが現状で制作時に気をつけていることや、思っていることがありましたら教えてください。

アップル

このサイトは説明不要ですよね。アップルのサイトです。
http://www.apple.com/

ローソン

header要素やfooter要素は使っていますが、article要素などは使わずにdiv要素でマークアップしています。この考え方はとても参考になりました。また、『ローソンストア100』のサイトもHTML5で作られています。
http://www.lawson.co.jp/index.html

こちらのサイトはぜひHTML5に対応しているモダンブラウザで見てほしいです。通常のサイトにcanvas要素を使いFlashのような表現をおこなっています。感動しましたこれからはJSの勉強は必須だなと感じます。
http://www.contents.ne.jp/

ソフトバンクグループ2012年新卒採用サイト

モダンブラウザではcanvas要素を用いて3D表現を行ない、canvas要素に対応していない場合はFlashで3D表現がされます。クロスブラウザの参考にとてもなりました。
http://recruit.softbank.jp/

無印良品

もともとの宣言は『XHTML1.0』だったのでしょうか？宣言のみHTML5に変更されたように感じます。ですが、divのclass名にsectionとつけるなど、アウトラインをしっかり考えながらコーディングされているので宣言を変更しても問題ないようです。凄いです。
http://www.muji.net/