2009年9月アーカイブ

ドキュメントタイプ・・・といっても、普段サイトを見るだけでは、あまりなじみのない言葉かと思います。

「HTMLがどんな仕様にのっとって作られてるか」というようなもので、
ページを作成する場合、このページはXXという仕様で作ってますよとそのドキュメントタイプを最初に宣言したりします。

ブラウザのメニューバー「表示」⇒「ソース」(※IE7での表示方法)をクリックすると今見ているページのソースコードが見ることができるます。
するとその文書の上部に

<!DOCTYPE HTML PUBLIC~云々・・・

という一文が記述されていると思います。これがドキュメントタイプになります。
※ドキュメントタイプが記載されていない場合もあります。


今見ていただいているページだと

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

になります。
このページはXHTML1.0にのっとったページということになります。
「Transitional」の部分が「Strict」となるとより厳密にその仕様(このページではXHTML1.0)に従うというものになります。

言語のバージョンによっていろんな記述がありますが
大まかな形としては

<!DOCTYPE html PUBLIC "-//W3C//DTD 記述言語 バージョン//EN" "DTDのURI(URL)">

という形になります。
この記述によってスタイルシート(CSS)の記述方法などもドキュメントタイプに沿ったものにする必要があるのです。

また、 "DTDのURI(URL)"と記載した部分やドキュメントタイプ自体を記載していなかったり、先ほど出てきた「Transitional」や「Strict」との違いによって
ブラウザごとに「見え方」が変ってきますので注意が必要になってきます。

それにしてもドキュメントタイプって長ったらしく、記述がいまいちわからんと思われる方に朗報です。


現在W3Cで策定中のHTML5になるとドキュメントタイプが

<!DOCTYPE html>

だけで良いらしいです。なんともすっきりで良いですね!

blog0930.jpg

運用を3段階に分けて考える(2)

今回はホームページ運用の(1) 見つけてもらう、(2) 接客する、(3) 常連になってもらう、の2段階目「接客する」の説明です。

(2)接客する

ホームページも実際のお店と同じで、訪れた人に対して接客する必要があります。

訪れた人はまだお客様ではありません。その方が求めている情報を提供して初めて、訪問者からお客様になってくれます。そのため、ホームページでも接客は重要な行程です。

では、どのような情報を用意していけばよいのでしょうか。

ポイントはお客様のイメージを明確に持ち、説明の中で具体的な例を挙げることです。多くの方に見てもらうことを意識しすぎて、一般的な内容にするとメリハリの無い、印象の薄い情報になってしまいます。
i003.jpg


お客様のイメージは、お取引のある実際のお客様の顔を思い描きながら、考えてみると分かりやすいと思います。その方に対して、説明するつもりで具体的なデータを出すことで、価値のある情報を提供することができます。

特に、価格や日数など数字があるほうが説得力は増します。

接客という面でいえば、提供する情報以外にも「使いやすさ」も非常に重要な要素です。

ホームページを造りこんでいくと「作り手の目線」ですすめてしまいがちです。文章が非常に長かったり、ページ数が多すぎるとせっかくの価値ある情報も効果が期待できません。

対策としては公開の前に一度、制作に携わっていない人にチェックしてもらうことです。初めて内容を見る人がすぐに理解できるページ作りが理想です。

今回のまとめ

・ 訪問者をお客様に変える行程を考える。
・ 実際のお客様に説明するつもりでページを作る。
・ 使いにくい、分かりにくいところが無いか外部のチェックを入れる。

次回は「(3)常連になってもらう」です。

Web標準とは

| トラックバック(0)

Web標準とはWebで使用される技術における標準規格です。

工業製品におけるJIS規格があるように
Webの世界でもWeb標準といわれるものがあるのです。

このWeb標準、特に法的拘束力があるわけではないので
守ってなくても法的に罰せられたりはしません。

ではなぜ「標準化」や「Web標準に準拠」などといわれるのでしょうか?

もし、それぞれが好き勝手に作成してしまうと、その分汎用性からは遠のいてしまうでしょう。
ある方法では見ることができるけれど、こちらの方法では見ることが出来ない…といった具合ですね。

そこでWeb標準なのです。
“標準”と言われるくらいなので、そこにはより多くの人に見られるための工夫が詰まっています
アクセシビリティやSEOにも期待ができるということになります。

決められたものに沿うのってめんどくさそうだな…と思うかもしれませんが、
好き勝手していたところを標準化しよう!と策定されて行っているものなので
ありがた~いことに思えてきますよね。

blog090924.jpg

"CSS"とは (1) 

| トラックバック(0)

HTMLと並んで現在のホームページ制作に欠かせないのがCSSです。 


 <h1><p>といったHTMLタグを使用してホームページを制作すると、ブラウザが自動的に文字のサイズや書体、色などを決めて表示してくれます。  

 

ブラウザが自動的に文章の見栄えを決めてくれるとは言っても、それは最低限のものでしかありません。そのままではどのホームページも似たようなものになってしまいます。

 

 そこでCSSの出番です。 

 

 HTMLが文章の構造を明確にするためのものなら、  CSS はその文章に装飾を加え、見栄えを整えるために使われるものなのです。

 

change_sys.gif

上の例を見て頂いても分かる通り、 CSS の有無でホームページの見栄えは驚くほど変わります。


作成したホームページにCSSを付け加えることで、見栄えの良い自分だけのホームページをつくることができるのです。


次回、"CSS"とは(2)ではどのようにCSSを設定するのかを見ていきたいと思います。

次に考えるのは、

その②「ページ内にはどんな本文をいれるか?」

 

ホームページを作る目的が出来たなら、次は、各ページに入る原稿作りです。本文をだらだらと書くだけではなく、見出しなど段落ごとに分けながら整理していくとホームページは作りやすくなります。

 

 

例えば、ホームページと本の内容を比べてみてください。

 

本はひとつの見出しや段落で、長い文章が続きますが、ホームページにはひとつの見出しや段落でも長々と文章は書きません。長々と書いている文章は、よっぽど読もうと思わない限り読む気力が起こらないのではないでしょうか?

 

 

同じようなテーマを扱っているホームページがたくさんあるなら、見た瞬間長々と書かれているだけで閲覧を避けられる...ということもあるかもしれません。

 

  

下記は、文章を詰めて書いてあるものと段落や見出しごとに分けたものです。

090911_1.jpg  

 

どうでしょうか?詰まっている文章と見出しなどで分けられている文章の読みやすさの違いは一目瞭然だと思います。

 

見出しや段落もある程度分けたから大丈夫。でも、ちょっと待って下さい。

 

1ページに入る文章量にも注意をしてみて下さい。長々とスクロールしないと読めないホームページって嫌じゃないでしょうか?

 

自分が読みやすいと思うホームページを参考にしてみると分かりますが、せっかく、いい情報があっても1ページに情報を詰め込みすぎるということも閲覧者を減らす原因となってしまうのです。

 

 

 

ホームページを作る際は、出来るだけ完結に見たい情報が分かるように作成する事は、とても重要なことなのです。

ブラウザの種類

| トラックバック(0)

さて、前回はブラウザについてテレビの例えを交えながら簡単に説明しました。

ブラウザにも、テレビ程ではありませんが、幾つかの種類があります。

その代表例を挙げてみると・・・

 

(1)Internet Exploler(インターネット エクスプローラ。IE。)

(2)Mozilla Firefox(ファイアーフォックス)

(3)Opera(オペラ)

(4)Apple Safari(サファリ)

(5)Google Chrome(グーグルクローム)

 

どうですか?どこかで聞いた事のある名前もあるのではないでしょうか?

それぞれ何が違うのかと言えば、テレビで言えばメーカーが違います。

ですので、"Webページを見る"という目的は同じでも、細かな機能やデザイン等、製品のコンセプトが少しずつ異なります。

                         ie7.JPG            ↑Internet Exploler7.0で見たページ

 

 

ff.JPG↑Mozilla Firefox3.0で見たページ

 

gc.JPG↑Google Chrome2.0で見たページ

 

今のところ圧倒的に利用者が多いのは、

(1)Internet Exploler

です。

これは多くの場合、パソコン(Windows)を購入した時点で既にInternet Explolerがパソコンの中に入っている為、自然とInternet Explolerを使い始める人が多いからだと考えられます。

(2)~(5)等の場合は、インターネット利用者が必要や好みに応じて入手し、パソコンにインストールして利用される事が多いかと思われます。

 

また、ブラウザは、月日と共にバージョンアップを繰り返しています。

Internet Explolerを例に挙げると、

Internet Exploler6.0

Internet Exploler7.0

Internet Exploler8.0

というように、バージョンアップを重ね、その都度機能に変更が加えられたり、性能が向上されたり、デザインが変更されたりしています。

 

興味のある方は、それぞれのブラウザ運営サイトをご覧になってみて下さい。

Internet Exploler

http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx

Mozila Firefox

http://mozilla.jp/firefox/

Opera

http://www.opera.com/

Apple Safari

http://www.apple.com/jp/safari/

Google Chrome

http://www.google.com/chrome/intl/ja/landing.html?hl=ja

"HTML"とは (2) 

| トラックバック(0)

前回は、ブラウザと呼ばれるソフトで文章を見る場合にHTMLが必要になる、というところまで説明しました。


では実際にHTMLを使うと、どのように変わるか見ていきたいと思います。

0921.jpg

上の図のようにHTMLを使用すると、実際にはこのように表示されます。

0921_2.gif

このように、HTMLとは文章に、大見出しや小見出し、段落や箇条書き、表や画像といった要素付けをし、文章の構造を明確にするために使用されます。



HTMLを使用して記述された文章をブラウザが読み取って、文書の構造に応じた適切な表示をしてくれるという訳です。

なお
HTMLの正式名称は"HyperText Markup Language"(ハイパーテキスト・マークアップ・ランゲージ)と言います。