【図解で簡単】SWELLでサイト型トップページを作るカスタマイズ手順

SWELLを使ってトップページをおしゃれにカスタマイズしようとしている皆さん

• トップページには何が必要なんだろう？
• ブログとサイトの違いは？どっちを作った方がいいの？
• サイト型のホームページの作り方は？

本記事では、大人気テーマSWELを使った「おしゃれなサイト型トップページの作り方」をご紹介します。

本記事はWordPressテーマSWELLを使ったトップページの作り方記事です。まだ利用されていない方は『WordPressテーマ「SWELL」のインストール手順と最初にやること』をチェックしてみてください。

＼本サイトで利用しているWordPressテーマ／

SWELLのカスタマイズで作れるサイト型トップページとは？

SWELLは美しいデザインが特徴で、SWELLを使えば「サイトに訪れる読者に知りたい情報へシンプルに分かりやすく導くデザイン」のトップページを作ることができます。

ブログとの違いはユーザーに最適化された作りかどうか

ブログは運営者を主に考えた作りで、その運営者がどんな記事を投稿しているかが分かりやすいサイト構成をしています。そのため新着記事がメインで、トップページ一杯に新着記事が並んでいる作りが多いです。

一方サイト型（=ホームページ）は読者（サイト訪問者）を主に考えた作りで、どんな情報を発信しているサイトなのか、どういった順番で読めば良いのか分かりやすいサイト構成をしています。
そのためトップページにはカテゴリーや読むべき記事、人気記事などが区分されて並んでいる作りが多いです。

分かりやすい例でいくと、新着の情報が列挙されているブログは日記、情報が読者にも分かりやすく整頓され配置しているサイトは参考書のような構成です。

SWELLで作るサイト型トップページの全体概要

サイト型トップページでカスタマイズする主な項目は、ヘッダー・メインコンテンツ・フッターです。

ヘッダー・メインコンテンツ・フッターでユーザーの動線をナビゲートする

サイト型トップページを作るためには、トップページの主なカスタマイズ項目であるヘッダー・メインコンテンツ・フッターで（サイトに訪れた）読者にどこに何があるのかを分かりやすくナビゲート（=案内）することが重要です。

サイトを参考書としたときに、トップページは参考書の表紙であり、目次です。

その参考書（=サイト）は何の本なのか、読んだら何が知れるのか、どこに何が書いてあるのかを読者に分かりやすく伝えることで、その本のファンになり愛読してくれます。

トップページはそのサイトの個性を伝えることに固執しがちですが、読者を第一に考え、迷うことなく各記事へ案内するためのナビゲートを大事にしましょう。

メインコンテンツの工夫でサイトの回遊率を上げる

ヘッダー・メインコンテンツ・フッターの中でも、特にユーザーの利便性に影響するのがメインコンテンツです。

メインコンテンツはヘッダー（サイトの玄関）の次に表示されるため、ヘッダーを見てサイトに興味を持ってくれた人が、もう少し詳しく知りたいとスクロールしてくれた時に目に入るエリアだからです。

ヘッダーを見てサイトに興味を持ってくれた読者に対して、メインコンテンツを介して読者のより興味のある情報に案内することでサイトの回遊率を上げ、読者満足度を高めます。

実際にはトップページを最初に開く読者は（SNSからの流入を除いて）ほとんどいません。そのため、ヘッダーで興味を持ってメインコンテンツに訪れるではなく、各記事（サイトへの興味）→トップページ→ヘッダー（何のサイトか）→メインコンテンツ（どんな情報があるのか）の順で見ていきます。

SWELLで作るサイト型トップページの作成手順

サイト型トップページの作成手順を解説していきます。

作成前にサイト型トップページ作成の全体感を整理する

実際にサイト型トップページを作成する前に、手順の全体感をイメージしましょう。

①基本：何が必要か知る【本記事で詳しく解説】

ヘッダー・メインコンテンツ・フッターに配置したい要素を知る必要があります。

要素を知り、自分のサイトで採用するべき要素を取捨選択していきましょう。

②基本：必要なコンテンツの見せ方・作り方を知る【本記事で詳しく解説】

必要な要素がわかったら、実際にSWELLでの作り方を紹介していきます。

③応用：独自性あふれるおしゃれなデザインにする

必要なものを決定し、実際に要素をサイトに配置できたら、あなたのブログだけの独自性あるデザインにしていきましょう。

おしゃれなブログにする方法は、たくさんのルールや作り方があるので詳しくは『【初心者必見】おしゃれなブログの作り方！デザインルール17選と参考サイト紹介』をチェックしてみてください。

サイト型トップページのメインコンテンツ【SWELLのカスタマイズ方法】

サイト型トップページを作る上で、最もブログとサイトを分けるメインコンテンツの解説をしていきます。

メインコンテンツは固定ページで作る

サイト型トップページは、カスタマイズした固定ページをトップページに表示させることで作成していきます。

WordPress導入当初は、トップページに新着記事が一覧表示される設定になっています。トップページを独自のレイアウトに変更するために、自身でカスタマイズした固定ページを表示させます。

サイト型トップページ作成においてよく使うブロック

サイト型トップページでは以下のブロックをよく使います。

• カラム
• フルワイド
• 投稿リスト

簡単な利用手順をご紹介しているので、知らないブロックについては「▼」ボタンを開いて参考にチェックしてみてください。

メインコンテンツに載せたい要素６個

基本①：新着記事一覧エリア

投稿記事を新着順で一覧表示するエリアです。

サイト型トップページのため、新着記事を大きく表示はさせないですが、新着記事のナビゲーションとしてエリア分けして表示させます。

↑手順の詳細は「▼」を開くと見れます

基本②：人気記事一覧エリア

人気記事一覧を表示するエリアです。

人気記事の表示方法は、本ブログでは全てカード型での表示形式をとっています。
新着記事は最新（１記事目）の記事に需要がある一方で、人気記事については明確に１番の記事が需要があるとは言えないため、上位の記事をまとめて視認性よく見える形をとっています。

以下の手順ではカード型の形式をとっていますが、ご自身のサイトの特性やターゲットの読者の特性に合わせて形式を検討してください。

↑手順の詳細は「▼」を開くと見れます

基本③：ピックアップ記事一覧エリア

ブログ運営者が読者におすすめしたい記事（ピックアップ記事）を一覧表示するエリアです。

ピックアップ記事は、サイトの中でも特におすすめしたい記事群なので、サムネイルやカードで印象付けています。

表示形式はご自身のサイトの方針、ターゲットの特性に合わせて変更してください。

↑手順の詳細は「▼」を開くと見れます

基本④：カテゴリーナビエリア

カテゴリー（カテゴリー以外に特定の記事なども可）をビジュアルよくナビゲーションできるバナー。

SWELLの独自機能であるピックアップバナーで作成した「ピックアップバナー版」と、SWELLの独自ブロックであるリッチカラムで作成した「リッチカラム版」の完成イメージです。

ピックアップバナーでの作成方法については、公式ページでも詳しく解説されているので『SWELL公式-ピックアップバナー解説ページ』をチェックしてみてください。
本記事では、少しカスタマイズが必要なリッチカラム版の手順をご紹介します。

ピックアップバナーで利用する画像サイズは16:9の固定サイズですが、リッチカラム形式では単なる画像ブロックを配置するだけなのでカスタマイズ性は高いです。

↑手順の詳細は「▼」を開くと見れます

基本⑤：カテゴリー詳細エリア

カテゴリーに含まれる記事群をトップページ上で数記事表示するエリアです。

本ブログではそのカテゴリーが何を表しているのか視覚的に表現するため、「メディアとテキスト」ブロックを使って画像と記事リストを配置しています。

↑手順の詳細は「▼」を開くと見れます

基本⑥：サイト情報・プロフィールエリア

サイト運営社のプロフィール情報を表示するエリアです。

本ブログでは、サイト情報の中にプロフィール情報を配置しています。

まとめ：SWELLのカスタマイズでサイト型トップページを作る手順

SWELLを使ったサイト型トップページを作る手順をご紹介しました。

本記事でご紹介した手順に沿って作成していけば、読者満足度の高いトップページが作れます。

また、色合い含めサイト全体のデザインについては『WordPressテーマ「SWELL」デモサイトの色カスタマイズ例一覧』で事例を紹介しています。併せてチェックしてみてください。