美容室やネイルサロン、エステサロンを運営している人にとっては、美容を扱っているからこそおしゃれなwebサイトを作りたいですよね。
SWELLで自分のお店のwebサイトを作りたいけど、サイト構造やデザインを作るのに自信がない、参考になるデモサイトを見たい、とお悩みの方も多いでしょう。
今回は、そんな方の参考になるよう、SWELLでサロン向けのデモサイトを作ったので、その構造やデザインについてページごとに解説します！
サロン向けの構成・デザインではありますが、一般的なコーポレートサイトの参考になりますので、SWELLでサイト制作を考えている人はぜひチェックしてくださいね！
URUMA高機能＆簡単操作のSWELLで、おしゃれなサイトが作れますよ！
おしゃれなコーポレートサイトが簡単に作れる！
今回デモサイトのデザインを紹介している【SWELL】はこちらです♪
SWELLで作ったサロン向けデモサイトデザイン
こちらが今回紹介する、わたしが作った教室向けSWELLデモサイトです。
実際のサイトはこちら→ https://uruma-studio.com/sample1/
SWELLなら難しいHTMLやCSSコードを使うことなくブロックエディターで直感的に作れるので、初めてでも上記のようなサイトが簡単に作れるんですよ！
とくに、トップページで1番に目に入るメインビジュアルでは、画像はもちろん動画も入れることができるので、いろいろなカスタマイズが思いのままにできちゃいます。
1つ1つのコンテンツをセンス良く強調させる各種ブロックが豊富で、デフォルトの機能で十分おしゃれなデザインを作れる点は、SWELLの大きな魅力といえるでしょう。
また、当ブログではSWELLでゼロから作るコーポレートサイトの作り方手順を解説しています！
早速制作してみたい！という方は、ぜひ参考にしてくださいね。
SWELLサロン向けデモサイトのデザインをページごとに紹介！
ここからは、デモサイトの各ページごとにデザインの要所を紹介していきます。
使っているおすすめ機能の使い方も合わせて紹介しているので参考にしてくださいね。
フロントページ
webサイトの顔ともいえるフロントページでは、
最初に読者が目にするトップページをはじめ、サロン紹介ページやサロンメニュー、施術例(HAIR CATALOG)、INFORMATIONページへ導く項目やアクセス情報などを盛り込んでいます。
SWELLデモサイト1フロントページ https://uruma-studio.com/sample1/
トップページ
■PC表示
■スマホ表示
トップページのメインビジュアルはCanvaで作りました！
こちらの画像はCanvaに登録されている画像を使っていて、テキストや余白を組み合わせて作っています。
Canvaでは、検索をかけるとイメージしている画像が豊富に出てきて、無加工でなければ商用利用もOKなのでサイト制作にはかなり使えるんですよ。
画面右上のお問い合わせページへのボタンやメニューの表示もおしゃれに仕上がって、お気に入りのトップページです。
CONCEPT
ここでのおすすめポイントは、画像の上にテキストを重ねた【ブロークングリッド】という機能です。
これはSWELL独自の機能で、ただテキストと画像を並べるよりグッとおしゃれになって、いろいろな場面で使えるのでおすすめです♪
ブロークングリッドの使い方は、以下記事で解説しています！
また、今回のデモサイト表記では、【Fonts Plugin】というプラグインを使って、SWELLデフォルトでは選択できないおしゃれなフォントに変えています。
テキストフォントはサイト全体の印象を与える重要な要素なので、サイトの雰囲気に合うフォントにしたいところですよね。
そんな時、このプラグインを使えば豊富なグーグルフォントの中から選んで使うことができるのでおすすめですよ！
MENU
ユーザーにとって1番気になるメニュー＆金額は、分かりやすく表記したいところですね。
MENUは、【メディアとテキスト】ブロックの配置を変えて、上の画像と下の画像が交互に表示されるよう構成しMENUページへ導いています。
HAIR CATAROGUE
実際に施術した例を画像に上げて紹介しているページへ導く項目です。
こちらもユーザーにとってはお店を選ぶポイントとなるところなので、ぜひ作りましょう。
INFORMATION
ブログ形式(投稿ページ)で、商品情報や定休日、日々の記録などを発信している場合、このように記事一覧を埋め込むことができます。
これは、SWELL独自の【投稿リスト】という機能で簡単に設置することができるので、ぜひINFORMATIONページを作って更新情報をUPしていきましょう！
INSTAGRAM(SNS情報)
SNSでも情報を発信しているなら、もれなくこちらも載せましょう。
SNS投稿それぞれの画像を並べてそれぞれにSNSのリンクを紐づければ、なおユーザーの興味を引く内容になるでしょう。
アクセス情報
いうまでもなく必須のアクセス情報。
こちらは、ただ地図の画像を貼り付けているのではなく、googleマップを埋め込んでいます。
googleマップを埋め込むことで「拡大・縮小」や「移動」などの機能を保持したままサイトに表示できるので、ユーザーにとってより便利に分かりやすくアクセス情報を伝えることができます。
WordPressのサイトにgoogleマップを埋め込む方法については、以下記事で解説しています。
サロン紹介ページ
サロン紹介ページ https://uruma-studio.com/sample1/about/
サロン紹介ページでは、
サロンのコンセプトや、サロン施設の紹介、店内ギャラリー、スタッフ紹介、企業情報などの情報を盛り込んでいます。
トップ画像から解説していきます！
トップページの背景画像(各ページ共通)
メインビジュアルがトップ画面となるフロントページ以外の各コンテンツページでは、ページトップに上記のような横長の画像を入れた設定にしています。
こちらもSWELL独自の設定なのですが、一目でサイトの雰囲気を出せるのでわたしもお気に入りの機能です。
SWELLでは、こちらの画像のことを【タイトルの背景画像】と称しており、固定ページの編集画面から設定することができるんです。
タイトルの背景画像の設定方法は以下記事にまとめています！
FEATURE(サロンの特長説明)
サロンの特長紹介では、フロントページでも多用している【メディアとテキスト】ブロックで画像を交互に使って表現しています。
テキストの位置や大きさを自由に変えることができてカスタマイズ性が高いので、サイト制作にはおすすめの機能ですよ。
GALLERY(店内写真ギャラリー)
店内ギャラリーは、【Meta Slider】というプラグインを使って、画像をスライド形式にして表示しています。
このプラグインを入れれば、スライドにしたい画像を登録するだけで上記のようなコンテンツが簡単に作れちゃいますよ！
単に画像を並べて表示するよりも省スペースになるし、おしゃれ感もアップするのでかなりおすすめのプラグインです。
STAFF(スタッフ紹介)/SALON INFORMATION(企業情報)
スタッフ紹介やサロンの企業情報も表示しておきたい大事な要素ですね。
こちらは、【メディアとテキスト】ブロックや【テーブル】ブロックを組み合わせたりして構成しています。
MENUページ
MENUページ https://uruma-studio.com/sample1/menu/
MENUページでは全4種類のメニューの紹介を1ページにまとめているわけですが、ユーザーにとっては、自分が施術してもらいたいメニューだけを見たいと思う人も多いはず。
そんな時に大活躍してくれるのが、WordPressの便利機能・アンカーリンク。
ページ冒頭に見たい箇所に誘導してくれるボタンを設置しておいて、ユーザーが読みたい箇所にだけ飛ばしてくれる機能で、巷のwebサイトではよく見かける機能かと思います。
アンカーリンクボタンをクリックして該当の場所に移動している動画がこちらとなります。
WordPressでは簡単にこのボタンを設置することができるので、覚えておくと色々な場所で使えて便利ですよ！
アンカーリンクの使い方は、以下記事で詳しく解説しています。
INFORMATIONページ
INFORMATIONページ https://uruma-studio.com/sample1/information/
INFORMATIONページは、定休日や臨時休業日、新商品、イベントなどのお知らせ情報が都度ブログ形式で投稿されているものです。
時にはスタッフブログが更新されていたりして、楽しみに見てくれるユーザーが増えることもあるので、ぜひ導入したいページですよね。
SEO的にも、ホームページが更新されていることで評価が上がるので、ぜひともINFORMATIONページを組み込んでいきましょう！
Q＆Aページ(よくある質問)
Q＆Aページ https://uruma-studio.com/sample1/faq/
ユーザーがわざわざ問い合わせることなく疑問を解消してくれるQ＆Aページは、安心してお店を利用してもらうためにも作っておきたいページです。
SWELLでは、よくある質問を簡単に作れる独自のFAQブロックという機能があって、読みやすく洗練されたデザインに仕上げることができます。
QとAのデザインやカラーを自分好みにカスタマイズできて楽しいですよ！
よくある質問のデザインをおしゃれに作れるSWELL/FAQブロックの使い方は以下記事で解説しています。
CONTACT US(お問い合わせページ)
お問い合わせページ https://uruma-studio.com/sample1/contact/
お問い合わせページには、直接ユーザーがメッセージを入力することでメールでメッセージを受け取れる【お問い合わせフォーム】という機能が埋め込まれています。
ユーザーとサービス提供者をつなぐ大事なツールなので、必ず作っておきたい必須ページといえるでしょう。
WordPressでは、Contact Form7というプラグインで簡単にお問い合わせフォームを作成することができます。
Contact Form7でお問い合わせページを作る方法は以下記事で解説しています！
プライバシーポリシーページ
プライバシーポリシーページ https://uruma-studio.com/sample1/privacy-policy-2/
プライバシーポリシーとは、個人情報を取得したときに利用目的や管理方法などを公表したもので、個人情報を扱う上では必ず作る必要があるページです。
webサイトの運営を始めると、お問い合わせページを作ったりアクセス解析をしたりして、個人情報を取得する機会があるので、プライバシーポリシーは必ず作りましょう。
プライバシーポリシーページの作り方は以下記事で解説しています！
SWELLデモサイトのデザインを参考にサイト制作にチャレンジしよう
今回は、わたしが作ったサロン向けSWELLデモサイトのデザインをページごとに紹介してみました！
SWELLでは、サイト制作に使える神機能がたくさんあって簡単におしゃれなデザインが作れることがお分かりいただけましたか？
また、記事内で紹介したプラグインも気軽に取り入れられるものなのでぜひ使ってみてくださいね。
最初は慣れるまでに時間がかかるかもしれませんが、ぜひSWELLの機能を覚えて素敵なサイトを作ってください！
また、今回紹介したデモサイトの作り方はシリーズ化して以下記事でまとめています。
Part1からPart8まであるのでちょっと長いですが、気合入れて作ろう！と思っている方には使っていただけるかと思います。
SWELLのwebサイト作りにお役立ていただけましたら幸いです♪
また、この記事を読んで、SWELLを使ってみたい！と思った方は、よかったら以下記事も参考にしてくださいね。
■SWELLレビューはこちら
■レンタルサーバーの契約から検討している方はこちら
■SWELL単体で購入を検討している方はこちら
最後までお読みいただき、ありがとうございました！
コメント