WordPress

ワードプレスで写真ギャラリーを作成する方法!おすすめのプラグインを紹介

ワードプレスで写真ギャラリーを作成する方法!おすすめのプラグインを紹介

ワードプレスで写真やイラストのギャラリーを作ることで、ポートフォリオサイトや、ECサイトを構築することができます。

ギャラリーを作成する方法は、大きく分けて3つあります。

こちらでは、ギャラリーを作成する方法と、作成する際の注意点について解説したいと思います。

ワードプレスのギャラリーとは

ワードプレスのギャラリーとは、複数の写真やイラストを1つの画像のようにして、一覧で表示させる機能のことです。

ファッション系のECサイトや、旅行やグルメなど、写真を多く使うブログで主に使われます。

ギャラリーは、複数の写真をコンパクトなスペースで表示できるため、ユーザーが画面をスクロールする手間を軽減することができ、より多くのコンテンツを見てもらえる効果が期待できます!

また、ブログのデザイン面でもスタイリッシュな演出を実現することができる機能です。

ワードプレスでギャラリーを作る方法

ワードプレスでギャラリーを作成する方法は、主に以下の3つです。

  • ワードプレス標準の「ギャラリー」ブロックで作成
  • プラグインを使って作成
  • ギャラリー風のテーマで作成

それぞれに、メリット・デメリットがあります。

デザインや機能にこだわらないのであれば、標準のギャラリーブロックが簡単にギャラリーが作成できるので、おすすめです。

サムネイルやスライド機能、表示時間など、細かいエフェクトをカスタマイズしたいなら、プラグインを使うのがおすすめです^^

ワードプレス標準の「ギャラリー」ブロックで写真ギャラリーを作成

ワードプレスでは、標準でも「ギャラリー」機能が搭載されています。

プラグインのように高度でスタイリッシュな設定はできないですが、シンプルなギャラリーを作成するのに向いています。

  1. 記事編集画面で「ギャラリー」ブロックをクリック
  2. メディアライブラリが開かれるので、ギャラリーに掲載したい写真やイラストを選択、またはアップロード
  3. ギャラリーを挿入をクリック

標準のギャラリー機能では、 メディアライブラリにある既存の写真やイラストを使ってギャラリーを作成することもできます。

また、CSSを編集することで、ギャラリーをカスタマイズすることもできます

「カラム数」「画像サイズ」などが設定可能です。

ギャラリーでは、それぞれの画像にリンクを設定することができますが、標準の「ギャラリー」ブロックでは、リンクを設定することはできません

リンクを設定したい場合には、プラグインを使うようにしましょう!

プラグインを使ってギャラリーを作成

ワードプレスのプラグインを使うことで、スタイリッシュなギャラリーを、細かい設定部分まで作成することができます。

おすすめのプラグインには次のようなものがあります。

  • NextGEN Gallery
  • Easy FancyBox
  • Robo Gallery
  • FooGallery
  • Photo Gallery by 10web
  • Unite Gallery Lite
  • Envira Gallery

NextGEN Gallery

NextGENGallerry

NextGEN Galleryは、表示方法をスライドショーやサムネイル形式、イメージブラウザギャラリーなどから選択することができるプラグインです。

ギャラリープラグインの中でも、高い人気とダウンロード数を誇っています。

EasyFnacyBox

EasyFancyBox

EasyFancyBoxは、クリックすると画像やサムネイルをポップアップさせられる機能があるプラグインです。

ページを切り替えることなく、画像を拡大することができるため、ユーザーの離脱率の抑制にも効果があります。

RoboGalley

RoboGalley

RoboGalleryは、簡単にカスタマイズが可能で初心者におすすめのプラグインです。

ギャラリーごとにリンクを設定することができます。

FooGallery

FooGallery

FooGalleryは、サムネイルのサイズや間隔、配置など、細かい設定が可能なプラグインです。

枠線の装飾機能もあるため、おしゃれなギャラリーが作成できます。

Photo Gallery by 10Web

PhotoGalleryby10Web

Photo Gallery by 10Webは、数種類のテンプレートからシンプルな操作でギャラリーを作成することができるプラグインです。

レスポンシブにもしっかりと対応しているため、スマホでのレイアウトくずれも心配いりません。

Unite Gallery Lite

UniteGalleryLite

Unite Gallery Liteは、グリッドやカルーセル、スライダーなど、複数のテンプレートからギャラリーを作成できるプラグインです。

ショートコードを設置するだけで、簡単にブログにギャラリーを作成することができます。

Envira Gallery

Envira Gallery

Envira Galleryは、ドラッグ&ドロップで簡単にギャラリーが作成できるプラグインです。

動作がとても軽く、ユーザーにストレスを与えない設計になっています。

ギャラリーが作成できるプラグインは、ご覧のようにたくさんの種類があります。

無料で使えるものばかりですので、まずは使い心地を試してみるといいですね!

その際、後述する「ギャラリーを作る際の注意点」を考慮するようにしましょう。

特に、レイアウト崩れや、処理速度の遅延対策は重要です。

ギャラリー風のテーマ

ワードプレスには、もともとのレイアウトが「ギャラリー風」のようなテーマもあります。

代表的なものは次の通りです。

  • Pixgraphy
  • KALE
  • Espied
  • Piclectic
  • Resi

Pixgraphyは、カートやフォームなどのプラグインとの互換性もあるため、ECサイトに使うことができるテーマです。

また、グラフィックデザイナーやフォトグラファーのポートフォリオサイトとしても使うことができます。

KALEは、画像のレイアウトが自動でバランス良く配置されるため、デザイン知識がなくても、スタイリッシュなギャラリーが作成できるテーマです。

設定が簡単なため、初心者でも導入しやすいテーマです。

Espiedは、グラフィックスデザイナーや、フォトグラファーのポートフォリオサイトに適したテーマです。

スマホやタブレットの画面表示にも対応しています。

Piclecticは、投稿した記事のアイキャッチがトップページでブロックの形で表示されます。

とてもスタイリッシュで、ギャラリー風のレイアウトが可能です。

Resiは、グラフィックデザイナーやフォトグラファーのポートフォリオサイトとして使えるテーマです。

正方形だけでなく、長方形など、漫画のコマ割りのように自由なレイアウトが可能です。

ワードプレスでギャラリーを作る際の注意点

ワードプレスでギャラリーを作る際には、次の点に注意する必要があります。

  • 画像サイズ(容量)が大きくなりすぎないようにする
  • 異なるデバイスで表示確認する
  • 画像の縦横比に注意する

まず、もっとも重要なことが、レイアウト崩れに注意することです。

パソコンだけでなく、スマホやタブレットなど異なるデバイスでもきちんとギャラリーが表示されているか、スライド機能などに問題がないかを確認します。

特に、画像幅を設定していると、スマホで画像が画面幅からはみ出してしまうことが多くあります

また、ギャラリーを使うということは、必然的にたくさんの画像を表示することになります。

ページの表示速度の遅延につながりやすいということです。

Googleは、ページの表示速度を重要視しています。

また実際に、ページの表示に3秒以上かかるだけで、離脱率が50%を超えるというデータがあります。

画像の圧縮や、適正なサイズについてはこちらの記事をご覧ください。

▶︎▶︎ワードプレスのメディアライブラリの整理術!画像の容量を減らしてアップロード!

ワードプレスでギャラリーを作るには標準機能とプラグインどちらを使うといい?

ワードプレスでギャラリーを作るには、標準の「ギャラリー」ブロックを使うか、プラグインを使うのがおすすめです。

標準機能でギャラリーを作るメリット・デメリットには次のようなものがあります。

  • テーマやプラグインの互換性を考える必要がない
  • プラグインのインストールによるサーバーの負荷を考えなくていい
  • 設定の自由度が低い

一方で、プラグインでギャラリーを作るメリット・デメリットには次のようなものがあります。

  • シンプルな操作で、スタイリッシュなギャラリーが作成できる
  • 高度な演出など、ポートフォリオやECサイトにも使える
  • プラグインの入れすぎによるサイトの表示速度の遅延の原因になる
  • テーマや他のプラグインとの互換性を考慮する必要がある

どちらにも、良い点、悪い点があるため、目的にあった方法を選ぶようにしましょう^^

ワードプレスで写真ギャラリーを作成する方法!おすすめのプラグインを紹介のまとめ

ワードプレスのギャラリーとは、複数の写真やイラストを1つの画像のようにして、一覧で表示させる機能のことです。

ファッション系のECサイトや、旅行やグルメなど、写真を多く使うブログで主に使われます。

ワードプレスで写真ギャラリーを作成する方法には次のようなものがあります。

  • ワードプレス標準の「ギャラリー」ブロックで作成
  • プラグインを使って作成
  • ギャラリー風のテーマで作成

シンプルなギャラリーを作成するだけなら、ワードプレス標準の「ギャラリー」ブロックを使うのがおすすめです。

スタイリッシュなデザインや細かい演出設定にこだわりたい場合は、プラグインを使いましょう!

また、ワードプレスでギャラリーを作成する際には、次のような点に注意が必要です。

  • 画像サイズ(容量)が大きくなりすぎないようにする
  • 異なるデバイスで表示確認する
  • 画像の縦横比に注意する

最後までご覧いただき、ありがとうございました!

ワードプレスの初期設定や使い方について詳しくはこちらをご覧ください!

▶︎▶︎ワードプレスの初期設定と使い方を初心者向けに解説!