マガジンスタイルを取り入れた、Webデザイン20個まとめ(WordPressテーマ付)

pmagazine_top

 

雑誌を読んでいる感覚を、Webサイトに応用した、マガジンスタイルレイアウト。

Yahoooや楽天など、コンテンツが豊富なブログメディア、ニュースサイトなどで利用されているレイアウトです。

 

マガジンスタイルでは、それぞれのカテゴリーの新着、特集記事などをサムネイル、抜粋文と共にトップページに表示するのが特長です。

 

 

海外デザインブログVandelay Design Blogで、マガジンスタイルを利用しているWebサイトデザインをまとめたエントリー「Showcase of Magazine-Style Web Designs」が公開されていたので、今回はご紹介します。

 

 

後半では、 実際にマガジンスタイルを利用して作成された、WordPress用テーマ素材も一緒にまとめています。

今後のWebデザイン制作の参考にいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

雑誌を読んでいる感覚、マガジンスタイルレイアウトまとめ

 

The Style Spy

ヘッダー部分にインパクトたっぷりな、巨大タイポグラフィーロゴを配置した、女性ファッション関連のWebサイトデザイン。

余白をたっぷりと使った、読みやすいレイアウトで、各種ソーシャルメディアにも対応しています。

magazine-2

 

 

 

Toronto Standard

カナダ、トロントの地元情報などを中心にした、豊富なカテゴリーの新着記事などを、サムネイル付で紹介しているサイト。

フッター部分は、人気記事なども表示されており、実用性が高そうです。

magazine-7

 

 

 

Pacsun Music

音楽に特化した、ユニークなブログメディアサイトのひとつで、ストレスなく動画や音楽の視聴ができるように工夫されています。

magazine-16

 

 

 

The Brief

世界各地のホテルやイベント情報など、旅行に関するニュースを配信している、ミニマルデザインのWebサイト。

それぞれのカテゴリーをカラフルな色使いで分別しており、見ているだけでもたのしくなります。

magazine-8

 

 

 

Dazed

シンプルに、そして大胆にレイアウトされた、ナビゲーションメニューが特に印象的だった、ファッション系ニュースサイト。

スクロールすると、新しい記事を自動的に読み込む、Twitterのようなスクリプトが実装されています。

magazine-21

 

 

 

Melbourne Geek

グリッドレイアウトを利用して、すっきりと情報をまとめたブログメディアサイトのひとつ。

magazine-13

 

 

 

Lense.fr

今回ご紹介した中でも、特に余白スペースの取り方が参考になった、フランス発のWebサイトデザイン。

こちらもグリッドレイアウトを組み合わせて、多くのニュースを分かりやすく表示しています。

magazine-1

 

 

 

 Glomour

こちらもフランス、パリを拠点に配信されている、女性誌と連動したニュースサイト。

ピンク色をアクセントカラーに、あらゆる場所に使われています。

magazine-4

 

 

 

Beware Mag

アート性の高い情報を中心に配信している、ブログメディアのひとつで、トップページには特集記事を画像スライダーで表示しています。

magazine-14

 

[info_box]少し前の記事になりますが、以下はマガジンスタイルについて詳しく触れています。よろしかったらこちらも参考にしてみてはいかがでしょう。

 

ニュースポータルサイトなどで使用されているマガジンスタイル12のトレンド&具体例 – PhotoshopVIP[/info_box]

 

 

 

マガジンスタイルを利用した、WordPressテーマ素材まとめ

 

Magazeen

無料ダウンロード可能で、スタイリッシュな印象を与えてくれる、WordPressテーマ素材。

一緒にPSDファイルも収録されているので、デザイン編集も可能となっています。

320pmagazine

[button_square color=”green” url=”http://www.smashingmagazine.com/2009/02/23/magazeen-free-magazine-look-wordpress-theme/”] ダウンロード [/button_square]

 

 

 

Suburbia Theme

左サイドバーにナビゲーションメニューを配置した、無料WordPressテーマ素材。

新着記事2件は大きく表示、残りは小さくなど、ユーザーにも配慮したデザインが特長。

519pmagazine

[button_square color=”red” url=”http://wpshower.com/demo/?theme=suburbia”] デモページ [/button_square]  [button_square color=”green” url=”http://wpshower.com/themes/suburbia/”] ダウンロード [/button_square]

 

 

 

Sight

コンテンツを切り替え可能なボタンを配置した、ユニークなWordPressテーマ素材。

スクロールすると、自動的にコンテンツを読み込むスクリプトが実装されています。

[button_square color=”red” url=”http://sight.wpshower.com/”] デモページ [/button_square]  [button_square color=”green” url=”http://www.smashingmagazine.com/2010/11/24/sight-free-wordpress-3-0-1-ready-theme-for-magazines-and-blogs/”] ダウンロード [/button_square]

 

 

 

Marisa

やさしい色使いでデザインされた、グリッドレイアウトを使用したWordPressテーマ素材。

複数でブログメディアを運営するときなどに良いかもしれません。

1515pmagazine

[button_square color=”red” url=”http://themeforest.net/item/marisa-a-wordpress-magazine-theme/full_screen_preview/1408067″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/marisa-a-wordpress-magazine-theme/1408067?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Edge

レイアウトが3種類用意されており、14種類の色の組み合わせが可能となった、マガジンスタイルのWordPressテーマ素材。

2312pmagazine

[button_square color=”red” url=”http://themeforest.net/item/edge-magazine-blog-wordpress-theme/full_screen_preview/677103″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/edge-magazine-blog-wordpress-theme/677103?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Life – Multimedia Magazine Themes WP

管理画面から簡単にレイアウトや配色の変更などを可能にした、使い勝手の良いWordPressテーマ素材。

各ページで、異なる背景イメージが利用可能など、エンターテイメント性の強いテーマ。

2117pmagazine

[button_square color=”red” url=”http://themeforest.net/item/life-multimedia-maggazine-themes-wp-20-in-1/full_screen_preview/723388″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/life-multimedia-maggazine-themes-wp-20-in-1/723388?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Kernel

あらゆるデバイスにひとつのテーマで対応する、レスポンシブデザインで作成されたWordPressテーマ。

新着、人気記事などのウィジェットも標準装備となっています。

2014pmagazine

[button_square color=”red” url=”http://themeforest.net/item/kernel-premium-wordpress-blog-magazine-theme-/full_screen_preview/857077″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/kernel-premium-wordpress-blog-magazine-theme-/857077?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

I love it!

5種類のページレイアウトや、100種類以上のショートコードなど、更新していくことも前提に作成された、WordPressテーマ素材のひとつ。

2215pmagazine

[button_square color=”red” url=”http://themeforest.net/item/i-love-it-content-sharing-wordpress-theme/full_screen_preview/698475″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/i-love-it-content-sharing-wordpress-theme/698475?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Construct

こちらもウィンドウ幅に応じて、レイアウトが切り替わる、レスポンシブデザインを取り入れたWordPresテーマ素材。

ポートフォリオサイトとしても利用できそうな、レイアウトが印象的。

1615pmagazine

[button_square color=”red” url=”http://themeforest.net/item/construct-a-responsive-wordpress-blogfolio-theme/full_screen_preview/1262912″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/construct-a-responsive-wordpress-blogfolio-theme/1262912?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Swagger Magazine

レーティング評価システムに力を入れた、WordPressテーマ素材で、音楽やファッション、アートなど幅広い分野に利用できるのではないでしょうか。

917pmagazine

[button_square color=”red” url=”http://themeforest.net/item/swagmag-wordpress-magazinereview-theme/full_screen_preview/1576310″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/swagmag-wordpress-magazinereview-theme/1576310?ref=showhey0705″] ダウンロード [/button_square]

 

 

 

Bangkok Press

メディアサイトで利用することを想定して、デザインされたWordPressテーマ素材。

管理画面からの操作が楽なだけでなく、あらゆるデバイスに対応したレイアウトスタイルが特長です。

817pmagazine

[button_square color=”red” url=”http://themeforest.net/item/bangkok-press-responsive-news-editorial-theme/full_screen_preview/1613446″] デモページ [/button_square] [button_square color=”green” url=”http://themeforest.net/item/bangkok-press-responsive-news-editorial-theme/1613446?ref=showhey0705″] ダウンロード [/button_square]

 

 

[fancy_box]

素材購入方法について

今回ご紹介したアイテムは、どれも素材販売サイト「ThemeForest」よりセレクトされています。

英語サイトとなりますが、購入方法については以下のサイトが参考になりました。

 

無料で商用利用可の有料サイトテンプレートファイルを「ThemeForest」からダウンロードする方法 – Gigazine [/fancy_box]

 

[参照元 : Showcase of Magazine-Style Web Designs – Vandelay Design Blog]

[参照元 : 30 Free and Premium Magazine Style WordPress Themes – DesignModo]