https://ameblo.jp/gochiefs/ ウェブデザインの基本中の基本について考えます。 ja
利用者のことを考えて書く。


何をいまさらと言う感じですが、ウェブではできていないときのほうが多いです。


なぜかと言いますと、印刷物とコンピュータでは読者の心理的、物理的状況が違う
ということを認識していないから。

だいたいにおいてコンピュータの画面てのは疲れます。そこにだらだらと長い
文章が書いてあったら読みたくなくなります。簡潔に、そして大事なことは先頭に
持ってきましょう。

どんなにきれいなページデザインでも利用者は自分の好みで文字の大きさや
背景色なんか変えてしまいます。スクリーンリーダーを使われた日にゃデザイン
なんて関係なし。そうなってくると、文章の骨格がますます大事になります。

インターネット利用者ってたいてい何か情報を探しているものです。目的の情報
が見つかるまであっちのサイトこっちのサイトでイライラしてます。この状況では
飛ばし読みが基本ですね。そんな彼らの目にも留まるような文章構成にしておく
必要があります。

あとですね～、読者はあなたを信用していないってのがあります。出版物なら
多くの手順を踏んでから世に出ますんで、それなりに信用されますが、インターネット
はそうではないですから。正確で質の高い情報を提供するのが一番。誤字脱字が
ないのが二番。（えらそうなこと言えないんすが。）



]]> https://ameblo.jp/gochiefs/entry-11196178401.html Sun, 18 Mar 2012 11:36:49 +0900 ウェブデザインというと、サイトの見た目ばかりに注意が向いて
しまいがちですが、内容にもデザインが必要です。

ニールセン　ノーマン氏が２００６年に行った調査によると、
サイト利用者は　”Ｆ”　の形で画面を見るんだそう。

つまり、見出しを見て、最初の数行を流し読みして、
内容部分の左側をつらつら～っつと流す。小見出し
なんかもチェック。で、画面下のほうはあんまり見ない。

言われてみれば、おいらも情報を探してるときって、この
パターンです。

だからこの　”Ｆ”　の場所にそのページで一番大事な
語句（キーワード）を置いておけば、飛ばし読みしてる
人が、「おっ、これは私が探してる情報かも。」と立ち止まって
くれる可能性が高くなります。

もちろん横書きの場合ですよ。縦書きやアラビア語の
場合はどうなんだ、っていう意地悪な質問はなし。

（逆Ｆ？　でも数字の表記は左から右だしなぁ。）
]]> https://ameblo.jp/gochiefs/entry-11193534059.html Thu, 15 Mar 2012 17:34:52 +0900 ３番目の「理解できる」は容易に想像が
つくんじゃないでしょうか？

読みやすいデザインにしろってことです。

小さな字で画面の端から端まで埋め尽くされて
いたら読む気なくなります。余白も大事です。

それと
イタリック体は画面では見にくくないですか？アクセント
として使うには良いですが、どかっとまとめてイタリック
はやめましょう。（て日本語なら関係ないか。）

デザインを統一するってのも忘れちゃなんね、です。
たとえばナヴィゲーションバーがページごとに違う
場所にあったら混乱しますよね。

それから時々とんでもない色のリンクを見かけるんですが、
こっちとしては、「これはリンクなんだろうか？」と
考えてしまうわけです。またリンクではないのに下線が
ひいてあったりするんで、そこをクリックしてしまった
ことあると思います。こういったことを避けるためには、
インターネットで確立している約束事に従ってデザイン
するのが良です。

ついでに４番　「しっかり作られている」

う～ん、Ｒｏｂｕｓｔ　の訳としてはあんまりよくないな。

要はＷ３Ｃの定めたＨＴＭＬ，ＣＳＳのルールを守って
ね、ということです。

ちょっと前までは、ほかのブラウザではちゃんと表示
できるのに、エクスプローラだけはおかしい、なんて
ことがありました。マイクロソフトがえばっていて、
Ｗ３Ｃの言うこと聞かなかったんですね。今はゲイツさん
も改心したみたいですけど。ゲイツさんでそうなんですから、
我々も黄門様には従っておいたほうがよいでしょう。

なんったて「権威筋」ですから。
]]> https://ameblo.jp/gochiefs/entry-11192456162.html Wed, 14 Mar 2012 15:38:13 +0900 さて、２番目の、「操作できる」てのはなんでしょう。

ＷＣＡＧでは、マウスを使って操作できるものはキーボードを
使っても操作できるようにしてね、と言ってます。つまり
キーボードショートカットを用意して、ということですね。

腕が不自由な人達はマウス使えないですもんね。

それから、身体障害者は何をするにもそうでない人より
時間がかかりますんで、充分な読む時間、操作する時間
を与えましょう、とも言ってます。

スターウォーズの冒頭にテロップがでるでしょ。あの英語を
全部読む前に宇宙の彼方へ飛び去って行かれた経験が
ありませんか？それと同じことです。文字がアニメーションで
スクロールするような場合、注意です。

最近あまり見なくなりましたけど、目立たせるために
ピカピカと点滅する中身のあるサイト、あれもダメです。
てんかん等の発作を誘発する恐れがありますんで。

健常者だけでなく、障害者のことも考えてサイトを
デザインしましょう、ということです。


]]> https://ameblo.jp/gochiefs/entry-11192436289.html Wed, 14 Mar 2012 15:10:08 +0900 黄門様のＷ３ＣがＷＡＩをたちあげたってのが前回の話だったんですが、
そのＷＡＩにはガイドラインがありまして、

ウェブ　コンテント　アクセシビリティー　ガイドラインズ

と言います。またまた長ったらしい名前でして、英語で書いても
長いので、ＷＣＡＧと呼んでます。

ウェブの内容にあたるものは

１．認知できる
２．操作できる
３．理解できる
４．しっかりと作られている

必要がある、とこのガイドラインは言ってますが、
何のこっちゃわからんですね。

それでは１番から。

認知できる内容とは何ぞや。

盲目の人のことを考えてください。ウェブサイト内の画像、ビデオ
がまったくわからなければ、内容が認知できたとは言えない
です。alt　タグで内容を説明する、見出しをつける等をしましょう。
グラフを使ったら、longdesc タグで内容を説明するとかもいいですね。

字の色と背景の色を考慮すると色盲の人は助かります。また色だけで
メッセージを伝える　（大事なところを赤い字にするとか）も困っちゃいます。
太字にもしておいて。

あと、ＰＣでは問題なく表示できるのに、印刷すると何じゃこりゃ、というサイト
や、スマートフォンの画面に入りきらんぞ、というのも内容が認知できる
とは言いませんよね。ここいらへんはＣＳＳでコントロールしましょう。

次回は２番から。
]]> https://ameblo.jp/gochiefs/entry-11191543541.html Tue, 13 Mar 2012 16:03:26 +0900 ウェブ　アクセシビリティー　イニシアチブ　（ＷＡＩ）
　
と、かたかなで言われても何のこっちゃわからない
んですが、「より多くの人がインターネットを使える
（アクセスできる）ようにしよう」ということです。

じゃ穴掘って光ファイバー埋めたれ、と考えた
あなた、そうではないんですよ。

このＷＡＩ、ウェブ界の黄門様Ｗ３Ｃが１９９７年に
立ち上げたもんでして、「身体障害者だからといって
インターネットの情報が得られないなんてことが
あってはならない」というもんなのです。

たとえば盲目の人たちは結構インターネット
使ってるんですね。この方達は自動読み上げ装置
を使用するんですが、写真は読めませんよね。
また全盲でなくても色盲の人だっているし、うちの
じいちゃんは、「字が小さい！」といつも文句言って
るし。

腕の自由がなくて、マウスを使えない
人もいますしね。

こういった方達にもできるだけ快適にインターネット
を使ってもらおう、というのがＷＡＩの主旨です。
]]> https://ameblo.jp/gochiefs/entry-11191403909.html Tue, 13 Mar 2012 12:50:54 +0900 ウェブサイトをつくるには、ＨＴＭＬだとかＣＳＳが必要なんだけど、
誰がそのルールを決めてんだろ？と思って調べてみたら、
Ｗｏｒｌｄ　Ｗｉｄｅ　Ｗｅｂ　Ｃｏｎｓｏｒｔｉｕｍ　（略してＷ３Ｃ）って団体が
その任にあるみたい。

コンソーシアムってんだから複数の組織が合わさってできた
ものだけど、ま、ここがウェブ世界の黄門様だね。日本人は
権威には弱いんで、ここはＷ３Ｃの言うことを聞いて
おきましょう。

このＷ３Ｃ、ウェブの規格やガイドラインを定めている様子。
だけどそれに従わなかったからといって、銃殺にはならないし、
罰金も払わなくていいので安心。

だからってあまりにも自分勝手なサイトをつくったりするのも
考えもの。だいいち見にくいし読みにくいもんね。常に利用者の
ことを考えるってのが、サイトデザインの基本中の基本。
]]> https://ameblo.jp/gochiefs/entry-11191370827.html Tue, 13 Mar 2012 12:22:50 +0900