SWELLを使ったコーポレートサイトの作り方【サロンや企業サイトに】【トップページ】

こんにちは、Sakiです!

この記事では、WordPressテーマ「SWELL」を使ったコーポレートサイトの作り方を解説しています。

今回はこちらのデモサイトに沿って、サイト作成(今回はトップページ)を進めています。

こんなサービスにおすすめ

デモサイトはアロマサロンを想定して作っていますが、他のサロン関係のサービスでも、それ以外のサービスでも大丈夫です!

Saki

同じ構成でも色や画像を変えることで、雰囲気を大きく変えられます。ぜひご自身のサービスのオリジナリティを出してくださいね!

当ブログ使用テーマ
  • 初心者でも直感で簡単に操作できる
  • コードや難しい知識不要
  • ホームページにもブログにも対応
  • Webデザイナーに嬉しい100%GPL
  • 利用者も多い人気テーマ

SWELLを使ってホームページのデザインをするには、WordPressの導入が必要です。

もしもまだサーバー&ドメインの契約、WordPressの導入ができていない場合は、下記の記事の手順から始めてくださいね♪

\ホームページ制作承ってます/

女性を集客するホームページ制作

Etorire-designでは、個人事業主・フリーランス・ひとり起業をされている、女性起業家さま向けのホームページ制作を承っています!

ホームページ制作を依頼したい方、ホームページの自作に挑戦したけど完成しなかった方など、お気軽にご相談くださいませ♪

目次

WordPressの事前準備

Saki

この記事では、WordPressテーマSWELLを導入した前提で進めています。もしSWELLの導入が完了していない場合は、下記の記事を参考にしてください!

下記の記事の後半部分で、SWELLのダウンロード方法と、SWELLをWordPressにインストールする手順を解説しています!

SWELLを導入した後はこのようなサイトになっているかと思います。

ここからサイトのデザインを進めるんですが、サイトのデザインに入る前に、まずはWordPressの設定などの事前準備を済ませておいてください!

事前準備でやることは、下記の5つです。

  1. WordPressの初期設定
  2. 外観カスタマイズ
  3. トップページをサイト型にする
  4. 固定ページで下層ページを作成
  5. メニューを作成

WordPressの初期設定

まずはWordPressの初期設定を行います。

Saki

初期設定は途中でやるとエラーに繋がることもあるので、必ず最初に済ませてくださいね!

初期設定の手順については、下記の記事で解説しています。

カテゴリーについて

初期設定の中でカテゴリーの設定がありますが、デモサイト通りのカテゴリーは下記です。

  1. 名前→お知らせ、スラッグ→news
  2. 名前→お客様の声、スラッグ→voice
  3. 名前→コラム、スラッグ→column
Saki

上記でカテゴリーが追加されると、下記の画像のようになります。

外観カスタマイズでサイト全体デザインを整える

外観カスタマイズとは、サイト全体のデザインを整えられる場所です。

サイトのカラーやフォント、メインビジュアルなどを設定できるので、下記の記事より進めてください!

トップページに固定ページを表示させてサイト型にする

SWELLを導入した後は、最初の画像のように『ブログ型』になっています。

今回はホームページを作るので、固定ページで「ホーム」を作成し、それをトップページに表示させて『サイト型』にします。

WordPressのトップページに固定ページを表示させる手順は、下記の記事で解説しています!

デモサイトのようにする場合は、表示設定の際に固定ページの部分を「ホームページ→ホーム」に設定するだけでOKです!

固定ページで下層ページを作成

下層ページとは、トップページ以外で使用するページのことです。

デモサイトと同じサイトにするためには、「ホーム」以外に下記の下層ページが必要です。

  • サービス
  • お問い合わせ

下層ページの作り方は、上で解説したトップページ用の「ホーム」の作成と同じです。

管理画面の「固定ページ」から「サービス・お問い合わせ」ページを作成してください。

メニューを作成

最後に「メニュー」を作成します。

メニューの作成手順は下記の記事で解説しています!

デモサイトと同じメニューなら

デモサイトでは、下記のようにメニューを作成しています。

  • メニュー名→ヘッダー用
  • メニュー設定→「グローバルナビ」「スマホ開閉メニュー内」にチェック
  • 左側固定ページより→「ホーム・サービス・お問い合わせ」を追加
  • 左側カテゴリーより→「お客様の声・コラム」を追加
Saki

メニューの並び順はお好きな順番で大丈夫です!

SWELL「コーポレートサイト用」のトップページ作成手順

それではいよいよここからは、SWELLを使ったコーポレートサイトの作り方「トップページのデザイン」について、手順を解説します。

Saki

まずはトップページのデザインからです!

トップページの全体像は、デモサイトからご確認ください。

ブロックごとに背景の色を変えていますが、このブロックに分けて解説を進めます。ご自身のサイトに必要ない部分は作らなくてもOKです!

ブロック1「コンセプト文の作成」

ブロック1は、デモサイトの「SAKURAKOsalon」とタイトルがある部分です。

Saki

ここにはお店やサービスの簡単な紹介文や、コンセプト文を入れてみてください。

フルワイドの追加

  • +からメニューを開く
  • 「フルワイド」を追加
Saki

ここでフルワイドが見つからなければ、「すべて表示」から探してくださいね!

  • フルワイドを選択した状態で、右側バーからサイズを設定

画像のサイズは参考です。ページを確認しながら、お好きなものに調整してください!

フルワイドの背景色を変更

  • 右側バーから背景色を変更
Saki

デモサイトでは、白のカラー「#ffffff」と入力しています!

タイトル追加

  • 「見出し」の部分にタイトルを追加
  • 右側バーからテキストの色を設定

カラムを追加

  • カラムを追加
  • カラムパターンは「50/50」を選択

カラムを使えば、簡単にページのレイアウトを組むことができます。難しいコードを使わずに、クリックだけで比率なども選ぶことができますよ!

こんな感じで左右に分かれたカラムが追加されます。

それぞれの+をクリックすることで、左右にテキストなどを追加することができます!

  • デモサイト通りなら、左に画像、右にテキストを追加

それぞれ追加するとこのようになります。

Saki

以上でブロック1は完成です!

ブロック2「こんなお悩みありませんか?」

ブロック1と同じ手順で、またフルワイドを追加していきます。

  • +からフルワイドを追加

このとき、ブロック1のフルワイドの中の「+」ではなく、フルワイドの外にある「+」をクリックしてください!

少し分かりづらいですが、ブロック1のフルワイド全体を選択すると、青の枠線より外に「+」が現れます。

  • フルワイドの背景色を設定(デモサイトは#f9edf2)
  • 「見出し」の部分にタイトルを追加
Saki

これはブロック1と同じ手順です!

リッチカラムを追加

  • メニューから「リッチカラム」を追加
Saki

こんな感じで追加されます!

  • リッチカラムの「+」をクリックで、カラムを6個にする
  • 右側バーから列数を上から「3・2・2」に変更
Saki

これでPC時は3カラム、タブレットとスマホ時は2カラム表示になります。

  • 1つのカラムを選択して、背景色を設定(デモサイトは#ffffff)
  • テキストを入力
  • テキストを選択した状態で、ツールバーから文字の配置を「中央」に変更
  • 同じ手順で6個分を作成
Saki

以上でブロック2が完成です!

ブロック3「当サロンのサービス」

ブロック3も同じ手順でフルワイドを追加します。

手順が同じなので割愛しますが、背景色は#ffffffで設定しています!

カラムを追加

  • カラムを追加
  • パターンは「50/50」を選択
  • カラムの中に画像とテキストを追加
  • 小見出しにあたるテキストを太字に変更
Saki

ツールバーの「B」で太字になります!

  • フルワイドの中でカラムより外の「+」をクリック
  • 「SWELLボタン」を追加

右側のバーから、ボタンの色やサイズを変更できるので、自由に設定してください!

ボタンのカラーは、【管理画面→SWELL設定→エディター設定】から、好きなものに設定できます。

  • ボタンにテキストとリンク先を入力

リンクURLの探し方

今回は固定ページの「サービス」のURLを入力しますが、下記の手順から調べることができます。

  • 固定ページ一覧へ移動
  • 該当ページの「表示」をクリック
  • 画面の上にあるURLバーをコピー
Saki

もしくは最初の事前準備でメニューを作成しているので、更新したページ上から「サービス」ページへ飛んでもURLをコピーすることができます!

ブロック4「お客様の声」

  • 同じ手順でフルワイドと見出しを追加
  • 「投稿リスト」を追加

「お客様の声・お知らせ・コラム」はすべて、投稿した記事が自動で表示されるように設定します。

投稿リストを追加すると、このように「記事が見つかりませんでした」、もしくは「Hello World!」が表示されているかと思います。

  • 右側バーの「Pickup」を選択
  • 下の方にあるカテゴリーから「お客様の声」を選択
Saki

これは事前準備のカテゴリー部分で追加したものが表示されています。もし「未分類」しかない場合は、カテゴリーから追加してくださいね!

  • 右側バーの「Settings」を選択
  • レイアウトを「カード型」に設定

このような感じで投稿記事が表示されるようになります!

ちなみに画像は、すでに「投稿」からサンプル記事を投稿しているので、記事が表示されています。

Saki

ご自身でも確かめたい場合は、下記画像の「投稿」から試してみてください!

  • 管理画面「投稿」→新規追加で記事を作成できます

記事を作成するときは、右側バーにあるカテゴリーの「お客様の声」を選択しておいてくださいね!

次に、お客様の声の記事一覧に飛ぶように、ボタンを設定していきます。

  • 右側バーの「Settings」を選択
  • 下の方にある「MOREリンクの…」にテキスト入力
  • 「MOREリンクのURL」にページURLを入力

ページのURLは、サイト上のメニューにある「お客様の声」ページに飛ぶと分かります!

  • 画面の上にあるURLをコピー
  • 「MOREリンクのURL」に貼り付け
Saki

きちんと指定ページに飛ぶか、ページを更新してボタンから確認してくださいね!

ブロック5「オーナーご挨拶」

次にブロック5の、オーナーご挨拶を作成していきます。

ここでもこれまでと同じ手順で作成でもいいですが、実はブロック1と構成が同じになっています。

Saki

なので少しだけ楽に作れるように、「複製」を使っていきたいと思います!

フルワイドの複製手順

  • ブロック1の全体(フルワイドごと)選択
  • ツールバーから「複製」を選択

このようにブロック1の下に、全く同じブロックが追加されます。

  • 下に追加されたブロックをツールバーの矢印で1番下に移動

あとは見出しや画像、テキストを変換していくだけです!

  • 画像はツールバーの「置換」から変更できます
Saki

すべて変更したものがこちらです!

ブロック6、7「お知らせ&コラム」

上で解説した「お客様の声」部分と同じ手順で、「お知らせ・コラム」のブロックを作成します。

今回は、「コラム」のみ「もっとみる」のボタンを追加しています。

投稿の表示設定「お知らせ」

投稿の表示設定ですが、「お知らせ」は「テキスト型」にしています。

投稿の表示設定「コラム」

「コラム」は「カード型」です!

Saki

「お客様の声・お知らせ・コラム」すべて、ご自身のお好きな表示形式で大丈夫です!

トップページの完成と残りのやること

以上でSWELLを使ったコーポレートサイトの作り方、「トップページのデザイン」が完成しました!

Saki

ここまで長かったかもしれませんが、お疲れさまです!

固定ページでのトップページは完成したので、残りは下記の4つの作業でホームページが完成します!

  1. ブログパーツでフッターを作る
  2. 下層ページのデザイン
  3. お問い合わせフォームの作成
  4. ウィジェットの整理

ブログパーツでフッターを作る

今回のデモサイトはサロン用なので、フッター(サイトの下部分)に店舗情報を表示させるようにしています。

この部分はどのページへ飛んでも表示するようにしていますが、各ページ内で作るのではなく、フッターのウィジェット内で設定しています。

各ページで作ると、変更があった際にすべてのページの修正が必要なので大変です。ウィジェットという場所を利用すれば、1カ所だけでの作成・修正で済むので便利ですよ!

そしてこのウィジェット内では、SWELLの『ブログパーツ』という機能を利用しています!

下記の記事ではブログパーツについて解説しており、デモサイトに合わせたフッターの作成も解説しています。

下記記事の【SWELLのブログパーツはホームページのフッターにも最適!】の見出しから手順を進めてください!

下層ページのデザイン

下層ページを使った「サービス」ページの作り方は、下記の記事で解説しています。

Saki

要領はこの記事で解説したトップページと同じなので、ぜひ作成してみてくださいね!

お問い合わせフォームの作成

コーポレートサイトやホームページには、お問い合わせフォームが必要ですよね。

お問い合わせフォームは、「Contact Form7」というプラグイン(拡張機能)を使って作成するのがおすすめです!

下記の記事では、Contact Form7を使ったお問い合わせフォームの作成手順を解説しています。

Saki

プラグインを使用しますが、画像付きで解説しているので、初心者の方でも安心して作成していただけると思います!

記事内の表示を整える

SWELLでは何も設定していない場合、記事の下にSNSマークや「この記事を書いた人」などが表示されています。

ですが見た目的に邪魔だったり、必要のない情報は削除したいですよね。

Saki

設定を変更すれば、このようにスッキリとさせることができます!

下記の記事では、記事内の表示と、横のサイドバーも含めて、変更する手順を解説しています。

よかったらシェアしてね!
目次