サロンのサイトを読めない人を減らす｜文字・配色・押しやすさの基本

文字が小さくて読めない、ボタンが押しにくい、色が薄くて見えない。こうした理由でサイトを離れる人がいます。

見た目を優先した結果、読めない人が生まれる。サロンのサイトでよく起きることです。直すのに専門知識は要りません。

文字を小さくしない

デザインを優先すると、文字が小さくなりがちです。しかし読めなければ意味がありません。

本文の文字は、16ピクセル以上を目安にしてください。パソコンの画面で作っていると小さく見えないため、スマートフォンで確認してください。

行の間隔も詰めすぎないでください。行が詰まっていると、目で追いにくくなります。文字の大きさの1.5倍から1.8倍程度の間隔があると読みやすくなります。

1行の長さも影響します。長すぎると次の行の頭を見失います。40文字前後で折り返すと読みやすくなります。

文字の色と背景の組み合わせも重要です。薄い灰色の文字を白い背景に置くと、明るい場所では見えなくなります。

色だけで情報を伝えない

色の見え方には個人差があります。色だけで区別する作りは、伝わらない人が出ます。

たとえば、営業日を緑、休業日を赤で示したカレンダー。色の違いが分かりにくい人には、どちらか判別できません。

対策は単純です。色に加えて、文字や記号でも示してください。「休」という文字を入れる、斜線を引く。これだけで伝わります。

リンクも同様です。色だけで「ここは押せる」と示していると、気づかれないことがあります。下線を引く、記号を添えるといった方法があります。

エラーの表示も同じです。入力欄を赤くするだけでなく、何が問題かを文字で示してください。

押しやすい大きさにする

スマートフォンでは、指で操作します。小さいボタンは押しにくく、隣の要素を誤って押すことにつながります。

押す部分は、44ピクセル四方程度を目安にしてください。見た目の大きさが小さくても、押せる範囲を広げることはできます。

要素の間隔も空けてください。密集していると、狙ったものを押せません。

予約ボタンは、とくに押しやすくしてください。ここで失敗すると、予約そのものが止まります。

電話番号は、押すとそのまま電話がかけられる形にしてください。番号を選択してコピーする操作は、慣れていない人には難しくなります。

写真に説明を付ける

画像には、内容を説明する文字を設定できます。これは、画像が表示されないときや、読み上げの機能を使っている人にとって、内容を知る手がかりになります。

説明を付ける対象は、意味のある画像です。施術の写真、店内の様子、スタッフの写真。

装飾のための画像には、説明は不要です。背景の模様や区切り線に説明を付けると、かえって邪魔になります。

説明の書き方は、見たままを簡潔に書いてください。「画像」「写真」といった言葉を含める必要はありません。

文字を画像にしないでください。メニューや料金を画像で作ると、拡大したときに粗くなり、読み上げもできません。文字は文字として書いてください。

動くものに注意する

自動で切り替わる画像や、動く装飾は、読みにくさの原因になります。

読んでいる途中で切り替わると、内容を追えません。切り替えるなら、停止できる手段を用意してください。

点滅する表示は避けてください。体調に影響する場合があります。

自動再生される動画も、音が出る設定にしないでください。予期しない音は、公共の場で見ている人を困らせます。

動きは、それがなくても内容が伝わる範囲にとどめてください。動きが情報の伝達に必須な作りは、避けたほうが安全です。

情報の順序を整える

見出しを使って、内容の構造を示してください。文字を大きくするだけでは、構造になりません。

見出しの階層を飛ばさないでください。大見出しの次に小見出しが来る順序を保ちます。

重要な情報は上に置いてください。営業時間、住所、電話番号、予約の方法。これらを探して長くスクロールする作りは不便です。

フォームの入力欄には、何を入れるかを示す文字を付けてください。入力欄の中に薄い文字で示す方法だけだと、入力を始めた時点で消えて分からなくなります。

予約フォームは項目を減らす

予約の入力欄が多いほど、途中でやめる人が増えます。読みやすさと同じく、ここも離脱に直結します。

必須の項目を見直してください。予約を受けるのに本当に必要なのは、氏名、連絡先、希望日時、メニュー程度です。年齢、職業、来店のきっかけ。これらは来店してから聞けます。

入力の形式を限定しないでください。電話番号にハイフンを入れるかどうかで弾かれると、そこで諦められます。

エラーの表示を分かりやすくしてください。どの欄が問題なのか、何が違うのかを具体的に示します。「入力内容に誤りがあります」だけでは直せません。

入力の途中で消えないようにしてください。エラーで戻ったときに全部消えていると、やり直す気力が失われます。

会員登録を必須にしないでください。予約したいだけの人に、登録の手間を求めると離脱します。

入力が終わった後の表示も確認してください。予約が完了したのかどうかが分からない画面は、不安を招きます。

キーボードだけで操作できるか

マウスを使わず、キーボードだけでサイトを操作する人がいます。この場合、次の点が問題になります。

いま選択されている場所が分かるか。選択されている要素に枠が表示される仕組みがありますが、デザインの都合でこれを消していると、どこにいるか分からなくなります。

順番に移動できるか。上から順に移動できず、飛んだり戻ったりする作りは操作しにくくなります。

押せる要素にたどり着けるか。マウスを重ねたときだけ表示されるメニューは、キーボードでは開けないことがあります。

確認方法は簡単です。マウスを使わず、タブキーだけでページを移動してみてください。予約まで到達できれば、大きな問題はありません。

文章そのものを分かりやすくする

見た目を整えても、書いてある内容が伝わらなければ意味がありません。

一文を短くしてください。読点でつないで長くすると、途中で主語を見失います。40字から60字を目安に区切ってください。

専門用語には説明を添えるか、日常の言葉に言い換えてください。施術の名称、薬剤の名前、業界の用語。書く側には当たり前でも、読む側は知りません。

結論を先に書いてください。理由や背景を長く述べてから結論に至る書き方は、途中で読むのをやめられます。

箇条書きを使ってください。並列する内容を文章で続けると、把握しにくくなります。

数字を具体的に書いてください。「お早めに」ではなく「3日前まで」。「少々」ではなく「10分程度」。曖昧な表現は、人によって解釈が変わります。

読み手を想定してください。初めて来る人が知りたいことと、常連の方が知りたいことは違います。ページごとに誰に向けて書くかを決めると、内容が絞れます。

完璧を目指さなくてよい

すべての基準を満たすには、専門的な知識と時間が要ります。サロンのサイトで、そこまで求められることは通常ありません。

優先度をつけてください。効果が大きく、直しやすいものから手をつけます。

第一に、文字の大きさと明暗差です。最も多くの人に影響し、最も直しやすい部分です。

第二に、押しやすさです。予約に直結します。

第三に、色だけに頼らない表示です。カレンダーやリンクの見せ方を直します。

第四に、画像の説明です。件数が多い場合、重要な画像から順に付けてください。

これらだけでも、読めない人はかなり減ります。

VANNAで作るサイトは、文字の大きさや配色があらかじめ整えられています。テーマを選ぶだけで、極端に読みにくい状態にはなりません。写真をアップロードすると表示に適した形へ自動で変換されます。ホームページと予約ページは同じ管理画面から編集でき、メニューや料金の変更は両方に反映されます。

一方、写真の説明文は自分で入力する必要があります。また、掲載する情報の順序や、載せる文章の分かりやすさは、作る側の判断になります。この点は把握しておいてください。

料金はPro月額3,300円、Max月額5,500円、Max+月額11,000円で、いずれも税込です。初期費用は0円、予約や販売に対するVANNA側の手数料も0円です。決済を使う場合のStripe決済手数料は店舗負担で別途かかります。現在はプレオープン期間として、2026年7月31日までの申し込みで2か月無料、以降の申し込みは1か月無料です。条件は変更される場合があるため、最新の内容はVANNA公式 料金でご確認ください。

店舗側の配慮も併せて考える

サイトの読みやすさを整えたら、実際に来店したときの配慮も見てください。両方が揃うと、来店の障壁が下がります。

入口の段差を伝えてください。段差があること自体は変えられなくても、事前に分かっていれば準備できます。写真を載せる、あるいは「入口に3段の階段があります」と書く。

駐車場の有無と場所を明示してください。近隣の駐車場を案内する場合、そこからの距離も書いてください。

トイレの有無を書いてください。長時間の施術では、あるかどうかが判断材料になります。

付き添いの方が待てる場所があるかを書いてください。お子様連れや、介助が必要な方にとっては重要な情報です。

事前に相談してほしいことを書いてください。「車椅子でお越しの方は事前にご連絡ください」といった案内があると、問い合わせやすくなります。

これらは設備を変えなくても、書くだけで伝わります。書いていないことは、来店するまで分かりません。

自分で確認する方法

専門のツールがなくても、次の方法で問題に気づけます。

明るい屋外でスマートフォンを見てください。室内では見える文字が、屋外では見えないことがあります。

画面の文字を拡大して見てください。端末の設定で文字を大きくすると、崩れる箇所が分かります。

親や年配の知人に見てもらってください。読みにくい箇所を率直に教えてもらえます。

自分で予約を取ってみてください。途中で迷う箇所があれば、閲覧者も同じところで迷います。

音を消して動画を見てください。音がないと内容が分からない作りになっていないかを確認できます。

よくある質問

法律上の義務はありますか

事業者に対して、障害のある人への合理的な配慮が求められる場面があります。ウェブサイトについて具体的にどこまでが求められるかは、状況によって判断が変わります。義務の有無にかかわらず、読めない人を減らす対応には意味があります。

文字を大きくするとデザインが崩れます

崩れるのは、余白の設計に余裕がないためです。文字を小さくして収めるのではなく、要素を減らすか、配置を変えてください。読めないデザインは目的を果たしません。

画像の説明はすべての画像に必要ですか

意味のある画像に付けてください。装飾のための画像には不要です。付けすぎると、読み上げのときに邪魔になります。

配色はどう決めればよいですか

文字と背景の明暗差をはっきりさせることが基本です。薄い灰色を白の上に置く配色は避けてください。ブランドの色を使う場合も、文字に使う色は濃さを確保してください。装飾に薄い色を使うのは構いませんが、読ませたい文字には使わないでください。

写真の上に文字を重ねてもよいですか

重ねる場合、写真の明るさによって読めなくなります。文字の後ろに半透明の帯を敷く、写真全体を暗くする、といった処理をしてください。写真によって読めたり読めなかったりする状態は避けてください。

確認するツールはありますか

無償で使えるものがあります。ただし、ツールで検出できるのは一部です。実際に自分の端末で見る、他の人に見てもらうといった確認と組み合わせてください。

古いサイトを全部直す必要がありますか

優先度の高いページから手をつけてください。トップ、予約、メニューと料金。ここが読みやすくなれば、多くの人に届きます。すべてを一度に直す必要はありません。

予約フォームの項目はどこまで減らせますか

氏名、連絡先、希望日時、メニューがあれば予約は受けられます。年齢や来店のきっかけは、来店してから聞けます。入力欄が多いほど、途中でやめる人が増えます。

店舗の設備は変えられませんが、何ができますか

書くことができます。入口の段差、駐車場の場所と距離、トイレの有無、付き添いの方が待てる場所。設備を変えなくても、事前に分かれば準備できます。書いていないことは来店するまで分かりません。

出典

• 内閣府 障害を理由とする差別の解消の推進
• 総務省 みんなの公共サイト運用ガイドライン
• VANNA公式 機能

本記事は2026年7月時点の一般的な情報の整理です。法令上の義務の有無や範囲は状況により判断が変わるため、必要に応じて専門家にご確認ください。VANNAの料金・機能・キャンペーン条件は変更される場合があります。