小中学生用ノートパソコン画面サイズ1366×768pxを意識してコンテンツを作ろう!

この記事はPR・広告(アフィリエイトリンク)が含まれるので予めご了承ください。

最近の小中学生は、学校からChromebookを支給され、宿題や連絡などに活用しています。

自分の時代では1人1台学校からPC支給し、授業も行えるなんて、考えられなかっことが、今は普通なんですね。

まさにドラえもんの未来の道具が出てきた感じです。

支給されたChromebookの画面サイズは1366×768pxが標準で、これ以上、解像度をあげると(例えばFullHD 1920×1080px)小さくて見えづらい。

小さい文字は目が悪なるかも?

ということで1366×768pxが標準がよく利用される解像度ではないかと推測されます。

主要なコンテンツは1366×768px以内で作成する

小中学生を対象とした教材コンテンツやWEBアプリは、なるべく1366×768pxの画面サイズを意識して作りたいですね。

高さが768px以上だと、縦スクロールが発生してしまい、見られなくなる可能性が出てきます。

しかし、ブラウザで表示が前提の場合は、メニュー、URL、ブックマークエリアも、ブラウザ上部に表示されているので、コンテンツ領域の高さが、768pxより少ないです。

実質の画面表示領域は余裕を見て680pxぐらいが最適です。

高さ680px以内で収まるように高さに調整しましょう!

ナビゲーションボタン、プログレスバーは画面上部がおすすめ!

長いページだと、次ページへのリンク、プログレスバーが下になりスクロールしないと確かめられないことになってしまいます。

ページによって次ページへのリンク、プログレスバーの位置が異なり、分かりづらいUIになってしまいますね。

ページスクロールさせたくない場合は、画面上部にまとめることで、一貫したUIを提供する事が可能ですね!

おすすめ参考例:トレック バイクファインダー

教材コンテンツはシングルページアプリケーションがおすすめ

画面サイズ1366×680px以内で作成しても、画面を移動する度にページ呼び込みしていては、切り替え時間がかかりスムーズに動かすことができません。

その時は、シングルページアプリケーションという手法を用います。

最初の読み込みで全ページのデータを読み込み、後は、1ページのコンテンツを切り出して表示、非表示する方法です。

この方法なら、ページ推移もスムーズですし、データの処理が必要ならAJAXで、部分的に更新が可能です。

JavaScriptフレームワークAngular、Vue.js、Reactなど利用する必要があるので、技術者の確保が必要です。

画像サイズ1366×680pxとシングルページアプリケーションが最適

学生向けコンテンツを作るなら、1366×680px以内でコンテンツを作成し、シングルページアプリケーションでコンテンツを推移させるのが理想的ですね!

コメント

タイトルとURLをコピーしました