Responsive Design — 基礎、画面に合わせたインターフェースの適応

Responsive Designとは？

Responsive Designは、レイアウトが画面サイズ、向き、利用可能なスペースに応答し、機能を失うことなく要素を再配置するインターフェース構築の手法です。この用語は2010年にEthan Marcotteがウェブデザインのために提唱しましたが、その原則はネイティブモバイルアプリケーションにも完全に適用できます。

モバイル開発において、responsive designは同じアプリケーションがすべてのデバイスで正しく表示されることを意味します：iPhone SE（375 pt）からiPad Pro（ポートレート1024 pt）、Androidスマートフォン（360 dp）からタブレット（800 dp）まで。主要な要素はフレキシブルグリッド、アダプティブ画像、およびフレームワークレベルのメディアクエリ（size classes、qualifiers）です。

Apple Developer Documentationによると、アプリケーションはユニバーサルであるべきです — 別途iPadビルドなしですべてのデバイスで動作する必要があります。Google PlayはJetpack WindowManagerとcanonical layoutsを通じたアダプティブレイアウトの使用を推奨しています。タブレット対応の欠如は否定的なレビューの一般的な原因です。

Responsive vs Adaptive Design

Responsiveとadaptiveという用語は、異なるアプローチを説明しているにもかかわらず、しばしば混同されます。Responsive designは画面幅に継続的に調整される柔軟なグリッドを使用します。Adaptive designは事前に定義されたbreakpoints用の固定レイアウトを使用し、アプリケーションはそれらの間を段階的に切り替えます。

実際には、モバイルアプリは両方のアプローチを組み合わせて使用します。ベースグリッドはレスポンシブに構築され（Auto Layoutとconstraint依存関係）、breakpoint（例：幅 > 600 pt）に達すると、レイアウトは異なる要素配置のアダプティブバージョンに切り替わります。iOSはAuto Layout（responsive）とSize Classes（adaptive）を組み合わせます。AndroidはConstraintLayout（responsive）とqualifierリソース（adaptive）を組み合わせます。

iOS Size Classes: CompactとRegular

Size Classesは、利用可能な画面スペースを水平と垂直の2軸で分類するiOSのメカニズムです。各軸はCompact（C）またはRegular（R）になります。組み合わせにより4つのレイアウト適応オプションが得られます：CR（標準的なiPhoneポートレート）、RR（iPadポートレート/ランドスケープ）、RC（Plus/Pro MaxのiPhoneランドスケープ）、CC（iPad Split View）。

// SwiftでのSize Classesの定義
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — master-detailを表示
        case (.compact, .regular):
            showStackedView() // iPhoneポートレート — スタックレイアウト
        case (.compact, .compact):
            showCompactView() // iPhone SEランドスケープ — 最小化
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // UISplitViewControllerまたはHStackの使用
    }

    private func showStackedView() {
        // iPhone用の縦スタック
    }

    private func showCompactView() {
        // 副次的な要素を非表示、主要なものを表示
    }
}

Interface Builderでは、Size Classesは「wAny hAny」パネルを通じて設定されます — 開発者は特定の組み合わせ（wRegular hRegular、wCompact hRegular）を選択し、constraintバリエーションを追加します。SwiftUIはリアクティブ適応のために@Environment(\.horizontalSizeClass)と@Environment(\.verticalSizeClass)を使用します — 向きやウィンドウサイズが変わると、SwiftUIは自動的にビューを再描画します。

// SwiftUIでのSize Classes
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — サイドバー付き横レイアウト
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — 全画面縦スタック
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiersは、デバイスの特性に基づいて異なるリソース（layout、values、drawables）をロードするAndroidのメカニズムです。修飾子には画面サイズ（small、normal、large、xlarge）、向き（port、land）、最小幅（sw<N>dp）、利用可能な幅（w<N>dp）、高さ（h<N>dp）が含まれます。

// Kotlinでのデバイス設定の検出
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

さまざまな画面のリソース構造：res/layout/activity_main.xml（電話）、res/layout-sw600dp/activity_main.xml（7インチタブレット）、res/layout-sw720dp/activity_main.xml（10インチタブレット）。AndroidはsmallestWidthに基づいて自動的に正しいレイアウトを選択します — 向きに関係なくdp単位の最小画面幅。sw<N>dp修飾子が最も安定した適応方法です。

// Jetpack Compose — 適応のためのWindowSizeClass
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager（androidx.windowライブラリ）は、3つの幅カテゴリを持つWindowSizeClassを提供します：COMPACT（0–600 dp）、MEDIUM（600–840 dp）、EXPANDED（>840 dp）。これは古いqualifierフォルダーの最新の代替手段です。折りたたみ可能デバイスやタブレットへの適応のためにGoogleが推奨しています。

アダプティブグリッドとbreakpoints

アダプティブグリッドはresponsive designの基礎です。固定サイズの代わりに、要素はパーセンテージ比率、柔軟なconstraints、固有コンテンツサイズを使用します。Breakpointsは、レイアウトが状態間で切り替わる画面幅のポイントです。

Google Material DesignとApple HIGが推奨するbreakpoints：0–599 dp（電話、1列）、600–839 dp（タブレット、2列、navigation rail）、840+ dp（タブレット、3列、navigation drawer）。Breakpointsの数は4を超えるべきではありません — 過剰な移行ポイントはメンテナンスとテストを複雑にします。

アダプティブデザインのベストプラクティス

成功するresponsive designには、過去10年間にiOSおよびAndroid開発者コミュニティによって開発された一連のルールに従う必要があります。以下は、Apple HIG、Google Material Design、およびプロダクションプロジェクトの経験に基づく主要な推奨事項です。

• 最小の画面から始める — iPhone SE（375 pt）またはAndroid compact（360 dp）用にレイアウトを設計し、その後大きな画面用の拡張を追加します。これにより、重要なコンテンツがどこにでも収まるようになります
• 固有コンテンツサイズを使用する — UILabel、UIButton、ImageViewには自然なサイズがあります。Auto LayoutとConstraintLayoutはそれらを利用して、余分なconstraintsなしで自動配置を行います
• 小さな画面でコンテンツを隠さない — 隠す代わりに、再構成（reflow）します。ユーザーは同じ機能にアクセスできる必要があり、単に別の順序であるだけです
• すべてのSize Classesでテストする — iOSシミュレータは再起動せずにSize Classesを切り替えられます。Android Emulatorはさまざまなデバイスプロファイルを提供します。タブレットや折りたたみ可能デバイスでも必ずテストしてください
• Material 3 Adaptive Layout — Googleはリスト/詳細、ツールバー、ナビゲーション用の既製のcanonical layoutsを提供しています。独自のパターンを考案する代わりにそれらを使用してください

アダプティブデザインの主要な原則：コンテンツがレイアウトを定義するのであって、その逆ではありません。iPadがiPhoneと同じカードスタックを単に引き伸ばして表示する場合 — それはresponsive designではありません。Responsive designはレイアウトを再考します：iPhoneでは縦スクロール、iPadではサイドバー付きmaster-detail。