当記事では、WordPressテーマ「SWELL」でサイト型トップページを作るカスタマイズについて解説していきます。
トップページをサイト型にする場合は、明確な目的がなければ中途半端なデザインになってしまいがちです。訴求するサービスや対策するキーワードを明確にして、読者にとって利便性の良いサイト型トップページを作っていきましょう。
今回はサイト型とブログ型の違いをはじめとして、SWELLでサイト型トップページを作る方法、サイト型トップページの基本構成などを初心者にもわかりやすくまとめました。
ぜひSWELLで理想のデザインを実現していってください。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
トップページの「サイト型」と「ブログ型」の違い
「サイト型トップページ」とは、自由なレイアウトで要素を配置したトップページデザインを指します。サイト型の対義語である「ブログ型トップページ」は、記事一覧リストが表示されているトップページデザインのことです。
具体的な違いを下記のとおりまとめました。
| 違い | サイト型 | ブログ型 |
|---|---|---|
| 特徴 | 訴求力が強い | 新規記事がすぐわかる |
| 対象 | 新規の見込み客向け | 既存のブログ読者向け |
| 作る手間 | かかる | かからない |
| センス | いる | いらない |
| ぱっと見の印象 | オシャレ/プロ感 | 普通のブログ |
各タイプの特徴を、少し詳しく解説します。
サイト型トップページのデザイン例と特徴
サイト型トップページは訴求力が強いため、なにか訴求したいサービスや商品がある場合におすすめです。とくに特化ブログやコーポレートサイトに向いており、新規の見込み客へアプローチしやすいページデザインだと言えます。
ブログ型トップページのデザイン例と特徴
ブログ型トップページは更新履歴が分かりやすいため、頻繁に記事を更新するサイトにおすすめです。ブログのファンからすると、新着記事がすぐにわかるブログ型の方が見やすく、親しみを感じやすい場合があります。
SWELLでは、とくに何も設定しなければ「ブログ型」のトップページが表示されます。
SWELLでサイト型トップページを作るメリット
ここでは、サイト型トップページを作るメリットを掘り下げて解説していきます。
トップページにSEO対策を施しやすくなる
サイト型のトップページにすることで、トップページでも特定の検索キーワードを対策しやすくなります。
トップページはサイト内でもっとも内部リンクが集中しており、SEO上重要なページです。考え方や戦略にもよりますが、とくに狙いたい対策キーワードが明確である場合は、サイト型にしてトップページで対策するのは良い手段の一つです。
とくにサイト全体が特定ジャンルに特化している場合は、サイト型トップページの活用に大きなメリットがあります。
読者へ効率よくサービス訴求ができる
新着記事が並んだブログ型のトップページと比べると、見せたい記事やサービスを自由に配置できるサイト型トップページの方が、訴求力が強くなります。
そもそもトップページを見にくる読者は、そのサイトにとって良質な見込み客です。
とくにSEO集客をメインにしているサイトであれば、特定の記事ページから入ってきて「他の記事も読んでみたい」と思った読者だけがトップページへ訪れます。つまりそういった読者へ自分達のサービスを見せられれば、成約率が高くなる可能性が考えられます。
もちろんブログ型で新着記事を見せるのも良いのですが、とくに訴求したいページやサービスが決まっているならば、サイト型トップページを作るのに大きなメリットがあります。
ブランディングに繋がる
サイト型のトップページにすることで、ブランディングにも役立ちます。
ブログ型は「いわゆるブログ」な見た目で、どのサイトも構成が大差ありません。しかしサイト型は自由にページ構成を組み立てられますので、サイトやサービスを読者に効率よく印象付けられる効果を見込めます。
トップページを良いデザインにできれば、それだけで読者からの信頼性が上がる場合もありますから、ブランディングにも取り組みたい方はぜひサイト型トップページ作成にチャレンジしてみてください。
SWELLでサイト型トップページを作るカスタマイズ方法
それでは、SWELLの機能を活用してサイト型トップページを作るカスタマイズ手順を解説します。
1. トップページデザインを固定ページで作成する
SWELLのトップページをサイト型にする場合「固定ページ」でデザインを作成します。
- なおトップページ用に指定する固定ページは、機能的に「フロントページ」や「ホームページ」と呼ばれます。
当サイトでトップページ用に用意している固定ページは、下記のような状態です。
固定ページのタイトルは表示されず、SEO的にもとくに意味を成しませんので、自分にとってわかりやすい名称で結構です。またパーマリンクも表には出ませんので、任意のもので問題ありません。（筆者はいつも「/top」などわかりやすいパーマリンクにしています）
アイキャッチ画像も表示されず、リンクが貼られたときは別途設定しているOGP画像が表示されます。
- OGP画像はSEO SIMPLE PACKから設定できます
あとはいつも記事ページを作るのと同じように作業をして、トップページに表示させたいページを作りましょう。
2. 新着記事一覧に使う固定ページを作成する
トップページをサイト型にすることで、従来表示されていた「新着記事一覧」ページがなくなってしまいます。そのページを用意するために、固定ページを作成しましょう。
- 新着記事一覧用に指定する固定ページは、機能的に「投稿ページ」と呼ばれます。
新着記事一覧ページはタイトルが表示されますので、読者から見てわかりやすい名称をつけておきましょう。「新着記事一覧」などがわかりやすいと思いますが、Webサイトのブランディングや世界観に合わせてください。パーマリンクは「/articles」などが一般的です。
ちなみに当サイトでは、パーマリンクは「/column」タイトルは「文亭の読みもの一覧」にしてあります。
なお新着記事一覧だけを表示するページで良ければ、タイトルだけを入れた空のページでも問題ありません。しかし作成したコンテンツ内容の下から新着記事が表示される仕様ですので、必要でしたら作り込んでください。
当サイトの新着記事一覧ページには、下記のように概要説明やカテゴリの一覧を設置しています。
3. カスタマイザーからサイト型トップページへ変更する
二つの固定ページが用意できたら、カスタマイザーからサイト型へと変更しましょう。
「外観→カスタマイズ→WordPress設定→ホームページ設定」と進むと、下記の画面へ。
下記のとおり設定してください。
- 「ホームページの表示」：固定ページを指定
- 「ホームページ」：トップページに表示したい固定ページを指定
- 「投稿ページ」：記事一覧に使いたい固定ページを指定
これでサイト型トップページの出来上がりです。
ちなみに執筆時点の仕様では「ホームページの表示」に設定したページが「サイト内検索」で出てきてしまいます。それが嫌な方は下記の記事で解説している「Search Exclude」などのプラグインで除外設定すると良いかもしれません。
サイト型トップページの基本構成
サイト型トップページを作るときに、なんとなくデザインを進めてしまうと、まとまりのないページになってしまいがちです。下記の要素に分けてデザイン構成を考えてみてください。
固定ページで作成するのは、上記構成でいえば「メインコンテンツ」部分のみです。ファーストビューやフッターエリアのデザインもあわせて構想しておくと、まとまりのよいサイト型トップページになります。
トップページ全体の構成について、少しお伝えしておきます。
ファーストビュー（FV）
ファーストビュー（FV）とは、そのページを開いて最初に目に入る画面のことで、一般的に「ヘッダー」と「ヒーローイメージ」で構成されます。
ヘッダーには「ヘッダーロゴ」と「グローバルナビ」を配置し、サイト名をわかりやすく伝えるとともに、サイト内の各ページへの導線（内部リンク）を設置するのが一般的です。
ヒーローイメージは、そのサイトのブランディングに関わる部分です。とくに訴求したいサービスへの送客ボタンを設置したり、サイトについて説明する印象的なコピー文を設置してください。SWELLでは「メインビジュアル機能」で作成できます。
メインコンテンツ
ファーストビューから下にスクロールした位置から、そのサイトでもっとも訴求したい「メインコンテンツ」を配置しましょう。今回のカスタマイズにおいてメインとなる、固定ページで作成する項目です。
サイト型にしたときのメインコンテンツデザインは、とにかく自由に設定できます。ただ一般的には、下記のような要素が配置されます。
- サイトについての解説
- 訴求したいサービスや商品
- 運営者プロフィール
- 利用者の評判（商品LPとして訴求する場合）
- 投稿記事一覧
- 予約フォーム
ご自身がサイト型トップページを作る目的を考えつつ、いろいろなサイトを参考にしながら作成してみてください。
フッターエリア
フッターエリアには、全ページに共通する注釈や固定ページへのリンク、その他雑多な情報をまとめておきましょう。
フッター直前ウィジェットは不要であれば設置する必要はありませんが、メインコンテンツ下にすぐ置いておきたいものがあれば作成します。
フッターウィジェットには、一般的には著者プロフィールやカテゴリページへのリンク、アーカイブページへのリンク、SNSアカウント情報、兄弟サイトへのリンク、商品説明などが書かれます。
最後のフッターメニューには、利用規約、特商法、免責事項、お問い合わせフォームなどを設置します。
必要な導線も考えながら、まとまりの良いフッターエリアを作ってみてください。
SWELLのトップページカスタマイズのコツ
サイト型トップページをオシャレに仕上げるには、おさえておきたいポイントがあります。
要点をまとめましたので、どうにもトップページがパッとしないときなどにお役立てください。
オリジナリティのあるヘッダーロゴを用意する
ヘッダーロゴはサイトの印象を大きく左右する項目ですので、できれば用意しておきましょう。例えテキストだけのロゴだったとしても、フォントを工夫するなどして作っておくだけで見栄えが良くなります。
SWELLでは「横1600px:縦360px」のサイズのロゴ画像が推奨されています。
- 公式に推奨されているというよりも、公式サイトのロゴが上記サイズで作られています。
「お知らせバー」は不要なら非表示にする
お知らせバーに表示するコンテンツがない場合は、設定で非表示にしておくとスマートな印象のサイトになります。
上記のようにフィードと検索のアイコンだけ残しているサイトを目にすることが多く、非表示にする方法がわからない人も多いようですので、解説しておきます。
「外観→カスタマイズ」と進み、下記のとおり設定してみてください。
- 「サイト全体設定→お知らせバー」と進み「表示しない」にチェック
- 「ヘッダー」内の「ヘッダーバー設定」項目にある「SNSアイコンリストを表示する」「コンテンツが殻でもボーダーとして表示する」のチェックを両方外す
- 「ヘッダー」内の「キャッチフレーズ設定」項目を「ヘッダーバーに表示」以外にする
上記の設定をすると、お知らせバーが完全に非表示になります。
メインビジュアルをうまく使う
SWELLの「メインビジュアル」は、サイト型トップページならぜひ活用したい機能です。
ファーストビューが格段にリッチな印象になりますので、画像か動画を設定して、印象的なコピー文を配置しておしゃれなサイトにしましょう。
当サイトのファーストビューは、用意した背景画像にブログパーツを組み合わせて実装しています。
工夫次第でさまざまなデザインを実現できますので、ぜひこだわってみてください。
フルワイドブロックでメリハリをつける
サイト型トップページは、ずっと同じ幅で縦に降りていくと単調な印象を与えてしまいがちです。要所に「フルワイドブロック」を使っていくことで、メリハリのついた印象的なトップページデザインに仕上げてみてはいかがでしょうか。
背景に写真を大きく表示させれば目を惹くデザインになりますし、下記のように背景色を変えるだけでも少し印象が引き締まります。
この辺りも、ぜひこだわって作ってみてください。
記事リストはカラムブロックで整理する
SWELLでサイト型トップページを作って記事一覧リストを表示するときは、カラムブロックをつかった構成が人気です。
カテゴリごとに特に読んでほしい記事を1つ大きく表示して、その他の記事を新着や更新順で横に並べるような形です。
うまくカラムブロックを使って、綺麗な投稿記事一覧項目を作ってみてください。
SWELLのサイト型トップページデザイン例
ここでは、SWELLで作成したサイト型トップページのデザイン例をご紹介します。
当サイトで作成したデモサイトを掲載しておりますので、ご参考ください。
- 随時追加していきます。
ライターポートフォリオ向けデザイン例
ライターの公式サイトとしてサイト型トップページを作る場合、経歴やお問い合わせ方法、執筆実績や料金体系をわかりやすく配置したデザインにしましょう。コラム記事によるSEO集客をするのもおすすめです。
お問い合せフォーム用につかったプラグイン「コンタクトフォーム7」の横幅だけCSSで調整していますが、そのほかはSWELL標準機能のみで制作しました。
コーポレートサイト向けデザイン例
コーポレートサイトのデザイン例です。スクショでは少々デザインが崩れましたが、右から左へいい感じの英字が流れる人気のアニメーションもCSSで実装しています。
最近はプロダクトや会社概要のほか、導入事例や採用情報、専門性を活かしたコラムなどを掲載する会社が増えています。コーポレートサイトに必要な情報やページはだいたい盛り込んだデザイン例になっていますので、ご参考ください。
店舗公式サイト向けデザイン例
パーソナルジムの公式サイトをイメージして作成した、サイト型トップページデザインです。見出しデザインとコンタクトフォーム7のデザインのみCSSでカスタマイズしている以外は、SWELL純正の機能のみで制作しています。
SWELLなら、こんなサービスや店舗の公式サイトデザインも手軽に作れてしまいます。
SWELLをおしゃれにカスタマイズするコツ
ここからは、SWELLをつかったサイトをよりおしゃれにデザインするコツをご紹介していきます。
メインカラーは3色までに抑える
これはファッションでもなんでも言われることですが、慣れないうちは使用カラーを「3色」までに抑えておくのが、おしゃれの基本です。できればトップページだけでなく、サイト全体で統一しましょう。
色が増えるほどバランスを取るのが難しくなり、ガチャガチャとした印象のサイトになってしまいます。あえてガチャガチャ感を狙う場合や、色についてのバランス感覚をお持ちでない限りは、相性の良い3色を選んでバランスよく配置してみてください。
色同士の相性は「カラーパレットツール」などを使ってチェックすると便利です。
見出しデザインをサイトの世界観に合わせる
SWELLにはさまざまな見出しデザインが用意されています。H2、H3、H4それぞれいくつかのデザインパターンが用意されていますので、ぜひサイトの世界観にあわせたカラーやデザインを選んでみてください。
初期設定のサイトも多く目にしますので、見出しが違うだけでオリジナリティを感じます。
ボタンを綺麗にカスタマイズする
とくにサービスサイトやアフィリエイトサイトでは、ボタンのデザインは重要です。
記事に埋もれてしまってはいけませんし、かといって目立ちすぎても、少々うさん臭くなってしまいます。綺麗ながらもアピールできて、サイトのデザインに馴染むボタンを用意しましょう。
その他CSSをつかったカスタマイズも取り入れてみる
デザインにこだわるなら、標準機能だけでなく、CSSカスタマイズを取り入れるのが近道です。例えばボタンのデザインをガラッと変えたり、好きな位置にアイコンを表示したりと、アイデア次第でさまざまなことができます。
CSSをつかってカスタマイズする基本事項は下記の記事にまとめてありますので、あわせてご参考ください。
SWELLのカスタマイズによくある質問
- 初心者でもサイト型トップページは作れる？
-
手順に沿っておこなえば、初心者でも問題なく作れます。とくにCSSやPHPの知識がなくとも、SWELL標準機能のみでも十分おしゃれにできます。ブロックエディタを使う練習にもなりますので、チャレンジしてみてください。
- サイト型トップページに目次を付ける方法は？
-
目次を挿入したい位置にショートコード用ブロックを配置し、SWELL公式で用意されている目次用ショートコード swell_toc を記載することで実装できます。
- サイト型トップページへの内部リンクをブログカードで作るにはどうすれば？
-
フロントページに設定している固定ページを指定すれば、問題なくブログカードにできます。その場合は固定ページタイトルをサイトタイトルと合わせておくか、ブログカードブロックの機能にある「タイトルを上書き」で任意のページタイトルに修正しておくと良いでしょう。
- サイト型トップページにアイキャッチ画像は表示できない？
-
SWELLの標準機能では表示できません。ページ最上部にアイキャッチとして表示させたい画像を挿入するのが、もっとも簡単な対策です。なおリンクを貼られたときは「OGP画像」が表示されます。
SWELLをおしゃれにカスタマイズしよう
色々と解説しましたが、基本的にはおしゃれで自分の好きなデザインのサイト型トップページを作れるのが一番です。
自分サイトが気に入ったデザインだと、やはり記事を書くモチベーションが変わります。
少しずつ改修していきながら、SWELLを活用して素敵なサイトを作っていってください。
