Advertisement

 

最近よく耳にするHTML5。スマートフォンやタブレット用に利用されているケースが多くありますが、徐々にWebサイト制作でも見かけるようになっています。

 

海外デザインブログDesigner Terminalで、HTML5でコーディングされたクリエティブなWebサイトデザインを35個まとめたエントリー「35 Stunning Websites Designed with HMTL5」が公開されていたので、今回はご紹介します。

 

今まで複雑だった処理が簡単に出来て、HTMLをより構造的にすっきり書くことができるHTML5、これからが楽しみですね。

 

 

詳細は以下から。

 

 

HTML5で制作されたユニークなWebサイトデザインまとめ

 

TouchTech

スムーズな水平方向へのページ移動が面白いシングルページで作成されたWebサイトデザイン。

Touchtech

 

 

 1MD

ヘッダー部分にでかでかとレイアウトされたモノクロデザインが印象的なWebデザインのひとつ。

1MD

 

 

 Forefathers Group

レトロなタイポグラフィー、テクスチャ、デザイン素材を利用した視覚的にもたのしむ事ができるWebデザイン。

ForefathersGroup

 

 

Crane Brothers

淡い色使いと魅力的なデザインパーツを雑誌風にスタイリングしたユニークなWebサイト、コンテンツに応じて背景色も滑らかに変化します。

CraneBrothers

 

 

 An HTML5 Interactive Infographics featuring Dribbble

コミュニティーサイトDribbbleについてHTML5を利用したインフォグラフィックス、Webサイトと思えない斬新なデザイン。

AnHTML5InteractiveInfographicfeaturingDribbble

 

 

 Cultural Solutions

視差アニメーションを利用した独特の動きが特徴的なWebサイトデザイン、スクロールすると背景が、。

culturalsolutionsuk

 

 

 Nike Better World

こちらも視差アニメーションを効果的に利用したコンテンツが印象的なWebデザイン、Flashのようなエフェクトも思いのまま。

NikeBetterWorld

 

 

Idea Exhibit

水平方向にコンテンツがスクロールするWebデザインのひとつで、オシャレなタイポグラフィーもWebフォントで再現。

IdeaExhibit

 

 

Mind Epic

配色の参考にもなりそうなデザインで、メニューボタンをクリックすると自動的にコンテンツに移動します。

MindEpic

 

 

 1Minus1

いままで表現が難しかったアニメーションも比較的簡単なコードのみで表現したWebサイトデザインのひとつ。

1minus1

 

 

 Paradox Labs

こちらもシングルページで完結したWebサイトデザインで、グリッドレイアウトを利用したすっきりとした印象。

ParadoxLabs

 

 

 Build 2011

カンファレンスイベント用の告知ページなのですが、グリッドレイアウト、余白スペースをたっぷりと使いデザインされています。

Build2011

 

 

 Web Designer Wall

Webデザインに関する新しいテクニックなどを紹介しているブログサイト、ウィンドウ幅に応じてレイアウトも変化。

WebDesignerWall

 

 

 Soh Tanaka

ダーク系Webサイトデザインのポートフォリオ&ブログサイト、ポップなグラフィックデザインが印象的。

SohTanaka

 

 

 Simple as Milk

PhotoshopでデザインしたようなタイポグラフィーデザインもすべてWebフォントで再現されており、見えない細部まで考えられています。

SimpleasMilk

 

 

 RainyPixels

シンプルなレトロ風イラスト、デザインを利用して制作されたWebサイトデザイン。

Rainypixels

 

 

 Ideaware

ヘッダー部分にユニークなアニメーションを利用したWebサイトデザイン、立体的なリボンのナビゲーションメニューも◎。

Ideaware

 

 

 Activate

水彩絵の具でペイントしたようなイラストにアニメーションを加えたユニークなWebサイト、色々な仕掛けが実装されています。

Activate

 

 

 EVIL

マウスを自動的に識別しスクロールボタンを表示するデザインがユニーク、雑誌風レイアウトでたのしむことができます。

EVIL

 

 

 Youzee

視差アニメーションを利用したシングルページのWebサイトで、圧倒的なグラフィックデザインが印象的。

Youzee

 

 

 Worry Free Labs

あまり見かけない縦横自由にスクロールするスライダーが印象的なダーク系Webサイト、レタープレスデザインを要所に利用しています。

WorryFreeLabs

 

 

HTML5を使ったWebサイトを制作したい方へ

 

HTML5 Boilerplate

HTML5+CSS3+Javascriptを使い実践的なWebサイト構築を可能にしたテンプレート素材。必要なパーツを選択、ダウンロードできるので幅広い用途に活躍してくれそうです。

 

 

詳しい利用方法について英語となりますが、動画で解説されていますのでこちらも参考にしていただくと分かりやすいかもしれません。

 

 

[参照元 : 35 Stunning Websites Designed with HTML5 – DesignerTerminal]