キーワード「CSS」を含む記事

サイトとサイトオーナーのイメージアップ

イメージアップの方法は、リニューアルだけではありません。
綺麗な画像やアイコン、動画に差し替えるのも良いのですが、ホームページのアクセシビリティを改善することでもイメージアップできます。アクセシビリティは障害をお持ちの方や年配者、子供だけが対象ではありません。一般の成人にも大変有効です。

ホームページ制作の基本に、「閲覧者の意図しない動作を勝手に行わない」ということがあります。

例えば“音”、ページを開いたとき埋め込まれたサウンド機能がアクティブ状態を初期設定とするのは、好ましくありません。音の設定は“オフ”が基本です(テレビとは違う)。他にも古くはポップアップウィンドウもそうです。

リンクについて言えば、ボタンやテキストの特定箇所からリンクされていることをはっきりと明示する必要があります。
テキストでリンクする場合、スタイルシートで文字を“色分け(文字色・背景色)”するだけでなく、“色分け”+“アンダーライン”が基本です。色覚障害の方にとって色分けだけでは、認識できないケースがあります。したがってアンダーラインだけでもOKです。
マウスオーバーの際、アンダーラインは消しても消さなくても良いでしょう。
ただし、マウスオーバーのときだけアンダーラインを表示するのは、はっきりと明示されてるとは言えません。デフォルトでアンダーラインとした方が良いですね。

文章内の特定箇所を目立たせるためにアンダーラインを用いるのも好ましくありません。
〔アンダーライン=リンク〕という認識が一般化しているためです。
この場合は、“ボールド”に設定し、文字を太くするという方法で代替することをおすすめします。

閲覧者にとって誤解し難く、そしてページの全ての動作に対し、閲覧者の意思を最優先する造りは基本的に好感を持たれやすいものです。とてもスマートにイメージアップできますヨ!
逆にサイト側の思惑で勝手に動作するなど、アクセシビリティやユーザビリティに配慮が欠けるサイトは、場合によってはイメージダウンに繋がっている場合があります。

≫関連記事:「ロールオーバー」の是非

コーヒーブレイクにヴァリデーション

御社のサイトがどの程度正しい構文(Markup)で制作されたか、またご使用のブラウザが「Web標準」にどの程度準拠しているか、コーヒーブレイクの時にでもお試しください。
なかなか興味深い結果が出るかもしれませんヨ!
いずれも各画像をクリックすると、それぞれの検証・計測サイトへ遷移します。

W3CのValidation Serviceは、”Markup(html, xhtml)” ”CSS”とも下の画像のようにそれぞれ上の赤枠に検証したいページのURLを入力し、”Check(検証する)”を押すだけ。
めでたく合格!すると、W3Cのバナーでお祝い(?)してくれます。

image_w3c_html_500_170
image_w3c_css_500_170

ご使用のブラウザが「Web標準」にどの程度準拠しているかを測定するのによく利用される”Acid3“。
100点満点を取ると左のような画像が表示されます。
中央は別のブラウザで71点、右は多くの方に使われているブラウザで、結果は計測不能。

image_acid3_500_170

「ロールオーバー」の是非

「ロールオーバー」・・・証券取引のお話しではありません、もちろんホームページの「ロールオーバー」です。
この場合の「ロールオーバー」とは、マウスポインターを上に乗せたとき、画像が入れ替わる動作のこと。

「ロールオーバー」については、その必要性の是非についていろいろ言われてきました。
「ロールオーバー」を組み込む際は、多くがリンクを設定している場合。つまり、「ここでクリックするとリンク先へ遷移する」という案内的要素を持たせることができます。ビジュアル的な効果はともかく、そういう意味でも当社では「ロールオーバー」をお奨めしています。
画像だけでなくテキストの場合も同様です。テキストの特定箇所からリンクを設定している場合は、CSSで”アンダーライン”や”色を変える”等の配慮が必要だと考えます。リンク箇所ではマウスポインターが変わりますが、リンクされていることをはっきりと明示するためにも、「ロールオーバー」は必要だと考えています。

「Safari 3」

札幌もだいぶ暑くなってきましたネ。
予報では、あさってからまた涼しくなるそうな。
夏は夏らしくカッと暑い方がいいんですけど、札幌の6月ってこんなに暑くなかったような・・・。
さて、Appleが「Safari 3」なるものを出してきました。
まだベータ版ですが、Windowsプラットフォーム対応だそうです。
速さがウリのようですが・・・
CSSの互換性だけは、しっかりと検証して欲しいものです。

フォントからウェブアクセシビリティに配慮

年度末、年度始めで皆さんお疲れのことと思います。
多くの方は今日からGWですね。

さて、ここしばらく満足にブログも更新できず放ったらかし状態。
通常業務と並行して当社サイトのリニューアル作業を速やかに・・・といきたいところですが、こちらは列車ダイヤが乱れるが如くスローに進行中デス。
今回のリニューアルにあたり、印象が前とあまり変わらないというご指摘も受けました。リニューアルもいろいろあり、ガラリと変えてしまうのも良しですが、今回はイメージ定着を目的に「キープコンセプト」の下、ベースカラー/レイアウト/構成はできるだけ継承することとしました。その上で、各画像のブラッシュアップ/CSSの改修/色とフォントの再考をポイントに据えました。

今回、画像文字用のサンセリフ系欧文フォントを見直しました。
採用したフォントは「Humanist 777 Bold/Black」、いわゆるFrutigerです。
Frutigerは、ヨーロッパではよく見かける書体ですが、ここ数年日本でも東京メトロや日本航空、JR東日本の一部など駅や空港の案内表示で急速に広まったフォントとして有名です。
補足:気が付きませんでしたが、JR北海道も新しい表示に採用されてました。

Font_sample



美しく視認性の良いフォントですが、果たしてホームページというメディアを通してモニタで見ても同様の効果が期待できるのか・・・。
テスト(当社独自)は同じサンセリフ系のHelveticaと比較検討した結果、Frutigerの方が視認性・判読性のいづれにも優れているという結論に至りました。

つまり、見やすい、読んでいて疲れにくいので目にも優しく、アクセシビリティに効果的ということが言えるのではないかと考えています。

和文フォントはモリサワやヒラギノ等、制作会社が使える選択肢はそう多くありません。
しかし、欧文フォントは和文に比べ、非常に多くの種類が存在します。
当社では、こんなところにもこだわりを持って制作に臨んでいます。 

では、良いGWを!