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

こんにちは、Sakiです！

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

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

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

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

＼ホームページ制作承ってます／

WordPressの事前準備

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

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

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

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

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

WordPressの初期設定

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

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

カテゴリーについて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューを作成

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

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

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

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

• メニュー名→ヘッダー用
• メニュー設定→「グローバルナビ」「スマホ開閉メニュー内」にチェック

• 左側固定ページより→「ホーム・サービス・お問い合わせ」を追加
• 左側カテゴリーより→「お客様の声・コラム」を追加

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

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

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

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

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

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

フルワイドの追加

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

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

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

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

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

タイトル追加

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

カラムを追加

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

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

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

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

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

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

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

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

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

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

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

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

リッチカラムを追加

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

• リッチカラムの「＋」をクリックで、カラムを６個にする

• 右側バーから列数を上から「3・2・2」に変更

• １つのカラムを選択して、背景色を設定(デモサイトは#ffffff)
• テキストを入力

• テキストを選択した状態で、ツールバーから文字の配置を「中央」に変更

• 同じ手順で６個分を作成

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

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

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

カラムを追加

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

• カラムの中に画像とテキストを追加

• 小見出しにあたるテキストを太字に変更

• フルワイドの中でカラムより外の「＋」をクリック

• 「SWELLボタン」を追加

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

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

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

リンクURLの探し方

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

• 固定ページ一覧へ移動
• 該当ページの「表示」をクリック

• 画面の上にあるURLバーをコピー

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

• 同じ手順でフルワイドと見出しを追加

• 「投稿リスト」を追加

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

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

• 右側バーの「Pickup」を選択

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

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

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

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

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

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

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

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

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

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

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

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

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

フルワイドの複製手順

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下層ページのデザイン

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

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

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

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

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

記事内の表示を整える

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

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

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