0
1
こんにちは。前回のリニューアルから時間が経ちました。
リニューアル時にはデザイン面を重点的に刷新したのですが、その際に「スマートフォン表示の最適化」という課題が見えてきました。大きいサイズのスクリーンではきれいに見えていても、スマートフォンで見ると読みにくい部分がちょこちょこある、という状況でした。
そこで、本日はスマホ表示の最適化を行いました。その工夫を共有したいと思います。
📱 モバイル優先設計への転換
CSS を全体的に見直し、モバイルファーストのアプローチに切り替えました。
以前は「デスクトップ用に設計して、その後メディアクエリで縮小する」という逆向きの手法を取っていました。しかし現実的には、多くのユーザーはスマートフォンからサイトを訪れます。そこで、発想を逆転させ、まずモバイル環境を優先として設計し、大きい画面では拡張する という方針にしました。
具体的には：
- ベース CSS を小画面向けに最適化（フォントサイズ、スペーシング）
@media (min-width: 768px)でタブレット以上の改善を加える@media (min-width: 1024px)でデスクトップ向けの最終形を用意
🎨 具体的な実装工夫
1. レスポンシブ画像
アイキャッチ画像や記事内の画像に、srcset 属性を追加しました。デバイスのピクセル密度に応じて、最適なサイズの画像が自動で選ばれるようになります。
これにより、スマートフォンでは不要に大きい画像をダウンロードすることがなくなり、ページ読み込み速度の向上にもつながっています。
2. タッチターゲットサイズ
ナビゲーション、ボタン、リンクなどのクリック可能要素を最小 44×44 px に統一しました。これは WCAG（ウェブ・アクセシビリティ・ガイドライン）の推奨値です。
モバイルだと指でタップするので、小さすぎるターゲットはユーザーストレスになります。今回の見直しで、そうした細かい部分を全体的に改善できました。
3. フルードグリッド（可変グリッド）
記事レイアウトを固定幅からパーセンテージベースの可変幅に変更しました。
スマートフォンの幅に自動で合わせるため、特定のサイズにしか対応していないレイアウトを避けることができます。iPhone、Android、タブレットなど、様々なスクリーンサイズでも見やすく表示されるようになりました。
4. ビューポート設定の最適化
HTML の <meta name="viewport"> タグを見直し、スマートフォンではデバイスの実幅に合わせてスケーリングするよう設定しました。
これにより、ブラウザが勝手に全体を縮小表示するようなことがなくなり、意図した通りのレスポンシブデザインが機能するようになっています。
✅ 効果測定
スマホ表示の最適化後、いくつかのメトリクスで改善が見られています。
- Google Lighthouse スコア：特にモバイルの「Mobile Usability」がほぼ満点に。
- ページ読み込み速度：レスポンシブ画像の導入で、モバイルの First Contentful Paint が 15% 程度改善。
- ユーザー体験：個人的にスマートフォンで記事を読みテストしてみても、ストレスなく読むことができます。
もちろん、数値的には完璧ではない部分もありますが、確実に「使いやすさ」が向上したと感じます。
💡 小さな工夫の大きな効果
今回のスマホ最適化を通じて改めて感じたのは、「モバイル対応」は現代のウェブデザインにおいて必須だということです。
ほんの数年前は「まずはデスクトップで、その次にモバイル」という優先順位でしたが、今はその逆。スマートフォンを最優先に考えるのが、結果的に全てのデバイスで快適に使えるサイトを作る近道になるんだと、あらためて認識させられました。
これからもサイトの使いやすさを少しずつ改善していきたいと思います。皆さんも、自分のスマートフォンでサイトを見たときの使い心地を意識してみることをお勧めします。意外と「あ、ここ読みにくいな」という部分が見つかるかもしれません。
ひとこと
このサイトをスマートフォンで閲覧いただいている方は、ぜひ読みやすくなったな、と感じていただけたら幸いです。もし「ここまだ読みにくい」といった点があれば、ぜひ教えてください。
それでは、また次の記事で！🙌
