【SWELL】サイト型トップページを作ってみよう｜デモページを例に手順を解説

SWELLを使っていると、「おしゃれなサイト型トップページを作ってみたい」と思うことはありませんか？

とはいえ、最初は何を配置すればよいのか分からず、難しそうに感じる方も多いと思います。

そこでこの記事では、実際のデモページを例にしながら、SWELLでサイト型トップページを作る手順を初心者向けに解説します。

ブロックエディタだけで作れるので、コードの知識は必要ありません。

「ブログっぽいトップページから卒業したい」という方は、ぜひ参考にしてみてください。

サイト型トップページとは？

サイト型トップページとは、最新記事を一覧で表示するブログ型トップページとは異なり、自分で自由にレイアウトを作れるトップページのことです。

おすすめ記事やカテゴリー、プロフィールなどを見やすく配置できるため、訪問者に見てほしい情報を分かりやすく伝えられます。

SWELLではブロックエディタを使ってサイト型トップページを作成できるため、コードの知識がなくてもおしゃれなデザインを目指せます。

私もブログを始めた頃は一般的なブログ型トップページを使っていましたが、サイトの雰囲気をもっと伝えたいと思い、サイト型トップページを作成しました。

ブログ型との違い

項目	ブログ型	サイト型
表示内容	最新記事一覧	自由にレイアウト
作成難易度	簡単	やや高め
デザイン性	普通	高い
おすすめ記事の紹介	しにくい	しやすい

どちらが正解というわけではありませんが、サイトの世界観を伝えたり、読んでほしい記事を目立たせたりしたい場合は、サイト型トップページがおすすめです◎

サイト型トップページのメリット

サイト型トップページには、訪問者に見てほしい情報を分かりやすく伝えられるというメリットがあります。

ブログ型トップページは最新記事が順番に表示されますが、サイト型トップページはレイアウトを自由に決められるため、おすすめ記事やカテゴリーなどを目立つ場所に配置できます。

また、サイト全体の雰囲気や発信内容も伝わりやすくなるため、初めて訪れた方にも「どんなブログなのか」を理解してもらいやすくなります。

もちろんブログ型トップページにもメリットはありますが、「読んでほしい記事を目立たせたい」「サイトの雰囲気を伝えたい」という場合は、サイト型トップページが向いています。

私自身もサイト型トップページを作ったことで、読んでほしい記事への導線を作りやすくなり、ブログ全体が見やすくなったと感じています。

サイト型トップページを作る前の準備

本章では、サイト型トップページを作る前に準備するものを4つ紹介します。

先に準備を済ませておくことで、その後の作業をスムーズに進められますよ。

記事を準備しておく

サイト型トップページを作る前に、あらかじめ記事を20記事ほど準備しておきましょう。

幾ら外観を整えても肝心の中身がスカスカだと、せっかくブログに訪れてくれた読者さんが、がっかりしてしまいます。

記事は適当に用意するのではなく、SEOを意識した記事を用意しておくのがおすすめです。

固定ページを2つ用意する

サイト型トップページを作る場合は、固定ページを2つ用意しておくのがおすすめです。

• 1つ目は、ホームページとして使用する「フロントページ」です。
• 2つ目は、投稿した記事を一覧表示するための「記事一覧ページ」です。

フロントページにはサイト型トップページを作成し、記事一覧ページにはブログ記事が自動で表示されるよう設定します。

ホームページと記事一覧ページを設定する

固定ページを作成したら、「設定」→「表示設定」を開きます。

「ホームページの表示」を「固定ページ」に変更し、以下のように設定しましょう。

• ホームページ：フロントページ
• 投稿ページ：記事一覧ページ

これでトップページには作成したサイト型トップページが表示され、記事一覧ページには投稿した記事が一覧で表示されるようになります。

掲載したい内容を決めておく

作業を始める前に、どのような内容をトップページに掲載するか考えておくと作りやすくなります。

私は以下のような内容を配置しました。

• ヘッダー
• メインビジュアル
• 新着記事
• カテゴリー
• 人気記事
• プロフィール

最初から完璧を目指す必要はありません。

後から追加や修正もできるので、まずは大まかなイメージを決めておきましょう。

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

準備ができたら、実際にサイト型トップページを作成していきましょう。

今回は私が実際に作成したデモページを例にしながら、各パーツの作り方を紹介します。

すべてを同じに作る必要はありませんので、自分のブログに合った形でアレンジしながら進めてみてください。

ヘッダーを設定する

まずはサイトの顔となるヘッダーを設定しましょう。

ヘッダーにロゴ画像を設定しておくことで、サイトの印象が伝わりやすくなります。

ロゴ画像を用意する

今回は横600px × 縦135pxのサイズでロゴ画像を作成しました。

必ずこのサイズで作る必要はありませんが、横長のロゴにしておくとヘッダーへ配置しやすくなります。

今回のデモページで使用したロゴ画像です◎

ロゴ画像がまだ用意できていない場合は、サイト名をテキスト表示にしておいても問題ありません。

ブログ運営を続けながら後から変更することもできます。

ロゴ画像を設定する

ロゴ画像は「外観」→「カスタマイズ」→「ヘッダー」から設定できます。

ヘッダーにグローバルナビを追加する

グローバルナビの追加方法は、「外観」→「メニュー」→「メニューを編集」から行えます。

メインビジュアルを設定する

メインビジュアルは、サイトを訪れた読者が最初に目にする重要なエリアです。

サイトの雰囲気や発信内容が伝わる画像を設定しておきましょう。

今回は以下のサイズで画像を作成しました。

• PC用：1600px × 900px
• スマホ用：960px × 800px

このサイズで作成しておくと、パソコンとスマホのどちらでもバランスよく表示できます。

メインビジュアルの設定方法

メインビジュアルは「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」から設定できます。

私は最初、「どんな画像を用意すればいいんだろう？」と悩みましたが、まずはサイトの雰囲気が伝わるシンプルな画像を設定するだけでも十分だと感じました◎

フルワイドブロックを追加する

ヘッダー・メインビジュアルの設定が終わったら、次は固定ページで作成したトップページの中に各パーツを配置して行きます。

今回のデモページでは、

• 新着記事
• カテゴリー別記事
• 人気記事
• プロフィール

をフルワイドブロックの中に配置しています。

フルワイドブロックを使用することで、背景色を付けたり、エリアごとに区切ったりできるため、メリハリのあるトップページを作りやすくなります。

フルワイドブロックの追加方法

ブロックを追加をクリックし検索窓に「フルワイド」と入力します。

見出しの部分に、新着記事であれば「NEW POST」と入力し、お好みで文字サイズを調整します。

フルワイドの中にブロックを追加することで、投稿リストを表示させることができます。

新着記事を作成する

新着記事を設置しておくと、読者に最新の記事を見てもらいやすくなります。

また、ブログが更新されていることも伝わるため、サイトに活気のある印象を与えられます。

私もサイト型トップページを作る際に、新しい記事がすぐ目に入るよう新着記事エリアを設置しました。

投稿リストブロックを追加する

新着記事はSWELLの「投稿リスト」ブロックを使って表示できます。

固定ページ編集画面で投稿リストブロックを追加しましょう。

表示設定を変更する

投稿リストブロックを追加したら、表示する記事数やレイアウトを設定します。

今回は以下のように設定しました。

• 表示件数：6件(カテゴリー・人気記事は3件)
• 表示形式：カード型
• 並び順：新着順
• 各種設定
  • 公開日を表示するをオン
• カテゴリーの表示位置：サムネイル画像の上
• タイトルのHTMLタグ：H2
• 最大カラム数
  • 3列(PC)
  • 1列(スマホ)
• 抜粋文：なし

表示件数は多すぎるとトップページが長くなってしまうため、まずは4〜6記事程度がおすすめです。

カテゴリー別記事を作成する

カテゴリーを設置しておくと、読者が興味のある記事を探しやすくなります。

特に記事数が増えてくると、新着記事だけでは目的の記事を見つけにくくなるため、カテゴリーへの導線を用意しておくと便利です。

今回はSWELLのタブブロックを使い、カテゴリーごとに記事を切り替えて表示できるようにしました。

タブブロックを追加し、カテゴリーごとに投稿リストを設置する

まずはSWELLの「タブ」ブロックを追加します。

タブを使うことで、複数のカテゴリーを1つのエリアにまとめて表示できます。

タブの中に投稿リストブロックを追加し、それぞれ表示したいカテゴリーを設定します。

今回はカテゴリーごとに記事を表示し、タブを切り替えるだけで別のカテゴリーの記事が見られるようにしました。

タブのタイトルを設定する

タブ名にはカテゴリー名を入力します。

読者さんがどのカテゴリーの記事を見ているのか分かりやすくなるため、シンプルな名前にしておくのがおすすめです。

人気記事を作成する

人気記事を設置しておくと、初めてサイトを訪れた読者さんが「まず何を読めばよいのか」を見つけやすくなります。

よく読まれている記事を表示できるため、ブログの代表的なコンテンツを読んでもらうきっかけにもなります。

私もトップページでは、特によく読まれている記事を表示しています。

投稿リストを追加したら並び順を人気順に変更する

投稿リストブロックを追加したら、ブロック設定から並び順を「人気順」に変更します。

これだけで、よく読まれている記事を表示できるようになります。

プロフィールを設置する

プロフィールを設置しておくと、どのような人がブログを運営しているのかを読者に伝えられます。

初めて訪れた方にもサイトの運営者が分かるため、安心感につながります。

私もトップページにはプロフィールを設置し、ブログについて簡単に紹介しています。

リッチカラムブロックでプロフィールを横並びにする

プロフィールエリアは、SWELLの「リッチカラム」ブロックを使って作成しました。

設定方法は簡単で、フルワイドブロックの中にリッチカラムブロックを入れるだけ。

左側にプロフィール画像、右側にプロフィール文を配置することで、すっきりとしたレイアウトになります。

プロフィール画像を用意する

次はプロフィール画像を用意しましょう。

顔写真である必要はなく、イラストやアイコンでも問題ありません。

ブログの雰囲気に合った画像を選ぶのがおすすめです。

プロフィール文を作成する

プロフィール文には、ブログで発信している内容や簡単な自己紹介を記載します。

長くなりすぎると読みにくくなるため、まずは数行程度にまとめると見やすくなります。

ボタンを設置する

より詳しいプロフィールページがある場合は、ボタンを設置して案内するのもおすすめです。

興味を持った読者に詳しい情報を見てもらいやすくなります。

サイト型トップページ作りで意識したいポイント

サイト型トップページは自由度が高い反面、あれもこれも詰め込みたくなってしまいがちです。

ですが、最初から完璧なトップページを作る必要はありません。

ここでは、私が実際に作成する際に意識したポイントを紹介します。

まずは必要なパーツだけ配置する

サイト型トップページは自由に作れるため、つい多くの情報を詰め込みたくなります。

しかし、要素が多すぎると読者さんがどこを見ればよいのか分かりにくくなってしまいます。

私もまずは「新着記事」「カテゴリー」「人気記事」など、必要なパーツだけを配置するところから始めました。

読者が迷わない導線を意識する

トップページはサイトの案内板のような役割があります。

読者さんが次にどこへ進めばよいか分かるように、カテゴリーや人気記事などの導線を設置しておくことが大切です。

「読者さんに何を見てもらいたいか」を考えながら配置してみましょう。

後から少しずつ改善していく

最初から理想どおりのトップページを作るのは難しいものです。

私自身もブログを続けながら配置やデザインを見直し、少しずつ改善してきました。

完璧を目指すよりも、まずは公開して使いながら調整していくことをおすすめします。

まとめ

今回は、SWELLでサイト型トップページを作る方法を紹介しました。

サイト型トップページは難しそうに感じるかもしれませんが、SWELLの機能やブロックを活用すれば、コードを書かなくても作成できます。

私も最初は「どこから手を付ければいいんだろう？」と悩みましたが、少しずつパーツを追加しながら今の形にしていきました。

まずは固定ページを用意して、新着記事やカテゴリーなど必要なパーツから設置してみましょう。

あなただけのサイト型トップページ作りの参考になれば嬉しいです。