Advertisement

 

 

ウェブデザインのトレンドのひとつに雑誌などのプリント媒体のレイアウトを参考にしたマガジンスタイルがあります。

特に定期的に情報、ニュースを発信しているブログメディアや複数人で運営、管理をするホームページ、ブログなどでも見かけるようになりました。

 

海外デザインブログVandelay Designで、デザイン性にすぐれたマガジンスタイルのウェブサイトデザインを25個まとめたエントリー「25 Well-Designed Magazine-Style Websites」が公開されていたので、今回はご紹介します。

ウェブサイト作成のアイデア、インスピレーションの参考として利用することができるのではないでしょうか。

 

 

詳細は以下から。

 

 

デザインのクールなマガジンスタイルのウェブサイトデザインまとめ


 

More

ヘッダー部分にデザインされたオシャレカラーのストライプがアクセントになっているマガジンスタイルデザイン。

新着記事のスライドショーや人気のコンテンツを並べることで、ユーザーにさまざまなページを閲覧するきっかけになりそうです。

 

 

Travel Buzz

ヘッダー部分の画面からはみ出すほどの巨大スライダーがインパクトたっぷりなウェブデザインのひとつ。

グリッドラインを利用することで、多くのコンテンツをすっきりと表示することが可能となります。

 

 

Black Harbor

太めのタイポグラフィーが印象的なウェブサイトデザインのひとつで、3つの主要コンテンツをグリッドラインで整列させています。

これなら直感的にユーザーが閲覧することができるのではないでしょうか。

 

 

Relevant Magazine

コンテンツの内容が多いメディア系ホームページのひとつで、それぞれのコンテンツをドロップダウンメニューで細分化。

こうすることでユーザーにさらに多くの情報、ニュースをわかりやすく探し出すことができます。

 

 

Rolling Stone

アメリカで人気の音楽情報雑誌のウェブサイト版として、運営されている音楽情報ブログメディア。

余白スペースをたっぷり使い、イメージ画像を整列させることでシンプルでわかりやすいレイアウトとなっています。

 

 

NFL

アメリカンフットボール公式サイトで、あらゆる選手や成績などを調べることができています。

1pxの白ラインなどを利用することで、エレガントで質感の高いデザインに仕上げることができます。

 

 

Box Office

コンテンツをカラフルな色で分けることで、判りやすく情報を整理しているホームページのひとつ。

最近のマガジンスタイルウェブサイトにもtwitterやfacebookなどのソーシャルメディアが表示されています。

 

 

Techi

カラフルなコンテンツ分けの参考例として好例のテクノロジー系ブログメディアのひとつ。

こちらもグリッドラインを使い3等分されたカンバスに情報を分かりやすくレイアウトしています。

 

 

Relative

アートやデザインなどを中心に定期的に公開しているウェブサイトデザイン。

サムネイル画像を大きく表示することで、デザインで直感的にコンテンツを選ぶことができるのではないでしょうか。

 

 

QNT

デザインに関する素材やアート作品、ウェブサイトなどをコンテンツ別にセレクションしているギャラリーサイト。

人気コンテンツをサイドバーに表示したり、twitterやRSSリーダーなどできるだけ多くの情報を1ページで提供することが可能。

 

 

Eagle Rock Entertainment

ロックミュージックに関するあらゆる情報を発信している情報サイトで、ニュースなどのほかにも音楽CDやDVDなどを簡単に購入できるようになっています。

 

 

Dazed Digital

ファッションやアートを中心としたニュースやコンテンツを大小さまざまな大きさでグリッドラインを使って表示しています。

ヘッダー部分に使われているナビゲーションメニューバーは使いやすく、個人的に参考としてエントリー。

 

 

 

The Times

新聞のレイアウトをそのまま利用したユニークなウェブサイトデザインのひとつ。

セリフフォントを使ったロゴデザインはシンプルですが、インパクトがありますね。

 

 

CNN

世界的に有名なニュースメディアのCNNですが、こちらもグリッドラインを使いシンプルにコンテンツを分別しています。

 

 

Spin

常に最新の音楽ニュースをお届けしているサイトのひとつ。

商品紹介ページなどではソーシャルメディアを利用することで、人気アイテムが分かりやすくまとめられています。

 

[参照元 : 25 Well-Desgined Magazine-Style Websites – Vandaley Design]