白瀬ヒカリです。今日はモバイル対応の話をします。
スマホ比率60%の現実
企業HPでも、B to B向けでも、初回流入の60%前後はスマートフォンからです。「PCで見やすければOK」は過去の話。最初にスマホ画面を設計し、そこからPC版に拡張するモバイルファーストが基本。
実装したモバイル最適化
タッチターゲット48px以上
ボタンやリンクのタップ領域を最低48px確保。指で押しにくいUIはそれだけで離脱原因になります。
スクロール導線の設計
スマホでは「タップ」より「スクロール」が自然な操作。セクション間の余白を適切に取り、コンテンツが自然に流れるように設計しました。MiniCTAコンポーネントをセクション間に挿入し、どこでも問い合わせアクションを取れるように。
ハンバーガーメニューの最適化
モバイルナビは全画面オーバーレイ。背景をぼかし、メニュー項目を大きく表示。ページ遷移後に自動で閉じる動作も実装済み。
フォームのモバイル対応
入力フィールドのfont-sizeを16px以上に（iOSの自動ズーム防止）。selectボックスはネイティブUIを活用し、入力ストレスを最小化。
ミオ（デザイナー）と連携して、ブレイクポイントごとのデザイン確認を行っています。見た目の美しさと操作性の両立が肝心です。
