![見出し画像](https://assets.st-note.com/production/uploads/images/115428011/rectangle_large_type_2_911795ff841aa608378ad0f601d8cab4.png?width=800)
UI観察 - ピクチャー・イン・ピクチャー(PiP)
ピクチャー・イン・ピクチャー(PiP)という機能をご存知でしょうか?
これは、YouTubeやAbemaなどの動画アプリを画面の端に小さく表示しながら、他のアプリを操作することができる機能です。
(その他のUI観察記事はマガジンはこちら ↓)
ピクチャーインピクチャーとは
ピクチャーインピクチャーとは、画面の中に小さな独立した領域を設け、メインの表示内容とは別の内容を表示すること。また、そのような表示領域。
PiPはiOS14では動画に限定して使用できますが、iOS15からは動画以外のコンテンツにも対応しています。Androidではバージョン8.0(API レベル 26)以降で使用。PCでは、2018年10月に公開されたChromeブラウザバージョン 70で使用できます。
toCサービスのピクチャーインピクチャー
![](https://assets.st-note.com/img/1693916769601-SlMRlxv6mu.png?width=800)
(YouTubeでは「ミニプレーヤー」と呼びます。)
![](https://assets.st-note.com/img/1693916616405-dlnV5LKhcH.png?width=800)
右側:アプリを閉じているときの画面。ここから別アプリを操作できます。
![](https://assets.st-note.com/img/1693916720848-c1r3Fz8GV4.png?width=800)
矢印をタップすると画面が表示されます。
![](https://assets.st-note.com/img/1693927562250-1GNC1BRgwV.png?width=800)
前に読んだ記事をまた開くことができます。
元記事のカテゴリに合わせてアイコン画像が変わります。
toBサービスのピクチャーインピクチャー
![](https://assets.st-note.com/img/1693917585978-AtNVvtvnxh.png?width=800)
オンライン会議をしながらメールを打つことができます。
![](https://assets.st-note.com/img/1693917993984-S6Vidr0FHG.png?width=800)
プレゼンを手助けしてくれる機能があります。
(画像引用:エンジョイ!マガジン)
その他のピクチャーインピクチャー
テレビでもPiPは使用されており、画面の隅に別のチャンネルを表示して裏番組の様子を見られるようにする機能もあります。
他に画面の大きさを均等に2分割にする機能もありますが、それはPBP(ピクチャー・バイ・ピクチャー)と呼ばれ、異なる入力ソースを2画面や4画面に分割で表示できる機能のことを言います。
![](https://assets.st-note.com/img/1693962544410-n88vUBKbQ6.png?width=800)
これがPBP(ピクチャー・バイ・ピクチャー)。
ピクチャーインピクチャー機能が使用されるユースケース
■ビデオ視聴中の作業
![](https://assets.st-note.com/img/1693919750242-L1yVBBvxDR.png?width=800)
■スポーツ視聴
![](https://assets.st-note.com/img/1693920735436-RLlExwiZHD.png?width=800)
■その他のユースケース
オンライン会議:オンラインミーティング中に、他のドキュメントやウェブページを参照しながら会議に参加することができます。
ゲームプレイ:ゲームをプレイしながら、攻略方法やYouTubeのチュートリアル動画を小さなウィンドウで表示することができます。
ニュースや株価のチェック:主要な作業を続けながら、ニュースの更新や株価の動きを小さなウィンドウでチェックすることができます。
まとめ
ピクチャー・イン・ピクチャー(PIP)が使用されるケースとしては、別作業をしながらの動画の視聴と、リアルタイムで情報の変化を収集したいケースとなります。
開発されている方は、機能拡充の参考にしてみてください。
参考記事
この記事が気に入ったらサポートをしてみませんか?