2026年版ポートレート向きのガイド

携帯電話を回転させて画面をテストすると、レイアウトがきれいに適応するか、崩壊するかがわかります。テキストが再流れ、ボタンがジャンプし、モーダルが突然間違った場所に覆うか、動画プレイヤーが期待どおりに動作するかがわかります。その小さな瞬間は ポートレート向き デザイン用語から製品の決定に変わる。

モバイル向けに開発している場合、明確な答えが必要です。 ポートレート向けのオリエンテーションとは?. Not just the classroom definition, but the developer version. How it affects layout, when to support rotation, when to lock it, and how to handle it in web apps, native apps, and Capacitor projects without creating a brittle UX.

レイアウトにどのような影響を与えるか、回転をサポートするとき、ロックするとき、Webアプリ、ネイティブアプリ、__CAPGO_KEEP_0__プロジェクトでどのように扱うか、脆弱なUXを作成しないようにする方法について。

目次
- ポートレートオリエンテーションを理解する
- 製品作業でなぜ重要か
ジュニア開発者が混乱する場所
さまざまなメディアで使用される一般的な用途
Web上でのオリエンテーション管理
モバイルアプリのオリエンテーション管理
画面向きのベストプラクティス

ポートレート向きの理解

ユーザーは画面の回転を最初に認識します。開発者は、回転がインターフェイスを破壊するときにそれを認識します。

スマートフォンを横に持ち、ダッシュボードアプリのインターフェイスが画面に表示されている

ポートレート向き 画面の高さは幅より大きいその核心はそこにある。視覚芸術から来ています。人々の顔と上半身の肖像画は通常垂直にフレームされていました。同様の概念は、ページの設計、写真、デジタルインターフェイスに広がりました。より広い歴史についての良好な参照はWikipediaのページ向きの概要ビルダーにとって重要なのは、ポートレート向きは画面サイズ、デバイス、ファイル形式のいずれにもつながっていないことです。形状のルールです。高さは幅より大きい場合、ポートレートです。.

製品作業でなぜ重要か

ポートレートはモバイルで実用的なデフォルトになったのは、立って使うことが自然なので、スマートフォンを横に持ちやすいからです。その影響はスクロール、指の範囲、読み取りの流れ、フォームの設計、ナビゲーションの配置にあります。

UXベストプラクティス

垂直フレームでは、フィード、記事表示、設定画面、またはチャットスレッドが自然に読みやすくなります。その理由の1つは、オリエンテーション選択が直接つながるからです。モバイルアプリのユーザー体験の決定、視覚的なスタイリングだけではありません。

実践ルール: ポートレートをレイアウトのコンテキストとして扱い、デバイスの位置としてだけは扱わない。

新人開発者がよく混乱するところ

通常の混乱は、横向きと縦向きを混同することです。 ポーズ with resolution または アスペクト比率.

向きは、どの辺が長いのかを示します。
解像度 は、各軸に存在するピクセルの数を示します。
アスペクト比 は、幅と高さの関係を示します。

タブレットがポートレートモードで、スマートフォンがポートレートモードであっても、実際の寸法は大きく異なる可能性がありますが、向きは同じです。したがって、レスポンシブUIロジックは、より具体的な質問をする前に、「高さが幅より大きいかどうか」を尋ねる必要があります。

ポートレートとランドスケープの基本的な比較

この概念を理解する簡単な方法は、構成を通じて行うことです。ポートレート画は、人物や他の高い主題に焦点を当てます。水平画は幅、背景、周囲の空間を捉えます。UIも同様です。

ポートレートとランドスケープの向きを比較する視覚的なガイド、コンテンツとデバイス表示の最適な使用方法を詳しく説明しています。

画像とUIデザインでは、ポートレート向きは 高さが幅を超えるなので、長い辺は垂直です。その逆は水平方向です。 SLR Loungeの用語解説技術的な定義と、その形状が高い主題や垂直構造に適合する理由について説明しています。

1つの表の差異

向き	形状	最適なフィット	コンテキスト: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_compare_fit_feature` (ネイティブビルドビルダー比較フィット機能)。
典型的な効果	ポートレート	高さが幅より高い	視線を垂直方向に集中させる
横向き	高さより幅が広い	動画、地図、ダッシュボード、広いシーン	より多くの水平方向のコンテキストを表示する

基本的なことですが、製品レビューの際にトレードオフをしながら、役に立つことがあります。

ユーザーにとっての変化

ポートレートは通常、視線を狭める。側面のコンテンツを減らし、上から下へのフローを促す。なぜなら、ソーシャルフィード、記事ページ、オンボーディングステップ、チャットインターフェイスはポートレートで綺麗に感じるからです。

水平方向はその逆です。幅が広がり、スプリットビュー、タイムライン、ギャラリー、メディア再生、データ重視の表面、インマーシブビューなどに役立ちます。レイアウトがサイドバイサイドの比較が必要な場合、この水平形式はよりゆとりがあることが多いです。

ポートレートは通常、焦点です。ランドスケープは通常、コンテキストです。

開発者にとっての変化

最も大きな間違いは、幅の広い形式をポートレートの拡大版として扱うことです。そうではありません。情報の階層はよく変わります。

例えば:

ポートレートモードでは、ダッシュボードはカードを 1 列に積み重ねることができます。
より広いモードでは、同じダッシュボードは複数の列にシフトし、フィルターやサイドパネルを表示することができます。
ポートレートモードでは、決済フォームでは大きなタップターゲットと 1 つの明確なフローを優先します。
より広いモードでは、同じ画面はフィールドが垂直方向に圧縮されすぎると不快な感じがします。

インマーシブモバイルレイアウトに取り組む開発者も、エッジハンドリング、セーフエリア、フルスクリーンベHAVIORについて考える必要があります。調整している場合、 Capacitor エッジレスディスプレイ設定は、ユーザーが利用可能なスペースをどのように認識するかが変わるため、同じ会話の部分です。

さまざまなメディアで共通の使用例

ポートレート向きはモバイル画面以外の場所でも見られます。その理由は、コンセプトはソフトウェアで始まったわけではなく、ソフトウェアに限ったものでもないからです。

スマートフォンを使用する人の近景

写真撮影と印刷物

プロのポートレート写真は明らかな例です。垂直枠は人の顔と体に合うことが多く、広い枠ではありません。同様の論理はファッション写真、本の表紙、ポスター、雑誌の表紙にも当てはまります。

印刷物のデザインでは、読み取り体験が上から下に進むようにするためにポートレートを使用します。その形状は、目が自然にページを下に移動するようにします。

文書と日常のコミュニケーション

ほとんどのレポート、履歴書、手紙、内部ドキュメントはポートレートで設計されています。それは、ポートレートが常に良くないからではなく、垂直ページは段落、見出し、リスト、署名のシーケンスを読むのに適しているからです。

PDFをエクスポートしたことがある人は、広い表が読めなくなったことに気づいたことがあるかもしれません。その限界はポートレートの限界です。しかし、コンテンツの構造に合った枠を選択することが重要です。

モバイル製品とアプリのフロー

このような状況では、ポートレートは多くのチームにとってデフォルトのメンタルモデルになります。

ユーザーが繰り返し開く画面を考えましょう:

チャットアプリ: メッセージは垂直に積み重なります。
ソーシャルアプリ: 投稿、コメント、動画は上向きのフローで消費されます。
リテールアプリ: 検索結果と製品リストは下方向にスクロールします。
銀行アプリ: 残高、取引、確認フローは通常、垂直セクションに配置されます。

それらのパターンは偶然ではありません。ポートレートは、手のひらでスクロールし、線形タスクの完了をサポートします。

モバイルUIの多くは、インターフェイスが uprightデバイスを前提としているため、直感的です。

それが意味するのは、すべての画面がポートレートでなければならないわけではありません。メディアビューア、地図、Largeチャート、カメラベースのワークフローは、より広いフレーミングから利益を受けることがよくあります。ただし、日常のタスクフローでは、ユーザーは通常ポートレートから始めます。

ウェブ上でのオーリエンテーション管理

ウェブ上の一般的なバグは、最初は小さく見えます。アプリは正面向きのビューできれいに読み込まれますが、ユーザーが端末を回転させると、グラフがフラッシュし、サイドバーが間違ったブレークポイントで表示され、キーボードが送信ボタンを隠します。ウェブ上のオリエンテーションは実際には状態についてです。ビューの形状が変わり、UIは予測可能な方法で反応する必要があります。

開発者にとって、これは2つのジョブを分離することを意味します。CSSはレイアウトの変更を取り扱います。JavaScriptは動作の変更を取り扱います。モバイル向けに同じプロジェクトをパッケージングする場合、このウェブ層はまだ重要です。 Capacitorを使用してウェブアプリをモバイルアプリに変換することは、ウェブ上のオリエンテーションを取り扱う必要性を排除するものではありません。むしろ、その基盤をさらに重要なものにします。プラットフォームはあなたに2つの主なツールを提供します。Screen Orientation __CAPGO_KEEP_0__はオリエンテーションタイプと変更イベントを公開し、Web App Manifestはインストール済みのアプリが望ましい正面向きモードを宣言できるようにします。たとえば、または。

The platform gives you two main tools. The Screen Orientation API exposes orientation type and change events, and the Web App Manifest lets an installed app declare a preferred upright mode such as portrait, portrait-primaryCSSを使用してレイアウトが適応するようにします。 portrait-secondaryCSSから始めましょう。幅と高さが役割を入れ替える場合、最も安価で信頼性の高い方法で反応することができます。これはスクリーン形状の進化的な強化と同じように機能します。最初は、窄い正面向きのレイアウトをデフォルトとして開始し、ビューが幅が広くなるたびに、セカンダリUIにスペースを追加します。.

後で時間を節約するために、以下のいくつかの実践を実行します:

Start with CSS. It is the cheapest and most reliable way to respond when width and height swap roles.

/* Default portrait-friendly layout */
.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sidebar {
  display: none;
}

@media (orientation: landscape) {
  .page {
    grid-template-columns: 280px 1fr;
  }

  .sidebar {
    display: block;
  }
}

This works like progressive enhancement for screen shape. Begin with the narrow, upright layout as the default. Then add room for secondary UI only when the viewport becomes wider.

A few practices save time later:

__CAPGO_KEEP_0__ 主なモードから始めましょう:
主に端末を直立で使用する人々が多い場合は、基本レイアウトをそのまま使用してください。 固定高さを避けましょう:
端末を回転させると、ブラウザUIや仮想キーボードが表示される場合など、利用可能な垂直スペースが急激に減少します。 実際のインタラクション状態をテストしましょう:

フォーム、固定ヘッダー、ボトムシートなど、回転中に失敗することが多いです。静的なスクリーンショットでは問題ありません。

JavaScriptを使用する必要がある場合:

CSSはボックスを並べ替えることができますが、グラフを再構築したり、ジェスチャーハンドラーをリセットしたりすることはできません。

function logOrientation() {
  const type = screen.orientation?.type;
  console.log('Current orientation:', type);
}

logOrientation();

screen.orientation?.addEventListener('change', () => {
  logOrientation();

  const isPortrait = window.innerHeight > window.innerWidth;

  if (isPortrait) {
    document.body.classList.remove('wide-mode');
  } else {
    document.body.classList.add('wide-mode');
  }
});

JavaScriptを使用する必要がある場合:

端末の回転がUIの状態を変更する場合、JavaScriptは反応する必要があります。回転がスペースや配置のみを変更する場合、CSSが対応することができます。

カンバス、メディアコントロール、地図ビュー、カスタムナビゲーションシェルなど、状態を保持するUIの場合、このパターンは便利です。回転がデータの表示方法やインタラクションロジックを変更する場合、JavaScriptは反応する必要があります。回転がスペースや配置のみを変更する場合、CSSが対応することができます。

PWAが主に立体用途で設計されている場合、manifestにそれを宣言してください。

{
  "name": "My App",
  "short_name": "MyApp",
  "display": "standalone",
  "orientation": "portrait"
}

これは好みであり、レスポンシブデザインの代替ではありません。ブラウザがインストールされたアプリがどのように開き、どのように動作するかを理解するのに役立ちます。サポートされているコンテキストで。

ブラウザが許可する場合、実行時にも方向ロックを要求できます:

async function lockPortrait() {
  try {
    await screen.orientation.lock('portrait');
    console.log('Orientation locked');
  } catch (err) {
    console.log('Lock failed:', err);
  }
}

これを慎重に使用してください。良くないルールは、タスク自体を破るような回転をロックすることです。例えば、ガイド付きキャプチャフローまたは物理的な物理的配置要件のある画面です。ほとんどの場合、インターフェイスを適応させる方が、デバイスとユーザー両方を尊重するより良いエンジニアリングの選択です。

モバイルアプリの方向管理

モバイルアプリはブラウザタブよりも多くのことができます。アプリ全体の画面方向をデフォルトで設定し、タスクが必要なときに単一の画面の動作を変更することができます。その追加の制御は便利ですが、チームは回転を広く制限し、単純なアプリはrigidな感じがします。

良いメンタルモデルはここで役立ちます。アプリ全体の設定はデフォルトのポリシーです。画面単位のcodeは例外層です。広い意図のためにポリシーを使用し、例外を使用するのは、回転デバイスがユーザーが試みているタスクを完了するのを妨げる場合のみです。

ネイティブプラットフォームの制御

On Androidの場合、方向は通常 AndroidManifest.xml 活動の場合:

<activity
  android:name=".MainActivity"
  android:screenOrientation="portrait" />

この機能は、トップレベル設定フラグとして機能します。シンプル、予測可能、全体的な活動に適用するのが簡単です。ただし、スコープのトレードオフがあります。1つの画面のみが正面向きモードを必要とする場合、全体に適用するルールは通常、太刀打ちできない場合があります。

On iOSでは、サポートされる方向はXcodeのターゲット設定とアプリメタデータを通じて設定されます。アプリ全体でサポートするものを定義し、特定のビューコントローラーで厳格な要件がある場合に、動作を細かく調整できます。

That split matters for cross-platform teams. Native config answers, “What should this app generally allow?” Runtime code answers, “What should this screen do right now?”

Programmatic control in Capacitor apps

If you build with Capacitor, dynamic control usually belongs in code, close to the route or view that needs it. A sign-in screen may be easier to use in portrait. A media screen or camera flow may need to allow rotation based on how the device is held.

Capacitorアプリでビルドする場合、ダイナミック制御は通常、__CAPGO_KEEP_1__に近いルートまたはビューに属します。サインイン画面は正面向きで使用しやすい場合がありますが、メディア画面またはカメラフローは、デバイスがどのように保持されているかによって回転を許可する必要があります。 Capacitor screen orientation plugin for Capacitor apps Capacitorアプリ向けの__CAPGO_KEEP_0__画面方向プラグイン

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

async function lockLoginScreen() {
  await ScreenOrientation.lock({ orientation: 'portrait' });
}

async function unlockForMedia() {
  await ScreenOrientation.unlock();
}

async function checkCurrentOrientation() {
  const result = await ScreenOrientation.orientation();
  console.log(result);
}

画面方向を読み取ることができ、特定のモード（正面向き）で制限を適用し、ユーザーがフリーモードに戻ると制限を解除することができます。パターンは簡単です。制限を画面が有効になるたびに適用し、画面が有効でないときは制限を解除します。ルーターを使用するアプリでは、方向の変更をページライフサイクルハックに結び付けることが多く、ランダムなコンポーネントに散らばった呼び出しを散らばすのではなく、方向の変更をページライフサイクルハックに結び付けることが多くなります。

画面ごとに制限を慎重に選択してください。

回転が入力、配置、またはユーザーの焦点を混乱させる場合、固定の直立モードを使用してください。

一般的な例としては次のとおりです。

認証画面: 入力が安定している間、ユーザーが入力することができます。
決済や確認のステップ: 高注意力タスク中のレイアウトの変更が少ないためです。
キオスクまたはガイドドワークフロー: インターフェイスが一貫した表示を必要とするためです。

デバイスを自由に回転させて、タスクに役立つ場合の追加の幅や、異なるグリップが必要な場合、タスクを実行する方法が変わる場合は、デバイスを回転させてください。

メディアプレイバック、地図、ゲーム、カメラビュー、密集したデータ画面などの典型的な例があります。

ジュニアチームにとって便利なルールは単純です。スペースの配置が変更される場合、レイアウトシステムがそれを処理するようにしてください。タスクの実行方法が変更される場合、画面ごとのオリエンテーションcodeが正当化されるかもしれません。

Capgo は実用上の理由でここで言及されています。 Capacitor のプロジェクトでは、画面の向きの制御は、UI の小さな詳細からすぐにアプリの動作に変わります。それを動作として扱ってください。デフォルトを柔軟に保ち、制限を慎重に適用し、画面が制限を必要としなくなったら制限を削除してください。

画面の向きの制御に関する UX のベストプラクティス

画面の向きの制御は UX の決定から始まり、技術的な決定が 2 番目です。 code は通常は簡単です。しかし、自然な動作を選択するのが難しいです。

短いチェックリストが役立ちます:

主な状況に合わせてデザインする: ほとんどのユーザーが立って始まる場合、ポートレートの強いバージョンのインターフェイスを使用します。
画面の幅が増すことで価値が増す場合、幅が広いモードをサポートする: 回転をブロックする必要はありません。画面が幅が広くなることで価値が増す場合。
明確な理由でロックする: フォーム、チェックアウト、またはセキュアフローではロックが必要かもしれません。しかし、コンテンツ画面ではロックする必要はありません。
回転中に状態を保存する: ユーザーは入力、スクロール位置、または選択されたタブを失わないでください。
実機で両方のオリエンテーションをテストしてください: シミュレータでは不快なトランジション、キーボードの重なり、セーフエリアの問題が見つかりません。

より広いレイアウトの決定については Capacitor アプリのためのクロスプラットフォーム UI と UX ガイドライン __CAPGO_KEEP_0__ アプリのレイアウトテストに合っているのは、同じ画面が異なるデバイスサイズとプラットフォームの慣習に合わせて、ネイティブに感じる必要があるためです。

主なメッセージは簡単です。Portrait オリエンテーションとは、単に「垂直」だけではありません。フレーミングのルール、レイアウトの状態、ユーザーの期待です。良いアプリはそれをそう扱います。

Capacitor アプリを配信し、制御されたオリエンテーション動作と迅速なリリース後の修正が必要な場合は Capgo は見る価値があります。CapacitorJS と Electron アプリのライブアップデートを提供し、画面オリエンテーションなどのアプリの機能のプラグインも維持しています。これは、リリースプロセスを再構築することなく、特定のビューをロックまたは有効にする必要がある場合に役立ちます。

2026年のポートレート向きのガイド