Had some sunshine, some rains.
更新日記。ときどき単なる日記。…つまり日記？（聞くな）
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ブラウザでの表示で、これ管理者さんは気にならないのかな？って思う事があります。
自分がそっちのお仕事なんで、確かにブラウザでの表示を見る時の基準は人より厳しいッスけど、それはお仕事としてのクオリティについてです。
自分のサイトの時は、いつも通りやった方が作業が早いのでそのまんまですが、同人サイトさんの場合は逆に「おー、自由に作ってるなー」とか「面白いなー、これ」とか、自然と見た目よりも内容重視の見方になりますね。
最近はブログタイプのページも増えてるし、昔に比べると基本的に色々チョイスが可能で洗練されてますし(^^)
ただ、どうしてもいくつかの点だけは、個人的＆HTMLマナー的に気になるです。
箇条書きにすると…
１つめは空のtitleタグ。
これ、ブラウザでお気に入りやブックマークに登録した時にそのまま名称になるとこです。
ここが空っぽだとURLが自動で入ったりして、後で何てサイトか判らなくなってしまうので、通常はサイト名称を入れます。
ただ、titleタグっていうのはそのサイトの一番最初に参照される情報でもあるので、検索避けをするためにあえてtitleタグにサイト名いれないってこともあるとは思いますが、見に来てくれる人のために、少なくとも何か判りやすい言葉を入れた方がいいですね。
あ、ここでいう判りやすいっていうのは「インデックス」とか「トップ」とかじゃないですよー。
みんなが「インデックス」とか「トップ」とか「ようこそ」とか入れてたら意味ないですから(^^)
直球が不安な場合、サイトの略名とかイニシャルとかが適当じゃないでしょうか。
htmlビルダー系ソフトの中には、ここを勝手に日付とかソフトメーカー名とかいれるものもあるのでご注意（笑）
２つめの「背景色と文字色に明度差や色相差がなさ過ぎる」
例えば、白背景にうすめのピンクとか水色とか。これはもう単純に掲載内容が読みにくいです。
特に弱視というわけでなくても、サイトの見え方は見る人の環境に依存するので、自分のモニタで大丈夫だと思っても、他の人のモニタだとはっきり見えない、なんてことはよく起きる事故です。
同じ用紙・同じインクを使った印刷物ではないので、薄くなる／濃くなることを想定した方がいいですね。
ただし、コントラストが強すぎてもテクノストレスの原因になって疲れるので、#ffffffの白背景の場合は文字色は#000000の黒ではなく若干柔らかい#111111などにするのが、業界でも主流ですよん。
逆に#000000の黒背景だと文字を#eeeeeeとかですね。
色背景に色文字を使う場合は、色を合わせるためのフリーウェアとか使うと便利。
３つめの「文章で、１行ごとに複数の改行を入れてあって読みにくい」
これは、見る人のモニタサイズがまちまちだという点で影響してきます。
デスクトップ機はモニタがどんどん大型になってきてるけど、それでもノートPCユーザーは多いです。デスクトップでは今１９〜２１インチが主流だけど、ノートPCだと１５インチが一番普及してます。
すると、ブラウザはボタンなどの固定領域があるので、実際にページを見れる大きさはデスクトップの７割くらいになるのです。
見える範囲が狭くなるのでスクロールをするんですが、これが見る人を結構疲れさせる（テクノストレス）ので、改行は程々がベストですね。
４つめの「文字が小さすぎて／大きすぎて読みにくい」
これは色々理由があるんですが、基本は「自分のマシンにあるフォントが他の人のマシンにあるとは限らない」ってことです。
小さすぎるともちろん文字は潰れます。反対に、大きすぎても意図しない改行がおきたりします。
判りやすい例で言うと、
●●●●●●●●●●●●●●●●●●●●●●●、
●●●●●●●●●●●●●●●●●●●●●●●●●●。
が
●●●●●●●●●●●●●●●●●●●●
●●●、
●●●●●●●●●●●●●●●●●●●●
●●●●●●。
とかなるパターンですね。
折角整形してるのに改行されたらもったいなーい。
５つめの「表示領域の想定が大きすぎるのにスクロールが禁止されている」
これは、一度入り口ページを経由させてそこから新しいウインドウを開かせたりする時に起きます。
このとき、新しい窓のサイズが大きすぎると画面からはみ出てしまいますが、ウインドウサイズのリサイズ禁止やスクロール禁止が指定されていると、はみ出た部分はまったく見れなくなります。
ピクセル単位で固めきってしまうよりも、ある程度可変である方が多くの環境に対応できます。
６つめの「フレームの中にフレームが…と、表示スペースが小さくなる」
これは単純に、フレームの指定と解除のミスですね。同じメニューが何度もでてくる必要をなくすためにフレームにしているのに、元のページに戻る際に分割したフレーム内部にリンク先を呼び出したりすると起きます。
これは戻り先のtargetをきちんと指定するだけで直ります。
まぁ、私程度がこういうことを書くのって自分でも非常に口はばったいんですが、昨日の夜たまたま、２と３と５のコンボに遭遇しまして…(^^;)
さすがに内容が見えないと理解できないので、せっかくの力作が非常に勿体ない気がしたのです。
ぶっちゃけ、お金をもらってやってるわけじゃないんだし、プロ並みである必要はどこにもないです。
でも、ほんの少しのことで見てくれる人にとって見やすくできるなら、やっちゃった方が自分もお得だよねーってことで（笑）
ちなみに、
ttp://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
↑ここでチェックすると色々勉強になりますよー。
私がここで最初にチェックした時はちょうど記述形式が変わり始めた頃で、出て来た点数に思い切り凹んだけどw、すごく勉強になった。今でもお仕事／プライベート両方でお世話になってます。
どれだけcssだ何だと言っても、やはり基本はHTMLですヨ。html間違ってたらcssもおかしくなるしね。
自分がそっちのお仕事なんで、確かにブラウザでの表示を見る時の基準は人より厳しいッスけど、それはお仕事としてのクオリティについてです。
自分のサイトの時は、いつも通りやった方が作業が早いのでそのまんまですが、同人サイトさんの場合は逆に「おー、自由に作ってるなー」とか「面白いなー、これ」とか、自然と見た目よりも内容重視の見方になりますね。
最近はブログタイプのページも増えてるし、昔に比べると基本的に色々チョイスが可能で洗練されてますし(^^)
ただ、どうしてもいくつかの点だけは、個人的＆HTMLマナー的に気になるです。
箇条書きにすると…
- サイトトップのhtmlのtitleタグが空っぽ
- 背景色と文字色に明度差や色相差がなさ過ぎる
- 文章で、１行ごとに複数の改行を入れてあって読みにくい
- 文字が小さすぎて／大きすぎて読みにくい
- 表示領域の想定が大きすぎるのにスクロールが禁止されている
- フレームの中にフレームが…と、表示スペースが小さくなる
１つめは空のtitleタグ。
これ、ブラウザでお気に入りやブックマークに登録した時にそのまま名称になるとこです。
ここが空っぽだとURLが自動で入ったりして、後で何てサイトか判らなくなってしまうので、通常はサイト名称を入れます。
ただ、titleタグっていうのはそのサイトの一番最初に参照される情報でもあるので、検索避けをするためにあえてtitleタグにサイト名いれないってこともあるとは思いますが、見に来てくれる人のために、少なくとも何か判りやすい言葉を入れた方がいいですね。
あ、ここでいう判りやすいっていうのは「インデックス」とか「トップ」とかじゃないですよー。
みんなが「インデックス」とか「トップ」とか「ようこそ」とか入れてたら意味ないですから(^^)
直球が不安な場合、サイトの略名とかイニシャルとかが適当じゃないでしょうか。
htmlビルダー系ソフトの中には、ここを勝手に日付とかソフトメーカー名とかいれるものもあるのでご注意（笑）
２つめの「背景色と文字色に明度差や色相差がなさ過ぎる」
例えば、白背景にうすめのピンクとか水色とか。これはもう単純に掲載内容が読みにくいです。
特に弱視というわけでなくても、サイトの見え方は見る人の環境に依存するので、自分のモニタで大丈夫だと思っても、他の人のモニタだとはっきり見えない、なんてことはよく起きる事故です。
同じ用紙・同じインクを使った印刷物ではないので、薄くなる／濃くなることを想定した方がいいですね。
ただし、コントラストが強すぎてもテクノストレスの原因になって疲れるので、#ffffffの白背景の場合は文字色は#000000の黒ではなく若干柔らかい#111111などにするのが、業界でも主流ですよん。
逆に#000000の黒背景だと文字を#eeeeeeとかですね。
色背景に色文字を使う場合は、色を合わせるためのフリーウェアとか使うと便利。
３つめの「文章で、１行ごとに複数の改行を入れてあって読みにくい」
これは、見る人のモニタサイズがまちまちだという点で影響してきます。
デスクトップ機はモニタがどんどん大型になってきてるけど、それでもノートPCユーザーは多いです。デスクトップでは今１９〜２１インチが主流だけど、ノートPCだと１５インチが一番普及してます。
すると、ブラウザはボタンなどの固定領域があるので、実際にページを見れる大きさはデスクトップの７割くらいになるのです。
見える範囲が狭くなるのでスクロールをするんですが、これが見る人を結構疲れさせる（テクノストレス）ので、改行は程々がベストですね。
４つめの「文字が小さすぎて／大きすぎて読みにくい」
これは色々理由があるんですが、基本は「自分のマシンにあるフォントが他の人のマシンにあるとは限らない」ってことです。
小さすぎるともちろん文字は潰れます。反対に、大きすぎても意図しない改行がおきたりします。
判りやすい例で言うと、
●●●●●●●●●●●●●●●●●●●●●●●、
●●●●●●●●●●●●●●●●●●●●●●●●●●。
が
●●●●●●●●●●●●●●●●●●●●
●●●、
●●●●●●●●●●●●●●●●●●●●
●●●●●●。
とかなるパターンですね。
折角整形してるのに改行されたらもったいなーい。
５つめの「表示領域の想定が大きすぎるのにスクロールが禁止されている」
これは、一度入り口ページを経由させてそこから新しいウインドウを開かせたりする時に起きます。
このとき、新しい窓のサイズが大きすぎると画面からはみ出てしまいますが、ウインドウサイズのリサイズ禁止やスクロール禁止が指定されていると、はみ出た部分はまったく見れなくなります。
ピクセル単位で固めきってしまうよりも、ある程度可変である方が多くの環境に対応できます。
６つめの「フレームの中にフレームが…と、表示スペースが小さくなる」
これは単純に、フレームの指定と解除のミスですね。同じメニューが何度もでてくる必要をなくすためにフレームにしているのに、元のページに戻る際に分割したフレーム内部にリンク先を呼び出したりすると起きます。
これは戻り先のtargetをきちんと指定するだけで直ります。
まぁ、私程度がこういうことを書くのって自分でも非常に口はばったいんですが、昨日の夜たまたま、２と３と５のコンボに遭遇しまして…(^^;)
さすがに内容が見えないと理解できないので、せっかくの力作が非常に勿体ない気がしたのです。
ぶっちゃけ、お金をもらってやってるわけじゃないんだし、プロ並みである必要はどこにもないです。
でも、ほんの少しのことで見てくれる人にとって見やすくできるなら、やっちゃった方が自分もお得だよねーってことで（笑）
ちなみに、
ttp://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
↑ここでチェックすると色々勉強になりますよー。
私がここで最初にチェックした時はちょうど記述形式が変わり始めた頃で、出て来た点数に思い切り凹んだけどw、すごく勉強になった。今でもお仕事／プライベート両方でお世話になってます。
どれだけcssだ何だと言っても、やはり基本はHTMLですヨ。html間違ってたらcssもおかしくなるしね。
PR
この記事にコメントする