【初心者向け】SWELLを使ったサイト型トップページの簡単な作り方

今回は、WordPressのテーマ『SWELL』を使って、サイト型トップページを簡単に作る方法を徹底解説します！

『SWELL』は、初心者でも扱いやすいと評判のテーマですが、「でも、サイト型トップページの作成が難しそう…」と感じている方も多いのではないでしょうか？

そこで、この記事ではサイト型トップページの基本と、ブログ型トップページとの違い、そしてその利点について詳しくお伝えします。

＼ 本当に使いやすいテーマなら／

「SWELL」とは？初心者でも直感的にデザインしやすい最強テーマ

SWELLとは2019年3月にリリースされた、シンプルで高性能なWordPressテーマです。
私は１０個くらいテーマを使っていますが、SWELLほど使いやすく、楽しいテーマは初めてでした。

初心者でも使いやすく、直感的に使えて、プロっぽい仕上がりのサイトができる。
イメージしたサイトがどんどんできるので、手が止まらなくなるほどです。

推しポイントはたくさんあるのですが、その中でも、SWELLを愛用している私が、SWELLのメリットを３つお伝えします！

＼ 本当に使いやすいテーマなら／

サイト型トップページとは、「情報が整理されたトップページ」のこと

「サイト型トップページ」って何？

「サイト型トップページ」は、「情報が整理されたトップページ」のことです。

「サイト型トップページで」は、最初に見る「サイトの顔」に、メインコンテンツへのリンクやキャッチコピーなどを配置し、訪問者が必要な情報に素早くアクセスできるよう設計されています。企業サイトやポートフォリオに多く見られる形式ですね。

それに対し、「ブログ型トップページ」は、更新順に記事が一覧表示される形式で、最新の情報を常に表示でき、ブログやニュースサイトに向いています。訪問者は新しい記事を簡単に見つけられます。

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

サイト型トップページにはこんなメリットがあります。

「サイト型」トップページは、どんな人におすすめ？

例えば、こんな場合は断然「サイト型トップページ」がお勧めです！

今回は、ポートフォリオサイトを作るのを例にとって、次から作り方を説明していきます。

作り出す前に準備！　デザインのパーツを準備しよう！

トップページの設計図をイラストで書く（手書きでOK）

まずは、手書きでOKなので、どんなトップページにするか紙に描いてみましょう。
もちろん、PhotoshopやIllustratorを使えるならばそれでもOKです。

でも、SWELLが高機能なので、「なんとなくこういう感じ」というレイアウトだけ作っておけば
微調整が効いてイメージ通りできるので大丈夫です！

テーマカラーを決める

トップページの内容が決まったら、テーマカラーです。
サイトのイメージを決めるのに、２～３色を決めるとまとまりやすくなります。

今回はこの２色。

ロゴ、メインビジュアル画像、ファビコンの準備

次に、トップページで使うパーツを実際に準備します。JPEGかPNGの画像形式で作りましょう。
以下のサイズに従って作ってください。

ヘッダーロゴ	1600×360px
メインビジュアル	1600×900px *PC用と別にスマホ用のサイズを作る場合は「横幅600～960px」がおすすめです。
ファビコン	512×512px（png推奨）
その他 （「ニュース」「メッセージ」など項目）	それぞれ横幅800px程度で作っておくと安心です

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

サイト型トップページを作るための基本的な設定方法を具体的に解説しますね。

メインビジュアルの設定

WordPressの管理画面から【外観】→【カスタマイズ】を選択します。

その中の【トップページ】→【メインビジュアル】をクリック。
「メインビジュアルの表示内容」で「画像」が選択されています。

下の方にいくと「各スライドの設定」があるので「画像の選択」をクリックして準備しておいたメインビジュアルの画像をアップロードします。

ヘッダーロゴの設定

【カスタマイズ】画面に戻り【ヘッダー】を選択します。

その中で「ヘッダー背景色」にテーマカラーで決めた色を設定。
さらに「ヘッダーロゴの設定」で準備したロゴを設定します。

画面が切り替わり、デザインが表示されるので「公開」をクリックしてください。

そしたら「公開」ボタンをクリックしてください。

※画面キャプチャで、私が作成中のサイトはこちら 「トラマサ」→ https://tyn-c.com/toramasa

トップ用固定ページの作成・投稿一覧ページの作成

次に、トップ用にする固定ページと、投稿一覧を掲載するための固定ページをそれぞれ作ります。

WordPressの【ダッシュボード】に戻ります。

【固定ページ】→【新規固定ページを追加】をクリックします。

タイトルに「メインページ」、リンクに「main」と設定します。

同じように【固定ページ】→【新規固定ページを追加】からもう１ページ作成します。

タイトルに「New Post」、リンクに「newpost」と設定します。

ファビコンの設定

ファビコンとは、Webサイトのシンボルマークとして用いられるアイコンで、「favorite icon（お気に入りのアイコン）」の略です。ブラウザのタブやブックマーク、検索結果画面などに表示され、ユーザーがWebサイトを見つける目印となります。

ファビコンを設定しておくと、認識力がアップするので、「あのサイトだな」と認識してもらいやすくなります。

設定するには、まずWordPressの【ダッシュボード】に戻ります。

【WordPress設定】→【サイト基本情報】の画面で、「サイトアイコンの選択」をクリックして準備したファビコンをアップしましょう。

トップ用固定ページを編集する

さらにトップページを作り込みます。

ここからはSWELLのエディターの機能の出番！
トップページの設計図で描いた内容を、作り始めます。

まずは、【WordPress管理画面】→【固定ページ一覧】→【メインページ】をクリックします。

「➕」ボタンを押すとブロック一覧が表示されるので、画像やテキストを配置して保存してください。

最後に仕上げをします

固定ページ「メインページ」の準備ができたら公開します。

WordPress管理画面から【外観】→【カスタマイズ】→【WordPress設定】→【ホームページ】を選択します。

ここで、先ほど作成した「メインページ」「投稿ページ」をセットし「公開」します。

「ホームページ」＞「メインページ」
「投稿ページ」＞「New Post」

これでWordPressトップ画面に戻ると、サイト型トップページが完成します。
ここまでの作業で、完成したサイトがこちらです。設計図のイメージでできています。

「できた！」と思った後に、もう一度見直してみてバランスを考えてみてください。

私のおすすめは「スペース」を入れること。
ブロックの間のスペースが詰まっていると、ぎゅうぎゅうなデザインになります。
ほどよいスペースを調整することで、ブロックごとの意味の切れ目もわかりやすくなるんです。

また、スマホで見てバランスを変更することも大切です。
今は、サイトにアクセスしてくださる方の８０～９０％はスマホです。
スマホだと縦長のデザインになるので、必ずスマホからバランスをみて調整してください。

まとめ

いかがでしたか？

今回は、WordPressテーマ『SWELL』を使ったサイト型トップページの作り方についてご紹介しました。
サイト型トップページは、訪問者が情報を見つけやすく、専門性をしっかり伝えることができるので、サイトの魅力を最大限に引き出せる方法です。

ぜひこの記事を参考に、自分のサイトに合ったトップページを作成してみてくださいね。
次回もお楽しみに！」

＼ 本当に使いやすいテーマなら／

まだ、SWELLを購入・インストールしていないという方は、こちらの記事も参考にしてください。