【2022年】Webデザインスクールおすすめ9選比較 詳しくみる

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

こんにちは、さくらこです!

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

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

この記事は下層ページの作成手順です。トップページについては、下記の記事を参考にしてください!

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

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

さくらこ

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

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

サイト作成前の事前確認

この記事では画像のように、固定ページの「サービス」ページを使って作成を進めていきます。

ページ名はなんでも大丈夫ですが、固定ページを作成してから始めてください!

固定ページの作成方法は、下記の記事で解説しています!

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

それではここから、SWELLを使った「コーポレートサイト用」のサービスページ作成手順を解説していきます。

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

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

ブロック1「サービス紹介文の作成」

フルワイドとタイトルを追加

  • 「+」から「フルワイド」を選択
さくらこ

ここで見つからなければ、「すべて表示」から探してください。

  • 右側バーからサイズを設定
さくらこ

ここはお好きなサイズで大丈夫です!

  • 右側バーから背景色を設定(デモサイトは#ffffff)
  • 見出し(タイトル)を追加
  • 右側バーからテキストの色を変更

カラムを追加

  • 「+」から「カラム」を探して選択
  • パターンは「50/50」を選択
さくらこ

左右のバランスを変えたいときは、「30/70」などを選んでも大丈夫です!

今回は「50/50」を選んだので、カラム数は2になっています。カラム数を増やしたい場合はここから変更もできます!

  • 左側のカラムに「画像」を追加
  • お好きな写真を選択
さくらこ

こんな感じで左側に写真が表示されればOKです!

  • 右側のカラムにテキストを入力

ここで、テキストが上から表示されているとバランスが悪いので、中央に寄せます。

  • 右側のカラム全体を選択
  • ツールバーから「中央揃え」を選択
さくらこ

左側の写真に対して、テキストが上下中央になっていればOKです!

ブロック2「料金表の作成」

次に料金表を作っていきます。

フルワイドとタイトルを追加

  • 1つ目のフルワイドの下にある「+」を選択
  • 「フルワイド」を追加
  • 右側バーからサイズを設定
  • 背景色を設定(デモサイトは#f9edf2)
  • 「見出し」の部分にタイトルを追加

料金表用の見出しを追加

今回は2種類の料金表を入れるので、それぞれの見出しを付けておきます。

  • 「+」から「見出し」を選択
  • 見出しのタイトルを入力
  • ツールバーの「H2」を選択して「H3」に変更

H2=見出し2、H3=見出し3です。

料金表の作成

  • 「+」から「テーブル」を追加
  • カラム数と行数を設定して表を作成

カラム数=横の列数、行数=縦の行数です!

表が追加されましたが、背景色の関係で見づらくなっています。なのでデザインを設定して、見やすいようにしたいと思います。

  • 右側バーから「ヘッダーセクション」をオンに
さくらこ

ヘッダーセクションは、「メニュー名」や「料金」など各列のタイトルを入力できるのでおすすめです!

  • 右側バーから「背景色」を設定
さくらこ

表を見やすくするために、今回は背景色に白を設定しました!
カラーコードは「#ffffff」です。

  • 各メニュー名を太字にする

この設定はなくても大丈夫ですが、今回は強調させるために太字にします。

  • 右側バーから「表のセル幅を固定」をオンに

表のセル幅を固定することで、区切り線が中央にきました。

さくらこ

こちらは列数やメニュー数に合わせて設定してください!

  • 右側バーから「横スクロール」を「SPのみ可能」に設定

この設定をすることで、スマホからの閲覧でも表が崩れる心配がありません。見やすさのためにも、表の幅が大きくなる時は設定するのがおすすめです!

料金表の複製

2つめの料金表も1つめと同じスタイルなら、「複製」で追加すると手間が省けます!

  • 1つめの「見出し」と「表」の両方を選択
  • ツールバーから「複製」をクリック
さくらこ

このように1つ目と同じものが追加されているはずです!

あとは2つめの料金表用に、タイトルや料金などを変更して完了です。

ブロック3「ご利用方法」

  • これまでと同じ手順で、フルワイドとタイトルを追加
  • 「+」から「ステップ」を追加
  • タイトルやテキストを入力

3つめのステップを追加するときは、「ステップ」全体を選択すると、下に「+」が現れるのでそこから追加してください。

ステップのデザインなどは、右側のバーから変更できます!

さくらこ

今回は「ビッグ」のスタイルにしてみました!

ページを更新してサービスページ全体を確認

以上でサービスページのカスタマイズが完了です。

最後にページを更新して、サービスページ全体を確認してみましょう!

さくらこ

お疲れさまでした!思い通りのページはできましたか?

ページタイトルについて

ちなみに現在、とくに設定していない場合は、下記のようなページタイトルになっているかと思います。

この部分は、設定を変更することで、タイトルの下に背景画像を表示させることができます。

これは下層ページのヘッダーデザインの設定になりますが、手順は下記の記事で解説しています!

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