電話を回転させて画面をテストすると、レイアウトがきれいに適応したり崩れたりします。テキストが再流れ、ボタンがジャンプ、モーダルが突然間違った場所に隠れます。あるいは、動画プレーヤーは予想どおりに動作します。その小さな瞬間が ポートレート向き デザイン用語から製品の決定に変わる。
モバイル向けに開発している場合、ポートレート向けの回答が必要です。 クラスルームの定義だけではなく、開発者用の定義です。レイアウトにどのような影響を与えるか、回転をサポートするとき、ロックするとき、Webアプリ、ネイティブアプリ、Capacitorプロジェクトでどのように扱うかなど、脆弱なUXを作らないようにする方法についての理解が必要です。
目次
- ポートレート向けの理解
- ポートレートとランドスケープの基本的な比較
- さまざまなメディアで共通の使用例
- ウェブ上でのオリエンテーションを管理する
- モバイルアプリのオリエンテーションを管理する
- 画面回転のベストプラクティス
横向き画面の理解
ユーザーは画面が回転するときに最初に気づきます。開発者は、回転がインターフェイスを壊すときに気づきます。
横向き 画面の高さが幅より大きいことを意味します。 それは、人々の顔と上半身の肖像画を垂直にフレームする視覚芸術の概念から来ています。同様の概念は、ページデザイン、写真、デジタルインターフェイスに広がりました。より広い歴史についての参考としてはウィキペディアの画面配置の概要 ビルダーの重要な点は、横向きの画面配置は、画面サイズ、デバイス、ファイル形式に依存しないことです。高さが幅より大きいという規則です。.
横向きの画面配置の重要性
横向きは、モバイルデバイスで実用的デフォルトになったのは、人々が自然にスマートフォンを持ち、上向きに使用するためです。そうすると、スクロール、指の到達範囲、読み取りの流れ、フォームの設計、ナビゲーションの配置が影響を受けます。
__CAPGO_KEEP_0__
通常、フィード、記事の表示、設定画面、またはチャットのスレッドは、垂直フレームで自然に読みやすいです。 その理由の1つは、オリエンテーションがモバイルアプリのユーザー体験の決定
に直接つながることです。 実用的なルールです。
ポートレートをレイアウトのコンテキストとして扱うのではなく、デバイスの位置として扱うのではなく。
ジュニア開発者が混乱するのは 通常の混乱は オリエンテーション を 解像度 や「アスペクトレシオ」で混同することです。彼らは関連していますが、同じものではありません。
- 向き どちらの辺が長いのかを示す。
- 解決 各座標のピクセル数を表します。
- アスペクト比率 幅と高さの関係を説明します。
タブレットとスマートフォンは、ポートレートモードでは大きさが異なるかもしれませんが、同じオリエンテーション状態を共有します。 したがって、レスポンシブUIロジックは、より具体的な質問をする前に、「高さは幅より大きいか?」と尋ねる必要があります。
ポートレート vs ランドスケープ 基本的な比較
UIの作成方法としては、組み合わせるという考え方が簡単に理解できるかもしれません。人物や高い物体を中心にした肖像画は、人物に焦点を当てます。横長の絵画は幅、背景、周囲の空間を捉えます。UIも同様です。
イメージングとUIデザインでは、ポートレート向けのオーサリングは、横向きの画面レイアウトでは、__CAPGO_KEEP_0__の長方形です。 __CAPGO_KEEP_0__が__CAPGO_KEEP_1__より大きい場合__CAPGO_KEEP_0__が__CAPGO_KEEP_1__より小さい場合、長い辺は垂直になります。横向きの配置とは逆です。 SLR Loungeの用語解説 __CAPGO_KEEP_0__は技術的な定義と、長い主題や垂直構造に適した形状の理由を説明しています。
1つのテーブルの差異
| 配置 | 形状 | 最適な配置 | 典型的な効果 |
|---|---|---|---|
| 横向き | 幅が高さより大きい | フィード、フォーム、読み物、長い主題 | 注意を垂直方向に集中させる |
| 横向き | 高さより幅が広い | 動画、地図、ダッシュボード、広いシーン | より横方向のコンテキストを表示する |
__CAPGO_KEEP_0__
ポーティレートは通常、注意を狭める。横方向のコンテンツを減らし、上から下へのフローを促す。なぜなら、ソーシャルフィード、記事ページ、オンボーディングステップ、チャットインターフェイスはポーティレートで綺麗に感じるからだ。
ユーザーにとっての変化
ポーティレートは通常、焦点について。ランドスケープは通常、コンテキストについて。
開発者にとっての変化
最も大きな間違いは、幅広い形式をポーティレートの伸縮版として扱うことだ。そうではない。情報の階層はしばしば変わり、開発者はそれに合わせてレイアウトを変更する必要がある。
横向きの形式は、ポーティレートとは逆の効果をもたらす。横方向の幅を利用して、比較のために横方向に並べることができる。横向きの形式は、横方向の幅を利用して、横方向に並べることができる。
例えば:
- 横向きの場合、ダッシュボードはカードを 1 つの列に積み重ねることができます。
- 横向きの場合、同じダッシュボードは、フィルターやサイドパネルを表示するために複数の列にシフトすることができます。
- 横向きの場合、決済フォームでは、大きなタップターゲットと 1 つの明確なフローを優先します。
- 横向きの場合、同じ画面は、フィールドが垂直方向に圧縮されすぎると不快な感じがします。
モバイル用のインマーシブレイアウトに取り組んでいる開発者も、エッジハンドリング、セーフエリア、フルスクリーンベHAVIORについて考える必要があります。 Capacitor edge-to-edge display setup __CAPGO_KEEP_0__ エッジレスデザイン設定
さまざまなメディアで共通の使用例
モバイル画面では出現しないポートレート向けの画面が、実際には多くの場所で見られる。そうである理由は、コンセプトはソフトウェアで始まったわけではなく、ソフトウェアに限ったものでもないからだ。
写真と印刷物
プロのポートレート写真は明らかな例だ。垂直枠は人面と身体を収めるのに広い枠よりも適している。同様の論理はファッション写真、本の表紙、ポスター、雑誌の表紙にも当てはまる。
印刷物のデザインでは、読み取り体験が上から下に進むようにするためにポートレートを使用する。垂直枠は、目が自然にページの下に移動するようにするため、狭い列に並んだ段落、見出し、リスト、署名の読み取りに適している。
文書と日常のコミュニケーション
ほとんどのレポート、履歴書、手紙、内部ドキュメントはポートレートで設計されている。そうである理由は、垂直ページは段落、見出し、リスト、署名の読み取りに適しているからだ。ただし、ポートレートは常に最適なものではない。特定のコンテンツは水平形式で表現される方が読みやすい場合もある。
モバイル製品とアプリのフロー
このような状況では、多くのチームにとってポートレートはデフォルトのメンタルモデルとなる。
ユーザーが繰り返し開く画面を考えれば、チームはポートレートをデフォルトのメンタルモデルとして考えているだろう。
Think about the screens users open repeatedly:
- Chat apps: __CAPGO_KEEP_0__
- Social apps: __CAPGO_KEEP_0__
- Retail apps: __CAPGO_KEEP_0__
- Banking apps: __CAPGO_KEEP_0__
Those patterns aren’t accidents. Portrait supports one-handed use, thumb scrolling, and linear task completion.
A lot of mobile UI feels intuitive because the interface assumes an upright device before it assumes anything else.
That doesn’t mean every screen should stay portrait. Media viewers, maps, large charts, and camera-based workflows often benefit from wider framing. But for everyday task flow, portrait is usually where users begin.
Handling Orientation on the Web
A common web bug looks small at first. Your app reads cleanly in an upright viewport, then the user rotates the device and the chart overflows, the sidebar appears at the wrong breakpoint, or the keyboard covers the submit button. Orientation on the web is really about state. The viewport shape changed, and your UI needs to respond in a predictable way.
For developers, that means separating two jobs. CSS handles layout changes. JavaScript handles behavior changes. If you package the same project for mobile later, this web layer still matters. Webアプリをモバイルアプリに変えるには、Capacitorを使用します。 モバイルアプリに変えることは、ウェブのオリエンテーションを扱う必要性をなくすのではなく、その基盤をより重要にすることです。
プラットフォームは、2つの主なツールを提供します。Screen Orientation APIは、オリエンテーションタイプと変更イベントを公開し、Web App Manifestはインストール済みのアプリが、 portrait, portrait-primary、または portrait-secondaryなどの、好みの直立モードを宣言することを許可します。MDNは、そのmanifest値をWeb App Manifestのオリエンテーション参照でドキュメントしています。 CSSを使用するときは、レイアウトが適応するようにします。.
CSSから始めましょう。幅と高さが役を交換するときに、最も安価で信頼できる方法で対応することができます。
これは、画面の形状に対する進歩的な強化と似ています。最初に、窄い直立レイアウトをデフォルトとして開始し、ビューポートが幅が広くなるにつれて、副次のUIにスペースを追加します。
/* 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や仮想キーボードが表示されている場合も同様です。
- 実際のインタラクション状態をテストします: フォーム、固定ヘッダー、ボトムシートは回転中、静的スクリーンショットでは機能しません。
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の場合、推奨の端末向きを設定してください。
__CAPGO_KEEP_0__の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);
}
}これを慎重に使用してください。回転がタスク自体を破壊する場合にのみロックするというルールは良いでしょう。例えば、ガイド付きキャプチャフローまたは物理的な物理的アライメント要件のある画面などです。ほとんどの他の場合、インターフェイスを適応させることがより良いエンジニアリングの選択肢です。そうすると、デバイスとユーザーを尊重できます。
モバイルアプリのオーリエンテーション管理
モバイルアプリはブラウザタブよりも多くのことができます。アプリレベルでデフォルトの画面方向を宣言し、タスクがそれを要求する場合にのみ、単一の画面の動作を変更できます。
画面レベルの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?”
Capacitorアプリのプログラム的制御
Capacitorでビルドした場合、動的制御は通常、codeに近いルートまたはビューに属します。シングイン画面はポートレートで使用しやすい場合がありますが、メディア画面またはカメラフローは、デバイスがどのように保持されているかに基づいて回転を許可する必要があります。
__CAPGO_KEEP_0__の__CAPGO_KEEP_1__アプリ用の画面オリエンテーション プラグイン Capacitor screen orientation plugin for Capacitor apps パターンは簡単です。制限を画面がアクティブになるたびに適用し、画面がアクティブでないときは制限を削除します。ルーターを使用するアプリでは、オリエンテーション変更をページライフサイクルハックに結び付けることが多く、ランダムなコンポーネントに散らばった呼び出しを散らばらせないようにします。
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);
}A plugin keeps that logic readable and avoids custom native plumbing. The
__CAPGO_KEEP_0__を慎重に選択する
回転が入力、配置、またはユーザーフォーカスの混乱を招く場合、固定正立モードを使用します。
一般的な例としては
- 認証画面: 入力が安定し、ユーザーが入力するときに安定します。
- 決済と確認のステップ: 高注意力タスク中のレイアウト変更が少なくなります。
- キオスクまたはガイドドワークフロー: インターフェイスが一貫した表示を必要とする場合
デバイスを自由に回転させることができます。タスクに追加の幅や異なるグリップが必要な場合です。
一般的な例としては、メディア再生、地図、ゲーム、カメラビュー、密集データ画面です。
ジュニアチームにとって便利なルールは単純です。デバイスの方向を変更するとスペースが変化する場合、レイアウトシステムがそれを処理するようにします。デバイスの方向を変更するとタスクが変化する場合、画面レベルのcodeが正当化されるかもしれません。
Capgo は実用上の理由で言及されています。 Capacitor プロジェクトでは、オリエンテーション制御は、UI の小さな詳細からすぐにアプリの動作に変化するプラットフォーム機能です。 それを動作として扱ってください。 デフォルトの柔軟性を維持し、制限を慎重に適用し、スクリーンがそれらを必要としなくなったらそれらを削除してください。
画面の向きの操作に関する UX のベスト プラクティス
画面の向きの操作は UX の決定から始まり、技術的な決定が 2 番目です。 code は通常は簡単です。 しかし、自然な動作を選択するのが難しいです。
短いチェックリストが役立ちます。
- 主なコンテキストに設計してください。 ユーザーがほとんど立ち上がって操作する場合、ポートレートの強力なバージョンのインターフェイスを提供してください。
- 画面の幅が増加することでユーザーに価値を提供する場合、より広い表示モードをサポートしてください。 回転をブロックするのは明確な理由がある場合のみ:
- フォーム、チェックアウト、またはセキュアなフローではそれが正当化されます。 コンテンツ画面では通常ではありません。 回転中に状態を保存してください。
- ユーザーは入力、スクロール位置、または選択されたタブを失うことはありません。 画面の向きの操作は UX の決定から始まり、技術的な決定が 2 番目です。 __CAPGO_KEEP_0__ は通常は簡単です。 しかし、自然な動作を選択するのが難しいです。
- 両方向の実機でテストする: シミュレータでは不自然なトランジション、キーボードの重なり、セーフエリアの問題が見落とされます。
より広範なレイアウトの決定については Capacitorアプリ向けのクロスプラットフォームUIとUXガイドライン __CAPGO_KEEP_0__のオリエンテーションテストとよく相性が良いです。同じ画面が、異なるデバイスサイズとプラットフォームの慣習に合わせて、ネイティブのようになります。
主なメッセージは簡単です。 portraitのオリエンテーションとは、単に「垂直」だけではありません。
If you’re shipping Capacitor apps and need controlled orientation behavior alongside fast post-release fixes, Capgoアプリを配信し、制御されたオリエンテーション動作と迅速なリリース後の修正が必要な場合は __CAPGO_KEEP_0__を検討してください。
