見出し画像

【2024年9月版】iPhoneにおけるYouTube縦型表示領域についての調査(OBSテンプレート無料配布あり)

結論

横は見切れてもいいデザインにしないといけない!!

画像
サイズについて
画像
2024年現在の主なスマホのアスペクト比

これは、OBSと日本でシェアが多いiPhone(X以降)のアスペクト比が異なることにより、YouTubeアプリが左右を少しトリム(削除)してしまうことから発生しています。

また、YouTubeの仕様により、コメントが配信画像の上に表示されるため、レイアウトに注意が必要です。

最近、iPhone 16 Proが発売され、従来の機種とアスペクト比が異なるほか、Androidではさらに細長い機種も増えているため、見切れないように予め左右の調整をしておく必要があります。

ただ、そのままでは調整しずらいのでテンプレートを作成しました。
よかったらレイアウト調整時に使ってください🙇

さらに詳しい説明をみたい人はテンプレート配布以降の詳細を読んでね!

OBS用テンプレート配布

上記のことを考慮して、OBSを縦型配信設定(解像度1080x1920)用のテンプレートを作成しました。
OBSにお好きな透過率(75%、50%、30%)のテンプレートを取り込み、シーンの一番上部に配置してください。表示をON/OFFすることで、枠内に重要な文言や画面、ロゴなどが収まるようにレイアウトを調整できます。
赤い領域は特に注意が必要で、Androidなど他の端末で表示される際に重要な文言やロゴが見切れないよう、青い領域より内側にレイアウトを配置してください。

画像

テンプレートOFF

画像

テンプレートON

画像

テンプレートダウンロード

詳細

画像
iPhone16を基準にレイアウトするためには

2023年からYouTubeでは、縦型ライブ配信のレイアウトが大きく変更されました。これにより、ショート動画と同様に下部のアイコンバーを除いたフル画面表示が可能になりました。この変化は、特にモバイル端末での視聴体験を向上させることを目的としています。

YouTubeの推奨解像度は縦1080×横1920で、アスペクト比は16:9です。このため、iPhone8までは解像度に多少の違いがあっても同じアスペクト比を維持できていたため、表示崩れはあまり見られませんでした。しかし、下部にアイコンバーが表示されているため、横方向は若干トリム(削除)される状態が続いていました。

一方で、iPhone X以降はホームボタンが廃止され、画面が縦方向に長くなったことでアスペクト比が変わり、YouTubeが縦のサイズに合わせて表示する際に横幅が自動的にトリムされてしまうようになりました。この結果、左右の一部が見切れてしまうことがあります。これにより、デザインにおいては「横が見切れても問題ない」という配慮が必須となります。

さらに、2024年2月時点の日本におけるOSシェアを見てみると、iOSが65.89%、Androidが33.8%を占めており、依然としてiPhoneのシェアが高い状況です。スマートフォンでYouTubeを視聴するユーザーが非常に多いことから、iPhoneで綺麗に表示されるレイアウトが特に重要です。また、Android端末でも19:9から19.5:9のアスペクト比を採用する機種が増えているため、これらを考慮したレイアウト設計も求められています。

縦型動画の利点

縦型動画の導入は、特にスマートフォンでの視聴スタイルに適しています。ユーザーが自然に持つデバイスの向きに合致するため、視覚的なストレスが軽減され、視聴体験が向上します。さらに、縦型動画は、InstagramやTikTokなど他のソーシャルメディアプラットフォームと相性が良く、ユーザーが短時間で視覚的なコンテンツにアクセスしやすくなります。このため、ユーザーエンゲージメントの向上や再生回数の増加が期待されます。

テンプレートダウンロード


この記事が気に入ったらサポートをしてみませんか?

コメント

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。
RE:ゼロから始めるガジェット系Vtuber 咲耶有紀【さくやあき】です🌸 本業はゲーム開発のエンジニア🛠️💻🧰 その知識と経験をもとに活動中💨 VTuber & VLiver 準備中 AIや自動化関連でちょこちょこ遊んでます http:lit.link/SakuyaAkIV
【2024年9月版】iPhoneにおけるYouTube縦型表示領域についての調査(OBSテンプレート無料配布あり)|咲耶有紀
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1