「Webデザインのトレンド」的な前置きは省きます。インターネットが大事だとか、デザインが重要だとか、そういう話はもう十分ご存知でしょう。
代わりに、芦屋のあるレストランの話をさせてください。料理は絶品、常連客はたくさん、Googleのレビューは星5つ——なのに、オンライン予約が頭打ちになっていました。サイト自体はきちんとしている。プロが撮った写真、すっきりしたレイアウト、必要な情報はすべて掲載済み。
問題は何だったか。スマートフォンでサイトを開くと(トラフィックの73%がスマホでした)、予約ボタンが3画面分スクロールしないと見えなかった。メニューはPDFで表示に8秒。そしてトップの看板料理の写真——美しい1枚でしたが——4.2MBあって、2003年のダイヤルアップ回線を思い出すような読み込み速度でした。
この5つ(プラスα)を直したところ、オンライン予約が初月で34%増えました。リデザインなし。ブランディング変更なし。既存のサイトを、使おうとしている人のためにちゃんと動くようにしただけです。
何を変えたのか、全部お話しします。
1. スマホユーザーはCTAを見つけられない(そして探してスクロールもしない)
あらゆるWebサイトで最もROIの高い改善かもしれません。主要なCTA——「予約する」「見積もりを依頼」「お問い合わせ」——は、スマホで開いた瞬間から2秒以内に、スクロールなしで見える場所になければなりません。
当たり前に聞こえるでしょう。しかし、私たちが日本の中小企業のサイトを監査するとき、メインCTAがデスクトップ版のナビバー内(モバイルでは折りたたまれる)にあったり、ファーストビューの遥か下にあったり、あるいは初見の訪問者がまず開かないハンバーガーメニューの中にしかなかったり——というケースがほとんどです。
実際にやること
- 画面下部に固定表示されるモバイルCTAバー
- ヒーローセクションの目立つ位置にアクションボタンを配置
- モバイル表示から不要な要素を削除——訪問者のアクションを助けないものは、すべて邪魔です
芦屋のレストランは、週平均12件だったオンライン予約が16件に増えました。ボタンを1つ動かしただけで33%増です。
2. 表示速度は技術的な数値ではない——売上の数値だ
怖い数字をお伝えします。モバイルユーザーの53%が、読み込みに3秒以上かかるサイトを離脱します。10秒ではありません。3秒です。
日本の中小企業のWebサイトの多くは、モバイルで5〜8秒かかっています。つまり、あなたのコンテンツを1文字も見る前に、潜在顧客の半分を失っているということです。
原因はほぼ毎回同じです。
- 未最適化の画像 — カメラマンが撮ったフルサイズの写真は3〜5MB。Webでは100〜200KBで十分。スマホの画面で見分けがつく人は文字通りいません。
- スクリプトの山 — アナリティクス、チャットボット、SNSウィジェット、Cookie同意バナー、2022年に入れて忘れたチャットプラグイン。一つひとつが読み込み時間を増やしています。
- 遅延読み込みの不在 — ファーストビュー外の画像は、ユーザーがスクロールした時に読み込むべき。最初に全部読み込むのではなく。
芦屋のレストランのページ読み込み時間を6.2秒から1.4秒にしました。同じサーバー。同じデザイン。画像の圧縮、不使用スクリプトの削除、遅延読み込みの実装だけです。
3. ダークモードはトレンドではなくなった——最低限の装備だ
2024年の大半、クライアントに「ダークモードはあると嬉しい程度」と言っていました。もう言いません。
2025年の私たちのプロジェクトデータでは、ダークモード対応サイトの訪問者は、ライトモードのみの同等サイトと比較して12〜18%長く滞在していました。理由の一部は実用的なもの——ダークテーマは目に優しく、特に夜間のブラウジングで効果的です(日本のB2Cトラフィックの40%以上が夜間というデータがあります)。
でもそれだけではありません。ダーク&ミニマルなインターフェースは「モダン」「洗練されている」というシグナル。Apple、Vercel、OpenAIのビジュアル言語であり、その美的連想は意図するかどうかに関わらずブランドイメージに影響します。
完全なダークテーマにする必要はありません。prefers-color-schemeに対応したダーク/ライト切り替えで十分です。ただ、ダークオプションが一切ないのは、2016年にモバイル対応がなかったのと同じ感覚になりつつあります。
4. 本物の写真はストックフォトに100%勝つ
画期的な発見ではないことは承知しています。ストックフォトが無機質なのは誰でも知っている。でも驚いたのは、その差の大きさです。
大阪のB2Bクライアントで、ストック画像を実際のチーム、オフィス、製品のプロ写真に差し替えたところ、お問い合わせフォームの送信数が28%増えました。コピーは同じ。レイアウトも同じ。CTAも同じ。写真だけが違いました。
理由は信頼です。実際のオフィスの写真を見れば「本物の会社だ」と思う。47,000個の他のサイトにも使われている同じShutterstockの画像を見れば——意識するしないに関わらず——「どこの会社でもありえる」と思う。
プロの撮影が今すぐ難しいなら、自然光の良い場所でスマートフォンで撮った方が、どんなストックフォトよりもマシです。本気で言っています。
5. アクセシビリティは慈善ではない——SEOと売上の両取りだ
Webアクセシビリティについて、見方を変えてみましょう。アクセシブルなWebサイトは:
- 検索順位が上がる(GoogleはアクセシブルなセマンティックHTMLを明示的に評価する)
- あらゆるデバイス・画面サイズで正しく動作する
- 読み込みが速い(セマンティックHTMLはdivだらけのコードより軽い)
- 何らかの視覚・運動・認知障害を持つ15〜20%のユーザーにリーチできる
最後のポイントを多くの企業が見落としています。潜在顧客の5人に1人が、今あなたのWebサイトで困っているかもしれない——小さすぎる文字、コントラスト不足、タップしにくいボタン、スクリーンリーダーが読めない画像。
基本的な対応にはほとんどコストがかかりません: セマンティックHTML要素(<nav>, <main>, <article>)、適切な見出し階層、十分な色コントラスト(最低4.5:1)、画像のalt属性、フォーカス可能なインタラクティブ要素。これらはデザイン変更ではなく、どの開発者もやるべきコードの衛生管理です。
じゃあ、何をすればいいのか
大規模リデザインはスキップしてください。本気で。サイトの根本的なコードがどうしようもない場合を除き、段階的な改善の方が速く、安く、確実に成果が出ます。
私のおすすめの順番はこうです:
- モバイルのCTA位置を確認 — 今すぐスマホでサイトを開いて。スクロールなしで主要アクションが取れますか? 取れないなら、ここから直す。最もレバレッジの高い変更です。
- 速度テストを実行 — PageSpeed Insightsにアクセスし、URLを入力してモバイルスコアを確認。70未満なら、速度改善の余地があります。
- ストックフォトを1枚差し替える — トップページのメイン画像。本物の写真に。不完全でも構いません。
- ダークモードに対応 — または最低限、ユーザーのOS設定を尊重する。
- アクセシビリティ監査を実行 — WAVEやaxeなどのブラウザ拡張で、簡単に改善できるポイントが数分で見つかります。
それぞれ独立して実施でき、独立して効果を測定でき、それぞれがコンバージョン率を改善する可能性が高いです。
優先順位付けの相談が必要でしたら、30分の無料サイト監査を行っています。あなたのサイトにとって最もインパクトの大きい3つの変更をお伝えします。