電話を回転させて画面をテストすると、レイアウトがきれいに適応したり崩れたりします。テキストが再流動する、ボタンがジャンプする、モーダルが突然間違った場所に覆われる、または動画プレーヤーが期待どおりに動作する。そうした小さな瞬間は ポートレートオリエンテーション デザイン用語から製品の決定に変わる瞬間です。
モバイル向けに開発している場合、Portrait Orientationの定義に明確な答えが必要です。教室で学ぶ定義だけではなく、開発者用の定義です。レイアウトにどのような影響を与えるか、回転をサポートするとき、ロックするとき、Webアプリ、ネイティブアプリ、__CAPGO_KEEP_0__プロジェクトでUXを脆弱にしないように扱う方法など。 目次. 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.
製品作業でなぜ重要か
ポートレート向きの理解
ユーザーは画面が回転するときに最初に向きを認識します。開発者は、回転がインターフェイスを破壊するときにそれを認識します。
ポートレート向き 画面の高さが幅より大きいことを意味します。 それは、視覚芸術から来ています。人物の顔と上半身の肖像画は、通常垂直にフレームされていました。同様の概念は、ページの設計、写真、デジタルインターフェイスに持ち込まれました。より広い歴史についての良好な参考資料は. That’s the core idea. It comes from visual art, where portraits of a person’s face and upper body were usually framed vertically. That same concept carried into page design, photography, and digital interfaces. A good reference for that broader history is Wikipediaのページ配置の概要.
ビルダーにとって重要なのは、縦向きの配置は、1つの画面サイズ、1つのデバイス、または1つのファイル形式に結びついていないということです。
配置のルールは形状に関するものです。高さが幅より大きい場合、縦向きの配置です。
製品作業で重要なのはなぜか
縦向きはモバイル向けの実用的なデフォルトになったのは、端末を自然に持ちながら使用することと一致するためです。 スクロール、タップ範囲、読み取りの流れ、フォームの設計、ナビゲーションの配置など、ユーザー体験に影響を与えます。フィード、記事表示、設定画面、チャットのスレッドは、通常、垂直フレームで自然に読み取れます。そのため、配置の選択は
ユーザー体験の決定と直接関係しています。 視覚的なスタイリングだけではありません。
実用的なルールです。
縦向きをレイアウトのコンテキストとして扱いましょう。 デバイスの位置とは関係ありません。 with 解像度 または 画面比. They’re related, but they aren’t the same thing.
- 向き は、どの辺が長いのかを示します。
- 解像度 は、各軸に存在するピクセルの数を示します。
- 画面比 は、幅と高さの関係を示します。
端末の向きと解像度は、画面比とは別の概念です。タブレットのポートレートモードとスマートフォンのポートレートモードは、異なる寸法を持つことができますが、同じ向きを持ちます。 したがって、レスポンシブUIロジックは、より具体的な質問をする前に、「高さが幅より大きいかどうか」を確認する必要があります。
横向対称性と縦向対称性の基本的な比較
__CAPGO_KEEP_0__の方法でこのことを考えると、組成が役立ちます。肖像画は、人物や他の高い対象物に焦点を当てます。水平方向の絵は幅、背景、周囲の空間を捉えます。UIは同じように機能します。
イメージングとUIデザインでは、縦向対称性は、 __CAPGO_KEEP_0__の場合、高さが幅を超える長方形です 、したがって、長い辺は垂直です。水平方向の対称性とは逆です。 SLR Loungeの用語解説
技術的な定義と、その形状が高い対象物と垂直構造に適合する理由を説明しています。
| 1つの表の差異 | 対称性 | 形状 | Typical effect |
|---|---|---|---|
| Portrait | Taller than wide | Feeds, forms, reading, tall subjects | Focuses attention vertically |
| Landscape | Wider than tall | Video, maps, dashboards, wide scenes | Shows more horizontal context |
That sounds basic, but it’s useful when you’re making tradeoffs in a product review.
What changes for the user
Portrait usually narrows attention. It reduces side content and encourages top-to-bottom flow. That’s why social feeds, article pages, onboarding steps, and chat interfaces often feel cleaner in portrait.
__CAPGO_KEEP_0__
水平の向きはその逆です。幅が広がり、スプリットビュー、タイムライン、ギャラリー、メディア再生、データ重視の表面、そしてインマーシブビューに役立ちます。レイアウトが横方向の比較が必要な場合、この水平の形式は、より深く息を吸うことができることがよくあります。
通常、ポートレートは焦点についてです。ランドスケープは通常はコンテキストについてです。
__CAPGO_KEEP_1__
開発者にとって何が変わるか
- 最大の間違いは、広いフォーマットをポートレートの引き伸ばしたバージョンとして扱うことです。それではありません。情報の階層がしばしば変わります。__CAPGO_KEEP_2__
- 例えばポートレートでは、ダッシュボードはカードを単一の列に積み重ねることがよくあります。
- より広い向きでは、同じダッシュボードは複数の列にシフトし、フィルターやサイドパネルを表示することもあります。ポートレートでは、支払いフォームは大きなタップターゲットと一つの明確なフローを優先します。
- より広い向きでは、同じ画面が、フィールドが垂直方向に圧縮されすぎると不快な感じになる場合があります。
モバイル向けのインマーシブレイアウトに取り組む開発者も、エッジハンドリング、セーフエリア、フルスクリーンベHAVIORについて考える必要があります。 Capacitor エッジトゥエッジディスプレイ設定 画面の向きは、ユーザーが利用可能なスペースを認識する方法を変えるため、同じ議論の中に含まれます。
さまざまなメディアを横断する一般的な使用例
モバイル画面では出現しないが、ポートレート向きは、より多くの場面で現れます。そうした理由は、コンセプトはソフトウェアでは始まったわけではなく、ソフトウェアに限ったものでもありません。
写真と印刷物
プロのポートレート写真は明らかな例です。垂直フレームは、人面と身体をよりよく収めることができます。広いフレームでは収まりません。同様の論理は、ファッション写真、本の表紙、ポスター、雑誌の表紙にも当てはまります。
印刷物のデザインでは、読み取り体験が上から下に進むようにするために、ポートレートを使用します。細い列で読み進むときに、目が自然に下に動く形状が役立ちます。
文書と日常のコミュニケーション
ほとんどのレポート、履歴書、手紙、内部ドキュメントはポートレートで設計されています。それは、ポートレートが常に良くないからではなく、垂直ページは、段落、見出し、リスト、署名のシーケンスを読むときにうまく機能するからです。
If you’ve ever exported a PDF and noticed that a wide table suddenly becomes unreadable, you’ve seen the limit of portrait too. Some content is better presented in a horizontal format. The key is matching the frame to the content structure.
モバイル製品とアプリのフロー
このような状況では、多くのチームにとって、ポートレートがデフォルトのメンタルモデルになります。
ユーザーが繰り返し開く画面を考えてみてください:
- チャットアプリ: メッセージは垂直に積み重ねられます。
- ソーシャルアプリ: 投稿、コメント、リールは上向きのフローで消費されます。
- リテールアプリ: 検索結果と製品リストは下方向にスクロールします。
- 銀行アプリ: 残高、取引、確認フローは通常垂直セクションで配置されます。
それらのパターンは偶然ではありません。 Portrait は一手操作、指のスクロール、線形タスクの完了をサポートしています。
多くのモバイル UI は、インターフェイスが端末を直立状態と仮定する前に、他の何らかの状態を仮定することによって、直感的に感じられます。
それが意味するのは、すべての画面が直立状態でなければならないわけではないことです。 メディア ビューア、地図、大きなチャート、カメラベースのワークフローは、より広いフレーミングから利益を受けることがよくあります。 しかし、日常のタスクフローでは、通常、ユーザーは直立状態から始めます。
ウェブ上での端末の向きの取り扱い
ウェブ上のバグは、最初は小さく見えます。 アップライトのビュー ポートでアプリがきれいに読めるのですが、ユーザーが端末を回転させると、チャートがフラッシュ、サイド バーが間違ったブレークポイントで表示され、キーボードが送信ボタンを隠すようになります。 端末の向きは、実際には状態について話しています。 ビュー ポートの形状が変わり、UI が予測可能な方法で反応する必要があります。
開発者にとって、これは 2 つのジョブを分離することを意味します。 CSS はレイアウトの変更を取り扱います。 JavaScript は動作の変更を取り扱います。 そのプロジェクトを後でモバイル向けにパッケージ化する場合、このウェブ層は依然として重要です。 Capacitor を使用してウェブアプリをモバイルアプリに変換することは、 ウェブ上の端末の向きの取り扱いが必要なことを意味しません。 その基盤をより重要なものにします。
プラットフォームは、2 つの主なツールを提供します。 Screen Orientation API は、向きのタイプと変更イベントを公開し、Web App Manifest はインストールされたアプリが、 portrait, portrait-primary、または portrait-secondaryなどの直立モードを宣言できるようにします。 MDN は、その Web App Manifest の向きの参照資料で、manifest 値をドキュメントしています.
CSSを使用する場合は、レイアウトが適応するようにします
CSSから始めます。幅と高さが役割を入れ替える場合、最も安価で信頼性の高い方法です。
/* 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;
}
}画面の形状に対して進歩的な強化と同様に機能します。最初に、窄い立方体のレイアウトをデフォルトとして開始し、ビュー ポートが幅が広くなるにつれて、セカンダリ UI のスペースを追加します。
いくつかの実践は、後で時間を節約するのに役立ちます:
- 主なモードから始めます: 主にアプリを直立で使用する人々が多い場合、基本レイアウトとしてその基盤を使用します。
- 固定高さを避けます: デバイスを回転すると、ブラウザ UI または仮想キーボードが表示されている場合、可用性の垂直スペースが速く縮小します。
- 実際のインタラクション状態をテストします: フォーム、スティッキーヘッダー、ボトム シートは、回転中に失敗することがよくありますが、静的スクリーンショットではありません。
JavaScriptを使用する場合は、行動が反応する必要があります
CSSは箱を並べ替えることができます。再構築されたチャートやジェスチャーハンドラーをリセットすることはできません。
JavaScriptは、UIの状態を変更する場合のオリエンテーション変更を処理するときに使用します。
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は対応する必要があります。回転がスペースまたは配置のみを変更する場合、CSSが処理する必要があります。
ジュニアチームが複雑さを避けるために役立つ実用的ルールがあります。CSSがすでにうまく処理しているレイアウトの決定をJavaScriptで強制しないでください。
PWAのための推奨オリエンテーションを設定します
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で良い理解はここにあります。アプリ全体の設定はデフォルトのポリシーです。スクリーン単位のcodeは例外レイヤーです。広い意図のためにポリシーを使用し、例外はローテーシングデバイスがユーザーが完了しようとしている作業に干渉しないようにするために使用してください。
ネイティブプラットフォーム制御
オン Android, orientation is often set in AndroidManifest.xml ,
<activity
android:name=".MainActivity"
android:screenOrientation="portrait" />for an activity:
この機能はトップレベル設定フラグと同じように機能します。予測可能で、全体的なアクティビティに適用するのが簡単です。スコープのトレードオフはあります。1つのスクリーンだけが正面向きモードが必要な場合、全体にルールを適用するのは通常は太刀打ちできません。 オンiOS
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?”
プログラムによる制御をCapacitorアプリに実装する
Capacitorでビルドした場合、動的制御は通常codeに配置されます。画面やビューが必要な場所に近いです。サインイン画面はポートレートモードで使いやすい場合があります。メディア画面やカメラフローは、デバイスがどのように保持されているかによって回転を許可する必要がある場合があります。
プラグインはそのロジックを読みやすく、カスタムネイティブのパイプラインを回避します。 CapacitorのCapacitorアプリ用の画面向け制御プラグイン 画面の現在の向きを読み取ることができ、特定のモード（例：ポートレート）で制限を適用し、ユーザーがフリーモードの画面に戻ると制限を削除できるようにします。
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);
}パターンは簡単です。画面がアクティブになったときに制限を適用し、画面がアクティブでないときに制限を削除します。ルーターベースのアプリでは、ページライフサイクルハックに制御の変更を紐づけ、ランダムなコンポーネントに散らばった呼び出しを散らばすのではなく、制御の変更を紐づけることがよくあります。
画面固有の制限を慎重に選択する
回転が入力、配置、またはユーザーフォーカスを混乱させる場合、固定の直立モードを使用します。
一般的な例としては
- 認証画面 入力が安定し、ユーザーが入力を入力している間は画面が回転しないようにします。
- 決済と確認のステップ fewer layout changes during high-attention tasks.
- Kiosk or guided workflows: the interface needs one consistent presentation.
Let the device rotate freely when extra width or a different grip clearly helps the task.
Typical examples include media playback, maps, games, camera views, and dense data screens.
A useful rule for junior teams is simple. If changing device direction would only alter spacing, let the layout system handle it. If changing device direction would change how the task works, then screen-level orientation code may be justified.
Capgo is mentioned here for a practical reason. In Capacitor projects, orientation control is one of those platform features that starts as a small UI detail and quickly becomes app behavior. Treat it like behavior. Keep the default flexible, apply restrictions sparingly, and remove them as soon as the screen no longer needs them.
UX Best Practices for Screen Orientation
Orientation handling is a UX decision first and a technical decision second. The code is usually straightforward. The hard part is choosing behavior that feels natural.
画面向きのハンドリングはUXの決定から始まり、技術的な決定が2番目です。
- 画面向きの決定は通常簡単ですが、自然な動作を選択するのが難しいです。 画面向きの決定のためのチェックリスト:
- より多くの表示モードをサポートする: 回転が有益な画面では回転をブロックしない.
- 明確な理由でロックするのみ: フォーム、チェックアウト、または安全なフローではロックが必要になるが、コンテンツ画面ではそうではない.
- 回転中の状態を保存する: ユーザーは入力、スクロール位置、または選択されたタブを失うことはない.
- 実機で両方の向きをテストする: シミュレータでは不快なトランジション、キーボードの重なり、セーフエリアの問題が見落とされる.
より広範なレイアウト決定のために Capacitor アプリ向けのクロスプラットフォームUIとUXガイドライン 向きのテストとよく相性が良い。同じ画面は、異なるデバイスサイズとプラットフォームの慣習に合わせて、ネイティブのようには感じる必要があるからだ。
主なメッセージは簡単だ。Portrait向きとは何かと尋ねる場合、単に「垂直」だけでは答えられない。
If you’re shipping Capacitor apps and need controlled orientation behavior alongside fast post-release fixes、 Capgo はCapacitorJSやElectronアプリのライブアップデートを提供し、画面の向きを制御するプラグインも提供するため、特定のビューをロックまたは有効にする必要がある場合に、リリースプロセスを再構築する必要がなくなるため、有用なツールです。
