Advertisement

 

Webサイトのデザイン、どんなレイアウトを作成しようかと悩んでしまうことありませんか。

ベーシックなレイアウトだけでなく、デザインをメインにレイアウトされたWebサイトなどはアイデアの参考になるかもしれません。

 

海外デザインブログSlodiveで、ユニークなWebデザインレイアウトを25個まとめたエントリー「25 Amazing Website Layouts」が公開されていたので、今回はご紹介します。

 

実際に見るだけではなく、触れることでもたのしむことができるデザインレイアウトが多く揃っています。

 

 

詳細は以下から。

 

 

クリエイティブなデザインが魅力的なWebサイトレイアウトまとめ

 

Coca Cola

みんな大好きコカコーラのポルトガル版Webサイト、テクスチャ素材を使い食卓のようなイメージを連想させます。

 

 

Outbox Ativism

すっきりとしたグリッドレイアウトに、モノクロデザインを組み合わせたシンプルでオシャレなWebサイトレイアウト。余白スペースの取り方は参考としてメモ。

 

 

PVS Company

ヘッダー全体にインパクトのあるグラフィックデザインを用いた、ダーク系Webサイトレイアウト。CSS3をつかい細やかなアニメーションなどが適用されており、サイトイメージを向上。

 

 

Transmission Inc.

こちらもグラフィックデザインばりばりでレイアウトされたユニークWebサイト、視差エフェクトを利用した動きでもたのしませてくれます。

 

 

Dare

ヘッダー部分で画面幅いっぱいに展開されるイメージスライダーが印象的なWebサイトデザイン。About Usページ、クールですよ。

 

 

Teehan + Lax

カンダはトロントにあるWebデザインオフィスの公式ホームページ、飽きのこない誰にでも受け入れやすいカラーリングは参考にいかがでしょう。

 

 

Bliss Media

Nintendoオーストラリア用Webデザインを担当したデザイン事務所。画面いっぱいに切り替わるスライダー、 タイポグラフィーの使い方などもユニーク。

 

 

Joshua Sortino

レトロな印象を与える色使いとザラザラとしたノイズテクスチャを組み合わせたWebデザイン、デバイスの画面解像度に応じてレイアウトの変化するメディアクエリを利用した具体例として。

 

 

 Kokokaka Digital Agency

ディスプレイ全体にサムネイル画像を表示するポートフォリオサイト、それぞれのコンテンツはフルスクリーンでイメージ画像を表示します。

 

 

Kokoro & Moi

北欧フィンランドのオシャレなカラーリングが特徴的なWebデザインレイアウト、日本語での対応もされているようです。

 

 

Marc Kremers

幻想的な背景用テクスチャを利用したWebサイトデザインで、サムネイルにカーソルを合わせるとドット柄を利用したエフェクトが加えられています。

 

 

dynamIt

メディアクエリを利用したWebデザインレイアウトその2、カンバスサイズに応じてカラム数がスムーズに変化。

 

 

Zaum & Brown

何度かご紹介しているかもしれませんが、。こちらもディスプレイ幅に応じてレイアウトが変化します。プラグインjQuery Manosryを使うことで再現可能ですよ。

 

 

960px Grid Templates

グリッドレイアウトを使いコンテンツを整列させただけのミニマルデザイン、タイポグラフィーの選び方によって印象ががらりと変わりそうです。

 

 

70folk

最近よく見かける灰色をベースカラーとして利用したWebデザイン、こちらもグリッドを使ったレイアウトとなっています。

 

 

Itai Inselberg

シングルページのみでデザインされたポートフォリオサイト、メニューをクリックすることで各コンテンツに移動します。フッターにはなんと、、。

 

[参照元 : 25 Amazing Website Layouts – Slodive]