すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

使う人の環境を理解して開発するやつ

小さい画面で表示されている時に、困る事が無いようにする。という事で一つの入力欄に統一した と記憶しているのですが、上級者向けに両方の入力欄があるパターンを作ってみたやつです。

 

画像のalt入力なら「はてブロimageTitle」が便利! - webproduct-lab

別々に入力できるパターンも検証用としてありましたが、画像選択画面が狭くなってしまうのです。

2016/10/27 10:06

別々に入力できるパターンも検証用としてありましたが、画像選択画面が狭くなってしまうのです。 - psne のコメント / はてなブックマーク

※このエントリー時点では、Firefox版は「見習い(α版)」扱いです。最新版も動くには動くのですが、移植するのには幾つかの互換性を持たせないとダメなやつです。

 

 

例えば、800x600ピクセルのモニターでブログを書いている方をエミュレート。(全画面)

800x600
この画面領域でも画像の選択が不自由なくできるように入力欄の余白を削ります。

 

もう少し(現在の)一般的なサイズで見てみましょう。1024x700ピクセル

1024x700
※1024x768ピクセルでない理由は「ブラウザのツールバー等を考慮したサイズ」です。

iPad辺りが近いサイズになります。少し古いPCなどでも、高さが700~800px辺りのものがあります。

はてなブログ側の記事エディタに若干の余白(灰色の部分)が見えるようになりました。

 

ユーザーの環境を知る

Google Analytics などの分析ツールを利用すると、詳しく計測する事ができます。
今回は、拡張機能を利用する事を想定した調査を行いたいので、PCからのアクセスのみを抽出して表示します。(既存のビューを編集せず、新しく専用のビューを作りましょう。)

 

ユーザーの環境
※2016年10月頃の1枚当たりの画面サイズ。PCのみ。サンプル数100万。仕様上、2画面構成のPCでも1枚当たりの画面サイズを集計しているため、3840x1080の「横に2画面」であっても1920x1080となります。

1920x1080(FullHD)が4割を占めています。次に多いサイズが1366x768。これはノートPCによく使われているサイズと思われます。

2K~4Kのモニタを利用している方も1%未満ですがいらっしゃるようです。

 

はてなブログProを利用されている方は、 アクセス解析 (PC版)からはてなカウンターにアクセスすると画面の解像度の集計を確認する事ができます。様々な環境があり、色々な見え方がある事を想像しながらブログを見てみるのも良いかもしれません。

 

話を戻します。意外としっくりと来てしまったような気がする「検討した入力欄」ですが、あまり詳しくない方が使う時に「これは何を入れたら良いのか」と困らないか更に検討する必要がありそうですね。
作った人は一番慣れているので、悪くは無いように思うやつです。

 

 

日報みたいなエントリー。

NEW リズムでともだち こぐまのトンピー ぬいぐるみ