先日HTML5とCSS3を利用したWebサイトデザインをまとめて紹介したのですが、印象的なデザインがさらに増えているようです。今回はカラフルなWebデザインを中心にまとめています。
海外デザインブログWeb Design Ledgerで、彩り豊かな配色が魅力的なWebサイトデザイン23個をまとめたエントリー「Fresh Examples of HTML5 Websites」が公開されていたので、今回はこちらよりご紹介します。
配色に困ったときに眺めてみてはいかがでしょう。
詳細は以下から。
HTML5&CSS3を使ったカラフルWebサイトデザインまとめ
ナビゲーションメニューをのぞいて、水平方向にスクロールするユニークなデザイン、カラフルな色使いにも注目です。
Nextボタンをクリックすると各コンテンツに切り替わるのですが、動きがユニーク。「公開予定」が会社名のようです、。
右側のメニューをクリックすると、町中を探索、360度パノラマで店内を表示します。野外系イベント用Webサイト、なんかにいかがでしょう。
イギリスのWebデザイン事務所のポートフォリオサイト、画像をうまく組み合わせたミニマルデザイン。
グリッドレイアウトを利用したすっきりとしたデザイン、サムネイルにクリックするとユニークなエフェクトを追加。
アース色を中心に配色したレトロスタイルのWebデザイン、Webフォントやテクスチャを利用することでさらに質感をアップしています。
キッズ用品、おもちゃなどを販売しているショッピングサイト、本物の紙のような質感を表現しています。
黒とオレンジをメインカラーにデザインされたWebサイト、ユニークなタイポグラフィーもWebフォントを利用しているようです。
「ロンドンに木を増やそう」プロジェクトのWebサイトデザイン、視差(英: Parallax)エフェクトが適用されています。
トップ画面に表示されるタイポグラフィーデザインもすべてHTML5を使ってテキスト表示、HTML5の可能性を感じるサイトです。
アメリカを中心に活動する劇団の公式ホームページ、フルスクリーンでイメージ写真をでかでかと表示。
えんぴつで手書きしたようなデザインがかわいい手作り系?Webサイトデザイン。
何段階にもスライダーを組み合わせたようなユニークな動きがインパクト、おとがでますのでご注意ください。
このサイトはぜひ直接見て、触りたくなってしまいます。クリックすると大小さまざまなボールが画面を埋めつくします。
こちらも同様のエフェクトを加えており、コンテンツの縦横無尽のスクロールがナイスです。
Webフォントを利用したタイポグラフィーが魅力的なWebサイト、グリッドレイアウトを利用しています。
アメリカにあるデザイン事務所で視差エフェクトを利用、Companyメニューよりオフィスの様子をスライドショーで表示できます。
全体的にふわっとした浮遊感のある横スクロールでコンテンツを展開、HMTL5はこんなエフェクトもかけることができるんですね。
Webデザインの他に商品パッケージデザインなども行っている、アメリカミネソタ州のデザイン事務所。
「料理レシピのまとめサイト」なのですが、どれもおいしそうでたまりません。持っている食材や嫌いな食材を選んで、検索することもできますよ。
HTML5を利用することで、いままでは「読む」のが当たりまえでもあったWebサイトに「触れる」、「観る」、「聴く」など五感を刺激するデザインが増えていきそうですね。
ちょうどかちびと.netさんの記事が公開されていました、参考にしてみてはいかがでしょう。
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか
[参照元 : Fresh Examples of HTML5 Websites – Web Design Ledger]