【2020/4/17更新】過去記述したデザインガイドラインについて、より具体的、詳細に追記・修正させていただきました。

本ガイドラインについて
  • 「つりっくま」等のニコ生ゲームや、「おしゃべりトピック」等の放送ネタの開発をおこなう際、
    • PCやスマートフォンアプリのプレイヤー上のUIとコンテンツ操作が衝突する
    • スマートフォンアプリでのポートレト表示において画面が小さすぎて操作しづらい
      ..等の理由で、ユーザーが満足な操作をおこなえないことがあります
  • より多くのユーザーが満足できるコンテンツづくりを開発者の皆様におこなっていただけるよう本ガイドラインを作成しました
  • なお、本資料で提示するのは、クリックやタップ、スワイプ操作の必要な「ボタン」やそのUIのガイドラインとなります。
    • クリックやタップ操作の無いUIや、その他のグラフィックに関しては、本資料の記載事項を考慮する必要はございません。

A:ボタン等の設置を避けるべきエリア

  • 本項で説明するエリアに、クリックやタップが必要なボタン等を設置することは、PC・スマートフォンアプリのプレイヤーUIと競合し、ユーザー操作をおこなえなくなる可能性があります。ここにボタン等を設置することは避けることを推奨します。
A-1.避けること強く推奨


8c4a10351f689f4541eb11759732777f3af4a6ef




45a705b93d3f817f8565f2a9ae2ee6ab60198e46

A-2.避けることを推奨




8bd039a1cbe66f84617a9e41dcb1551289ab6b59


9bed5ccb578c6c10bb97ca91d748b7c2df499575


本エリアにボタン等の設置を検討する場合、下記をご確認ください

  • 1.ユーザーの主たるコンテンツ操作と衝突しないか?
    • 画面全体がクリック/タップできるコンテンツ → エリア外をタップすれば済むため、問題ありません
    • コンテンツのメイン操作ではなく、補助的なボタン(オプション/設定など)の設置である → 推奨はしませんが、コンテンツ制作者でご判断ください。
  • 2.本エリア外に十分なクリック/タップ領域が確保されているか?
    • 下記表をご確認ください。
問題なし a7b7eb04e03f379fc71980212598411486fb4d74

本エリア外に半分以上、クリック/タップ領域が確保されている

問題あり

7c28a05d52e7e9298afec9242f85b796821287a4

本エリア外に半分以上、クリック/タップ領域が確保されていない


B:スワイプ操作を避けるべき(且つ、可能であればボタンの設置も避けるべき)エリア

  • 本項で説明するエリアでスワイプ操作をおこなわせるのは、スマートフォンアプリのプレイヤーUIと競合し、ユーザーが操作をおこなえなくなる可能性が高いです。ここでスワイプ操作をおこなわせるのは避けることを強く推奨します。

下記のUIと競合します

da4a75cf3b8fb45ed0bc0817cb33a42624dad593

f5352566040768ba42524a08da95dcbc2841caac

iOS:フルスクリーン時OS標準UI
1.右上:コントローラーセンター
2.左下:通知
3.下部:ホームに戻る
4.左右:セーフエリア外(マージンエリア)

Android:フルスクリーン時OS標準UI
1.上部:ステータスバー

本エリアでスワイプ操作/ボタン等の設置を検討する場合、下記をご確認ください

  • ユーザーの主たるコンテンツ操作と衝突しないか?
    • 画面全体をスワイプ操作するコンテンツ → 問題ありません

A、Bのまとめ

  • 非推奨領域を表した透過pngを制作しましたので、こちらのデザインに当てはめご利用ください
    • 基本的には、白地のエリアに、クリックやタップの必要な「ボタン」やその他「UI」の操作をおさえることを推奨します
    • 白地以外での操作をおこなう場合は、上記ガイドラインをご参照のうえ、ユーザー操作が極力快適におこなえるよう、デザイン調整をご検討ください
d1e06e7361e1696e0fd55cea236d774827bbd1fc

  • 赤色...UI設置を避けることを強く推奨
  • 黄色...UI設置を避けることを推奨
  • オレンジ色...スワイプ操作を避けることを強く推奨

C:UIの最小サイズ

  • コンテンツ上に設置されるボタン等のUIのタップ範囲が小さいと、スマートフォンアプリのポートレイト視聴時にタップしづらいなど問題が出ることがあります。下記を参考に作成してください。

下記未満のサイズは推奨しません

可能であれば、下記程度のサイズを確保してください

6c54e7a430a79a8c96d62988068d538ecc3d64ff


17c08820d0444b1bd0e393b4f41e47edd4168ac1

53ead061d08cf86c8f008cc831da8f319a2f963f


ebdeb7434812dd44802adbdadd1ede3fe39d7cd4