WordPressのサイトやブログには、簡単に画像を挿入できます。
>> WordPressの画像挿入方法

挿入自体は簡単ですが、目的に合わせて少し工夫するだけでリッチな印象を与えたり、内容がより伝わりやすくなります。そこで今回は、ひと工夫で印象が変わる画像の見せ方を5つご紹介いたします。

WordPressサイトの画像の見せ方6選

画像の見せ方ひとつでコンテンツはぐっとわかりやすくなります。印象や見る側の理解度も変わってきますので、それぞれ見ていきましょう。

枠と影をつける

WordPressでは、単に画像を挿入するだけだと次のように表示されます。例えば、次のような画像だと、画像の白い部分と白い背景が同化してしまうんですよね。

WordPressテーマ「GENESIS」

これでは見にくいですし、不恰好なので画像に枠線と影をつけます。

WordPressテーマ「GENESIS」

するとこのように境界線が明確でメリハリがつくわけです。

でも画像一枚一枚を加工したり、CSSを使って再現するのは少し面倒ですよね。TCDテーマをお使いの方は、「frame」というクラスをimgタグに指定してみてください。

frameクラスを指定した例
<img src=”sample.jpg” class=”frame” />

これだけで上記のような枠線と影が反映されます。TCDテーマには、他にもこういった汎用クラスを多数ご用意しています。よろしければ、こちらの記事もご覧ください。

画像に枠線と影をつける
メリット 画像と本文エリアにメリハリがつく
デメリット 特に無しだが、中には不要な画像もある(ロゴ画像など)
利用シーン 記事内に挿入する画像のほぼすべてに使える

キャプション

画像の下に表示するキャプションは、WordPressの標準機能に備わっています。

WordPressテーマ「PORTAL」のトップページ

メディアライブラリで画像を選択して編集可能なこの「添付ファイルの詳細」で設定可能です。

メディアライブラリのサンプル画面

ここで「キャプション」という項目にテキストを入力すると画像の説明を記載することができます。

単に画像を添付するだけでなく、少し補足説明を入れてあげるとわかりやすくなることもありますよね。

また、添付ファイルの詳細にはSEOの観点から入力しておいた方がいい項目もあります。詳しくはこちらの記事を参考にご覧ください。

WordPress標準機能のキャプション
メリット 標準機能なのですぐ使える
デメリット 特に無し
利用シーン 画像に補足説明が必要なとき

タブメニュー

タブメニューで画像を使うと、スペースがコンパクトにまとまり、情報を俯瞰させることができます。

  • 実際の見え方
  • 設定画面

例えば、上記のように「実際の見え方」と「設定画面」をタブメニューに入れた場合、設定箇所の説明がタブメニュー内で完結します。画像を並べる必要がないので、1枚1枚を大きなサイズで見せられます。

タブを増やして、PCでの見え方・タブレットでの見え方・スマホでの見え方などとしても、スペースが広くなることもありません。各デバイスでの見え方などもコンパクトに一箇所で伝えられます。

何を確認できるのか、タブ名を見ただけでユーザーに伝わることもタブメニューのメリットです。

タブメニュー設置するにはこちらでご紹介しているプラグインが便利です。

ただし、ユーザーがクリックしなければ閲覧できない点は、時にデメリットになる場合もあります。コンテンツの種類によってタブメニュー化する必要性があるか吟味しましょう。

タブメニュー
メリット 省スペース化、コンテンツの整理ができる
デメリット ユーザーがクリックしなければ一部しか閲覧できない
利用シーン 数タイプの画像を一箇所で俯瞰させたいとき

スライダー

複数のバリエーションを自動で見せたいときは、画像スライダーが便利です。

  • スカイブルー

例:WordPressテーマ「PORTAL」のプリセットカラー

ユーザーが操作して画像を切り替えられるので汎用性は高いです。ただし、容量の大きな画像を使いすぎるとページが重くなる可能性もあるので注意が必要です。

また、プラグイン無しで画像スライダーを実装するのはあまり現実的ではありません。目的によってスライドやアニメーションの速度を変更したり、微調整が必要だからです。

画像スライダーの設置にはこちらのプラグインが便利です。

このプラグインならスライドやアニメーションの速度はもちろん、画像に対するキャプション、サイズ感なども詳細に設定可能です。

画像スライダー
メリット 大画面で閲覧可、自動で切り替わる
デメリット 使い方によってはページが重くなる
利用シーン 自動で動く写真ギャラリー、バナー広告などを見せたいとき

GIFアニメーション

軽量な画像で動きを表現したい時には、GIFアニメーションが便利です。

GIFのサンプル

画像の拡張子の一つであるGIFを使って画像をアニメーションさせることができます。簡単な操作説明や変化を画像で表現したい際に活用できます。

GIFアニメーションは、動画を変換するか複数の画像を組み合わせて簡単につくることができます。Macユーザーならこちらでご紹介している「picgif」というアプリが便利です。

軽量化できるオプションもあって使いやすいので、当ブログでもよく使っています。

GIFアニメーション
メリット 画像の変化や動きを表現可能、動画と比べると軽量
デメリット アプリで簡単にできるが、GIFを作成して軽量化という一手間がある
利用シーン 簡単な動きをできるだけ軽量に表現したいとき

ビフォアフター

最後にご紹介するのは、ビフォーアフター向けのツールです。

上記例ではPNG形式とJPG形式の画質と容量の違いを示しています。こちらの記事でご紹介しているWordPressプラグインを使って再現可能です。

ここまでご紹介してきた見せ方に比べて汎用性は落ちますが、2枚の画像の比較には最適だと思います。色味や画質などのわずかな違いを表現する際に特に便利です。

つまみをドラッグして画像を切り替える操作感は、ビフォーアフターを確認するという作業を「楽しいユーザー体験」に変えてくれます。設定する画像次第でかなりスタイリッシュな見せ方を実現できるツールです。

ビフォアフター向けのツール
メリット 画像の比較に最適、リッチな操作感
デメリット 画像2枚の比較のみなので汎用度は低い
利用シーン 画像を比較したいとき、ユーザー自身に画像の変化を体験させたいとき

目的に合わせて画像の見せ方を変えよう

WordPressサイトの画像の見せ方を6つご紹介いたしました。

画像の見せ方ひとつでもバリエーションがあり、それぞれ向き不向きがあります。少しの工夫で印象が変わり、最適な見せ方をチョイスすることで内容も伝わりやすくなります。

ぜひ目的に合わせて画像の見せ方を変えてみてください。

画面のスクショ・画像作成・編集に役立つ記事一覧