写真ギャラリーのサイト制作方法とは？注意点から実際の事例まで解説

「自身のポートフォリオとしてフォトギャラリーサイトを制作したい」
「自社商品をショーケースのように紹介したい」

作りたいと考えていても、制作が難しいように見えてしまうのがフォトギャラリーサイトです。
しかし、WordPressを使えば、フォトギャラリーサイトは簡単に制作できます。

今回は、フォトギャラリーの制作方法や注意点、事例についてご紹介します。
この記事を参考に、理想のフォトギャラリーサイトを作っていきましょう。

なお、ホームページ作成をご検討なら、BESTホームページをご検討ください。

本来ギャラリーサイトは、テーマに沿ったWebサイトやデザインをいくつも並べたホームページを指します。
その中でもフォト、つまり写真だけを集めてギャラリー化するものがフォトギャラリーサイトです。

フォトギャラリーサイトは、制作者側、訪れたユーザー側双方に便利なサイトではありますが、力を入れている業者や個人の方はあまりいません。
そのため、全体で見ると一般的なWebサイトやホームページよりもフォトギャラリーサイトの方が数は少ないです。

２-１．自分が利用するため

自分が参考にしたい・あとで使う写真を保存するために、インターネット上でまとめておくのがフォトギャラリーサイトの目的の1つです。

写真をフォトギャラリーサイトに載せておけば、カメラやスマホの容量を気にせず撮りためておけるので、一種のクラウドストレージになります。
また、ポートフォリオとしても活用可能です。

さらに、自分が利用したいフォトが他のユーザーの需要になるケースも多く、結果として集客に繋がる場合もあるでしょう。

２-２．広告・アフィリエイト収入になる

フォトギャラリーサイトに多くのユーザーが集まるようになれば、広告やアフィリエイトで収入を得ることが可能です。
具体的なイメージとしては、

などで収益をあげられるでしょう。

フォトギャラリーは複数枚の写真を並べてあるのが特徴で、一般的なWebサイトとは異なったレイアウトをしています。
HTMLを使用してフォトギャラリーを制作する場合、コードを追加・変更しなくてはいけないので、知識がない方にとっては大変な作業です。

しかし、WordPressを使えば、直感的な操作でギャラリーサイトを作ることができます。
そのため、フォトギャラリーを作る場合は、WordPressがおすすめです。

また、WordPressのフォトギャラリーは、標準機能かプラグイン（拡張機能）のどちらかで作ります。

ポートフォリオや自身の閲覧用にフォトギャラリーを作るなら、標準機能で問題はないでしょう。

ただし、商品のショーケースとして使う、より使いやすく洗練されたデザインにこだわりたいなら、プラグインで制作するのがおすすめです。
どのようなフォトギャラリーサイトを作るかによって、WordPressの標準搭載かプラグインか選択しましょう。

４-１．「ブロック追加」で「ギャラリー」を選択

今回はWordPress5.0以降で標準エディターとなった「ブロックエディター」で解説してまいります。

まずはWordPressの投稿あるいは固定ページの編集画面を開きましょう。
どちらかの編集画面を開いたら、タイトル入力欄の下あたりにある「＋ボタン（ブロック追加ボタン）」をクリックしてください。

メニューの中に「ギャラリー」という項目があるのでクリックしましょう。
クラシックエディタを使用している場合は、メニュー内の「メディアの追加」をクリックしてください。

４-２．ギャラリーを作成する

すでにアップロードした画像をギャラリーにしたいなら、「メディアライブラリ」を選択してください。

「メディアライブラリ」をクリックすると、今までアップロードされた画像が表示されるので、ギャラリーで使用したい画像をクリックし、チェックマークをつけましょう。

画像を選んだあとは、右下にある「ギャラリーを作成」をクリックすればギャラリーを作れます。

新しく画像を挿入してライブラリを作成したい場合は、「アップロード」を選んで画像を追加します。

画像をアップロードすると、アップされた画像でギャラリーが自動作成されます。

４-３．「追加設定を表示」でカスタマイズする

WordPressに標準搭載されたギャラリーでも、ある程度のカスタマイズは可能です。
作成したギャラリーをクリックすると表示されるメニューから、「追加設定を表示」をクリックします。

画面右にメニューが表示されるので、

を選択する項目があるので、好きなようにカスタマイズしましょう。

４-４．ギャラリーの確認

最後にプレビューやホームページに直接アクセスして、ギャラリーが自身の想定しているデザインに整っているか確認してください。
問題なければ、今後は同じ手順に沿ってギャラリーを追加していきましょう。

４-５．プラグインを利用する場合

WordPressで利用できるプラグイン（機能拡張）の中には、簡単にフォトギャラリーのカスタマイズができるものがあります。
簡単にプラグインのインストール方法をご説明します。

ワードプレスの管理画面にある「プラグイン」にカーソルをあてると右に表示されるメニューから「新規追加」をクリックします。

「プラグインを追加」画面の右側上部に検索窓があるので追加したいプラグイン名を入力します。

検索結果に表示された該当プラグインの右上部にある「今すぐインストール」をクリックします。

以上でプラグインのインストールは完了です。
ぜひ、自身のWebサイトにあったプラグインをインストールして、おしゃれなデザインに仕上げてください。

５-１．Easy FancyBox

Easy FancyBoxは、画像をクリックするとスムーズな動きで拡大表示してくれるプラグインです。
拡大表示の際にスタイリッシュな動きが加わるので、ギャラリーを見る際にWebサイトとしての完成度を高めてくれます。

ただし、Easy FancyBoxはjQueryと呼ばれるJavaScriptのライブラリを使用しており、他のテーマ・プラグインとの相性の良し悪しが出てきます。
場合によっては作動しない可能性があるので注意しましょう。

Easy FancyBoxはインストールして有効化したら、ブロック挿入時にリンク先を「メディアファイル」に指定すれば適用されます。

５-２．NextGEN Gallery

無料かつ多機能で充実したフォトギャラリーを作れるのがNextGEN Galleryです。

の2タイプが選べ、どちらもギャラリーの基本機能が設定できます。
スライドショーについては切り替わりのスピードも調整でき、

といった使い方が可能です。

NextGEN Galleryをインストールして有効化後、ブロックに「NextGEN Gallery」が追加されているので、そこから設定してください。

５-３．Robo Gallery

グリッドデザインが好みな方におすすめなのがRobo Galleryのプラグインです。

格子状に写真を載せられるので、加工を統一するとWebサイト全体が映える使い方ができます。
インスタグラムのフィードを想像するとわかりやすいでしょう。

さらにRobo Galleryでは、それぞれのサイズを調整できるので、規則性をあえて崩したデザインも可能です。

無料版では設定できるギャラリー数が3つまでですが、有料版だと制限がなくなり、写真の順番の変更などのカスタマイズ性に優れるのでおすすめです。
日本語に対応しておらず少し使いにくさはあるものの、複雑な操作がないのですぐに操作には慣れるでしょう。

５-４．FooGallary

直感的な操作ながら自由度の高いカスタマイズもできるプラグインがFooGallaryです。
FooBOXと呼ばれるプラグインもセットでインストールする必要はありますが、

などの多彩な設定ができるので、優秀なプラグインの1つ。
さらに、FooGallaryは無料で使えるため、フォトギャラリー初心者の方からこだわりたい方全てにおすすめです。

５-５．Photo Gallery by 10web

Photo Gallery by 10webはギャラリーのテンプレートが用意されているので、初心者の方や英語が苦手な方でも使いやすいプラグインです。

画像の並び順やサイズの変更、枠の形を好みに合わせて設定するといったシンプルな機能を搭載。
ウォーターマークも表示できるので、著作権が気になる場合でも対応できます。

６-１．画像のファイルサイズに注意する

多くの画像を載せるフォトギャラリーサイトでは、画像が多いゆえにページの表示速度の低下が考えられます。
特に一眼レフカメラで撮った写真は画像ファイルのサイズが大きく、そのまま掲載してしまってはページ表示速度の低下を招きます。

画像を見るたびに表示が遅いと、ユーザーはストレスに感じて離脱してしまうケースもあるでしょう。
実際に表示速度が1秒から3秒になると直帰率は32％上昇、1秒から5秒になると90％に上昇するとGoogleが発表しています。

参照URL：https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

そのため、表示速度が落ちないようファイルサイズには十分注意してギャラリーサイトを構築しましょう。
インターネット上で、画像のサイズや解像度を圧縮してくれる無料ツールがあるのでぜひそれらを活用してください。

参考： ホームページで使う画像サイズを徹底解説！

６-２．画像の縦横比は確認しておく

画像によってサイズ設定を怠っていると、縦横比が崩れてしまう可能性があります。
縦横比が崩れるのを防ぐには「画像の縦横比を保持する」項目を選択しておくといいでしょう。

ただし、プラグイン側で画像の縦横比を設定する場合もあるので注意です。
事前に画像の縦横比を決めておき、WordPressの標準搭載機能やプラグインを使用する際に画像を統一しておけば安心でしょう。

参考： ホームページを綺麗に見やすくする！画像の加工方法を解説

６-３．デバイスごとの表示を確認する

最近では、デバイスごとにサイズを自動調整してくれるレスポンシブデザインを導入しているテーマ・プラグインが多いです。
とはいえ、デバイスによって問題なく表示されているか確認は忘れないようにしましょう。

確認方法としては、

という方法があります。

また、Google Chromeのデベロッパーツールにもスマホ表示にする項目があるので、どちらも確認しておきましょう。

７-１．松岡 一哲

ページの真ん中にスライドショーを設置し、クリックするとフォトギャラリーが表示される工夫をしているサイトです。

基礎を残しながらも遊び心とデザインの美しさを表しているので、ホワイトとブラックのシンプルなベースカラーなのにひき込まれてしまいます。
均一に余白を取ることで、サイズの異なる写真でも統一感があるように感じる点も参考になるでしょう。

７-２．村上 健

村上健さんのギャラリーサイトは、グリッド状のレイアウトを用いてシンプルかつ世界観を感じるデザインになっています。

画像を開いたあとは、スクロールあるいは矢印をクリックで次の画像に移動でき、ゆっくりと画像が変わるのは雰囲気があって魅力的です。

写真以外の部分はシンプルなデザインなので、グリッドデザインを取り入れたい方の参考にできるWebサイトといえます。

７-３．ヨシダ ナギ

ヨシダナギさんのギャラリーサイトは、本格的なポートフォリオサイトです。

ファーストビューでインパクトある動画を取り入れて注目を集める手法を取り入れています。
スクロールした先にあるWORK部分のギャラリーの右側から、気になるサムネイル写真をクリックすると、中央に大きく表示されるまとめ方をしているのも魅力。

写真を大きく見せたい、ポートフォリオとしてギャラリーサイトを作りたい方は、ヨシダナギさんのWebサイトを参考にするといいでしょう。

今回は写真ギャラリーサイトの制作方法についてご紹介しました。
WordPressを使って写真ギャラリーサイトを作る場合には、標準搭載よりもプラグインを使う方が簡単かつ見栄えがいいものが多いです。

カスタマイズ性も十分にあるので、注意点に気をつけながら、ぜひ積極的にプラグインを導入して魅力的な写真ギャラリーサイトを作ってください。

とはいっても、なかなか初心者にはWordPressの構築や操作は難しいことも事実です。

簡単にフォトギャラリーサイトを作成したい方は、ぜひ当社が提供しているBESTホームページもご検討ください。

BESTホームページは、専門知識の必要なく、簡単にホームページを作成できるCMSです。
見たまま編集機能で直接ホームページを編集しているように、自由に・簡単に写真や文章、動画の掲載も可能。
標準でフォトギャラリー機能もありますので、簡単にギャラリーサイトを作成できます。

また、BESTホームページでは標準で画像加工機能を搭載。
ホームページ作成に使用する画像素材をシステム内ライブラリにアップロードすることで、その画像のサイズ変更やトリミング加工など自由に行うことができます。

今なら15日間のお試し無料体験も実施中です。
無料体験時にはオンライン会議ツールを使って直接当社スタッフがBESTホームページの使い方やホームページの作り方を1対1でご説明します。

使用感を確かめてから利用の継続を判断できますので、ぜひこちらからお申込みください。
また、BESTホームページにはプロがホームページを制作するプランもございます。こちらもお気軽にお問い合わせください。