viviのホームページ作成奮闘記

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  

http://japan.internet.com/busnews/20101104/2.html
ここのコピペです。

／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／
／／／／／／／／／／／／／／／／／／／／／／／／ここから
アライド・ブレインズは2010年11月4日、「A.A.O.ウェブサイトクオリティ実態調査　図書館編第1回」を実施し、調査結果を発表した。

「A.A.O.ウェブサイトクオリティ実態調査」は2006年より実施しており、より多くの公共機関 Web サイトが「誰にとっても使いやすい」ものとなるよう、自団体 Web サイトの現状を認識し、改善の取り組みの指針とすることを目的とした調査。

今回の調査は、独自ドメインを取得している公立図書館 Web サイトを対象に、 Web サイトの品質解析プログラム「CRONOS2」の一部の解析項目を用いて対象サイトの公開されている全ページを解析し、アクセシビリティ対応状況を評価した。

2010年8月20日に Web アクセシビリティ（高齢者や障害者を含めた誰もがウェブを利用できること）に関する JIS 規格が改正公示され、Web アクセシビリティに関して、自団体が目指す目標の設定と公表が求められるなど、特に自治体や中央省庁等の公共機関 Web サイトにおいて、アクセシビリティの確保が急務となっている。

今回の調査結果では、図書館 Web サイトの重要なサービスである蔵書検索や貸出予約などについて、アクセシビリティ対応の不十分な Web サイトが多く確認された。

見出しの画像に代替テキストが付与されていないといった例が散見され、そのようなページは視覚障害者が音声読み上げソフトで閲覧する際、内容を適切に理解できない恐れがある。

検索・予約システム等の Web システムも改正 JIS の対象範囲であり、公式 Web サイト同様の対応が求められる。改正 JIS への対応という意味でも、多くの公立図書館 Web サイトが問題を有していると言える。　


／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／
／／／／／／／／／／／／／／／／／／／／／／／／ここまで

一般企業のページは結構改善されてきていますね。
制作する業者もそれなりの対応をしているのだとおもいます。

なぜ公立図書館は未対応なのでしょう…。
図書館に限らず官公庁レベルはまだまだと利用しながら感じておりますが…。

素人にはわからない裏側の部分ですね。こういった部分は。
そういう部分もしっかりとつくりこんでくれる、考えてくれる業者さんと
お付き合いしなければいけないですね〜。
  

サイトパフォーマンスについて
株式会社シンプルウェイのプログラマさんのブログ
「Chief Technical Officer」
でお話しいただきましたので、さらに…（笑）

株式会社シンプルウェイのCTOさんのお話しではプログラマーの
視点からお話しいただきました。
私のお知り合いのプログラマーさんが言っていた事ですが、
wordpressのデータベースは
シンプルですばらしい！と言ってました。
意味がわかりませんでしたが、今理解しました！！

たしかにwordpressのデータベースのテーブルは少ない！！
（某有名なCMSと比較して言ってます。某CMSはその数十倍。）
ただ、データベースの知識がものすごくある訳じゃないので、やみくもに少ないから
いいとは言えないかもしれませんが…。

ただ言える事は、シンプルに簡単な構成になるように予め設計して構築している。
ということかと思います。

サイトパフォーマンスはただ単純にデータの軽い画像などを使ったり、画像を少なくしたり
という部分だけではなく、株式会社シンプルウェイのCTOさんのいうようにソースコードや
データベースやプログラムをいかにシンプルに計画的に効率的に設計をまず行えるか。

実に奥深いですね。
一般的な視点から言えば、いいデザイン、オシャレなデザインものが良い。
でも違うということですね。それも必要。ということ。

  

「オシャレ」はあなたの個性を表現する手段。流行を取り入れた自分の好きな服装やファッションで良いのですが、「身だしなみ」は相手を基準にした装いです。相手が好感を抱く装いこそ、ビジネスファションの基本であることを忘れないでください。そして職場に必要なのは「オシャレ」ではなく「身だしなみ」です。

これは日経WOMANの記事の一部です。実際のページはこちら

さて、なにがいいたいかといいますと…。
WEBもいっしょかな〜と。

こんなのかっこいいから取り入れて〜とか、
こっちのサイトの方が好みだからこうして〜とか。

見ている人が使いやすい、見るユーザー層を考えると文字は大きい方がいい。
企業サイトなので一般的な構成を。

前者がオシャレ？後者が身だしなみ？

もっと専門的にいうと
ユーザービリティだったりアクセシビリティが身だしなみに値することばかな？
オシャレをWEB作成に携わっている人から言わせれば…「自己満足」ですかね…。

  

サイトパフォーマンス = 表示速度 + 稼働率
* 表示速度 = ユーザーがWebページにアクセスしてから、完全にページが表示されるまでの時間
* 稼働率 = ページ稼働率（エラーになっていない率) + オブジェクト稼働率（エラーになっていない率）

安定性と信頼感の一つの評価基準にサイトパフォーマンスが存在します。

アマゾンはページの反応が0.1秒遅くなると、売り上げが「1%ダウン」するという統計があります。一般的に表示スピードが1秒遅くなると、PVは11%、コンバージョンは7%、顧客満足度は16%ダウンするとも言われています。

また、ユーザーがサイトを重いと感じる時間は
Yahoo!のアンケート調査によれば、67.8％の人が5秒だそうです。

flashやその他プログラムにも左右されますが、重いサイトは
効果がなくなるようですね…。

また、CMSの導入もサイトを重くします。
多くのCMSはフレームワークを使用し、共通部分はテンプレート化しています。
単一のページを読み込むよりも工程が複雑です。

更新などのしやすいCMSは実用性がありますが、見えないところで
デメリットもありますので導入時には慎重に比較検討しましょう。

専門の方でもそこまで理解してない方はたくさんいます。
使い方は分かる専門家では役に立ちません。原理を把握した上で利用している
専門家こそが本当のプロなんじゃないかなーとおもいます。

（おっと…サイトパフォーマンスの話のつもりが専門家の話になってしまった…。）

  

W3CがHTML4に代わる次世代のHTMLとして策定を進めているHTML仕様のHTML5が公開されました！！

HTML＋CSSのWEB標準コーディングを行っている方は必見（？）

個人的にはimg要素、alt属性部分が細かいですね…。

これが主流になるのはまだ先、とおもっていると
あっという間に主流になる（笑）。

なので、いまのうちから少しづつ読んでおこう…。

このご時世でテーブルレイアウトやWEB標準外のコーディングは
欠陥住宅をつくっているようなもの（持論です…。）。

興味のある方はご覧あれ！！
http://www.html5.jp  

見て下さい。
上のイメージはgoogleのトップページです。
3つのブラウザでそれぞれ開きました。
わかりますか？？
「google検索」のボタンや文字の大きさ、文字の行間の違いから下部の「2009」の
文字の高さが違いますね。

違うといっても本当に若干の差ですよね。
でもこれって、どのブラウザでもある程度同じようにみえるよう
計算されて作成されてるんです。

cssとhtmlの組み合わせでホームページは作られます。
いわゆる「コーディング」って作業です。
この作業で何ポイント、何ピクセル、行間、大きさ、フォント指定…。
さまざまな設計を組み立てていきます。

でも各ブラウザで基準が違うのです。
つまり同じ10ポイントの大きさでもどれも違ってきてしまうことがあります。

だから各ブラウザ同じように見えるように
都度修正修正でやっと同じように見えるページが完成します。

  

yahooのニュースにこんなのが出てました。

「IE6はもういらない」——Web企業が撲滅キャンペーン


おっ！いいぞ！いいぞ！と思えるこの企画。
海外のサイトらしいけど日本ではどうなかな？

web標準でサイトを構築する場合
IE6だと対応していないものが結構あるのが事実。
それに無理矢理対応させるため（？）
面倒なcssを記述している。

ie6のシェアは日本ではまだまだ健在。
というよりも、IE6以外にあるの？？という人の方がまだまだ大多数。
ブラウザってなに？という人もたくさんいらっしゃいます。

ブラウザはIE以外にもたくさんあります。
私はfirefox（http://mozilla.jp/firefox/）。

目が離せない気になる記事ですね。  

私はwebに興味があり、少なからず完全な素人ではない…。（専門でもないが…。）
だから、いいサイトのソースコードはすごく気になります。
でもでも、素人の人、もしくはwebの作りに興味が無い人はソースコードなんて
絶対に見ないですよね？？？

だから…、そんな感じだから…、蔑ろにされやすいし、扱いも低かったりする。

ごもっともな意見ですよね。
私も今の仕事してなかったらサイトのソースなんて見る事無いし。
テーブルレイアウトだろうが、どんな方法で組まれていようが普通にホームページが
見れるのであれば問題ないし、ソースコードなんて関係ない。

でも、エラー出まくりのHTMLなんて、住宅でいうと欠陥住宅と同じ。
見た目キレイに着飾ってても、住宅の構造がずたぼろじゃあやっぱりダメじゃないですか。
住宅の構造内部を覗く事なんて普通に考えたらあんまり無いし。
普通に建っていれば、見分けなんて付かない。
だけど、時が経つにつれ徐々におかしい事に気付いていくはずです。

HTMLやCSSも同じ。
昔はひとつのブラウザで見られれば問題なかったけど
今じゃブラウザの数もwin、macの別もあるし、１０種類以上。
こっちのブラウザでとあっちのブラウザで見え方がちがうぞ…？？？
というサイトたくさんありませんか？

そう、ソースがボロボロのサイトなんです。

もし、これがお金を払って作ってもらっていたら。
住宅業界だったらもう大問題になりますね…。

じゃー、webの業界はいいわけ？？

急速な技術の進歩と普及であいまいになっている気がします。
いつかきっとそんな曖昧さを統一するなにかが。
基準をしっかりもった目安が。
だれもがおなじ（基準に沿ったきちんとした）ソースを書かないとエラーに
なってしまう技術が、きっときっと出てくる…。のかな…。

（「いや、そう願いたい…。です。」）



  

以前にサイトチェッカーのサイトをご紹介しました。
http://vivi.tsukuba.ch/e30080.html

よくマッチングサイトなんかで案件を請け負う業者を選定する時の条件に
サイトチェッカーで100点。なんていう言葉を見かけます。

結論から申し上げますと…。
100点は必要ありません。

あくまで目安です。
75点〜80点程度でおよそクリアされています。

なぜなら、サイトチェッカーの基準通りのサイトを構築すると
プログラムが稼働できなくなったり、バグがでたりとひどい結果に
なる場合があるからです。

ただ、この減点はいけないな。というものもありますので
そういうものは必ずクリアする事です。

  

ホームページにはよくサイドナビがあります。
さてさて、右と左ではどんな使い分けがされているのでしょうか？
知ってますか？

そのページのコンテンツ。つまり本文が重要なサイトは
サイドナビは右側にあります。逆に、サイドナビでのページの誘導を
していきたい時には左サイドのナビが適切です。

なぜでしょう？？
人は画面を見るとき、ついつい左から右へ。上から下へ目線を移動させる
傾向にあります。
左側にあるものを最初に認識するわけなのです。
なので、最初に目につきやすく、見つけやすいため、ページの比重がコンテンツ
なのか、ナビなのかで左サイドナビと右サイドナビを使い分けるようです。

確かに、それを意識してサイトをみていると、そんな心理を取り入れているサイトは
たくさんありました。

うまくできてますねぇ〜。  

こちら、ご存知の「花王」のサイトの一部をキャプチャしました。
文字（フォント）に注目。

これ「メイリオ」といいます。
WinVistaの標準？フォントになりますので、XPには搭載されてません。

私的な意見ですが、見やすくて好きです。
ゴシックでもなく、明朝でもない…。そんな位置づけかと思います。

普及させたいフォントです！
Macでも、Office 2008をインストールすると使用できますし、
XPの方でも、検索するとダウンロードできるサイトがあります。

是非インストールして見て下さい。  

XHTMLなのにXML宣言をしていないサイトって結構あります。
宣言しない理由としては、以下のようなことが考えられます。

1. Win IE6の環境下において、互換モードで表示されてしまう
2. 文字コードが「UTF-8」または「UTF-16」の場合は
　　 XML宣言自体を省略することが出来るから
3. HTMLからXHTMLに変えたばかりで、理解していない

等々…。

でも一番の原因は１のIE6の環境下において、互換モードでしょう。
・全体をセンタリングする際にtext-align:centerも追記しなければセンタリングされない
・ボックスの解釈の違い
など、いろいろな不都合が発生してきます。

XML宣言についてはXHTMLでは必須項目？？のようになっています。
不都合があってはつける意味がありません。

ケースバイケースで適切に使い分け。
そんなところだと思います。
  

4年前には10台中ほぼ9台のコンピュータで使われていたMicrosoftのWebブラウザ「Internet Explorer（IE）」が、今年3月にそのシェアを3台中2台にまで落としたそうです。

う〜ん。私的には歓迎…。でしょうか。

ホームページを作成する時にやはり気をつかうのが、このブラウザチェック。

現在はIE6〜8、Firefox、Safari、opera…。
WinXP、Vista、MacOSXの3パターンで完璧に見られるようにしています。

IEのシェアが9割だったころは、簡単だったんだろーなー。と
おもいながらいつもチェックしています。

統一の規格でブラウザを作ってもらいたいです…。
  

レイアウトを行う際、スタイルシートを使用し小さめの文字サイズで固定しているサイトが多々ある。この場合、ユーザー自身で文字の大きさをコントロールすることが不可能になってしまう。

文字の指定をする場合は、絶対単位よりも相対単位で文字サイズを指定するほうがよい。閲覧者がフォントサイズを、自身の環境や状況に合わせて最適なサイズに変更できるよう、配慮する必要がある。

また、文字サイズを相対で指定したとしても、多くのユーザーはブラウザで文字サイズを変更するのを面倒に感じるため、コラムやニュースなどの文章を読ませるコンテンツは、あらかじめ文字サイズを大きめに設計しておいたほうがいい。

※相対的な単位とは、em や ％ などのこと。
　  

代表的な二つのフォント、ゴシック体と明朝体。明朝体には見た目が美しく読みやすいという特徴があり、対してゴシック体には、認識しやすく印象に残りやすいという特徴があります。

とはいえ、それは紙面上でのことで、Web上（モニタ）では一概にそうとも言い切れない。画像として書き出す大きめの文字には明朝体もいいが、ユーザーに読ませるためのテキストはやはりシンプルなつくりのゴシック体の方が読みやすい。

明朝体はゴシックに比べるとつくりが細かく、そのような細い線は解像度の低いモニタで閲覧すると、潰れて見えてしまう可能性もあります。

WEBと印刷物は似ているようで全くちがいますね〜。

“和”を表わすために、読ませるための部分まで明朝体にしているサイトがたまに見かけるが、“和”のイメージは画像や色彩のビジュアル面で表現し、テキスト部分はゴシック体で表示した方が読みやすい。

また、各種ブラウザの表示の違いも要注意！。FirefoxやNetscapeはInternet Explorerと違い、表示フォントがデフォルトでは明朝体に設定されている。CSSの「font-family」を用いて、フォントの指定を行うことを忘れてはいけません。

ちなみに、viviのブログはvistaで標準搭載されているメイリオというフォント。
これがインストールされてないフォントはゴシックになってます。個人的にメイリオは
みやすくて好きです。  

HTML／CSSのチェックツール。
これに合格すればとりあえずはオッケー（?!）

■HTMLチェックツール
http://validator.w3.org/

■文法チェッカー
http://www.esitenet.com/htmllint/htmllint.html

■CSS検証ツール
http://jigsaw.w3.org/css-validator/  

ユーザビリティとは

ユーザビリティとは、「使いやすさ」のことです。「ある利用者が、ある目的を達成するときの効果、効率、満足感」という定義もあります。使いにくければ、製品を利用したときの作業効率や、主観的な満足感が低いというのは、実感できるのではないでしょうか。技術の進歩により、パソコンにも、携帯電話にも、次々と新しい機能が加わり、多機能化する傾向にあります。確かに多機能により便利になることも多いのですが、その反面、操作が複雑になり、使い方を理解するのに時間がかかるなどの問題を生じがちです。情報機器、情報システムは用途や使い方が非常に多様であるため、単機能の道具や製品に比べて、どうしても使い方が難しくなりやすい。

アクセシビリティとは

「アクセシビリティ」とは、高齢者や障害者などを含むできるかぎり多くの人々が、使えるかどうかもしくは使いやすいかどうかを意味します。最初は、建築物や交通機関などのアクセシビリティが問題とされていましたが、現在ではパソコンや電話機の様な情報機器、さらにそれらを使用して得られるコンテンツなど、広い範囲にわたりアクセシビリティが考慮されています。

詳しくは
富士通／ユーザビリティとアクセシビリティ  

SEO/SEMでも少し話題に触れたXHTMLについてです。
XHTML正しく記述しないとXHTMLのメリットを享受できません。
そもそも正確に記述することが求められていることが前提にあります。
そこで、正しい記述を行うための検証方法を紹介します。広く知れ渡っている方法なので、
ご存知の方もたくさんいらっしゃると思います。また、検証はあくまでも目安でしかないが、
案件によってはこれらをクリアすることが品質基準となることもあります。

■W3Cの検証サービス
http://validator.w3.org/
■Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
■JChecker　（MAC）
http://www.artman21.com/old_product/jchecker/index.html
■reamweaverで構文を確認
メニューバーの［ファイル］→［ページのチェック］→［マークアップのバリデート］

  

デザインは見た目でいいか悪いか（好きか嫌いか）が分かりますが、
ソースコードはやはりそう簡単には理解できないものですね。

web標準が浸透し、多くの企業がそれに準拠した形でのコーディングを
施すようになってきましたが、cssとtableをぐちゃぐちゃに書いている
ソースコードもまだまだあります。
（みていると最近リニューアルしたサイトをみてそういったつくりをしているという
ところもあるようですね。）

すぐ判別がつかない人のために、こんな事をやってみると
きれいにつくってあるかどうかよくわかります。

firefoxの場合
表示→スタイルシート→スタイルシートを使用しない
にしてみて下さい。

どうでしょう？？
左部分に下に一列に並びましたか？
これが100%の判断基準にはなりませんが、
左部分に下に一列に並んだサイトは「比較的」に
web標準などを意識した作りになっているはずです。

これが全てではありませんが、10あるうちの1つとして
試験してみてください。