2016年2月3日(水)、ICTCOにて100人の定員規模で開催されたセミナー「DIST.10 デザインとJavaScript」。その中で「HTML5 Canvasコンテンツの高解像度対応はどこまで行うべきか」というタイトルで登壇しました。今回はその発表資料を記事として公開します。

FWAでピックアップされているサイトでは70%がcanvas要素を使っている

モーショングラフィックや3D表現等のリッチな表現をWebコンテンツで行う場合、canvas要素は不可欠です。FWAのSITE OF THE DAY(※)で調査したところ、2015年11月から3ヶ月間の91件中61件(約70%)のサイトでcanvas要素(Context2D、WebGL)が使われていました

canvas要素を使用しているのは91件中61件(約70%)。

※ FWAは世界的権威のWebデザインアワードで、優れたデザインのWebサイトを毎日一つずつ「SITE OF THE DAY」として取り上げています。

Webコンテンツの高解像度対応

さて、皆さんはデスクトップコンテンツでcanvas要素を表示する時、高解像度ディスプレイ用の対応をしていますか? 本記事において「高解像度ディスプレイ」とは、iPhoneのRetinaディスプレイのようにピクセル密度(ppi)が高いディスプレイ(HiDPIディスプレイ)のことを指します。高解像度対応とはこれらのディスプレイでWebコンテンツを見ても画像をボケさせずに見せる為の対応のことです。この対応をデスクトップのcanvas要素について対応する必要はあるのでしょうか?

160219_desktop_retina_about

増加する高解像度のデスクトップ

高解像度のデスクトップの背景を見てみましょう。近年では、高解像度ディスプレイを搭載したデスクトップが増えています。下図は「価格.com」で調査した、200ppi以上の高解像度ディスプレイWindows用ノートPCの発売台数です。右肩上がりに増加しています。

160219_desktop_retina_hidpi_windows

Apple社が2015年に発売したMacBookは、3種類中2種類がRetinaディスプレイとなっています。

160219_desktop_retina_macbook

増加する高解像度ディスプレイに対応するため、デスクトップ向けのWebコンテンツでも高解像度対応が必要であり、canvas要素も高解像度対応が必要だと言えます。

では、冒頭で紹介したcanvas要素を使った61コンテンツのうち、どれくらいが高解像度対応をしているのでしょうか? 次のページではその対応状況の調査結果とテクニックについて紹介します。