スマホでも見やすい！コース・料金表のレイアウトガイド
サービスの内容や料金をわかりやすく伝えるためには、適切なレイアウトを選ぶことが大切です。
特に、スマートフォンでの閲覧が増えている今、どのデバイスでも見やすいデザインを意識する必要があります。
このガイドでは、PCとスマートフォンの両方で見やすいレイアウトの選び方を解説し、具体的な実例をご紹介します。
レイアウトの選び方
まず、コースや料金表をどのようにレイアウトするかが重要です。
カード型レイアウト（特徴を伝えたい場合）
各コースをボックス状に分けることで視覚的に整理され、画像やアイコンを活用することで直感的に理解しやすくなります。
表形式レイアウト（詳細情報を並べたい場合）
一方で、複数のコースの詳細情報を並べて比較したい場合には、表形式が非常に有効です。
料金やサービス内容など、細かい情報を効率よく配置でき、コースごとの対応状況を「◎・－」などの記号で表示することで、一目でシンプルに比較できます。
ただし、スマートフォンで表示する場合、表形式ではどうしても情報が詰め込みすぎになり、コースの数や内容によっては画面が窮屈に感じてしまうこともあります。
そこで、スマホではこの表の表示設定を「左右スワイプ型」に設定することをおすすめします。
これにより、料金やサービス内容が途中で折り返されることなく、すべての情報をストレスなく閲覧することができます。
-
全体縮小型
画面幅に収まるよう横幅が縮小される。文字が折り返されるため、読みづらくなることも。また、表が縦長になってしまう。
-
左右スワイプ型
画面幅に収めず、横にスクロールが可能。文字の折り返しがなく読みやすい。表の縦の長さはそのまま。
さらに、カード型と表形式を併用することも可能です。
カード型でコースの特徴を伝えつつ、詳細な情報や対応状況を表形式で表示させることで、両方のメリットを活かすことができます。
次に、これらのレイアウト設定を実際に行う手順をご紹介します。
操作手順
カード型レイアウト
- 上部ツールバーにある
［ブロックテンプレート］をクリック
- 表示されたブロックテンプレートより、「コース/プラン説明（３列）」をクリック
- 追加されたテンプレート内の画像やサンプル文を編集してコースの内容を記載し、リンクの設定などを行う
表形式レイアウト
- 上部ツールバーにある
［＋ブロックテンプレート］をクリック
- 表示されたブロックテンプレートより、「コース表」をクリック
- 追加された表に、コースの内容を記入する
（行を増やす場合は、Enterキーを押すと現在行がコピーされ下に追加されます）
この「コース表」のブロックテンプレートを追加した場合のスマホ表示時スタイルの初期設定は、「左右スワイプ型」になっています。
［表を追加/変更］をクリックします。ポイント
コースや料金表の表示方法には、カード型と表形式の2つの主なレイアウトがあります。
選ぶべきレイアウトは、伝えたい情報の内容や目的に応じて決めましょう。
- カード型は、各コースの特徴や魅力を目立たせたいときにオススメです。
- 表形式は、コースの詳細な内容を並べて簡単に比較したいときに便利です。
また、カード型と表形式を併用すると、コースの概要と詳細を両方ともわかりやすく表示できます。
目的に合わせて柔軟にレイアウトを選び、見やすさや分かりやすさを向上させましょう。
