WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ
Post on:2016年10月28日
sponsors
WordPressは企業サイトでも個人ブログでも非常に便利なツールですが、プラグインを加えるとその可能性はさらに広がります。最近のWebデザインのトレンドを効果的に取り入れる便利なプラグインを紹介します。
イラスト: わぷー、公式キャラクターがいたんですね
あらゆるテーマで自由なレイアウトを作成「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で簡単に利用できます。
さまざまな用途のレイアウトが用意されています。
デフォルトはブログなどの記事を伴ったカード型レイアウトで、他にもギャラリー用・コーマース用・Pinterest風などが用意されています。
無限スクロール・ロードボタンを実装「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とは異なるエフェクトでコンテンツを表示します。
スクロールで表示されるセクションごとにカラーを変更して表示したり、フルに表示したページにフッタだけを押し出すように配置したり、ブラウザいっぱいに表示する時のさまざまなテクニックが用意されています。
画像にインパクトを与えて魅力的に「Twotone FX」
Twotone FX -GitHub
Twotone FX -WordPress.org
WordPressの管理画面、メディアライブラリ内にある画像にDuoToneのエフェクトを適用できるプラグイン。カラーの基本的な選び方は、カラーホイールにおける補色の組み合わせです。
参考: 色の組み合わせ方がよく分かる！さくっと簡単に使える便利なカラーツール
DuoToneのカラーパレットは存在自体は昔からありましたが、最近の使い方としてはフルスクリーンの画像にDuoToneのグラデーションを加えて強いインパクトを与えます。フラットデザインの方向性とは異なりますが、非常に魅力的なデザインになります。
画像にDuoToneを適用した例を見てみましょう。
DuoToneはフルスクリーンの画像をより魅力的にしたり、面白い背景を作ったり、UI要素を強調したり、デザインの特定部分に強調を加えることもできます。
CSSアニメーションを簡単に実装できる「Animate It!」
Animate It!
Animate It! -WordPress.org
ホバー・クリック・スクロールをトリガーにした50種類以上のCSSアニメーションを簡単に実装できるプラグイン。
CSSアニメーションのベースは「animate.css」、トリガーのベースは「animo.js」が使われており、記事ページや固定ページで簡単に利用できるようになります。デモページではさまざまなアニメーションを楽しめます。
アニメーションを組み合わせて利用したい時は、ジェネレータが便利です。実際の動きを確認しながら、記述するclass名を生成できます。
sponsors
