動画サイトやポートフォリオサイトなどで、コンテンツの没入感を少しでも上げるための手法についてこの記事でまとめます。
YouTubeに実装されたアンビエントモード
2022年10月のYouTubeバージョンアップでアンビエントモードが追加されました。アンビエントモードとはダークモードで利用しているときに限り、動画周りに動画の色をぼんやり 滲 ませたような背景色を反映させたものです。
アンビエントモードは暗い空間でディスプレイの光が周りに反射するのに似ています。映画館の中にいるようにも感じることができ、動画の没入感向上が期待されます。もしあなたの作っているサイトが画像や動画のようなメディアをメインに取り扱う場合、このスタイリングを導入することを考えてみてください。
Nintendo Switchに実装されているドミナントカラー
Nintendo Switch内のオンラインショップであるeShopでは、ゲーム購入画面において画面イメージから特徴的な色（ドミナントカラー）が自動で抽出され、背景色および文字・ボタン色に反映されています。
ドミナントカラー抽出アルゴリズムはゲームの魅力・個性を高めるデザインのため、任天堂によって独自に開発されています。eShopはReact（JavaScript）で実装されているそうですが、具体的なアルゴリズムの仕組みについては公表されていません。
ドミナントカラー抽出アルゴリズムを考えてみる
具体的なソースコードは紹介できませんが、画像からドミナントカラーを抽出する場合の一般的なアルゴリズムは下記の通りでしょう。
- 画像の各ピクセルから色（RGB値）を抽出する
- 取得したRGB値を、それぞれ3次元のk-means法などでカテゴライズする
- 2の結果、要素が一番多いカテゴリーをドミナントカラーとする
ドミナントカラー抽出で重要になるのは、各ピクセルの色の平均をとるわけはなく画像内に使われている最も使われる色のグループを算出することです。具体的なアルゴリズムは別の機会に作ってみようと思うので、そのときまたこの記事を更新しようと思います。
参考文献
この記事の 最終更新：2023.6.2