【Wix】スマホで料金表が崩れる？見やすく整える修正実例

こんにちは、ENOWL（エノウル）のなおです。

ご自身でWixサイトを作っていて、こんな経験はありませんか？

「パソコンで作っている時は完璧だったのに、スマホで見たら料金表がぐちゃぐちゃ…」

実はこれ、Wix初心者の方が非常によく陥るトラブルの一つです。

今回は、そんな「スマホで崩れてしまった料金表」を見やすく改修した実例をご紹介します！

ご依頼の経緯

ご依頼主様は、ご自身で学習塾の料金表ページを作成されていました。 パソコン画面では綺麗に表（テーブル）が作れていたのですが、スマホで確認したところ、文字が重なったりレイアウトが崩れてしまい、非常に見づらい状態になっていました。

「自分では直し方がわからない…」とのことで、私にご相談をいただきました。

デザイン修正のポイント

今回は、ただ表を直すだけでなく、スマホの小さな画面でもパッと見て内容が伝わるように、以下のポイントを意識してデザインしました。

1. 色分けで対象年齢を分かりやすく

ひと目で「小学生」と「中学生～高校生」が区別できるように、それぞれの背景色を変更させていただきました。

・小学生： 元気で明るい黄色

・中学生～高校生： 落ち着いた緑色

色を分けることで、お客様がご自身の対象年齢に合わせて、迷わず料金を確認できる導線を意識しました。

2. コースの違いを「横並び」で比較

こちらの塾には「​1対1 完全マンツーマン」と「​1対2 個別指導」という2つのコースがありました。

この2つの選択肢があることを視覚的にわかりやすく伝えるため、あえて横並びのレイアウトを採用しました。

スマホのような縦長の画面でも、要素をうまく配置することで、スクロールしすぎずに比較検討できるように工夫しています。

以上、Wixのホームページの改修の依頼で行ったデザインのポイントについてご紹介しました。

※ご紹介させていただく事例は、すべてご依頼者様から実績としての掲載許可をいただいております。

一番大事な「料金表」、スマホで見にくくなっていませんか？

ホームページにおいて、料金表やメニュー表は、お客様が購入を決めるための最も重要なページです。

ここが見づらいと、お客様は「よく分からないからやめよう」と不安になり、せっかくの申し込みのチャンスを逃してしまうかもしれません。

「自分で直そうとしたけど、どうしても崩れてしまう…」

「スマホだけ別の見やすいデザインにしたい」

そんな時は、ピンポイントでの修正も承っています！ 面倒なレイアウト調整はプロに任せて、見やすくて信頼される料金表に整えませんか？

最後まで読んでいただき、ありがとうございました。

なおでした。