Webサイトやブログなどで、コンテンツを分かりやすく、見やすく表示する方法のひとつとして、垂直/水平方向に分割するガイドラインを使ったグリッドシステムがあります。
このグリッドに、Webデザイントレンドでもあるレスポンシブデザインを加えることで、より動きのある、ダイナミックなサイトを制作することができます。
海外デザインブログWPdressingで、グリッドシステムを利用したWordPressプレミアムテーマを３０個まとめたエントリー「30+ Grid-Based WordPress Themes with Responsive Layout」が公開されていたので、今回はご紹介します。
パソコンだけでなく、iPhoneやiPadなどさまざまなデバイスに応じて、レイアウトを変化させながら、グリッドレイアウトを保つユニークなWordPressテーマ素材が多くまとめられています。
詳細は以下から。
グリッド＆レスポンシブデザインの組合わせ、優良WordPressテーマ素材まとめ
制作実績や、撮影した写真などをまとめるポートフォリオサイトに適した、シンプルなテーマ素材。
100種類以上のショートコードや、全16ページのレイアウトが一緒に収録されています。
[button_square color=”green” url=”http://themeforest.net/item/nemesis-clean-design-for-creative-designer/full_screen_preview/2577225?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/nemesis-clean-design-for-creative-designer/2577225?ref=showhey0705″] ダウンロードページ [/button_square]
アニメーションを利用した、ユーザーを飽きさせない仕掛けがたくさんな、WordPressテーマ素材。
ダッシュボード画面も非常によく作りこまれており、ボタン操作で自由なレイアウトを作成可能。
[button_square color=”green” url=”http://themeforest.net/item/angular-responsive-portfolio/full_screen_preview/1415600?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/angular-responsive-portfolio/1415600?ref=showhey0705″] ダウンロードページ [/button_square]
イメージ写真を強調したコンテンツ、サイト作成に適した、ダイナミックな動きが魅力のWPテーマ素材。
[button_square color=”green” url=”http://www.mojo-themes.com/item/swap-minimal-responsive-wp-portfolio-theme/demo/”] デモページ [/button_square] [button_square color=”orange” url=”http://www.mojo-themes.com/item/swap-minimal-responsive-wp-portfolio-theme”] ダウンロードページ [/button_square]
Adapt, a Responsive WordPress Theme
フルスクリーン幅で表示されるレスポンシブスライダーや、CSS3のスタイリングなど、質感にこだわったWordPressテーマ素材、個人的にメモとしてエントリー。
[button_square color=”green” url=”http://themeforest.net/item/adapt-a-responsive-wordpress-theme/full_screen_preview/2564586?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/adapt-a-responsive-wordpress-theme/2564586?ref=showhey0705″] ダウンロードページ [/button_square]
レスポンシブデザインに対応した、ショッピング決済も可能なEコマースWordPressテーマ素材。
グリッドを利用することで、すっきりと商品を並べることができそうですね。
[button_square color=”green” url=”http://themeforest.net/item/kinetico-responsive-wordpress-ecommerce/full_screen_preview/2655335?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/kinetico-responsive-wordpress-ecommerce/2655335?ref=showhey0705″] ダウンロードページ [/button_square]
ポートフォリオサイトにも良いのですが、シンプルに好きな写真を投稿するだけのギャラリーサイトにも適したWPテーマ素材。
[button_square color=”green” url=”http://themeforest.net/item/wowway-interactive-responsive-portfolio-theme/full_screen_preview/2374321?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/wowway-interactive-responsive-portfolio-theme/2374321?ref=showhey0705″] ダウンロードページ [/button_square]
サイズの異なるサムネイルを組み合わた、ハイブリッド型グリッドレイアウトのWPテーマ素材。
ブログメディアサイトを運営しても、面白いレイアウトではないでしょうか。
[button_square color=”green” url=”http://themeforest.ne/item/daisho-flexible-wordpress-portfolio-theme/full_screen_preview/2585124?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/daisho-flexible-wordpress-portfolio-theme/2585124?ref=showhey0705″] ダウンロードページ [/button_square]
清潔感のあるミニマルスタイルでレイアウトされた、イメージ写真などの投稿に優れたWPテーマ素材。
[button_square color=”green” url=”http://themeforest.net/item/twin-creative-portfolio-and-photography/full_screen_preview/2355772?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/twin-creative-portfolio-and-photography/2355772?ref=showhey0705″] ダウンロードページ [/button_square]
Helious Grid Style Portfolio Creative Template
ホワイト、ダークの2色から選択可能で、CSS３によるアニメーション、スタイリングが素敵なWPテーマ素材。
[button_square color=”green” url=”http://themeforest.net/item/helious-grid-style-portfolio-creative-template/full_screen_preview/438263?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/helious-grid-style-portfolio-creative-template/438263?ref=showhey0705″] ダウンロードページ [/button_square]
撮影した写真を友人などに公開する、ギャラリーサイトなどに活用したいWordPressテーマ。
シンプルながら、ショートコードが多数収録されており、記事投稿にも便利です。
[button_square color=”green” url=”http://themeforest.net/item/desat-responsive-portfolio-theme/full_screen_preview/2218114?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/desat-responsive-portfolio-theme/2218114?ref=showhey0705″] ダウンロードページ [/button_square]
左固定サイドバーを利用し、コンテンツ部分をディスプレイに応じて変化させる、レスポンシブWPテーマ素材。
[button_square color=”green” url=”http://themeforest.net/item/elastico-responsive-fullscreen-portfolio-wp-theme/full_screen_preview/2705856?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/elastico-responsive-fullscreen-portfolio-wp-theme/2705856?ref=showhey0705″] ダウンロードページ [/button_square]
CSS3の魅力を最大限に利用してスタイリングされた、ギャラリースタイルのWPテーマ素材。
[button_square color=”green” url=”http://www.elegantthemes.com/demo/?theme=Notebook”] デモページ [/button_square] [button_square color=”orange” url=”http://www.elegantthemes.com/gallery/notebook/”] ダウンロードページ [/button_square]
サムネイルをクリックすると、アニメーションを使ってサイズ変更が行われ、コンテンツ抜粋文が表示されます。
やや画像読み込み時間に問題あり？かもしれません、。
[button_square color=”green” url=”http://themeforest.net/item/bookcase-wordpress-portfolio-theme/full_screen_preview/630145?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/bookcase-wordpress-portfolio-theme/630145?ref=showhey0705″] ダウンロードページ [/button_square]
こちらも左固定ナビゲーションメニューで操作しやすい、ギャラリー、ポートフォリオにいかがでしょう。
[button_square color=”green” url=”http://themeforest.net/item/stilo-responsive-portfolio-wordpress-them/full_screen_preview/1933753?ref=showhey0705″] デモページ [/button_square] [button_square color=”orange” url=”http://themeforest.net/item/stilo-responsive-portfolio-wordpress-them/1933753?ref=showhey0705″] ダウンロードページ [/button_square]
グリッドレイアウトとレスポンシブデザインを組み合わせたシンプルなテーマ素材で、こちらは無料ダウンロード可能となっています。
[button_square color=”blue” url=”http://www.eleventhemes.com/gridly/”] デモページ [/button_square] [button_square color=”red” url=”http://wpdressing.com/go/gridly/”] 無料ダウンロードページ [/button_square]
[fancy_box]
素材購入方法について
今回ご紹介したアイテムは、どれも素材販売サイト「ThemeForest」よりセレクトされています。
英語サイトとなりますが、購入方法については以下のサイトが参考になりました。
無料で商用利用可の有料サイトテンプレートファイルを「ThemeForest」からダウンロードする方法 – Gigazine[/fancy_box]
サムネイル@ : Size Mttrs – Responsive Portfolio – ThemeForest.net
参照元リンク : Grid-Based Themes with Responsive Layout – WPdressing.com
