[Å] デザイナーの私が参考にしたい「HTML5を使用しているサイトデザインまとめサイト」をザッとご紹介

DWR_Design Bar_009 / Associated Fabrication

こんにちはアカメです。前回に引き続きデザインのまとめをご紹介。デザイナーの私がいつか参考に！と思っている「HTML5を使用しているサイトデザインまとめサイト」です。全ブラウザが完全にHTML5に対応していないのを理由に今一度手を出していない方でも今のうちに「あっ！HTML5ってこんなことできるんだ」って知る機会にしてみてはいかがですか。見るのはタダですのですので…。では早速。

私が気に入っているHTML5デザインサイトまとめサイト（海外）
HTML5デザインサイトまとめ（海外）
ところでHTML5って何？
HTML5で書かれているかを一瞬で判断する方法
おまけ（おすすめアプリ）

色々とまとめてみましたが、今回は海外のものが中心です。というより、HTML5のサイトデザインまとめサイト日本語版のサイトをまだ見つけてないです…ご存知の方、教えてくださるとアカメは嬉しいです。それでは早速ご紹介。

私が気に入っているHTML5デザインサイトまとめサイト（海外）

HTML Five

HTML Five

サイト自体がシンプルで非常に見やすい。細かくカテゴリーでわかれているのもGood。紹介されているサイトも様々なデザインあり。

HTML5 Showcase

HTML5 Showcase | A gallery of the best html5 sites in the world.

サイト自体がお洒落。個人的には結構好き。デザインもベタ塗り以外にも複雑なデザインやサイト構成なものもある。

HTML5デザインサイトまとめサイト（海外）

HTML5 Gallery

HTML5 Gallery | A showcase of sites using HTML5 markup

トップページに10個。その他は「older」ボタンを押して閲覧していく。そこまで量はないかもしれない。

HTML5 Gallery

HTML5 Gallery

サイト自体がシックでかっこいい。右エリアのtopicである程度のカテゴリー検索が可能。サムネイルも見やすい。

HTML5Beauty

A gallery of best HTML5 websites | HTML5Beauty

HTML5のまとめサイトって言うとわりとよく出現するサイト。デザインは独特なものが多い。ベタ塗りデザインが多い印象。

Latest HTML5 websites

Latest HTML5 websites :: worldwide showcase gallery for HTML5 websites

サムネイルが大きすぎてちょっと個人的には好まないサイト。とは言えデザインが集まっているのは間違いない。量もそこまで多くはないな…

海外サイトのみですが、探してみると結構な数あります。最近では国内でもHTML5を使用しているところもありますね。今回は海外サイトのまとめでしたが、「HTML5を使用している国内のサイトまとめ」も書こうかな。

▲目次に戻る

ところでHTML5って何？

順番が前後してしまいました。最近よく耳にするHTML5ってなんでしょう？ホームページ制作者じゃなければどうでもいいことですが、ホームページ制作者にとっては結構大きな変化なんですよ。わかりやすく言えば、ホームページを作るためのアイテムが増えたという感じでしょうか。

videoタグやaudioタグ、canvasタグなどなど。細かく言えばnavタグやheaderタグ、footerタグなど数えきれないぐらい増えました。Flashを使わなくても動画を表示したり音楽を流せたり色々と出来るようになったのです。

ページが動けば「Flash」と思う方もいらっしゃるようですが、そういうわけではないんですよ。JavaScriptという言語を使ったりして動かすこともできます。JavaScriptで作ればFlashが表示できないiPhoneやiPadでも表示出来ます。iPhoneで動画が表示される時ないですか？もしかしたらそれはJavaScriptやHTML5の可能性がありますね。ちょっと疑ってみるのも良いかもしれません。

▲目次に戻る

HTML5で書かれているかを一瞬で判断する方法

ソースのhead内の書き方に注目です。従来の「XHTML1.1」と「HTML5」を比較しましょう。

【従来の「XHTML1.1」の例】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type"
         content="text/html; charset=utf-8" />
   <title>ページタイトル</title>
</head>

【HTML5の例】

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ページタイトル</title>
</head>

違いは歴然。HTML5の方がかなりシンプルになってますね。ソースを見てDOCTYPE宣言が短くなっていたらHTML5で書かれていますよ。面白いサイトや複雑なサイトを見つけたらソースを確認して（マウス右クリックでソースの確認とかあるはず）HTML5で書かれているか見てもいいかもしれないですね。

▲目次に戻る

おまけ

いかがでしたか。今回はHTML5のデザインをまとめているサイトを書いてみました。思っていたよりも多くあり、自分でもサイト情報を整理出来ていないのが正直なところ。前回のと合わせてこれでデザインを参考にしたくなったときに振り返られるかな。皆様の情報整理のお役にも立てていたら嬉しいです。ではではー@mk_mizuhoをよろしくお願いします。