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

こんにちは、Sakiです!
この記事では、WordPressテーマ「SWELL」を使ったコーポレートサイトの作り方を解説しています。
デモサイトはアロマサロンを想定して作っていますが、他のサロン関係のサービスでも、それ以外のサービスでも大丈夫です!

同じ構成でも色や画像を変えることで、雰囲気を大きく変えられます。ぜひご自身のサービスのオリジナリティを出してくださいね!
- 初心者でも直感で簡単に操作できる
- コードや難しい知識不要
- ホームページにもブログにも対応
- Webデザイナーに嬉しい100%GPL
- 利用者も多い人気テーマ
SWELLを使ってホームページのデザインをするには、WordPressの導入が必要です。
もしもまだサーバー&ドメインの契約、WordPressの導入ができていない場合は、下記の記事の手順から始めてくださいね♪


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


Etorire-designでは、個人事業主・フリーランス・ひとり起業をされている、女性起業家さま向けのホームページ制作を承っています!
ホームページ制作を依頼したい方、ホームページの自作に挑戦したけど完成しなかった方など、お気軽にご相談くださいませ♪
WordPressの事前準備



この記事では、WordPressテーマSWELLを導入した前提で進めています。もしSWELLの導入が完了していない場合は、下記の記事を参考にしてください!
下記の記事の後半部分で、SWELLのダウンロード方法と、SWELLをWordPressにインストールする手順を解説しています!




SWELLを導入した後はこのようなサイトになっているかと思います。
ここからサイトのデザインを進めるんですが、サイトのデザインに入る前に、まずはWordPressの設定などの事前準備を済ませておいてください!
事前準備でやることは、下記の5つです。
- WordPressの初期設定
- 外観カスタマイズ
- トップページをサイト型にする
- 固定ページで下層ページを作成
- メニューを作成
WordPressの初期設定
まずはWordPressの初期設定を行います。



初期設定は途中でやるとエラーに繋がることもあるので、必ず最初に済ませてくださいね!
初期設定の手順については、下記の記事で解説しています。


カテゴリーについて
初期設定の中でカテゴリーの設定がありますが、デモサイト通りのカテゴリーは下記です。
- 名前→お知らせ、スラッグ→news
- 名前→お客様の声、スラッグ→voice
- 名前→コラム、スラッグ→column



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


外観カスタマイズでサイト全体デザインを整える
サイトのカラーやフォント、メインビジュアルなどを設定できるので、下記の記事より進めてください!


トップページに固定ページを表示させてサイト型にする
SWELLを導入した後は、最初の画像のように『ブログ型』になっています。
今回はホームページを作るので、固定ページで「ホーム」を作成し、それをトップページに表示させて『サイト型』にします。
WordPressのトップページに固定ページを表示させる手順は、下記の記事で解説しています!




固定ページで下層ページを作成
下層ページとは、トップページ以外で使用するページのことです。
デモサイトと同じサイトにするためには、「ホーム」以外に下記の下層ページが必要です。
- サービス
- お問い合わせ
管理画面の「固定ページ」から「サービス・お問い合わせ」ページを作成してください。


メニューを作成
最後に「メニュー」を作成します。
メニューの作成手順は下記の記事で解説しています!


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


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


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



メニューの並び順はお好きな順番で大丈夫です!
SWELL「コーポレートサイト用」のトップページ作成手順
それではいよいよここからは、SWELLを使ったコーポレートサイトの作り方「トップページのデザイン」について、手順を解説します。



まずはトップページのデザインからです!
トップページの全体像は、デモサイトからご確認ください。
ブロックごとに背景の色を変えていますが、このブロックに分けて解説を進めます。ご自身のサイトに必要ない部分は作らなくてもOKです!
ブロック1「コンセプト文の作成」
ブロック1は、デモサイトの「SAKURAKOsalon」とタイトルがある部分です。



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


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



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


- フルワイドを選択した状態で、右側バーからサイズを設定
フルワイドの背景色を変更


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



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


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


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


こんな感じで左右に分かれたカラムが追加されます。
それぞれの+をクリックすることで、左右にテキストなどを追加することができます!


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


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



以上でブロック1は完成です!
ブロック2「こんなお悩みありませんか?」


ブロック1と同じ手順で、またフルワイドを追加していきます。
- +からフルワイドを追加
このとき、ブロック1のフルワイドの中の「+」ではなく、フルワイドの外にある「+」をクリックしてください!


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


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



これはブロック1と同じ手順です!
リッチカラムを追加


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





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


- リッチカラムの「+」をクリックで、カラムを6個にする


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



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


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


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


- 同じ手順で6個分を作成



以上でブロック2が完成です!
ブロック3「当サロンのサービス」
ブロック3も同じ手順でフルワイドを追加します。
カラムを追加


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


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


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



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


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


- 「SWELLボタン」を追加


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


- ボタンにテキストとリンク先を入力
リンクURLの探し方


今回は固定ページの「サービス」のURLを入力しますが、下記の手順から調べることができます。
- 固定ページ一覧へ移動
- 該当ページの「表示」をクリック


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



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


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


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


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


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


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



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


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


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



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


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


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


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




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



きちんと指定ページに飛ぶか、ページを更新してボタンから確認してくださいね!
ブロック5「オーナーご挨拶」


次にブロック5の、オーナーご挨拶を作成していきます。
ここでもこれまでと同じ手順で作成でもいいですが、実はブロック1と構成が同じになっています。



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


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


このようにブロック1の下に、全く同じブロックが追加されます。
- 下に追加されたブロックをツールバーの矢印で1番下に移動


あとは見出しや画像、テキストを変換していくだけです!
- 画像はツールバーの「置換」から変更できます





すべて変更したものがこちらです!
ブロック6、7「お知らせ&コラム」


上で解説した「お客様の声」部分と同じ手順で、「お知らせ・コラム」のブロックを作成します。
今回は、「コラム」のみ「もっとみる」のボタンを追加しています。
投稿の表示設定「お知らせ」


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


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



「お客様の声・お知らせ・コラム」すべて、ご自身のお好きな表示形式で大丈夫です!
トップページの完成と残りのやること
以上でSWELLを使ったコーポレートサイトの作り方、「トップページのデザイン」が完成しました!



ここまで長かったかもしれませんが、お疲れさまです!
固定ページでのトップページは完成したので、残りは下記の4つの作業でホームページが完成します!
- ブログパーツでフッターを作る
- 下層ページのデザイン
- お問い合わせフォームの作成
- ウィジェットの整理
ブログパーツでフッターを作る
今回のデモサイトはサロン用なので、フッター(サイトの下部分)に店舗情報を表示させるようにしています。
この部分はどのページへ飛んでも表示するようにしていますが、各ページ内で作るのではなく、フッターのウィジェット内で設定しています。
各ページで作ると、変更があった際にすべてのページの修正が必要なので大変です。ウィジェットという場所を利用すれば、1カ所だけでの作成・修正で済むので便利ですよ!
そしてこのウィジェット内では、SWELLの『ブログパーツ』という機能を利用しています!
下記の記事ではブログパーツについて解説しており、デモサイトに合わせたフッターの作成も解説しています。


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



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


お問い合わせフォームの作成
コーポレートサイトやホームページには、お問い合わせフォームが必要ですよね。
お問い合わせフォームは、「Contact Form7」というプラグイン(拡張機能)を使って作成するのがおすすめです!
下記の記事では、Contact Form7を使ったお問い合わせフォームの作成手順を解説しています。



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


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


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





設定を変更すれば、このようにスッキリとさせることができます!
下記の記事では、記事内の表示と、横のサイドバーも含めて、変更する手順を解説しています。

