WordPressを活用した写真ギャラリーページの作り方ガイド|おすすめプラグインもご紹介【2024年最新版】

WordPressを活用した写真ギャラリーページの作り方

ホームページ上でいかに上手に商品・サービスのイメージ画像を見せていくかは、Web担当者にとって重要な課題。そこで活用していきたいのがWordPressのギャラリー機能です。実はビジネス系サイトでも様々な場面で利用されています。

例えば、ランディングページやECサイトで、複数の商品画像で多角的に見せていくコンテンツをよく見ると思います。これもギャラリー機能を使って作成されたもの。
また、ギャラリー機能を使って以下のようなコンテンツを作成することも可能です。

  • 不動産物件の部屋や間取りを紹介する
  • ジムのトレーニングマシン・器具の種類を見せる
  • レンタルスペースの各部屋の内装・設備を見せる

このようにギャラリー機能を使うことによって、1つのページに多くのイメージ情報をいれることができます。また、最適化されたギャラリーは、高品質な画像をユーザーに負担を感じさせることなく見せることができます。

WordPressではコストをかけず簡単にギャラリーを実装可能ですので、今回はWordPressで「ギャラリー」を作成する方法と、おすすめのプラグインをご紹介します。

【無料】WordPressでの作り方について相談する

目次
  1. 1. WordPressの「ギャラリー」機能で作る方法
    1. 1-1. 1.編集画面から「メディアを追加」をクリック
    2. 1-2. 2.画像を選択しギャラリーを作成
    3. 1-3. 3.ギャラリーを編集する
    4. 1-4. 4.完成したギャラリーを確認する
    5. 1-5. WordPressの標準機能でギャラリーを作るメリット
    6. 1-6. WordPressの標準機能でギャラリーを作るデメリット
  2. 2. WordPressのプラグインを活用して作る方法
    1. 2-1. プラグインのインストール方法
  3. 3. 写真ギャラリーに適したプラグイン5選
    1. 3-1. Easy FancyBox
    2. 3-2. NextGEN Gallery
    3. 3-3. Robo Gallery
    4. 3-4. FooGallary
    5. 3-5. Photo Gallery by 10web
  4. 4. 写真ギャラリーサイトを作る際の注意点
    1. 4-1. 画像の縦横比に注意しよう
    2. 4-2. 画像サイズは適切なものを使おう
    3. 4-3. スマホで閲覧した際の見え方に注意しよう
  5. 5. WordPressを活用した写真ギャラリーページの作り方まとめ

WordPressの「ギャラリー」機能で作る方法

便利なプラグインが数多く提供されているためあまり知られていないのですが、WordPressにはギャラリー機能が標準で搭載されています。
プラグインのようにあまり細かな設定はできませんが、WordPress初心者でも簡単に設置できる便利な機能です。

1.編集画面から「メディアを追加」をクリック

WordPressの「ギャラリー」機能で作る方法_1

投稿や固定ページを作成する編集画面の左上に「メディアを追加」というボタンがあります。
こちらのボタンをクリックすると、メディアを挿入する画面に移動します。

2.画像を選択しギャラリーを作成

WordPressの「ギャラリー」機能で作る方法_2

メディアを挿入する編集画面のサイドバーに「ギャラリーを作成」という選択肢があります。これをクリックすると「ギャラリーを作成」という画面になりますので、ギャラリーに表示したい画像をクリックします。
画像を選択し終わったら、右下にある「ギャラリーを作成」というボタンをクリックすると、ギャラリーが作成されます。

3.ギャラリーを編集する

WordPressの「ギャラリー」機能で作る方法_3

次に「ギャラリーを編集」という画面に移行しますので、ここでカラム数や画像の表示サイズを設定します。
最後に「ギャラリーを挿入」ボタンを押すとページ編集画面にギャラリーが挿入されます。

4.完成したギャラリーを確認する

WordPressの「ギャラリー」機能で作る方法_4

こちらの画像が実装されたページの完成イメージです。

WordPressの標準機能でギャラリーを作るメリット

ここまでご説明したプラグインを使わないギャラリー作成方法は下記のような場合に有効です。

  • 自分の判断ではプラグインをインストールできない
  • テーマや他のプラグインとの兼ね合いでギャラリーが上手く導入できない

プラグインの使用に制限がある状況などでも活用できるというメリットもあります。
自社サイトの環境に合わせて上手に使い分けましょう。

WordPressの標準機能でギャラリーを作るデメリット

このように非常に簡単にギャラリーを設置できるのがこの方法を使うメリットですが、一方で細かな設定はできないというデメリットもあります。

例えば、下の画像のようにサムネイルをクリックすると黒色半透明の背景の上に拡大画像を表示させ、画面遷移せずになめらかに画像を閲覧できる機能などは搭載されていません。

WordPressの標準機能でギャラリーを作るデメリット

細かな設定やカスタマイズが必要な場合は、この後ご説明するプラグインを使ったギャラリー実装方法をおすすめします。

【無料】WordPressでの作り方について相談する

WordPressのプラグインを活用して作る方法

ギャラリー作成方法は、WordPress標準搭載のギャラリー機能以外にプラグインを使って作成する方法があります。
プラグインを紹介する前に、プラグインのインストール方法を少しおさらいしておきましょう。

プラグインのインストール方法

プラグインのインストール方法_1

管理画面ダッシュボードのサイドバーから「プラグイン」を選択します。
プラグインの編集画面丈夫にある「新規追加」のボタンをクリックします。

プラグインのインストール方法_2

「プラグインを追加」という画面に移行したら、右側上部にある検索欄に追加したいプラグイン名、もしくは「Gallery」などのキーワードを入力します。インストールしたいプラグインが表示されたら、それぞれのプラグインの枠右上に表示されている「今すぐインストール」というボタンをクリックします。

プラグインのインストール方法_3

インストールが完了すると、右上のボタンが「有効化」に変わりますので、こちらをクリックするとプラグインが有効化されます。

お待たせしました。ここからギャラリーページ向けのプラグインをご紹介していきます。

【無料】WordPressでの作り方について相談する

写真ギャラリーに適したプラグイン5選

Easy FancyBox

Easy FancyBox

Easy FancyBox
Easy FancyBox DEMOサイト

画像をふわっと美しく拡大表示できるギャラリープラグインです。
jpg・gif・pngといった一般的な画像ファイル形式以外にも、pdf・swf・svgなど様々な形式に対応しています。
さらに、YouTube・Vimeo・Dailymotionといった動画をギャラリーに追加することも可能。

非常に便利なプラグインですが、他のプラグインと相性の悪い場合があるので注意しましょう。
不具合が出る場合は、他のプラグインの利用をおすすめします。

NextGEN Gallery

NextGEN Gallery

NextGEN Gallery
NextGEN Gallery DEMOサイト

多機能な性能で非常に人気の高いプラグインです。
ギャラリーについてはサムネイル型・スライドショー型などタイプを選択可能です。

このプラグイン一つで、ギャラリーとスライドショーの両方が使えるようになるだけでなく、タグクラウド機能、アルバム機能なども搭載されています。

いろいろな機能を追加したいけれども、プラグインのインストール数を最小限にしたい場合などにもおすすめです。

Robo Gallery

Robo Gallery

Robo Gallery
Robo Gallery DEMOサイト

グリッドデザインが標準搭載されているプラグインです。
グリッドデザインとは、Webデザインの手法の一つで、ページを格子状(グリッド)に分割し、画像やテキストエリアなどの要素を組み合わせて配置していく方法です。

パソコンとモバイル端末の両方で閲覧可能なレスポンシブデザインに対応していますので、モバイル端末でも美しくグリッドデザインが実装できます。

そのほか

  • ギャラリーの横幅
  • 配置位置
  • 画像間の余白の設定
  • 枠の角丸設定
  • 枠線の有無

など様々な項目を設定できます。有料版にすればさらに細かな設定が可能。
グリッドデザインを実装可能な数少ない無料プラグインの一つなので、ギャラリーのデザインに特徴を持たせたい場合などに特におすすめです。

FooGallary

FooGallary

FooGallery
FooGallery DEMOサイト

カスタマイズの自由度が高いことで人気のプラグインです。
同じドメイン内で、ギャラリーを複数作成することができるのも便利なポイントです。
その他にも主に以下のような設定項目があります。

  • 左端、右端、センターなど表示位置
  • 画像がローディングされるときのインジケーター
  • サムネイル画像間のスペース
  • 角丸枠、丸枠などサムネイル画像の表示スタイル
  • ポップアップ表示したときの画像サイズ

注意点としては、FooGallary単体では動かないので「FooBox Image Lightbox」というプラグインも一緒にインストールする必要があるということ。

無料のプラグインの中でも機能の充実度はトップクラスなので、ギャラリーに細かな設定を施したいという場合は非常におすすめのプラグインです。

Photo Gallery by 10web

Photo Gallery by 10web

Photo Gallery by 10web
Photo Gallery by 10web DEMOサイト

非常にデザイン性の優れたギャラリープラグインです。
ギャラリーのテンプレートが用意されており、直感的にデザインを選ぶことができるので、英語で細かな設定をするのは不安という方には、特におすすめのプラグインです。

画像サイズを自由に変更したり、丸枠や角丸枠のギャラリーを作成するといった基本機能の他、画像にウォーターマーク(透かし状の著作権表示)や、透かし状のリンク広告を設置できる機能も搭載しています。

もちろんレスポンシブ対応ですので、モバイル表示もバッチリです。

【無料】WordPressでの作り方について相談する

写真ギャラリーサイトを作る際の注意点

画像の縦横比に注意しよう

正しく画像サイズ設定が行われていないと、画像の縦横比が変わってしまう場合があります。画像のサイズ調整を行う場合に「画像の縦横比を保持する」といった項目にチェックをしておくと、縦横比が崩れることはありません。

また、縦横比がおかしくなる原因はプラグイン側の設定であるケースも多いです。
縦横比の数値入力でで迷った場合は、例えば、横幅100%と入力するなど、ピクセルで設定するのではなくパーセントで設定にしてみましょう。
レスポンシブ対応しているギャラリーでは端末によって自動的にサイズを調整してくれます。

非常に重要なのはギャラリーを導入する前に、画像サイズの統一事項を決めておくこと。
後からサイズ変更するのは、無駄なコストを発生させてしまいます。

画像サイズは適切なものを使おう

2018年にGoogleがアルゴリズムの更新を行い、以前にも増してSEO対策においてサイト表示速度の高速化が重要視されるようになってきました。

表示速度を高める施策には様々な手法がありますが、その中でも画像サイズの最適化は実施しやすい項目の一つ。
特に画像を多く使ったギャラリーは表示速度に強く影響します。
導入の際にはその点をしっかりと意識していきましょう。

一眼レフのような高機能カメラで撮影したデータは、サイズが非常に大きいです。
また、印刷に最適化された紙媒体用の画像は画像解像度が350dpi以上であることが一般的。こうしたデータはWeb用に最適な72dpi〜96dpiの画像解像度にリサイズしましょう。

画像のサイズ・解像度をWeb用に変換するには、下記のような無料のサービスを使っても簡単にリサイズすることができます。

オンラインで画像を圧縮。最高の画質および圧縮方式 オンラインで画像を圧縮。最高の画質および圧縮方式 複数のJPG、PNG、GIF画像を選んで瞬時に圧縮。オンラインで画像を無料で簡単に圧縮できます。

最適な画像サイズやデータサイズについては、サイト環境や目的によって変わってきます。
したがって一概に、このサイズであると断定はできないのですが、参考になる基準としてGoogleが提供している「Page Speed Insight」というサービスの測定結果を目安にすると良いでしょう。

Page Speed Insightで表示速度を確認する

Page Speed Insight

上記のサービスに自社のURLを入力するとサイトの表示速度がわかります。
測定結果から、適正な画像サイズなど表示速度を高めるアドバイスが提示されますので、最適化の指標として参考にしてみましょう。
データサイズでいうと100KB〜200KB前後の画像サイズが一つの目安になると思います。

ギャラリーに動画を追加する場合も同様です。
この対策には、自社サイトに動画をアップロードするのではなくYouTubeなどの外部サービスに動画をアップして、サイトの表示を軽くするといった手法がよく採用されています。

スマホで閲覧した際の見え方に注意しよう

せっかくギャラリー機能を搭載しても、スマートフォンで綺麗に表示されていなければ、サイトの評価にもマイナスの影響を与えてしまいます。
レスポンシブデザイン対応のギャラリープラグインであっても、スマートフォン表示に問題がないか必ずチェックしましょう。

iPhoneなど主要な機種については、実際の端末で確認することが理想的です。
しかし、全ての端末でチェックするのは現実的に厳しい面もあるかと思います。

簡易的ですが以下の2つの方法でスマートフォンで閲覧した見え方のプレビューができますのでご紹介します。

チェック方法その1:WordPressのカスタマイズ画面でプレビューする方法

WordPressのカスタマイズ画面でプレビューする方法

WordPressの管理画面にある「外観」から「カスタマイズ」を選択すると、「カスタマイズ」編集画面に移行します。
こちらのサイドバーの最下部にプレビュー表示のデバイスを選択するアイコンがあります。
こちらで、PC・タブレット・スマートフォンの3パターンをプレビューすることが可能です。

チェック方法その2:Google Chromeでプレビューする方法

Google ChromeというGoogleが提供するブラウザを使ってもスマートフォン表示を確認することができます。

Google Chromeでプレビューする方法_1

ブラウザ画面の右上、アカウントのアイコンの横にあるボタンをクリックし「その他のツール」→「ディベロッパーツール」を選択します。

Google Chromeでプレビューする方法_2

「ディベロッパーツール」の左上に、デバイスのアイコンがありますので、こちらをクリックするとスマートフォンでの表示が確認できます。

ただし、これらの確認方法はあくまでもプレビューです。
社員スタッフに協力してもらって、複数の機種でチェックしておくと、改善すべき点も発見しやすいでしょう。

関連記事:Wordpressを思い通りにカスタマイズ!実践法と初心者に読んでほしい厳選18記事紹介

【無料】WordPressでの作り方について相談する

WordPressを活用した写真ギャラリーページの作り方まとめ

今回の記事で、ギャラリー機能を使うことで、ユーザーにより多くの情報が伝えられることがわかったと思います。

商品のスペックなども表で説明するだけでなく、ギャラリーを使うことでわかりやすく情報を伝えられます。
例えば、「パソコン関連商品にどんな接続端子がついているのか」という問い合わせが多い場合、テキストや表で説明するよりもホームページに写真を掲載するほうが瞬時に正確な情報を伝えられるでしょう。
このように、業務の効率化にもギャラリー機能は役立つのです。

アップロードする画像の統一事項の取り決めなど、最初に導入するときは大変かもしれませんが、一度設定してしまえば後の運用は簡単になります。

まずは、WordPressに標準搭載の機能やプラグインを活用して、テストページにギャラリーを作成してみましょう。
いくつかの機能を試すことで、自社サイトにあった方法を見つけ出すことができると思います。

WordPressに強いホームページ制作会社を知りたい方はこちら

WordPressに強い優良ホームページ制作会社10社をプロが厳選!

Q. 写真ギャラリーに適したWordPressのプラグインは?

写真ギャラリーに適したプラグインとして「Easy FancyBox」「NextGEN Gallery」「Robo Gallery」「FooGallary」等が挙げられます。

Q. ホームページ制作でギャラリー機能を使うメリットは?

ギャラリー機能のメリットとして「複数の画像を効果的に表示できる」「商品やサービスの魅力を最大限にアピールできる」等が挙げられます。