はじめに
こんにちは、Gakken LEAPのフロントエンドエンジニアのkouです。
最近、ShikakuPassの資格詳細ページの機能改善を担当しました。ユーザーが学習期間を選びやすくなる絞り込み機能の追加や、無料体験・割引情報をより目立たせるUIデザインへの変更を行いました。以下が、新しいモバイル版とPC版のUIです。
しかし、デザインカンプは通常PCとモバイルの2種類のみで、タブレット版は用意されていません。そこで、iPadなどのタブレット端末でもユーザーが快適に利用できるよう、表示が崩れている部分について、既存のレスポンシブレイアウトを基にモバイル版からの微調整で対応することにしました。
発見された課題
iPadの実機テストを通じて、以下の課題が見つかりました。
- カード幅が広すぎる: 画面幅768pxでカードが画面全体を占めてしまい、価格情報を素早く把握しづらい。
- スペースの無駄: 単列レイアウトのため、タブレットの横幅を有効活用できていない。
- 可読性の低下: テキストの行が長すぎて、ユーザーの読書体験を損なっている。
最適化戦略
1. レスポンシブブレークポイントの分析
まず、Tailwind CSSの標準ブレークポイントを再確認します。
-
sm: 640px // スマートフォン（横向き） -
md: 768px // タブレット（縦向き） ※iPad縦向きはちょうど768px -
lg: 1024px // タブレット（横向き） / 小型ノートPC -
xl: 1280px // デスクトップPC -
2xl: 1536px // 大型ディスプレイ
主要デバイスの画面サイズ参考:
| デバイス | 縦向き | 横向き |
|---|---|---|
| iPhone 14 | 390×844px | 844×390px |
| iPad (第9世代) | 768×1024px | 1024×768px |
| iPad Pro 11" | 834×1194px | 1194×834px |
| iPad Pro 12.9" | 1024×1366px | 1366×1024px |
2. 解決策の選択
案A：最大幅の制限のみ追加
- 長所: 実装が簡単で、影響範囲が小さい。
- 短所: 横方向のスペースが無駄になってしまう。
案B：プログレッシブなレイアウト最適化
- 長所: タブレットの画面スペースを有効活用でき、ユーザー体験が向上する。
- 短所: 様々な画面サイズで慎重なテストが必要になる。
最終的に案Bを選択し、プログレッシブな最適化アプローチを採用しました。
具体的な実装
設計原則
- 既存レイアウトを壊さない: モバイルとPC端末は既存の体験を維持
- 最小限の変更: mdブレークポイントでのみ対象的なスタイルを追加
- プログレッシブ・エンハンスメント: モバイルベースから段階的により大きな画面を最適化
主要な変更点
1. 無料体験カードレイアウト最適化
コンポーネント: プロモーションカード
const style: StyleSetting<Style, StyleItemName> = {
// ...
compact: {
- container: 'flex-col p-4 md:items-center md:px-6',
+ container: 'flex-col p-4 md:flex-row md:items-center md:px-6',
}
}
最適化効果：
- モバイル：垂直レイアウトを維持（flex-col）
- タブレット：横向きレイアウトに切り替え（md:flex-row）、ワイドスクリーン空間をより有効活用
-
配置方式：統一して
md:items-centerを使用し、要素の垂直中央揃えを維持
2. コースカードグリッドレイアウト
コンポーネント: コース詳細カード一覧
const style: StyleSetting<Style, StyleItemName> = {
// ...
default: {
- cardsContainer: 'flex flex-col gap-y-3',
+ cardsContainer: 'flex flex-col gap-y-3 md:grid md:grid-cols-2 md:gap-4',
}
}
最適化ロジック：
- モバイル：単列表示（flex flex-col gap-y-3）
- タブレット：2列グリッドレイアウト（md:grid md:grid-cols-2 md:gap-4）
-
間隔調整：グリッドモードでは
gap-4を使用、垂直モードのgap-y-3より少し大きい
3. 全体コンテナ幅制限
コンポーネント: メインコンテナ
<!-- コースグループループ表示 -->
- <div class="mt-3 w-full">
+ <div class="mt-3 w-full md:mx-auto md:max-w-4xl">
<CourseDetailList
v-for="(courseGroup, index) in courseGroups"
:key="`course-${index}`"
幅制御戦略：
- モバイル：全幅表示を維持（w-full）
- タブレット (md以上): md:max-w-4xl(896px)で最大幅を制限し、md:mx-autoでコンテンツを中央に配置することで、大画面での過度な引き伸ばしを防ぎます。
技術詳細
なぜ max-w-4xl を選択したのか？
iPad縦向き(768px)で左右のpadding(計32px)を引くと、利用可能幅は736pxです。これを2列で表示する場合、列間のgap(16px)を考慮すると、1列あたりの幅は (736px - 16px) ÷ 2 = 360px となります。
max-w-4xl (896px) という値は
- 2.5個のカード幅
- 将来的に3列レイアウトへ拡張する余地を残せる
- より大きな画面でコンテンツが引き伸ばされすぎるのを防ぐ
CSSメディアクエリへの変換
Tailwind CSSの記法は、内部的に以下の様なCSSメディアクエリとして機能します。
/* モバイルファーストのレスポンシブデザイン */
.card-container {
/* ベーススタイル：モバイル */
display: flex;
flex-direction: column;
gap: 0.75rem; /* gap-y-3 */
}
/* タブレット用の上書きスタイル */
@media (min-width: 768px) {
.card-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem; /* gap-4 */
}
}
最適化による効果
ビジュアル比較
-
最適化前:
- カードが画面幅いっぱいに広がり、圧迫感がある。
- 価格情報が分散し、比較しづらい。
- 縦のスクロール距離が長い。
-
最適化後:
- iPad縦向き: 2列グリッドになり、情報密度が向上。
- iPad横向き: 画面スペースの利用率がさらに改善。
- モバイル: 既存の体験は完全に維持。
- 大画面: コンテンツが中央に配置され、過度に引き伸ばされるのを防止。
ユーザー体験の向上
- 情報取得の効率化: 同じ画面内でより多くのコース情報を表示でき、比較検討がしやすくなった。
- 操作性の向上: スクロール回数が減り、閲覧効率が向上した。
まとめ
このプログレッシブな最適化手法により、デザインや開発のコストを最小限に抑えつつ、タブレットユーザーの体験を大幅に向上させることができました。。
今後も、クロスデバイス対応が必要な場面でも応用できると考えています。
エンジニア募集中
Gakken LEAPは日々、教育のアップデートに取り組んでいます！
興味をお持ちいただいた方は、採用サイトをチェックしてみてください！