「WordPressのトップページデザインを変更したい」
「イベントの雰囲気がわかるビジュアルをトップページに入れたい」
WEBサイトのトップページ（ホーム）でいちばん最初に目に入るビジュアル（写真、動画など）はWEBサイトの中でも最重要の役割を果たします。どんなWEBサイトであるのか、そこで訪問者の皆さまが感じ取っていくからです。そのため、制作側としてはどういう見せ方にしたらいいのか悩んだり、見せ方は思いついてもうまく表現できなかったりして模索されている方も多いと思います。
今はWordPressのテーマ（テンプレート）を入れ、写真や文章を追加してくだけで、かなりキレイで整ったWEBサイトが出来上がります。無料のテーマでも、ずいぶん洗練されたデザインがありますね。そのためデザイナーや制作会社に依頼せず、管理者ご自身で手を入れてWEBサイトを仕上げることも増えました。
ただ、トップページのデザインだけはテンプレそのままというわけにいきません。WEBサイトへ来られる方々は、基本的には自身の「興味のあるなし」をひと目で判断します。そのため、WEBサイトの中身がトップページをひと目見ただけで伝わるようにしておかなければ、訪問に来られた皆さまが「ここは自分には関係がない（興味がない）」と思って、帰ってしまいます。それではWEBサイトとして機能していないので、せっかくつくったのに残念な結果となってしまいます。
そこで、トップページをデザインするのに便利なWordPressプラグインを5つご紹介します。そのようなプラグインを使い、パンフレットやメニュー用にカメラマンに撮影してもらった写真や動画があれば追加していくと、かなり情報量が多くなります。また、おしゃれに洗練されたイメージにつくりあげることは、WEBサイトの”手作り感”も減らせます。
設置が簡単でシンプルなプラグインを選んで解説していきますので、ぜひトップページのデザインにご活用ください。
（※WordPressのプラグインには同じような機能を持つものが複数ありますが、選ぶ基準は使っている人が多く、機能がシンプル。そして定期的にプラグインの更新・メンテナンスがされているかどうかで選んでいます。）
１．シンプルでSEO対策もできるスライダー「Meta Slider」
いくつかの画像が流れるように動く”スライダー（スライドショー）”は、メインビジュアルとして一般的です。限られたスペースの中に何枚も画像を流すことで、省スペースでたくさんのことを伝えるメリットがあるからです。
画像にリンクやタイトルテキストを付けることもできる「Meta Slider」は設置も簡単ですし、キャプションも付けられるので検索エンジンにもしっかり情報を届けることができます。
スライダーは多くのWEBサイトで使われているデザイン演出ですが、WordPressに標準で付いている機能はないため、入れたい場合は必ずプラグインを追加する必要があるのです。そのため多くの関連プラグインがありますが、中でも「Meta Slider」はシンプルな中に必要な機能が詰まっているとして人気のプラグインです。
https://ja.wordpress.org/plugins/ml-slider/
■無料（有料版もあり）
■英語（一部日本語）
スライダーをつくることに特化しているので非常に使いやすいです。
1つの画面で、画像の追加やサイズの調整、写真に文字（タイトル、キャプションなど）を載せることもできます。自動保存も行われ、途中で消えてしまって作業時間が無駄になることもありません。初心者には非常にありがたいプラグインです。
写真を追加すると、以下のような画面になります。
写真が追加したごとに連なっていくので、管理もしやすいですね。
スライダーの画像から特定のページへのリンクを付けたいときもこの管理画面からできます。訪問される方々の使い勝手を考えると、できればリンクは付けておきたいです。その画像に関わるページに飛べたほうが便利ですよね。
いくつもスライダーはつくれるので、トップページだけでなく、固定ページや記事内に挿入もできます。
SEO対策用に「SEO」のタブもありますが、効果を得たい場合は、そのSEOタブ内にある以下の項目をしっかり入力するとよりよいです。
◯画像タイトルテキスト
◯画像の代替文字列（画像が表示できないときに代わりに表示される文字）
これはスライダーだけでなく、どの画像についても同じです。
“これは何の画像か？”わかるように文字で情報を入れておくと検索エンジンが読み取りやすくなりますので、お時間があればぜひ対応してください。
▷Meta Sliderの設置詳細はこちらの記事で事例を出してもっと詳しく説明しています「WordPressにスライドショー『Meta Slider』を導入する手順と設定ビフォーアフター」
２．動画や装飾のパーツを埋め込む「Elementor」
動画をWEBサイトで見せると文章では伝えきれない情報をまとめて見せることができます。数秒でも静止画と比べ物にならない情報や雰囲気を伝えられますね。
プラグイン「Elementor」は自作動画やYouTubeなどさまざまな動画をページの幅いっぱいに動画を埋め込める、かつ細かな設定が管理画面上でできるので使っている方々が多いプラグインです。そのほかにも画像の埋め込み、GoogleMapの埋め込み、区切り線やアイコン、吹き出しを入れるなどパーツの挿入に特化しています。
https://ja.wordpress.org/plugins/elementor/
■無料（有料版もあり）
■日本語（一部英語）
「Elementor」でトップページをつくっていく場合は、固定ページを「HOME」や「TOPPage」などの名前で1ページ新規作成し、そのページをトップページに設定します。
トップページへの設定は固定ページを作成してから、「サイドメニュー＞設定＞表示設定＞固定ページ＞ホームページ」と進み、トップページで使いたい固定ページをプルダウンから選ぶと設定できます。
そこまで設定してから、「Elementor」でトップページをつくっていきます。
固定ページを新規作成すると、「Elementorで編集」というボタンができるので、そこをクリックしてページに動画を埋める作業をスタートさせます。
ここまでできたら後は直感的に作業を進められます。
この編集画面から、動画のどこからどこまでを再生するかであったり、音声をミュートするかどうかだったりなど、かなり細かい設定ができます。すごく有り難いです。日本語なので使い方もすぐ理解できます。
また、動画を埋め込む以外にも、さまざまな装飾パーツの挿入やレイアウトの変更ができるので、トップページにかなり手を入れておしゃれに仕上げたい場合にはぜひオススメのプラグインです。
３．特定の条件でポップアップする「Popup Maker」
WEBサイトへアクセスした時や特定のボタンをクリックしたときに、ウィンドウが開いて動画が流れたりメッセージが出たりする設定をするプラグインです。「突然動画が流れてびっくりした」経験がある方もいらっしゃるかと思いますが、うまく使うと訪問者様に対して伝えたいことを確実に伝えられる便利なツールです。
https://ja.wordpress.org/plugins/popup-maker/
■無料
■英語
「Popup Maker」はカスタマイズもかなり自由自在で、イメージ通りのものを仕上げることができます。基本的な使い方は、まず新規のポップアップファイルを制作して、そこでつくったコードをポップアップさせたいページに貼り付けます。
「Add New Popup」で新しいポップアップの設定をつくろうとすると、固定ページと同じような画面が開きます。その1画面内で必要なファイルをアップロードしたり、ファイル名をつけたり、詳細設定をするなどすべてできます。
トップページでよく見かけるアクセスしたらすぐ動画が流れる設定をするには、ポップアップの詳細設定（Add New Trigger）で、「Auto Open」に設定します。
自動でいつ開くかという秒数も設定できます。
どれくらいの秒数で開くのがいいかは見せたいもの、目的によって異なると思いますので、何度か設定を変えてチェックしてみて、いちばん訪問者様が気持ちよく見られる設定を見つけていくのがいいと思います。
強制的に開くポップアップは、「ちょっと面倒くさい」と思われる方もいます。ただ、こちらから伝えたいことを確実に伝えるためには重要な手段です。ウインドウのサイズや見せるものなども、このプラグインを使えばかなり細かく調整できるので、できれば何人かの目を通しながら、ナチュラルに見てもらえる設定を試行錯誤してみてください。
４．価格表や比較表をつくる「Responsive Pricing Table」
販売したいサービスや商品が1つの場合、できればトップページ内に価格表やプランの比較表などを掲示しておきたいですね。ただ、エクセルのような無機質な表は少し物足りない…。そんなときに便利な、きれいに装飾された表を手軽につくれるプラグインです。
https://ja.wordpress.org/plugins/dk-pricr-responsive-pricing-table/
■無料（有料版もあり）
■英語
海外のサイトでよく見かける価格表のような、立体的で背景に色のついた表を組み上げることができます。すごく洗練された印象になります。
新しいファイルをつくったら、3つのプランを並べたい場合は下に3つの枠をつくり、それぞれ詳細を入力します。
必要な情報を入れ、背景色を選んだだけですが、とてもきれいな表ができました。今回は3つ入れましたが、枠は増やすことができます。↑サンプルの「詳細を見る」の部分にはリンクを付けているので、ここにそれほど細かな情報を書かなくても次のページへ誘導できます。
初期設定のままですが、すごく立体的で、目立ちますね。これに必要なデザインを入れたり、余白を調整したりすればすぐにトップページに配置できます。つくるのも楽しいので、ぜひ使ってみてほしいプラグインです。
5.インスタ画像を入れる「Smash Balloon Social Photo Feed」
イベントやキャンペーンのWEBサイトで最近必須となってきたのがSNSとの連携です。Instagramでの投稿を促しているなら、トップページにデザインとして挿入してしまうと盛り上がり感も演出されますし、画像が増えて見栄えがよくなり一石二鳥です。
プラグイン「Smash Balloon Social Photo Feed」はご自身のアカウント（キャンペーン、企業アカウントなど何でも管理しているアカウントならOK）に投稿された写真をWEBサイトに並べて見せるプラグインです。レスポンシブ対応なので、スマホ用など各機器ごとの設定は不要です。
https://wordpress.org/plugins/instagram-feed/
■無料（ただしハッシュタグで写真を選びたい場合は有料）
■英語
このプラグインはとても使いやすくできていて、ブラウザでInstagramにログインしておくと連携もクリックしていくと完了しますし、新しい投稿があったときも自動で反映されるので設置した後のメンテナンス不要です。
ただハッシュタグで投稿を見せていきたい場合は有料です。
ハッシュタグで写真をピックアップしたいときは商用とみなされているようで、有料プラグインがほとんどです。
“repost”機能を使って、アカウントに投稿として残しておけば無料版で見せることが可能です。デザインは無料でもかなり触ることができ、写真を並べる数や余白などは自由に調整できます。設定が完了したら表示させたい場所に、[instagram-feed]とコードを埋め込むだけでOKです。トップページ以外にも固定ページ、投稿ページなど自由に表示させられます。
写真がたくさん表示されるので一気に華やかに。
商用であれば有料（Pro）版を購入して、レイアウトを工夫したりハッシュタグ投稿を使用したりすると、シンプルなデザインでもかなり洗練された印象を与えられるようになるはずです。デザインをつくり込むよりはメンテナンス不要なので良い選択かもしれません。有料版は商用ライセンスで89ドル（2019年11月末の情報です）となっています。
■有料でプラグインを買う前に注意すること
プラグインは、有料であるからといって問題となることはありません。
無料で使える範囲と、有料で使える範囲がわかれているのもWordPressのプラグイン制作者には根付いているビジネスモデルです。必要であれば有料版（Pro版）を買うと一気に使い方の幅が広がります。「使うのは無料だけれど、サポートが必要なら有料版を」とアナウンスしているプラグインもあります。
ただ、まず始めにそのプラグインがWordPressの公式のものであるか、確認してください。公式のプラグインかどうかどうやったらわかるかというと、WordPressの管理画面から検索することができるものが公式です。
公式プラグインは全て第三者がチェックしています。公式でないものが全てNGではありませんが、チェックがない分セキュリティ面で不安なもの（攻撃性を持ったもの）や、悪意を持ったもの（機能と価格が見合っていない）である可能性があります。無料のものも同じ危険性があるので、できるだけ使わないほうがデメリットを受けずに済みます。特に有料のプラグインについては、デメリットが大きくなりやすいので公式プラグインの有料版を原則的に使うようにしてください。
６．まとめ
なかなかデザイン費を工面できない状況でも、プラグインを活用すると印象のよいWEBサイトをつくることができます。新しいプラグインもどんどんとつくられていますので、状況に応じて、探して活用してみてください。ただ、プラグインに頼りすぎるとそのプラグインが使えなくなったときにこれまでと同じ外観を保てずに困りますので、プロに依頼してつくっておくのも選択肢の一つだと思います。