最近の小中学生は、学校からChromebookを支給され、宿題や連絡などに活用しています。
自分の時代では1人１台学校からPC支給し、授業も行えるなんて、考えられなかっことが、今は普通なんですね。
まさにドラえもんの未来の道具が出てきた感じです。
支給されたChromebookの画面サイズは1366×768pxが標準で、これ以上、解像度をあげると（例えばFullHD 1920×1080px）小さくて見えづらい。
小さい文字は目が悪なるかも？
ということで1366×768pxが標準がよく利用される解像度ではないかと推測されます。
主要なコンテンツは1366×768px以内で作成する
小中学生を対象とした教材コンテンツやWEBアプリは、なるべく1366×768pxの画面サイズを意識して作りたいですね。
高さが768px以上だと、縦スクロールが発生してしまい、見られなくなる可能性が出てきます。
しかし、ブラウザで表示が前提の場合は、メニュー、URL、ブックマークエリアも、ブラウザ上部に表示されているので、コンテンツ領域の高さが、768pxより少ないです。
実質の画面表示領域は余裕を見て680pxぐらいが最適です。
高さ680px以内で収まるように高さに調整しましょう！
ナビゲーションボタン、プログレスバーは画面上部がおすすめ！
長いページだと、次ページへのリンク、プログレスバーが下になりスクロールしないと確かめられないことになってしまいます。
ページによって次ページへのリンク、プログレスバーの位置が異なり、分かりづらいUIになってしまいますね。
ページスクロールさせたくない場合は、画面上部にまとめることで、一貫したUIを提供する事が可能ですね！
おすすめ参考例：トレック バイクファインダー
教材コンテンツはシングルページアプリケーションがおすすめ
画面サイズ1366×680px以内で作成しても、画面を移動する度にページ呼び込みしていては、切り替え時間がかかりスムーズに動かすことができません。
その時は、シングルページアプリケーションという手法を用います。
最初の読み込みで全ページのデータを読み込み、後は、１ページのコンテンツを切り出して表示、非表示する方法です。
この方法なら、ページ推移もスムーズですし、データの処理が必要ならAJAXで、部分的に更新が可能です。
JavaScriptフレームワークAngular、Vue.js、Reactなど利用する必要があるので、技術者の確保が必要です。
画像サイズ1366×680pxとシングルページアプリケーションが最適
学生向けコンテンツを作るなら、1366×680px以内でコンテンツを作成し、シングルページアプリケーションでコンテンツを推移させるのが理想的ですね！
コメント