カラフルな色使いのHTML5製Webサイトデザイン23個まとめ

 

先日HTML5とCSS3を利用したWebサイトデザインをまとめて紹介したのですが、印象的なデザインがさらに増えているようです。今回はカラフルなWebデザインを中心にまとめています。

 

海外デザインブログWeb Design Ledgerで、彩り豊かな配色が魅力的なWebサイトデザイン23個をまとめたエントリー「Fresh Examples of HTML5 Websites」が公開されていたので、今回はこちらよりご紹介します。

 

配色に困ったときに眺めてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

HTML5&CSS3を使ったカラフルWebサイトデザインまとめ

 

Viniltec

ナビゲーションメニューをのぞいて、水平方向にスクロールするユニークなデザイン、カラフルな色使いにも注目です。

html01

 

 

Coming Soon 

Nextボタンをクリックすると各コンテンツに切り替わるのですが、動きがユニーク。「公開予定」が会社名のようです、。

html03

 

 

SF Dok

右側のメニューをクリックすると、町中を探索、360度パノラマで店内を表示します。野外系イベント用Webサイト、なんかにいかがでしょう。

html04

 

 

Art & Graft

イギリスのWebデザイン事務所のポートフォリオサイト、画像をうまく組み合わせたミニマルデザイン。

html05

 

 

Sylvain Ollier

グリッドレイアウトを利用したすっきりとしたデザイン、サムネイルにクリックするとユニークなエフェクトを追加。

html06

 

 

Rivers & Robots

アース色を中心に配色したレトロスタイルのWebデザイン、Webフォントやテクスチャを利用することでさらに質感をアップしています。

html07

 

 

Jolena

キッズ用品、おもちゃなどを販売しているショッピングサイト、本物の紙のような質感を表現しています。

html08

 

 

Tom, Dick & Harry

黒とオレンジをメインカラーにデザインされたWebサイト、ユニークなタイポグラフィーもWebフォントを利用しているようです。

html09

 

 

One Million Trees

「ロンドンに木を増やそう」プロジェクトのWebサイトデザイン、視差(英: Parallax)エフェクトが適用されています。

html10

 

 

Kitchen Sink Studios

トップ画面に表示されるタイポグラフィーデザインもすべてHTML5を使ってテキスト表示、HTML5の可能性を感じるサイトです。

html11

 

 

CAST

アメリカを中心に活動する劇団の公式ホームページ、フルスクリーンでイメージ写真をでかでかと表示。

html12

 

 

Me and Oli

えんぴつで手書きしたようなデザインがかわいい手作り系?Webサイトデザイン。

html13

 

 

The Art of Re Use

何段階にもスライダーを組み合わせたようなユニークな動きがインパクト、おとがでますのでご注意ください。

html15

 

 

Ryan Delaney

このサイトはぜひ直接見て、触りたくなってしまいます。クリックすると大小さまざまなボールが画面を埋めつくします。

html17

 

 

Jayaraj P R

こちらも同様のエフェクトを加えており、コンテンツの縦横無尽のスクロールがナイスです。

html18

 

 

Upperdog

Webフォントを利用したタイポグラフィーが魅力的なWebサイト、グリッドレイアウトを利用しています。

html19

 

 

Diablo Media

アメリカにあるデザイン事務所で視差エフェクトを利用、Companyメニューよりオフィスの様子をスライドショーで表示できます。

html20

 

 

Team Viget

全体的にふわっとした浮遊感のある横スクロールでコンテンツを展開、HMTL5はこんなエフェクトもかけることができるんですね。

html21

 

 

Cory Etzkorn

Webデザインの他に商品パッケージデザインなども行っている、アメリカミネソタ州のデザイン事務所。

html22

 

 

Gojee

「料理レシピのまとめサイト」なのですが、どれもおいしそうでたまりません。持っている食材や嫌いな食材を選んで、検索することもできますよ。

html23

 

HTML5を利用することで、いままでは「読む」のが当たりまえでもあったWebサイトに「触れる」、「観る」、「聴く」など五感を刺激するデザインが増えていきそうですね。

 

ちょうどかちびと.netさんの記事が公開されていました、参考にしてみてはいかがでしょう。

 

HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか

 

[参照元 : Fresh Examples of HTML5 Websites – Web Design Ledger]