完全に理解する Storyboard & UIKit (Day 7): Size Classesによるレスポンシブデザイン

Day 4から学んできたAuto Layoutのおかげで、画面が伸び縮みしても要素がはみ出さないUIが作れるようになりました。

しかし、「iPhoneを縦に持ったときはStack Viewを縦並び（Vertical）に、横に持ったときは横並び（Horizontal）にしたい」「iPadの広い画面では、iPhoneにはないボタンを追加したい」といった、設計そのものを切り替えたい要件にはこれだけでは対応できません。

それをStoryboard上でコードを書かずに解決するのが Size Classes（サイズクラス） です。

1. Size Classes とは？

Appleは、デバイス（iPhone, iPad, Mac）や画面の向き（縦: Portrait, 横: Landscape）、さらには画面分割（Split View）といったあらゆる状態を、絶対的なピクセル数ではなく、抽象的な 2種類のクラス の組み合わせで表現しました。

そのクラスが Compact（狭い・制約がある） と Regular（広い・余裕がある） です。

これらは Width（幅）と Height（高さ）のそれぞれに対して適用され、合計4つの組み合わせが存在します。

代表的な端末のSize Class

• 殆どのiPhone（縦向き）: Width=Compact, Height=Regular (略して wC hR)
• 殆どのiPhone（横向き）: Width=Compact, Height=Compact (wC hC)
• Max/Plus系iPhone（横向き）: Width=Regular, Height=Compact (wR hC)
• すべてのiPad（全画面）: Width=Regular, Height=Regular (wR hR)

2. Trait Collection の概念

これら「Size Class」に加えて、「現在ダークモードかどうか（User Interface Style）」「フォントが拡大設定されているか」といった、デバイスの環境情報全体をまとめたものを Trait Collection（トレイトコレクション） と呼びます。

Size Classは、このTrait Collectionの一部として提供されています。

3. StoryboardでのSize Classes設定方法

StoryboardのInterface Builderでは、特定のSize Classのときにだけ有効になる制約やプロパティを設定できます。

方法1：バリエーション（Vary for Traits）を追加する

例えば、「iPhone（wC hR）の時だけフォントサイズを小さくする」設定を行います。

1. 対象のラベルを選択します。
2. Attributes Inspector (⌥⌘4) を開きます。
3. Font 項目の左側にある小さな + ボタン（Add Variation） をクリックします。
4. ポップアップで Width: Compact, Height: Regular を選択して Add を押します。
5. すると w C h R という新しいフォント設定項目が追加されるので、ここに小さいフォントサイズを入力します。

※ これは文字の色や、Stack Viewの Axis（Vertical/Horizontal）など、多くのプロパティに対して有効です。

方法2：制約のON/OFF（Installed）を切り替える

「iPad（wR hR）の時だけ、このボタンを画面に表示させる（iPhoneでは消す）」設定を行います。

1. 対象のボタンを選択します。
2. Attributes Inspector の一番下にある Installed のチェックボックスを確認します。（これがチェックされていれば画面に存在する）
3. Installed の左の + ボタンを押し、Width: Regular, Height: Regular を追加します。
4. デフォルトの Installed のチェックを外し（iPhoneでは消える）、追加した w R h R の方の Installed にチェックを入れます（iPadだけで現れる）。

制約自体（Constraint）を選択して Installed を切り替えることも可能で、これにより「縦画面と横画面で全く違うAuto Layoutの制約を適用する」ことが完結します。

4. プレビューでの確認

設定ができたら、意図通りに動くか確認しましょう。

Storyboardのキャンバス下部には デバイス選択バー があります。 ここで「iPhone 15 Pro」や「iPad Pro」を切り替えたり、「Orientation（縦向き・横向き）」のアイコンをクリックして回転させたりすることで、Size Classesの設定が即座にキャンバスに反映されるのを確認できます。

📝 今日のまとめ

• デバイスのサイズや向きは、ピクセルではなく Compact / Regular の Size Classes（大分類）で抽象化されている。
• インスペクタの + ボタン をつかうことで、特定の環境下でのみ有効なプロパティや制約（バリエーション）を設定できる。
• Installed のチェックを切り替えれば、特定の端末・向きの時だけ要素の表示/非表示や制約のON/OFFを切り替えられる。

第1部の「UIKitとStoryboardの基礎」はこれで完了です！画面レイアウトについてはもう怖いものはありません。 次回の Day 8 からは第2部「ナビゲーションとデータ伝達」に入り、複数画面間の遷移（Segue）について学んでいきます。