スマホファースト時代のホームページ制作｜PCデザインから考えてはいけない理由

いつもご覧いただき、ありがとうございます。運用支援の窓口の角田です。

「ホームページは、まずPC版を作ってから、それからスマホ対応をするものですよね？」

こんなふうにお話しされる方が、いまだに本当に多いんですね。

けれども、率直に申し上げると、この発想は、もう時代遅れになっていると私の中では感じています。

 

2026年現在、ほとんどのサイトで、流入の70%以上がスマホです。私たちソラノデザインの自社サイトでも、Google Search Consoleのデータを見ると、モバイル流入が約75%。

「スマホで完成形を作って、それからPCに広げる」のが、現代のホームページ制作の標準なんですね。順序がもう、ひっくり返ったんです。

今日は、なぜスマホファーストが必須なのか、PC発想で作ると現場で何が起きるか、を具体的にお話ししていきたいと思います。

なぜスマホファーストが「必須」になったのか

スマホファーストは、もはやデフォルトの考え方です。にもかかわらず、現場では「PC版で作ってから、後でスマホ調整」という古い順序のまま進行する案件が、いまだに多く存在しているんですね。

実際の流入の8割以上がスマホからなんですから、検収もスマホで行う、というのを徹底するだけで、CVRはまったく違ってきます。

商品ページに限らず、サイト全体でスマホでの体験を最優先する。これだけで、競合との差別化要因になります。

流入の大半がスマホになった

業種にもよりますが、現代のホームページの流入比率は、おおまかにこんなイメージです。

• BtoCサービス・EC：80〜90%がスマホ
• BtoBサービス：50〜70%がスマホ（PCも一定数）
• 店舗ビジネス：85〜95%がスマホ

つまり、「PC版で美しい」よりも「スマホ版で見やすい」のほうが、事業成果に直結する時代になったんですね。

Googleがモバイル版で評価する（モバイルファーストインデックス）

Googleは2020年以降、サイトを「モバイル版」で評価しています（モバイルファーストインデックス）。

PC版がいくら綺麗でも、モバイル版が崩れていれば、検索順位は伸びません。

スマホ表示の品質が、ユーザー離脱率を決める

スマホで開いたサイトが「読みにくい」「ボタンが押しにくい」と感じた瞬間、ユーザーは1〜2秒で離脱していきます。

スマホUXの品質が、CVRに直結する。これは、もはや感覚論ではなくて、データとして見えていることなんですね。

「PC発想で作る」と起きる典型的な失敗

では、PC発想で作ったときに、現場で何が起きるか。よく見る失敗パターンを並べてみます。

情報量が多すぎる

PC画面では、一度に多くの情報を見せることができます。

けれども、スマホでは縦長の限られた画面のなかに、情報を順序立てて配置していく必要があるんですね。

PC前提で情報量を詰め込んだサイトをスマホで見ると、ゴチャゴチャしていて、読む気が一瞬で失せてしまいます。

文字が小さすぎる

PC版で12〜14pxは、ごく普通のサイズです。けれども、スマホ版で同じサイズだと、年配の方は、もう読めません。

スマホでは最低16px、というのが現代の標準です。

タップしにくいボタン

PCではマウスクリックで、小さいボタンも問題なく押せます。けれども、スマホで指でタップするときに、44px×44px未満のボタンは、押し損ねることが本当に多いんですね。

CTAボタンが小さすぎると、それだけでCVRが半減することもあります。

画像が大きすぎて表示が遅い

PC向けに最適化された高解像度画像を、そのままスマホに表示すると、表示速度が一気に遅くなります。

スマホ用には、別の軽量画像を出し分ける設計が必要になります。

横スクロールが発生する

PC向けのテーブルや、横幅が広いコンテンツが、スマホで横スクロール表示になってしまう。これは、絶対NGです。

スマホでは、縦スクロールだけで完結する設計が必須だと、私の中で位置づけています。

スマホファースト設計の基本原則

では、スマホファーストで設計するときに、何を起点に考えればよいか。基本原則を5つに整理します。

「最も小さい画面」から設計を始める

iPhone SE（横幅320〜375px）など、最も小さいスマホでの表示を起点に設計します。

そこで完成度の高いデザインを作ってから、タブレット・PCへと広げていく。「縮小して何とかする」ではなくて、「最小から拡大していく」発想なんですね。

1画面1メッセージ

スマホ画面は縦長で、1スクロールで見える情報量は、本当に限られています。

1画面（ファーストビュー）には、「主要メッセージ＋CTAボタン」など、最重要要素だけに絞り込んでいきます。

縦の流れで「ストーリー」を作る

スマホは、ひたすら縦スクロールで読み進めていく媒体です。

上から下へストーリー性を持って情報を配置することで、ユーザーの離脱を防ぐことができます。

タップエリアを大きく取る

ボタン、リンク、メニュー、フォーム入力欄。これらはすべて、指で誤タップしないサイズに整えていきます。

最低44×44px、できれば60×60pxを推奨しています。

フォームの入力負荷を最小化

スマホでのフォーム入力は、ユーザーにとって本当に苦痛です。

項目数を必要最小限に減らして、入力タイプを最適化（電話番号入力欄ではテンキー表示、メール入力欄では@キー表示、など）していきます。

スマホ表示で「絶対チェック」する5項目

納品前、運用中、それぞれで「ここだけは必ず確認する」という5項目を共有します。

ファーストビューで「何のサイトか」が瞬時に分かる

スマホで開いた瞬間に、「これは何の会社・サービスのサイトか」が、3秒以内に分かるかどうか。

スクロールしなくても、メッセージとCTAが見えているかを、必ず確認します。

メインメニューがハンバーガーまたは下部固定

サイト内の他ページに移動しやすいメニューが、スマホでアクセスしやすい位置にあるかどうか。

ハンバーガーメニュー、または下部固定ナビゲーションが、現代の標準です。

電話番号がワンタップでかけられる

店舗ビジネスやサービス業の場合、電話番号は、ワンタップで発信できるリンクにしておきます。`tel:`リンクの設定ですね。

お問い合わせフォームが、スマホ最適化されている

項目数、入力タイプ、ボタンサイズ、エラー表示。

フォームのスマホ最適化は、CVRに最も直結する要素です。ここを丁寧にやれているかどうかで、結果がまったく変わります。

表示速度が3秒以内

Googleが推奨するLCP（Largest Contentful Paint）は、2.5秒以内です。

実測で3秒以内にメインコンテンツが表示されているかどうかを、Google PageSpeed Insightsで定期的に確認しておきます。

「タブレット表示」も意外と重要

スマホファーストと言いますが、実はタブレット（iPad、Androidタブレット）も、無視できない存在なんですね。

BtoBの世界では、経営者の方がiPadでサイトを見るケースも本当に多いんです。

タブレット表示で気をつけること

• 横向き表示でも崩れない
• タッチ操作前提のUI設計
• 大きい画面で適切な情報量を見せる

多くのサイトが「PCとスマホ」の2画面対応で止まっています。けれども、タブレットも含めた3画面対応ができているかどうかが、品質の差として現れてくるんですね。

実体験：自社サイトのスマホ最適化で起きたこと

ソラノデザインの自社サイトでも、過去にスマホ最適化を強化したタイミングがありました。

2020年頃：スマホファースト設計に切り替え

それまではPC基準で作っていたサイトを、スマホ基準で全面再設計していきました。

文字サイズ、ボタンサイズ、画像表示など、徹底的に見直したんですね。

結果：直帰率が10%以上改善

スマホ流入の直帰率が、再設計前は約65%。再設計後は約55%に。10%以上改善しました。

結果：問い合わせ件数が約30%増加

スマホからの問い合わせフォーム完了率が大きく上がって、月間の問い合わせ件数が約30%増加。

同時期に、Googleの検索順位も上昇し始めました。「スマホで使いやすい」がGoogleの評価にも反映された、ということだと感じています。

スマホ表示テストの実用ツール

最後に、私自身が日々の運用で使っているスマホ表示テスト用のツールを共有します。

Google PageSpeed Insights

スマホ表示の速度と、Core Web Vitalsを測定できます。月に1回はチェックする習慣にしておきたいツールです。

Chrome DevTools（デベロッパーツール）

ブラウザで開発者モードに入って、各種スマホサイズで表示を確認できます。

iPhone SE、iPhone 14 Pro、Galaxy、iPadなど、複数機種で確認していきます。

実機テスト

ツールだけではなく、必ず実機（iPhone、Android、iPad）でも確認していきます。

ツールでは分からない、実際のタップ感覚や読みやすさが、実機でこそ見えてくるんですね。最後はやはり、人間の手と目で確かめる。これは、どんなにツールが進化しても変わらない原則だと思っています。

総括｜「スマホで完成形を作る」が現代の標準

2026年のホームページ制作は、スマホで完成形を作ってから、PCに広げる。これが、現代の標準です。

「PC版で作って、後でスマホ対応をする」という発想は、もはや時代遅れ。冒頭でも書きましたが、もう一度書いておきます。順序が、ひっくり返ったんです。

本記事の論点を、御社の事業に当てはめて整理したい場合は、無料相談から個別にご相談いただけます。

最後までお読みいただき、ありがとうございました。今後とも、宜しくお願い申し上げます。