スマホとPC両対応のホームページ作成、ブログ、予約管理、顧客カルテ、メルマガ配信
サロン等のスモールサービスの集客ファンづくりがまるっと一つになったリウムスマイル!

営業時間:平日 9:00〜18:00(土日祝休)

  1. 接客ホームページ作成完全マニュアル
  2. STEP 04|TOPページレイアウトの整え

STEP 04|TOPページレイアウトの整え

自分オリジナルのTOPページを作ろう


原稿作成ドリルで、ホームページの原稿のラフメモを書きなぐることができたら、これから作成する自分の接客ホームページに必要なページ(パーツ)を準備しましょう。

 

お手本ホームページのパーツを追加したり、削除したり、移動したりして、下ごしらえドリルで作成した「TOPページスケッチ」と同じになるように整えていきます。


 

リウムスマイル!のホーページパーツとページの関係

リウムスマイル!では、ホーページのページを構成する部品のことを「パーツ」を呼んでいます。

たいていの場合、1枚のページは一つのパーツで構成されていますが、1枚のページが複数の部品で作られていることがあるので、この部品単位をパーツ(ホームページパーツ)を呼んでいます。



リウムスマイル!へのログイン方法

リウムスマイル!へのログインは、お試しお申込み時に届いた「【リウムスマイル!】ご利用開始のご案内」メールに記載されている情報から行えます。


  • 「【リウムスマイル!】ご利用開始のご案内」メール

    「【リウムスマイル!】ご利用開始のご案内」メールに記載されているリンクをクリックし、リウムスマイル!のログイン画面へアクセスします。

  • リウムスマイル!にログイン

    IDとパスワードは「【リウムスマイル!】ご利用開始のご案内」メールに記載されてるものを入力し、ログインします。

    ※管理画面にアクセスしたらブックマーク(お気に入りに追加)しておきましょう。


ホームページ作成の操作はプレビュー画面から

ホームページ作成の操作はプレビュー画面から

リウムスマイル!管理画面の左上[PC版:プレビュー]ボタンをクリックすると、作成中のホームページをパソコンで見た時の画面になります。

ホームページ作成作業はこのページで行います。

現在は立ち上げたお手本がそのまま表示されている状態ですね。






リウムスマイル!のTOPページの実体は、ほぼ、ヘッドライン画像までの部分のみです。

ヘッドライン以下の部分は、「他のページの一部が表示されているだけ」になっています。

このため、他のページを編集すればTOPページに表示されている部分も連動して変わります。




まずは、お手本に用意されているパーツの名称を、自分のホーページのものに変更していきましょう。

お手本の「コンセプト」パーツを、「私の想い」に変更する例で説明します。


1|変更するパーツの編集画面を開く

編集したいパーツ「コンセプト」の上でダブルクリック、またはページタイトルの右上[編集・コピー]ボタンをクリックします。

[このパーツを編集する]ボタンをクリックして、ページ編集画面を開きます。

変更するパーツの編集画面を開く


2|タイトルを変更する

タイトル欄に入っている「コンセプト」を「私の想い」に書き換えてください。

タイトルを変更する


3|変更内容を保存する

編集画面の左下[保存]ボタンをクリックします。

※パーツを編集・修正した際には、必ず[保存]ボタンをクリックしてください。

クリックせずに画面を閉じてしまうと、編集・修正した内容は保存されず、ホームページにも反映されません。

変更内容を保存する


4|変更を確認する

「コンセプト」が「私の想い」に変更されました。

変更を確認する


お手本のパーツは、すべて同じ要領でタイトルを変更することができます。

各ページのタイトルをすべて自分のホーページのものに変更していきましょう。




お手本に用意されているメニュー数が、あなたの提供するメニューよりも少ない場合はメニューのパーツを新規に作成する必要があります。

この時、お手本のメニューパーツをコピーしてメニューを追加すると、ページ内容を作成する時にお手本の文章をつかえるので良いでしょう。

 

例として、オンリーワンメニューをコピーして追加する方法を紹介します。

 

ホームページの中段にある「おすすめコース」には2つのメニューが表示されていると思います。

この2つのメニューを1つ増やして、3つにする操作について説明します。

 



※使用するお手本によっては、タイトルやメニュー数が異なることがありますが、操作は同じです。

※ご自身のオンリーワンメニューが2つ以内の場合でも、一度この操作を行っておくと良いでしょう。



お手本でのメニューパーツの構造

お手本でのメニューパーツの構造

 

  • 親パーツ
    下に子パーツをぶら下げている。親パーツは存在するだけで、内容がない場合も多い。
  • 子パーツ
    内容のあるページ。親パーツにぶら下がっている。子パーツにも子パーツをぶら下げることができる。

お手本のおすすめコースは、上記のホームページパーツの構造になっています。

「おすすめコース」というパーツには、内容が何も記載されておらず、ただ「しわ・たるみアロマ整体エステフェイシャル」・「PMS・更年期アロマ整体エステ全身トリートメント」の親パーツとして存在している、というイメージです。



1|パーツをコピーする

コピーしたいパーツのバナー画像の右上[編集・コピー]ボタンをクリックします。

[このパーツをコピーする]ボタンをクリックすると、コピー画面が開きます。

パーツをコピーする


2|タイトルを変更する

タイトル欄に入っているコース名を自分のおすすめコース名(もしくは適当なコース名)に書き換えてください。

タイトルを変更する


3|リンクバナーを変更する

編集画面を下の方へスクロールし、リンクバナー欄の「バナー上に表示する文字」の入力欄で、現在入っているコース名を自分のおすすめコース名(もしくは適当なコース名)に書き換えてください。

※「リンクバナー」欄が編集画面に見当たらない場合は、[↓詳細設定項目を表示]ボタンをクリックすると表示されます。

リンクバナーを変更する


4|変更内容を保存する

編集画面の左下[保存]ボタンをクリックします。

※パーツを編集・修正した際には、必ず[保存]ボタンをクリックしてください。

クリックせずに画面を閉じてしまうと、編集・修正した内容は保存されず、ホームページにも反映されません。

変更内容を保存する


お手本に自分が必要とするページがない場合はこの要領で、お手本のパーツをコピーして必要なパーツを増やして準備していきましょう。




お手本に用意されているけど、自分のホームページでは利用しないパーツは削除しましょう。

※ホームページには必要だけど、TOPページに表示させたくない場合は、「TOPページからパーツを表示解除する」の手順を行ってください。

 

1|削除したいパーツの編集画面を開く

削除したいパーツの上でダブルクリック、またはページタイトルの右上[編集・コピー]ボタンをクリックします。

[このパーツを編集する]ボタンをクリックして、ページ編集画面を開きます。

変更するパーツの編集画面を開く


2|削除する

編集画面の右下[削除する]ボタンをクリックします。

  • いつか使うかもしれないパーツは、[下書きにする]ボタンをクリック
  • もう利用しないパーツは、[このパーツを削除する]ボタンをクリック

これで、不必要なパーツがホームページから削除されます。

削除する

下書きにしたパーツを編集するには

下書きに保存したパーツは、今後プレビュー画面には表示されません。

再度表示させたり、編集したりしたい場合は、プレビュー画面上部の黄色エリアにある【編集】欄の[下書きパーツ一覧]ボタンよりパーツを編集できます。


誤ってパーツを削除した場合は

削除してしまったパーツを復元したい場合は、プレビュー画面上部の黄色エリアにある【編集】欄の[編集履歴]ボタンよりパーツを復元できます。




ホームページには必要だけど、TOPページに表示させたくない場合は、パーツの表示解除を行います。


1|表示設定画面を開く

表示を解除したいパーツの左上[表示項目の設定]ボタンをクリックし、表示設定画面を開きます。

表示設定画面を開く


2|表示解除を行う

表示設定画面の右下[表示解除]ボタンをクリックし、確認画面で[OK]をクリックすると、このパーツはTOPページから消えます。

※あくまで、TOPページの表示が消えるだけでパーツが削除されるわけではありません。

表示解除を行う

誤ってパーツを表示解除した場合は

表示解除してしまったパーツを元に戻したい場合は、プレビュー画面上部の黄色エリアにある【編集】欄の[編集履歴]ボタンよりパーツの表示を復元できます。




TOPページに表示されているパーツの位置は簡単に移動することができます。

ここでは、「おすすめコース」を「コンセプト」の上に移動する手順をご説明します。

 

1|編集ボタンを切り替える

プレビュー画面上部の黄色エリアにある【編集ボタン表示切替】欄の[プロ]ボタンをクリックすると、プロモードの編集ボタンが表示されます。

編集ボタンを切り替える


2|移動したいパーツをドラック&ドロップ

おすすめコースをタイトルあたりをドラッグ(マウスのボタンを押しっぱなしにする)して、上へ移動させます。

コンセプトの上辺りまで移動させたら、ドロップ(マウスのボタンを離す)します。

『並び替えを反映させますか』画面が表示されるので、[OK]ボタンをクリックします。

移動したいパーツをドラック&ドロップ

おすすめコースが、コンセプトと入れ替わります。

同じ要領で、メニューバーやサイドに表示されているパーツも移動することができます。




現在のデザインで問題ない場合はそのままでOKですが、自分のペルソナさんに合っていないと感じる場合はデザインを変更しましょう。

リウムスマイル!は、ホームページのデザイン部分だけが「デザインスキン」として定義されているため、ページの内容、構造はそのままで、デザインのみ簡単に変更することができます。

デザインスキン(テンプレート)一覧はこちら

 

1|デザインスキン設定画面を開く

プレビュー画面上部の黄色エリアにある【編集】欄の[デザインスキン変更]ボタンをクリックすると、デザインスキン設定画面が開きます。

デザインスキン設定画面を開く


2|デザインスキンを変更する

利用できるデザインが表示されます。

カラーやレイアウト等で選ぶこともできます。

デザインスキンを変更する

気になるデザインを見つけたら、デザインスキン画像下の[同じ系統を全部見る]ボタンをクリックし「色違い・レイアウト違い」の中から変更したいデザインスキンを見つけ、[このデザインを選択]ボタンをクリックします。

『デザインスキンを変更します。よろしいですか?』画面が表示されるので、[OK]ボタンをクリックします。

デザインスキンを変更する


3|プレビュー画面で確認する

変更したデザインで問題ないかプレビュー画面で確認しておきましょう。

デザインスキンの変更をプレビューで確認する

 

変更したデザインを元に戻す方法

デザインスキンを変更した後、「やっぱり元のデザインに戻したい」や「3つ前が一番良かったな」など、過去に選択したデザインスキンに戻したい時に便利な履歴機能があります。


変更したデザインを元に戻す方法

 

デザインスキン設定画面上部の[これまでの履歴]タブをクリックすると、これまで選択したデザインスキンの履歴が表示されます。

この中の戻したいデザインスキンの[このデザインを適用]ボタンをクリックすると、その時点のデザインに戻すことができます。



これで準備はばっちり!
ホームページの各ページ作成を開始しましょう!

「STEP 05|ページを作成する」に進む


リウムスマイル!では、ホームページの作成に関する基本的な概念として、次の3つの要素があります。


  • ホームページパーツ
  • 表示エリア
  • 表示項目設定

リウムスマイル!には強力な自動レイアウトの機能がある為、これらを特に知らなくてもカッコイイホームページが作成できるのですが、この3つの要素について理解を深めると、何(ホームページパーツ)を、どこ(表示エリア)に、どのように(表示項目設定)表示するのかを自由自在に操ることができるようになります。

すべての入力を終えてホームページの内容が充実した後に、さらにデザインをカスタマイズしたくなってきたら、ホームページのデザインの基本構造についてをご覧ください。