Advertisement

 

海外デザインブログDesign Modoで、クリエイティブなWebサイトデザインを35個まとめたエントリー「30 Fresh CSS Website Designs for Inspiration」が公開されていたので、今回はご紹介します。

 

彩り豊かな色使いは、今後のデザイン制作の参考にしてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

フレッシュ&カラフルなWebサイトデザインまとめ

 

Michelle Hunziker

フルサイズで画面いっぱいにデザインされたポートフォリオサイト、フォントの色使いなども参考になりそうです。

CSS-Website-Designs-2

 

 

Art 4 Web

カラフルでポップなベクターデザインが印象的なウェブサイト、余白スペースの使い方もポイント。

CSS-Website-Designs-1(2)

 

 

Webdeisgn Weblounge

ダイナミックなアニメーションのスライダーエフェクト を使っており、清潔感のある色使いが参考になりそうです。

CSS-Website-Designs-30

 

 

 Lavazza

オシャレすぎる写真の使い方など特にお気に入りのウェブサイト。ウェルカムページ、かっこいいです。

CSS-Website-Designs-9

 

 

Lipton

水平方向にコンテンツ移動するユニークなレイアウトを使ったウェブサイト、立体感たっぷりに仕上げられています。

CSS-Website-Designs-15

 

 

Blancreme

画面いっぱいで表示されるスライダーがユニークなWebサイトデザイン、絶妙な色使いに脱帽です。

CSS-Website-Designs-11

 

 

Interactive Showreel

とにかく一度見て、触れてもらうとこのサイトの良さが分かると思います、とにかくたのしいですよ。

CSS-Website-Designs-10

 

 

Slavery Footprint

コンテンツを読み進めるとさまざまなギミックが隠されている、ユニークなウェブサイト。

CSS-Website-Designs-5

 

 

Routalempi

音楽バンドのメンバーをダイナミックに紹介していくシングルページ完結型のWebサイトデザイン。

CSS-Website-Designs-12

 

 

Massive Digital Creative Agency

ウィンドウ幅に応じてレイアウトを変更した遊び心たっぷりなWebサイトデザイン。

CSS-Website-Designs-14

 

 

Family of Fish

視差エフェクトを利用してコンテンツを切り替え、それぞれ大量の写真を表示しています。

CSS-Website-Designs-13

 

 

Mad AS

ギャラリーサイトの参考にしたいWebデザイン、読み込み時間がかかってしまうのが残念です。

CSS-Website-Designs-22

 

 

Martin Gauer

スマートフォン携帯を触っているようなギミックの効いたWebサイトデザイン。

CSS-Website-Designs-19

 

 

 Mediovski

コンテンツに応じて、背景ごと切り替えてしまうユニークなスライダーを使ったWebサイトデザイン。

CSS-Website-Designs-21

 

 

Hyundai Veloster

車の性能をユニークな動きと一緒に説明したWebデザインのひとつ。ヘッダ部分のスライダー、立体的すぎます。

CSS-Website-Designs-7

 

 

Target Nuclear Weapons

核爆弾の脅威について分かりやすく、ポップに伝えてくれるWebサイト。タブをクリックすることで、コンテンツが展開します。

CSS-Website-Designs-4

 

 

Sparks

フルサイズで写真を表示し、水平方向にスムースにアニメーションしながらコンテンツが切り替わります。

CSS-Website-Designs-17

 

 

Timberland

こちらもフルサイズで写真を利用した具体例のひとつ、ナビゲーションメニューはオンマウスすることでスライドで詳細を表示します。

CSS-Website-Designs-8

 

 

vlog.it

アニメーションたっぷりで展開されるダイナミックなWebサイトデザイン、タイポグラフィーデザインもオシャレ。

CSS-Website-Designs-3

 

[fancy_box][参照元 : 30 Fresh CSS Website Designs for Inspiration – DesignModo][/fancy_box]