縦向き とは、画面が 幅より高さがある （高さが幅より大きい）状態を指します。 横向き はその逆で、 幅が高さより広い状態です。縦向きの一般的な用途は、スマホのフィード、記事、フォーム、チャットなどです。横向きは、動画、マップ、水平なスペースが必要なダッシュボードに適しています。アスペクト比（例：縦9:16、横16:9）は幅と高さの比率を示し、向きはどちらの辺が長いのかを示すだけです。
縦向きと横向きの例
ポートレートモードの画像を検索した場合、この並列表示がそのイメージです。同じデバイスクラスで、縦長のフレームと横長のフレームが並んでいます。
ポートレートは注意を縦スクロールに集中させます。ランドスケープはより多くのカラムや並列UIを露出させます。これらは単なる回転ラベルではなく、レイアウトのコンテキストです。
| 向き | 形状 | 主な用途 |
|---|---|---|
| 縦向き | 高さが幅より大きい | フィード、読み物、フォーム、チャット |
| 横向き | 幅が高さより大きい | 動画、地図、グラフ、ゲーム |
画面の向きは解像度やアスペクト比とは異なります。2台の端末がどちらも縦向きでも、ピクセルサイズや比率は異なる場合があります。レスポンシブレイアウトは、特定のスマホモデルではなく、ビューポートの形状を基準にすべきです。
CSSでの縦向き
回転時に間隔や構造を変える場合はCSSを使います。次の @media (orientation: portrait) クエリは、高さが幅より大きいビューポートに一致します。MDNではこれを以下で説明しています。 orientation メディア機能.
/* Default: portrait-first single column */
.page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.sidebar {
display: none;
}
@media (orientation: landscape) {
.page {
grid-template-columns: 280px 1fr;
}
.sidebar {
display: block;
}
}
@media (orientation: portrait) {
.hero {
padding-block: 24px;
}
}まずユーザーが最初に目にする orientation から始め、その後で landscape のルールを追加します。キーボードやブラウザの chrome が表示されたときに壊れる固定の viewport 高さは避けてください。実際のデバイスで両方の orientation においてフォームや sticky header をテストしてください。
回転に反応する必要がある JavaScript（チャート、マップ、カスタムシェルなど）では、 screen.orientation の change イベントを監視するか、 window.innerHeight まで window.innerWidthを比較します。可能であればレイアウトは CSS に委ねてください。
モバイルおよび Capacitor アプリでの orientation ロック
ブラウザは orientation ロックを単なる設定として扱います。ネイティブアプリと Capacitor プロジェクトでは、回転がタスクを妨げる場合（サインイン、決済、キオスクフローなど）に、画面ごとに画面方向を強制できます。
この @capgo/capacitor-screen-orientation プラグインは現在のモードを読み取り、ルートでポートレイトをロックし、ユーザーがその画面を離れるとロックを解除します。 Screen Orientation プラグインのドキュメント を参照して、API の詳細を確認してください。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.lock({ orientation: 'portrait' });
const { type } = await ScreenOrientation.orientation();
console.log(type);
await ScreenOrientation.unlock();ロックは控えめに。回転が間隔を変えるだけなら、レイアウトを適応させるべきです。ロックする場合は、 lock と unlock をページライフサイクルに紐付け、メディアや設定画面では引き続きランドスケープを使えるようにします。iOS と Android 全体のレイアウトパターンについては、 Capacitor アプリのクロスプラットフォーム UI/UX ベストプラクティス.
よくある質問
ポートレイト方向とは？
縦向き（Portrait）とは、ディスプレイの高さが幅より大きい状態を指します。高さが幅を超えているため、長い辺が垂直方向に伸びます。読み物、チャット、スクロール用にスマートフォンを縦に持つ場合、通常は縦向きになります。
縦向きと横向きの違いは何ですか？
縦向きは高さが幅より大きく、横向きは幅が高さより大きいです。デバイスを回転させることで切り替わりますが、アスペクト比とレイアウトのスペースが変わるため、UIは単に引き伸ばすのではなく適応させるべきです。
CSSで @media (orientation: portrait) をどのように使いますか？
次のメディアクエリを追加します @media (orientation: portrait) { ... } ビューポートの高さが幅を超えたときにスタイルを適用します。横向き用のレイアウトルールと組み合わせるには、次を使用します @media (orientation: landscape) 両方の向きが必要なときに使います。
スマートフォンやアプリでの「向きの変更」とは？
向きの変更とは、デバイスを回転させるか、アプリの回転を許可して、画面を縦向きと横向きの間で切り替えることです。Webではビューポートの寸法が入れ替わります。ネイティブアプリとCapacitorアプリでは、OSが切り替えをアニメーションし、セーフエリアを更新する場合もあります。
コンテンツの向きとは？
コンテンツの向きとは、デバイスをどの方向に持つかだけでなく、フレームに対してコンテンツをどう配置するかを指します。縦向きの画面でも、ワイドなチャートや動画がレターボックス表示されることがあります。デフォルトのデバイスの角度だけでなく、タスクに合わせてレイアウトとメディアを調整しましょう。
縦向きと横向きの違いの例を見せてもらえますか？
はい。縦向き（Portrait）は高さが幅より大きい、縦長のスマホフレームのような状態です。横向き（Landscape）は幅が高さより大きい、横長のフレームのような状態です。以下の 縦向きと横向きの例 のラベル付き図までスクロールしてください。
もし Capacitor アプリをリリースしていて、リリース後の迅速な修正と併せて画面の向きを制御する動作が必要なら、 Capgo を検討する価値があります。これは CapacitorJS や Electron アプリに Live Updates を提供するだけでなく、画面の向き（screen orientation）などのアプリ機能向けプラグインもメンテナンスしています。これにより、リリースプロセス全体を再ビルドすることなく、特定のビューをロックしたり有効にしたりできます。
