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

HTML5でのコーディング

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

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

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

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

アップル

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

ローソン

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

CONTENTS

こちらのサイトはぜひ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/

ECスタジオ

CSS3の角丸指定を使うなど今後のコーディングの参考にとてもなりました。また、IE8や7で見ると角丸にはならないのですがデザインに違和感はなくクロスブラウザを考えるときにも大変参考になると感じました。
http://www.ecstudio.jp/

Dreamweaver特設サイト

ブログを作りたい時にとても参考になると思いました。
http://adobe-html5.jp/

NHN Japan Corporation

NHN Japan Corporation

http://www.nhncorp.jp/

スペースシャワーTV

http://www.spaceshowertv.com/

tv asahi

http://www.tv-asahi.co.jp/

コカ・コーラ

http://www.cocacola.co.jp/

温泉トラベルデザイン研究所

http://www.onsen-travel.jp/

定山渓温泉 定山渓観光協会公式サイト

http://jozankei.jp/

薩摩川内市観光協会  『こころ 』 観光・特産品ガイド

http://satsumasendai.gr.jp/

STUDIOVOICE

http://studiovoice.jp/

Ustream.tv

http://www.ustream.tv/

ベビスタ.com

http://baby-standby.com/

OLYMPUS PEN

http://olympuspen.com/jp/

ユナイテッドアローズ公式サイト

http://www.united-arrows.co.jp/

UNIQLOKS

http://uniqlooks.uniqlo.com/

今後、HTML5で制作されたサイトはドンドン増えていくと思いますので今後も参考サイトをみつけたらまとめて記事にしたいと思います。

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事