デジハリ横浜は社員のリスキリングを応援します!

digital hollywood Studio

【子供の視力が低下中!】ユーザーを本当に配慮したスマホサイトとは?

  • デザイン

パソコン、スマホの普及とともに、若年層の視力低下が右肩上がりの傾向にあるというのはご存知ですか?
かくいう私もメガネをかけはじめたのは2000年代に入ってから。大学ではノートパソコンの購入が必須で、日常的にパソコン画面を見るという環境だったせいか、友人が集まると全員メガネかコンタクト使用者という状況も珍しくありませんでした。
(余談ですが、友人数人とたまたま立ち寄ったコンビニの店員さんに「みなさんメガネなんですね!」と指摘されたことも…)
今回は現代人にとって切っても切れない悩みである、視力低下にフォーカスします。

子供の視力低下が年々増加傾向に!

冒頭で若年層の視力低下について触れましたが、文部科学省が公表している2019年度学校保険統計調査によると、裸眼視力1.0未満の子供が増加傾向にあります。

それぞれの学校毎の視力1.0未満の割合は、小学生34.57%、中学生57.47%、高校生67.64%といずれも過去最多の割合になっているようです。

更に裸眼視力が0.3%未満の子供の割合は、幼稚園0.60%、小学生9.38%、中学生27.07%、高校生38.98%と小学生が過去最多の割合を記録しています。

またGlossom株式会社の調査によると、全国の10代から70代のスマートフォンユーザーのスマホ利用時間は情報収集やYouTubeやSNSなどの娯楽に使う時間も合わせて増加傾向にあるようです。

様々な用途でスマホが使われる現代において、視力とスマホの関係は切っても切れないものになっているでしょう。

より快適なWEBサイトを提供するということ

このような話になると「スマホだけでなくパソコンを含めたデジタルデバイスを使わなければいい」というに意見になりがちですが、それを実現するのは現代社会で生きる限り不可能に近いですよね。


ユーザー側の対策としてよく聞くのは

  1. 適度な休憩をとる
  2. 遠くを見る時間をつくる
  3. 目の周りを暖める

などですが、制作する側として何か気をつけるべきことは無いのでしょうか?
より快適なWEBサイトを提供するのが制作者の役目なのに、ユーザー側の対策だけで負担軽減を図る…なんだかおかしな話ですよね。ブルーライト等の避けられない問題はあるにしても、なるべくユーザーに負担のないサイトを提供したいものです。

ユーザーの負担を軽くするためには?

左:背景色が赤   右:背景色が薄いグレー系

それではどんなデザインがユーザーの負担を軽くするのでしょうか?
目に優しいデザインのTipsなどでよく見られる手法としては、ペールトーンやライトトーンを使ったカラーコーディネートです。例えば赤や青など、ヴィヴィッドな色合いを面積の大きい背景などに使用した場合、目がチカチカしますよね。これは瞳孔が疲れて瞳に入ってくる光の量を調整しにくくなっているためです。特にニュースサイト等の文章を読み込ませるタイプのサイトには使用しないほうがいいでしょう。

また、見せたい情報のみにフォーカスできるように、余計なものはぼかしたり隠してしまうのも効果的です。わかりやすいものではポップアップウィンドウや写真を使ったデザインでよく使われます。

左:背景をぼかさずに文字を入れたもの  右:背景をほかして文字を入れたもの

この写真だとちょっとわかりにくいですが…読ませたいテキストに目が行きやすくなりますね。

さらに、スマホは画面が小さい分、文字が読みにくかったり画像やグラフが見えづらいなど、目と画面との距離が近くなりすぎることが多いもの。例えば文字の大きさをサイト上で自由に変更できたり、画像をより鮮明にするなど、より配慮が必要です。
加えて、スムーズな視線誘導があると必要な情報と必要でない情報をユーザー自身が判別しやすくなるので、目の負担になりにくいと言えるでしょう。
視線誘導についてはこちら(【Webデザインの参考に】視線誘導の3つのパターン+スマホサイトギャラリー4選)を参考にしてみてください。

パソコン版では優れたデザインや機能で対策がバッチリできていたとしても、ただスマホ化しただけではユーザーに負担のかかるWEBサイトになってしまうことも。特にスマホの普及とともにとりあえずスマホ化した「ただあるだけ」のものになってしまっているWEBサイトも少なくないのでは?

スマホはパソコンやタブレットに比べて目の近くで見ることも多く、使用時間や利用者も他のデバイスに比べて多いので、スマホサイトのデザインは他よりも重要視するくらいでちょうどよいのかも知れません。

特に現在は、パソコンは持っていないけれどスマホは持っているなんて人も当たり前のようにいる時代。新しくサイトやサービスを作るときにはスマホで見た時の視点を前提として制作していくことが一般的になっています。

※2014年の記事を2021年2月19日、訂正・加筆しました

最後にデジタルハリウッドSTUDIO横浜についてご案内!!

STUDIO横浜は駅直結の好立地で学習ができます!

渋谷駅 – 横浜駅 約30分

茅ヶ崎駅 – 横浜駅 約25分

横須賀駅 – 横浜駅 約45分

武蔵小杉駅 – 横浜駅 約10分

川崎駅 – 横浜駅 約10分

乗り継ぎなし!駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ!

神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪

WEB制作 カテゴリーに含まれる最新記事

スクール説明会予約
ページトップへ