WordPressの可能性がさらに広がる!Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ

WordPressは企業サイトでも個人ブログでも非常に便利なツールですが、プラグインを加えるとその可能性はさらに広がります。最近のWebデザインのトレンドを効果的に取り入れる便利なプラグインを紹介します。

WordPressの便利なプラグインのまとめ

イラスト: わぷー、公式キャラクターがいたんですね

あらゆるテーマで自由なレイアウトを作成「Elementor」

サイトのキャプチャ

Elementor
Elementor -WordPress.org

WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できます。これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。
さまざまなデザインのランディングページを必要とするサイトにも便利です。

レイアウトの変更は簡単、ドラッグ&ドロップで要素やコンポーネントを配置し調整できます。

サイトのキャプチャ

ヘッダ画像の高さや幅を変えたり、ブラウザいっぱいに配置するのも可能

ページを公開する前に、さまざまなレイアウトを試すことができます。

サイトのキャプチャ

レイアウトのサンプル

ページごとに異なるCSSやJavaScriptを使用できる「CJT」

サイトのキャプチャ

CSS & JavaScript Toolbox
CSS & JavaScript Toolbox -WordPress.org

WordPressで特定のページだけに個別のスタイルシートやスクリプトを使いたい、HTML, CSS, JS, PHPを埋め込みたい、ヘッダを変えたり、共通のエレメントを使いたい、しかも特定の1ページや複数ページにも適用したい、それらを叶えることができるプラグイン。
ページごとに異なるCSSやJavaScriptが必要なサイトに便利です。

使い方は簡単で、コード編集と適用ページ一覧のパネルで操作します。

サイトのキャプチャ

CSS & JavaScript Toolboxのパネル

コードは、CSS & JavaScript Toolboxの管理画面で一元管理ができます。

  • 全てのコードのアクティブ化・非アクティブ化
  • 全てのコードの配置をヘッダ・フッタに
  • 全てのコードのバックアップ・削除
サイトのキャプチャ

左から、アクティブ化の管理、ヘッダとフッタの管理、全コードのバックアップ管理

レスポンシブとも相性がよいレイアウト「Masonry Layout」

サイトのキャプチャ

WP Masonry Layout
WP Masonry Layout -WordPress.org

トップページや一覧ページで人気の高いレイアウトが、カード型のMasonry Layoutです。Pinterestのようなギャラリーサイトだけでなく、ショッピングサイトやブログなどでも数多く採用されています。レスポンシブとも相性がよいというのも人気の要因の一つでしょう。
そんなMasonry LayoutをWordPressで簡単に利用できます。

さまざまな用途のレイアウトが用意されています。

サイトのキャプチャ

デモページ: Default

デフォルトはブログなどの記事を伴ったカード型レイアウトで、他にもギャラリー用・コーマース用・Pinterest風などが用意されています。

サイトのキャプチャ

デモページ: FishTail

無限スクロール・ロードボタンを実装「Infinite Scroll」

サイトのキャプチャ

Ajax Pagination and Infinite Scroll
Ajax Pagination and Infinite Scroll -WordPress.org

WordPressの記事ページ・固定ページ・検索ページ・カスタムポストにページネーションを使って無限スクロールを実装できるプラグイン。

ページを読み込む方法は、3種類が用意されています。

  • 無限スクロール
  • ページネーション
  • ロードボタン

無限スクロールはTwitterのように同種のコンテンツが並列に配置されているものに適しており、記事ページや固定ページのように異なるコンテンツにはページネーションやロードボタンが適しています。

サイトのキャプチャ

デモページ: ページネーション

ページネーションでは読み込むと次ページの最上部に移動し、ロードボタンではその場所にコンテンツが追加されるエフェクトです。

サイトのキャプチャ

デモページ: ロードボタン

ブラウザいっぱいに見せるさまざまなテクニック「WP FullPage」

サイトのキャプチャ

WP FullPage
WP FullPage -WordPress.org

コンテンツをブラウザいっぱいに表示し、さまざまなスクロールエフェクトを利用できるプラグイン。

デモでは垂直・水平方向のパララックスエフェクト、自動スクロール、記事一覧の垂直・水平コンテンツなど、通常のWordPressとは異なるエフェクトでコンテンツを表示します。

サイトのキャプチャ

デモページ: 垂直スクロール

スクロールで表示されるセクションごとにカラーを変更して表示したり、フルに表示したページにフッタだけを押し出すように配置したり、ブラウザいっぱいに表示する時のさまざまなテクニックが用意されています。

サイトのキャプチャ

デモページ: フルページ with フッタ

画像にインパクトを与えて魅力的に「Twotone FX」

サイトのキャプチャ

Twotone FX -GitHub
Twotone FX -WordPress.org

WordPressの管理画面、メディアライブラリ内にある画像にDuoToneのエフェクトを適用できるプラグイン。カラーの基本的な選び方は、カラーホイールにおける補色の組み合わせです。
参考: 色の組み合わせ方がよく分かる!さくっと簡単に使える便利なカラーツール

DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いインパクトを与えます。フラットデザインの方向性とは異なりますが、非常に魅力的なデザインになります。
画像にDuoToneを適用した例を見てみましょう。

サイトのキャプチャ

Spotify Year in Music

DuoToneはフルスクリーンの画像をより魅力的にしたり、面白い背景を作ったり、UI要素を強調したり、デザインの特定部分に強調を加えることもできます。

サイトのキャプチャ

ARTE CREATIVE

CSSアニメーションを簡単に実装できる「Animate It!」

サイトのキャプチャ

Animate It!
Animate It! -WordPress.org

ホバー・クリック・スクロールをトリガーにした50種類以上のCSSアニメーションを簡単に実装できるプラグイン。

CSSアニメーションのベースは「animate.css」、トリガーのベースは「animo.js」が使われており、記事ページや固定ページで簡単に利用できるようになります。デモページではさまざまなアニメーションを楽しめます。

サイトのキャプチャ

デモページ

アニメーションを組み合わせて利用したい時は、ジェネレータが便利です。実際の動きを確認しながら、記述するclass名を生成できます。

サイトのキャプチャ

ジェネレーター

top of page

©2017 coliss