BLOG
BRIGHTPATHブログ

文字が小さい工務店サイトは読まれない

スマホで文字が小さいサイトを見たとき、ユーザーは「読もう」とはしません。「読めない」「面倒くさい」という感覚が瞬時に生まれ、ページを閉じます。

この判断は意識的なものではありません。視覚的なストレスが無意識の離脱判断を生みます。人間は快適ではない環境から素早く離れようとします。文字が小さいサイトは、それだけで「この会社は自分のことを考えていない」という無意識の評価につながります。

特に工務店サイトには「施工事例の説明文」「お客様の声のテキスト」「会社理念の文章」など、読んでほしいテキストが多くあります。これらがすべて「読まれない状態」になっているとすれば、どれだけ充実したコンテンツを作っても意味がありません。

CTAが押しづらいホームページは離脱される

スマホの操作は「親指１本」です。右手でスマホを持ち、右の親指でタップする。この操作前提を無視したCTAボタンの設計は、問い合わせの機会を逃し続けます。

「お問い合わせはこちら」というリンクテキストが、親指が届きにくい画面上部の端にある。ボタンのサイズが小さすぎて、タップしようとすると隣のリンクに当たる。「押せた」のか「押せていないのか」が分からない。これらのストレスが重なるたびに、見込み客は離脱します。

住宅は高額商品です。問い合わせるためには相当の決断が必要です。そこに「ボタンが押しにくい」というさらなるストレスが加わると、「まあ、いいか」という離脱判断が生まれます。

表示速度が遅い工務店サイトの問題点

Googleの調査では、モバイルでのページ表示が３秒を超えると53%のユーザーが離脱するというデータがあります。工務店サイトには施工写真が多く掲載されていることが多いですが、これらを未圧縮のままアップロードしていると、表示速度が大幅に低下します。

表示速度の問題は技術的な話に見えますが、ユーザーの体験としては「この会社のサイト、遅い」という印象です。「なんか重いな」という感覚は、無意識に「この会社は丁寧でないかもしれない」という評価につながります。

表示速度はSEOにも影響します。Googleはページ速度をランキング要素の一つとして使っており、表示が遅いサイトは検索順位が下がりやすくなるのです。問い合わせが減るだけでなく、そもそもサイトが見つかりにくくなるという二重のデメリットが生まれます。

スマホを前提にしたホームページ設計とは

モバイルファースト設計とは「スマホで見たときに最高の体験になるよう設計し、PCはその拡張として考える」という発想です。

従来のWeb制作では「PCで美しく見えるデザインを作り、スマホでも表示できるようにする」という順序でした。しかしアクセスの８割がスマホからという現実では、この順序が逆です。まずスマホで完璧に機能するサイトを設計し、PC表示はその上に成立させる。この発想の転換がモバイルファースト設計です。

実務的には「スマホで開いたとき、何も拡大しなくても文字が読める」「ボタンが親指でストレスなく押せる」「ページが３秒以内に表示される」という３点が最低限の基準になります。

スマホユーザーは「読む」より「判断」している

スマホユーザーが工務店サイトに費やす時間は、PCユーザーより短い傾向があります。これは関心が低いからではなく、「使える時間が短い隙間時間」にアクセスしているからです。

電車の中、子供を寝かしつけながら、昼休みの数分 ——これらの隙間時間に工務店サイトを見ているユーザーは、「じっくり読もう」とは思っていません。「この会社はどんな家を建てるのか」「自分たちに合いそうか」を写真と見やすさで直感的に判断しています。

文字がぎっしり詰まっていると「見づらい」と判断され、読む前に離脱されます。この離脱はコンテンツへの拒否ではありません。「読むコストが高い」という判断です。写真を大きく・テキストは短く・余白は十分に、というスマホでの「判断しやすさ」を最優先に設計することが、問い合わせ率を上げる設計です。

PC基準ではなくスマホ導線を優先する

工務店サイトの導線設計（どのページからどのページへどう誘導するか）を、スマホの操作特性に合わせて設計し直すことが重要です。

PC では「メニューバーをクリックして施工事例へ」という導線が自然に機能します。しかしスマホでは、ハンバーガーメニューを開く → メニュー 一覧を探す → 該当項目をタップするという３ステップが必要で、途中で離脱するケースが多いです。

スマホ導線の設計では「スクロールだけで次のアクションに進める」ことを基本にしてください。トップページをスクロールするだけで施工事例のサムネイルが見え、タップすると詳細ページへ。施工事例詳細ページの末尾には問い合わせボタンが大きく表示される、というこの流れがスマホ専用の導線設計です。

文字サイズ・行間・余白の最適化

スマホでの読みやすさは、３つの数値で決まります。

この３つの数値を見直すだけで、同じコンテンツが「読まれるサイト」に変わります。

追従CTA（固定フッター）の設計

スマホは「親指１本で操作する」前提です。この事実がCTA設計のすべてを決めます。
最も効果的なスマホCTA設計が「追従CTA（固定フッター）」です。スクロールしても常に画面下部に表示されるボタンを設置することで、ユーザーが「問い合わせしたい」と思った瞬間に、いつでもタップできる状態を作ります。

追従CTAのルール：

デザイン性より「迷わずストレスなく押せること」が最優先です。

スマホ専用ファーストビュー設計

PCとスマホではファーストビューの画面比率がまったく異なります。PCは横長（16:9程度）、スマホは縦長（9:16〜9:20程度）。PCで美しく設計したファーストビューをそのままスマホに縮小すると、写真が縦に切り取られ、テキストが画像の上に重なり、CTAが見えないという状態になりがちです。

スマホで開いた瞬間の印象は、ファーストビューの設計に大きく依存します。
↓ こちらも合わせて見直してください。

画像軽量化（WebP・圧縮）の基本

工務店サイトの表示速度の最大の敵は「未圧縮の施工写真」です。一眼レフで撮影した高解像度の施工写真は、１枚で3〜10MBになることがあります。これをそのままWebにアップロードすると、施工事例一覧ページを開くだけで数十MBのデータをダウンロードすることになります。

高画質な施工事例写真をそのまま載せることは、表示速度を大きく低下させ、信頼設計の観点でもリスクになります。表示を待たせないことがマストです。

画像軽量化の具体的な手順：

PageSpeed Insightsで確認すべき指標

Googleが無料で提供するPageSpeed Insightsは、工務店サイトのスマホ表示速度を診断する最重要ツールです。URLを入力するだけで、スマホでの表示速度スコアと具体的な改善項目が表示されます。

確認すべき主要指標：

スマホスコアが60点以上（理想は80点以上）を目標にしてください。60点を下回っている場合は、改善が急がれます。

フォーム・ボタンのモバイル最適化

問い合わせフォームはスマホで最も離脱が起きやすい場所です。入力のストレスが一定ラインを超えると、「まあいいか」という離脱判断が生まれます。

スマホフォームの最適化ポイント：