Designの改善20180301

このページの内容

予備機だったノートPCへ、現用デスクトップPCの環境を移し、これからのHP作成等へ移行中である。

しかし、文字サイズが既定の125%のままでは実際の表示が小さい為、150%に上げて使っている。すると解像度が連動して下がり15.6型画面では、125%既定の時より表示枠が少なくなっていた為、もう一枠増加させるため表示幅を小さくデザイン変更して対応した。

従来表示枠は2列表示だったが、改善後は緑線以下の様に3列表示になった(合成画像)。

画像はクリックするとLightboxで拡大表示します。

1:詳細説明

HP作成等には①デスクトップPCが主体だったが、老朽化してきているため万一の故障に備え、②ノートPCへ作業性環境を従来と同等に構築し慣れておく必要があり、完全移行させる方向で試験的に進めている。
◆参照:①②のPCについて:System(ワーク用PC)

従来は作成したHPの見え方を、①②の他③スマホ(arrows Fit F-01H)④タブレット(nexus7(2013))等のデバイスでチェックしていたものの、今まで気付かなかった表示の差が見つかり修正した。ブラウザーはie11,edge,chrome,fox,safariも併用している。

Win10固有の問題なのか、②ノートPCはフォントの標準が「游明朝体」や「Yu Gothic」に変わり、画面解像度も向上し従来のOSで読み易くて綺麗だったフォント(メイリオ等)が、かすれたような細い文字へ変わってしまい、Webページやワード・エクセル等全ての表示は「可読性」が非常に悪くなっている。

そこで苦肉の策で「ディスプレイの設定」から、解像度は既定値「1920x1080」のままいじらず、「テキスト、アプリ、その他の項目のサイズを変更する」を、125%(既定)から更に一段階上げ150%に変更して使っている。

規定値125%の文字サイズでは、従来使用していた解像度が低い①デスクトップPC(デバイスがWin7用の為規定値が100%)と比べ、かなり小さく感じ作業中の疲労感が大きい。

②PCはWin10の度重なるアップデートにより、対応できないアプリによっては小さい表示のものが、残っているがほぼ従来のデスクトップPCに近い状態になった。

②PCは購入後1.5年の間にメーカからの連絡で、Biosと関連アプリを2回バージョンアップし、最新状態(V1.28に書換)としてあるにもかかわらず、未だ上記問題は解決していない。

②ノートPCの主流はこのような高解像度(フルHD)の方向へ進んでいると思われることから、高齢者の方が上記の設定をしたPCで見ていることを想定し、気になっていたページのデザイン変更をした。

その結果、上記ブラウザーでの見え方に差があるものの、画面横幅での表示される枠数を多くできるように改善出来た為メモした。

■【参考】

文字サイズ変更時の画面横幅実測値
PC文字サイズ画面横幅
②ノート100%1920px
125%既定1530px
150%1280px
①デスクトップ100%既定1600px

2:関連画像

画像はクリックするとLightboxで拡大表示します。

図
図1 解像度・文字サイズの設定状態。左:②ノートPC、右①デスクトップPC。
図
図2 上4つは②ノートPCのIMEツールバー。下は①デスクトップPC。
図
図3 従来:②ノートPCの文字サイズ150%時の表示枠は2列表示(Chrome)だった。
図
図4 改善後:②ノートPCの文字サイズ100%では4列表示Chrome。
図
図5 改善後:②ノートPCの文字サイズ125%(既定)では3列表示Chrome。
図
図6 改善後:②ノートPCの文字サイズ150%では3列表示Chorme。
図
図7 改善後:②ノートPCの文字サイズ150%では4列表示Edge。
図
図8 ①デスクトップPC:既定の100%時Chromeでの見え方。
図
図9 ①デスクトップPC:既定の100%時Edgeでの見え方。
図
図10 ②ノートPC150%:SPサイズ幅に縮小した時ブラウザーで比較
左Firefox,
中央Edge,
右Chrome。
図
図11 ①デスクPC100%:SPサイズ幅に縮小した時ブラウザーで比較
左Firefox,
中央Edge,
右Chrome。

Λ