自由自在にWordPressのトップページをカスタマイズしよう！

ウェブサイトで最も重要なページのひとつが「トップページ」です。WordPressは基本的に投稿を掲載するブログ向けのソフトウェアなのですが、店舗やメーカーのサイトのようにトップページを設定することができます。WordPressでサイトを運営している人の中には、トップページを自由自在にカスタマイズしたいという希望を持っている人も多いでしょう。この記事ではWordPressのトップページの簡単なカスタマイズ方法や便利なプラグインの使い方を紹介していきます。

トップページとは

ウェブサイトのトップページは、サイトにアクセスしたときに一番最初に目に入るページです。紙メディアでいえば、表紙にあたります。書店に行ったとき、魅力的な表紙を持っている書籍や雑誌が目に入ると、つい手にとってみたくなるものですね。人間でいえば、顔にあたります。ウェブサイトも全く同じです。訪問したユーザーの心をつかむには、第一印象を左右するトップページのデザインが重要になります。ウェブサイトのトップページは、そのサイトの最初の視覚情報を与えるメディアです。そのため、カラーコーディネーションやレイアウト、また文字のフォントなど、ユーザーを引き付けるデザインを工夫する必要があるのです。

ただし、デザインといっても派手なものや、凝ったものばかりがユーザー受けするとは限りません。重要なのは、サイト運営者が扱う商品やサービスのイメージを正確に表現して、ユーザーにその価値が伝わるかどうかということです。サイトの目的によっては、無彩色でおとなしい表現のほうが適していて、ユーザーに好感を持たれることもあります。ウェブサイトのトップページには、1種類の正解がありません。だからこそ、しっかりとデザインする必要があるのです。

トップページをカスタマイズした方が良い理由

WordPressには無料のテーマが数多く用意されており、デフォルトで設定されているトップページをそのまま使えるようになっています。ただし、以下の理由からトップページをカスタマイズした方がよいといわれています。1つ目は、オリジナルのトップページは、ユーザーの興味を引き付けやすく、直帰率が下げられる可能性があるからです。優れたデザインを持つ企業のウェブサイトが集められたまとめサイトなどを見ると、さまざまなデザインを持つトップページを見ることができます。ウェブサイトはクリック1つで離脱することができるため、誘引力を持つインパクトのあるトップページには各社とも力を入れているのです。

逆に考えれば、ユニークなトップページがあれば、それだけで話題になることもあります。斬新なトップページがあれば、それまで想定されていなかった、新しい顧客層を獲得する可能性も出てくるのです。また、トップページに掲載する情報がよく吟味され、必要最低限の要素にまとめられていることも重要です。ユーザーが次の情報へのリンクを自然にクリックできるようなデザインが求められます。トップページの定量的な評価指標に直帰率があります。直帰率とはSEO用語の1つで、すべてのセッションに対する、1ページのみ閲覧したユーザー数の割合です。要するに、最初にアクセスしたページを見て、興味をそそられず、そこにあるリンクをクリックせずに離脱してしまったユーザーの割合を表す指標といえます。インパクトがあり、ユニークで、かつ情報が整理されているトップページであれば、直帰率が大きく低下することでしょう。

2つ目は、トップページをカスタマイズすることで、サイトのブランド力が向上する可能性があることです。高級ブランドのウェブサイトなどを見ると、販売されているプロダクトと同じ世界感を表現したデザインが採用されています。商品の品質が良ければ、ウェブサイトも相応のクオリティーが求められます。ここで、そのブランドの商品を知らないユーザーが、最初にウェブサイトにアクセスしたときの感想を考えてみましょう。ウェブサイトに上品さや、高級感を感じたとしたら、おそらくまだ見たことのない商品群のクオリティーについても同じような印象を抱くはずです。つまり、トップページのクオリティーでブランド力が左右される可能性があるということなのです。もし、トップページのデザインがいまひとつなものであれば、そこで提供される商品やサービスに疑念が湧いてくる可能性があります。

WordPressでのトップページの設定方法

WordPressでテーマをカスタマイズする際に、トップページを新たに設定するには次の手順で進めます。設定画面を開いて、左側にあるコラムの「設定」をクリックします。次に、プルダウンメニューで表示される項目の中から「表示設定」を選びましょう。設定項目の中の「ホームページの表示」で、新たなトップページを設定します。トップページには、「最新の投稿」として投稿ページを設定することも、「固定ページ（以下を選択）」として任意の固定ページを設定することもできます。なお、トップページに「最新の投稿」を選ぶ場合、テーマによっては表示形式が異なる場合があります。

WordPressをインストールしたときに「外観」の「テーマ」をクリックして既にリストに表示されている標準的なテーマであれば、トップページの投稿画面には最新の投稿ページが表示されます。カスタマイズ色の強いテーマによっては、同じ投稿画面であっても、一覧表示形式になっていることもあります。このような違いは一旦ダウンロードして確認するのが確実です。テーマを変更する場合などには、注意して確認するようにしましょう。

トップページに「固定ページ」を選んだ場合は、編集画面の「ホームページ」をプルダウンメニューから選びましょう。なお、トップページと同意語に「ホームページ」や「フロントページ」があります。WordPressの管理画面では、テーマによって、上記の表示設定ではホームページと呼ばれ、固定ページの編集画面ではフロントページと表記されることがあります。指し示しているものは同じです。

【おすすめプラグイン】1.Elementor

WordPressのトップページをカスタマイズする際に、便利なのがElementorです。Elementorは、WordPressの固定および投稿ページのカスタマイズをドラッグ＆ドロップで実現する、話題のページビルダープラグインです。Pro版もありますが、多くの機能が無料で利用可能となっています。Elementorの導入手順は、まずインストールして有効化します。うまく有効化されていれば、新規ページを作成する際に、編集画面に「Elementorで編集」ボタンが表示されるはずです。このボタンをクリックすると、WordPressのエディターからElementorの編集画面に遷移します。

画面構成は左側にウィジェットが表示されたコラムがあり、右側にはサイトのイメージが表示されます。なお、ウィジェットとは、コーディングによらずにページをカスタマイズするために、構成要素をブロック状に表示したものです。ドラッグ＆ドロップ操作で容易にページを作っていくことができます。WordPressの詳細設定をElementer側で行うには、管理画面の左コラムにあるElementorをマウスオーバーして、さまざまな管理項目をまず表示させましょう。

たとえば「設定」からは投稿タイプ（固定・投稿）の選択や、表示スタイルとしてコンテンツの幅、デバイスごとのブレークポイントも変更できます。ブレークポイントとは、レスポンシブデザイン用語で、デバイスごとの表示レイアウトの変更をモニターの表示解像度のピクセル数で変更するしきい値のことです。一般的には、PC表示とスマートフォン表示を切り替えるブレークポイントは約760px近辺といわれています。このような細かい設定変更も簡単かつ効率的に行えるのです。ElementorはWordPressをカスタマイズしたいときには、非常に役立つプラグインといえます。

【おすすめプラグイン】2.Visual CSS Style Editor

代表的な多機能プラグインの1つがVisual CSS Style Editorです。ウェブサイトの構築では、HTML（HyperText Markup Language）とCSS（Cascading Style Sheets）はセットです。なお、ウェブサーバと連携した動的な効果をページに埋め込む場合は、ここにphp（Hypertext Preprocessor）が加わります。ウェブページは、HTMLで作られた枠組みが、CSSで装飾されたものといってよいでしょう。CSSは全体の枠組みを変えずに外観を微調整できるので非常に便利な仕組みです。

ただし、CSSをコードで記述していく行為は、初心者にとっては面倒に感じることも多いでしょう。この心理的な負担を軽減するのが、Visual CSS Style Editorなのです。汎用性が高いので、採用しているテーマにかかわらず利用できるプラグインになっています。使い方は、まずインストールして有効化すると、ページの編集画面に「Edit Page – YellowPencil」というボタンが表示されるようになります。これをクリックすると、専用のエディター画面が表示され、編集が可能になるのです。

Visual CSS Style Editorでは、文字や数字を入力するコーディングは不要です。プルダウン表示されるリストから選択したり、コントロールパネルでクリック＆ドラッグするなど、視覚情報を頼りに操作を進めることができます。GUI（Graphical User Interface）がよく考えられたユーザーフレンドリーなプラグインといえます。

トップページの制作におすすめなツール

ウェブサイトのトップページを製作するためには、以前はコーディングが基本だったので、初心者には難しい面がありました。WordPressでは、ここで紹介したElementorやVisual CSS Style Editorなどの便利なプラグインがあります。ドラッグ＆ドロップ操作が可能なツールとして、多くの機能が無料で使えるのです。気軽に導入して試用できるため、良さそうなものがあれば、ひとまずインストールして使ってみることをおすすめします。このようなツールを利用することで、効率の良いトップページのカスタマイズが可能になるでしょう。

トップページテンプレートファイルを編集してカスタマイズする方法

WordPressでトップページを作成する方法は大きく3つにわかれます。1つ目は、固定ページを編集してトップページにする方法です。上記の「WordPressでのトップページの設定方法」の部分で説明した方法の他にも、同様の操作が可能な手順があります。まず、設定画面を開いて、左側にあるコラムの「外観」をクリックしましょう。次に、プルダウンメニューで表示される項目の中から「カスタマイズ」を選びます。左コラムにある「ホームページ設定」をクリックすると、トップページを設定するパラメータ選択画面が表示されます。この部分は上記の手順で説明したものと同じです。

2つ目は、テーマを変更する方法です。この場合、編集操作は不要でテーマを入れ替えることでトップページを変更できます。ただし、トップページだけではなくウェブサイト全体のデザインが変わる点に注意が必要です。3つ目は、テンプレートファイルを編集する方法です。HTML、CSS、phpなどのコーディングの知識があるサイト管理者であれば、直接テンプレートファイルを編集してもよいでしょう。WordPressのページは、コードが書き込まれた複数のphpファイルで構成されています。これを「テンプレートファイル」と呼ぶのです。テンプレートファイルは3タイプにわけられます。

基本となるindex.phpと、すべてのページ内で使える「パーツテンプレート」、さらに設定によって使える場面が限られるテンプレート群です。index.phpは、WordPressのテーマの表示に不可欠なファイルでもあります。パーツテンプレートとしては、header.php、footer.php、sidebar.phpなどのページのレイアウトに使うためのものがあります。サイト全体で統一されたデザインを用いる部分については、このようなパーツテンプレートを組み合わせて表示するのがWordPressの特徴です。

トップページの編集に使うテンプレートファイルは、設定に依存するタイプである、home.phpやfront-page.phpをカスタマイズするか、新規にファイルを作ります。このように、既存のテンプレートファイルを編集したり、新規にオリジナルで作成したテンプレートファイルを「カスタムテンプレート」と呼ぶのです。具体的な編集手順は、まず、設定画面を開いて、左側にあるコラムの「外観」をクリックします。次に、プルダウンメニューで表示される項目の中から「テーマの編集」を選びます。

テーマ編集画面が表示されたら、右にあるコラムをスクロールさせて、編集するphpファイルを選択しましょう。なお、テンプレートファイルを直接編集する場合は、必ずバックアップを取ってから作業を始めましょう。編集操作が原因でサイトの表示に不具合が発生した場合には、バックアップがあると安心です。修復できないときにもとに戻せるからです。

まとめ

トップページはウェブサイトの「顔」です。WordPressの管理が初心者であっても、プラグインを使えば魅力的なデザインに編集できます。また、コーディングができる場合はさらに自在なカスタマイズが可能です。