サロン等のスモールサービスの集客ファンづくりがまるっと一つになったリウムスマイル！
営業時間：平日 9:00〜18:00（土日祝休）
- ホーム
- マニュアル
- ホームページ
- デザインカスタマイズ
- スマホでも見やすい！コース・料金表のレイアウトガイド
スマホでも見やすい！コース・料金表のレイアウトガイド
サービスの内容や料金をわかりやすく伝えるためには、適切なレイアウトを選ぶことが大切です。
特に、スマートフォンでの閲覧が増えている今、どのデバイスでも見やすいデザインを意識する必要があります。
このガイドでは、PCとスマートフォンの両方で見やすいレイアウトの選び方を解説し、具体的な実例をご紹介します。
レイアウトの選び方
まず、コースや料金表をどのようにレイアウトするかが重要です。
カード型レイアウト（特徴を伝えたい場合）
各コースをボックス状に分けることで視覚的に整理され、画像やアイコンを活用することで直感的に理解しやすくなります。
表形式レイアウト（詳細情報を並べたい場合）
一方で、複数のコースの詳細情報を並べて比較したい場合には、表形式が非常に有効です。
料金やサービス内容など、細かい情報を効率よく配置でき、コースごとの対応状況を「◎・－」などの記号で表示することで、一目でシンプルに比較できます。
ただし、スマートフォンで表示する場合、表形式ではどうしても情報が詰め込みすぎになり、コースの数や内容によっては画面が窮屈に感じてしまうこともあります。
そこで、スマホではこの表の表示設定を「左右スワイプ型」に設定することをおすすめします。
これにより、料金やサービス内容が途中で折り返されることなく、すべての情報をストレスなく閲覧することができます。
-
全体縮小型
画面幅に収まるよう横幅が縮小される。文字が折り返されるため、読みづらくなることも。また、表が縦長になってしまう。
-
左右スワイプ型
画面幅に収めず、横にスクロールが可能。文字の折り返しがなく読みやすい。表の縦の長さはそのまま。
さらに、カード型と表形式を併用することも可能です。
カード型でコースの特徴を伝えつつ、詳細な情報や対応状況を表形式で表示させることで、両方のメリットを活かすことができます。
次に、これらのレイアウト設定を実際に行う手順をご紹介します。
操作手順
カード型レイアウト
- 上部ツールバーにある
［ブロックテンプレート］をクリック
- 表示されたブロックテンプレートより、「コース/プラン説明（３列）」をクリック
- 追加されたテンプレート内の画像やサンプル文を編集してコースの内容を記載し、リンクの設定などを行う
表形式レイアウト
- 上部ツールバーにある
［＋ブロックテンプレート］をクリック
- 表示されたブロックテンプレートより、「コース表」をクリック
- 追加された表に、コースの内容を記入する
（行を増やす場合は、Enterキーを押すと現在行がコピーされ下に追加されます）
この「コース表」のブロックテンプレートを追加した場合のスマホ表示時スタイルの初期設定は、「左右スワイプ型」になっています。
［表を追加/変更］をクリックします。ポイント
コースや料金表の表示方法には、カード型と表形式の2つの主なレイアウトがあります。
選ぶべきレイアウトは、伝えたい情報の内容や目的に応じて決めましょう。
- カード型は、各コースの特徴や魅力を目立たせたいときにオススメです。
- 表形式は、コースの詳細な内容を並べて簡単に比較したいときに便利です。
また、カード型と表形式を併用すると、コースの概要と詳細を両方ともわかりやすく表示できます。
目的に合わせて柔軟にレイアウトを選び、見やすさや分かりやすさを向上させましょう。
-
パーツをスライドショー（スライダー）表示する
ネイルサロンではネイル写真、デザイン事務所であれば事例写真など。また、採用に力を入れている場合であれ
-
メニューバー（エリア２）をプルダウンメニューにする
プルダウンメニューとは、上記のような形でメニューにマウスを載せると下に垂れ下がるようにして表示され
-
ページのタイトルをクリックして内容を表示する
子パーツを沢山表示するページで、最初は子パーツの内容を閉じておいて、タイトルがクリックされると内容を
-
ブログページのレイアウトをカスタマイズする（設定例付き）
ネット上のブログを観てみると、多種多様なレイアウトが存在します。一番良いレイアウトはこれ！というもの
-
大きさや向きがバラバラな画像の表示サイズを自動で揃える
一覧ページなどでそれぞれの記事の画像をアイキャッチとして表示させることがあると思いますが、この時画像
-
ホームページの見栄えを良くするちょっとしたコツ
次のBeforeとAfterのホームページを見比べてみてください。どちらも書いてる内容は変わらないの
ホム育気づきサロン ◆ ◆ ◆ スモールサービスの”売り込まない”集客・ファンづくりの考え方とノウハウが月3,300円で学べる！
|
※ 初めて会員運用を行う方は、最初に各種会員の管理方法ページをご覧ください。
リウムスマイル！に共感いただけたら、ぜひ仲間になってください！
まずは無料お試しでお手本を立ち上げてみよう
-
フォームの入力
-
「ご本人様確認」「アクセス情報」2通のメールが届く
-
ログイン・お手本セットアップ
3ステップで簡単にお手本をセットアップ
-
お手本の完成！
自分らしいホームページ作成のスタート
※申込みしない場合はそのまま放置してOKです
※本申込みすると無料期間中作成したホームページをそのまま作成・利用継続できます。
リウムスマイル！のこと、お気軽にお聞きください！
|
セラピスト・ヒーラー・講師・コンサルタント等のスモールサービス起業家専用 集客ファンづくりオールインワンホームページシステム
|
 |
※申込みしない場合はそのまま放置してOKです。
※本申込みすると無料期間中作成したホームページをそのまま作成・利用継続できます。
-
お問い合わせ・ご相談はこちら オンラインで代表穗口と無料面談 お問い合わせ・ご相談 TEL 050-5538-4616 営業時間：平日 9:00〜18:00
