![[ロゴ] ウェブデザインスタジオ山梨](/assets/img/layout/header_title.png)
1. WEBの概要
1－1．WEBとは
ＷＷＷ（＝World Wide Web）とは、インターネット上で情報をやり取りする仕組みのことで、私たちがインターネットで見ることのできる情報はこの仕組みに基づいて閲覧できるようになっています。この情報はHTML（＝Hyper Text Markup Language）と呼ばれるプログラミング（記述言語）によって作られています。文章だけでなく、画像や音声などマルチメディアを扱うことができ、他の情報を参照するためのリンク（＝ハイパーリンク）が設定できる機能を持ちます。 インターネットの世界標準として1995年頃から爆発的に普及し、現在では空気のような存在になり、あたりまえのようにインターネット（WEB）へアクセスしています。
図：WEBサーバとクライアント
1－2．URL
| URL（=Uniform Resource Locator）とは、インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述形式のことを言います。インターネットにおける情報の「住所」にあたり、情報の種類やサーバ名・フォルダ名・ファイル名などで構成されます。WEBサーバやブラウザはURLによって情報がどこにあるのかを知ることができます。
以下のように、URLはプロトコル・ドメイン名（パス名）によって指定されます。
プロトコル プロトコルとは、ネットワーク上でコンピュータ同士が通信を行うために決められた『約束ごと』のことです。WEBでは、HTTPというプロトコルにしたがってWEBサーバとクライアント(WEBブラウザなど)の間でデータがやり取りされます。プロトコルにはHTTPの他にもファイル転送するときに用いるFTP、ネットワークにつながれたコンピュータを遠隔操作するときに用いるTELNETなどがあります。 ドメイン名 ドメイン名は住所のように階層構造になっており、“ . ”（←ドット）で区切られています。
トップレベルドメイン 国別コード jp（日本）、uk（イギリス）、ca（カナダ） 一般コード com（企業）、org（非営利団体） セカンドレベルドメイン(組織の属性コード)
|
1－3．WEBブラウザ
WebブラウザとはWEBページを閲覧するためのソフトウェアのことを言います。ネットワークからHTMLファイルや画像ファイル、音楽ファイル、映像ファイルなどをダウンロードしてきて、プログラミング通りに表示・再生します。インターネット黎明期の Web ブラウザ戦争では、Netscape (後に America Online が買収) と Microsoft が互いに Web ブラウザのバージョンを重ねる度、細部や機能面で競い合っていました。その点では現在の Web ブラウザ戦争も大差なく、競い合う2大ブラウザの顔ぶれも、片方は Microsoft のInternet Explorer(＝IE) と変わらないが、その相手は Mozilla の Firefox や Google の Chrome に変わりました。
ブラウザとその仕様
ブラウザによってそれぞれ仕様が異なるため、HTMLファイルの表示・見え方に微妙な違いがあります。できるだけブラウザに依存しないタグを利用して、HTMLファイルを作成する必要があります。
図：HTMLとブラウザの仕様
1. ネットワーク上のアドレス（URL）を与えられて、その情報にアクセスし、その情報の形式に応じて動作すること。
2. HTMLを解釈し、プログラミング通りに表示・再生すること。
2. ホームページとWEBサイト
2－1．ホームページとWEBサイト
ホームページとは
インターネット上で公開されている文書のことを言います。WEBブラウザに一度に表示されるデータのまとまりで、テキストデータやHTMLによるレイアウト情報、文書中に埋め込まれた画像や音声、動画などから構成されます。本来は、WEBページの中で最初に表示されるページ（＝トップページ）のことを指す語でしたが、日本ではWEBサイトと同義語で使用されています。
WEBサイトとは
1冊の本のように、ひとまとまりに公開されている全てのWEBページのことを言います。WEBサイトの入り口であるトップページと、WEBサイトを構成する一連のWEBページ、画像ファイルなどから成り立ちます。
プロのWEBデザイナーは、WEBサイトと言うけれど、一般のユーザーやクライアントは、ホームページと言ってます。 トップページは、インデックスページや目次と言うこともあり、デザイナーやSE（＝システムエンジニア）や会社によって、言い方やルールは異なるようです。
2－2．WEBサイトのフォルダ構成
WEBサイトは、一般的には右の図のようなフォルダ構成（＝階層構造）になっています。しかし、制作会社やデザイナーによりフォルダ構成が異なるため、最適と言える状態はケースバイケースです。
パスの指定
リンク先の指定や、貼り込む画像のファイルを指定する際には、作業中のHTMLファイルでパスを指定する必要があります。パスの指定には以下の２通りの指定方法があります。
- 相対パス
- 作業中のファイルから見てリンクさせるファイルの場所を指定
- 絶対パス
- “ / ”（←ルート）から見たファイルの場所を指定
例）下の図のサイトにおいて作業中のファイルが、“3.html”である場合。
相対パスだと
同階層のファイルへ ⇒ 2.html
１つ上の階層ファイルへ ⇒ ../
１つ上の階層のフォルダ中のファイルへ ⇒ ../yamanashi/1.html
絶対パスだと
同サイトにあるファイルや画像を指定する時、“ / ”からパスが始まります。<a href=”/yamanashi/”>～</a>
他サイトにあるファイルや画像を指定する時、“ http:// ”からパスが始まります。<a href=”http://dezin.jp/yamanashi/”>～</a>
2－3．ディレクトリ・ファイル名の付け方
ホームページとはディレクトリやファイルに名前をつける際には必ず英字・数字（いずれも半角）を使用します。
- {},|,\,^,~,[],<> など
- 全角文字・半角カナ
- 機種依存文字（＝パソコンメーカーやＯＳなどが独自に定めた文字）
ex.）①②、ⅠⅡ、㈱など
※WindowsやMacintoshなどで表示が異なったり、国際規格で規定されていないため文字化けが生じます。
拡張子とはファイル種類を示すためにファイル名の末尾にピリオドに続けて付けられる識 別子のことを言います。
・HTMLで扱うファイルの拡張子→.html .gif .jpg .pdf .mid .wavなど
⇒ 拡張子を見るには： メニューバーから[表示][フォルダ オプション]の表示タブの”拡張子は表示しない”
チェックをはずす。
主な拡張子一覧表
| .gif | GIF形式の画像ファイル |
| .html ／ .htm | HTML形式のファイル |
| .jpeg、.jpg | JPEG形式の画像ファイル |
| .mpg ／ .mp4 | MPEG形式の動画ファイル |
| PDF(=Portable Document Format)ファイル | |
| .txt | テキストファイル |
| .mid | MIDI音源用の曲データファイル |
| .wav ／ .mp3 | オーディオファイル |
| .docx ／ .doc | word2003ドキュメント |
画像データ
| 表示可能色数 | 圧縮 | |
| GIF（.gif） | 2～256色 | なし |
| PNG（.png） | 2～1677万色 | 選択可能 |
| JPEG（.jpg） | 1677万色 | 選択可能 |
・ＧＩＦは表示色が256色に制限されていますが、色数の少ない画像向きです。特にタイトルロゴ、イラストなど、線画ベースの画像は、背景を透明にしたGIFファイルにするのが一般的です。インタレースGIF・透過GIF・アニメーションGIFなどがあります。線画を主体としたイラストをJPEGにすると輪郭が甘くなるなどの劣化が目立ちます。
・JPEGは色数が多いので、フルカラーの写真やグラデーションを主体としたイラストなどを表示するのに適しています。
機種依存文字はパソコンメーカーやＯＳなどが独自に定めた文字で、機種によって表示が異なってしまう文字を示します。表示が完全に異なってしまいますので、原稿を作成する際に注意が必要です。
3. HTMLソースとタグ
3－1．HTMLとは
HTML（＝Hyper Text Markup Language）とは、WEBページを記述するための言語です。文書の構造を記述したり、文書の見栄えを記述したりするのに使います。(※1)また、文書の中に画像や音声、動画、他の情報のURLなどを埋め込むこともできます。HTMLで記述された文書を閲覧するにはWEBブラウザが必要です。 HTMLは、標準化機関W3C（＝The World Wide WEB Consortium）が中心となって、HTMLの実際の開発を行い、規格を決めています。
(※1)現在では、文書の見栄えを記述するにはCSS(＝カスケーディングスタイルシート)を用いることが推奨されています。
HTMLのバージョンは、レベル０から始まって、現在レベル4.01まであります。
- 所在地を意識せずに情報をたどれる。(ハイパーテキストリンク)
- クライアントのプラットフォームを意識しなくてもよい。
- 比較的簡単に記述できる言語である。
HTMLソース全体概要
HTML文書は、基本的にヘッド部・ボディ部（コンテンツ部）から構成されます。 HTML文書として公開するためには<html>タグの前に文書型宣言が必要です。
<head>～</head> 文書の情報を記述するタグ
<title>～</title> タイトルタグ
<body>～</body> 本文であることを定義するタグ。ここの部分に記述したものが画面上に表示される。
TIPS 文書型宣言
HTMLにはいくつかのバージョンがあり、それぞれ異なるDTD(＝文書型定義)を持っています。そのため、どのDTDに基づいたHTMLで記述するのかを宣言する必要があります。WEBブラウザは宣言されたHTMLのバージョンで表示します。
3－2．タグ
HTML(＝Hyper Text Markup Language)文書は、タグと呼ばれるもので記述します。これはInternet ExplorerやFire FoxといったWEBブラウザに、レイアウト表示・または文書の構造を伝える指令のようなものです。具体的には、文書に対して「これが見出し」、「これが段落」といった意味付けをすることです。その意味にふさわしい表示、たとえば「見出しは字を大きくして後ろを１行空きにして…」といった表示をWEBブラウザが行います。 タグとは文書の書式や構造を設定するために文字列に埋め込まれた文字のことを言います。コマンドを < example > でくくったタグで記述します。
タグは基本的には「開始タグ」と「終了タグ」をペアで使用します。しかし、中には、終了タグを省略できるもの、終了タグを必要とせず開始タグを単独で使うものもあります。
- タグには大文字と小文字の区別がありません。（ＵＲＬについては大文字・小文字を区別します。）
- タグは入れ子にできる順番が決まっています。ブラウザによっては寛容なものもありますが、各ブラウザで同じ結果が得られるよう配慮が必要です。
- タグには属性を記述できます。属性は開始タグに記述し、「属性=”値”」の形で記述します。（一部を除く）。
<要素名 属性=”値”>～</要素名>
インターネットの世界ではいろいろなタイプ（ソフト・バージョン）のWEBブラウザがあり、それぞれ対応しているタグの種類や数はまちまちです。
WEBブラウザがHTML文書を解釈して表示するときに、使われているタグがそのWEBブラウザの理解できるものでなければ、当然無視してしまうか作者の意図に反した形で表示されてしまいます。種類・バージョンともに、いろいろなWEBブラウザで見ている人がいるインターネット環境では、各タグについて、WEBブラウザの対応の有無が常に問題になっています。
3－3．よく使うタグ
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4. ホームページの使い勝手のよさ
4－1．「WEBユーザビリティ」
WEBサイトの公開は、利用者に適切な情報を伝え、作成者と利用者との間にコミュニケーションを生み出すことが目的です。企画し、設計した内容が利用者の観点で満足のいくものかを確認しましょう。利用者の立場で理解しやすく使いやすい情報のかたちを考えていきます。
WEBユーザビリティ・・・「利用者にとっての使いやすさ」を促すための指針
（１） 理解しやすいオンライン文書
●印刷文書との比較
- コンピュータ画面で「読む」行為は印刷物よりも物理的、精神的制約が多い
- ダイアルアップ接続のインターネット利用者は文書をロードしたり読んだりするためにあまり時間をかけるのを好まない
- 同じリソースでも環境によって表示方法（見え方）が異なる
- ２次元の画面では全体像を把握しにくい
- 大半の利用者は、文書を飛ばし読みして、まず自分にとって必要な部分を探し、読むべき部分が見つかると本文を読む傾向がある
- 情報を素早く入手できるよう、要約、逆三角形文書、簡潔な表現が歓迎される
- 読んでいる文書が信頼できるかどうかは重要な要素である
- 画像は本文テキストと関連づけられていれば歓迎されるが、無意味な画像は嫌われる
- 簡潔な文書は、美辞麗句の多い文書より５割以上ユーザビリティが高い
- 長さを変えなくても客観的な表現にすると、３割以上ユーザビリティが高い
- 飛ばし読みしても情報が得られる文書は、５割以上ユーザビリティが高い
- 上記３要素を併せ持った文書は、そうでない文書の２倍以上ユーザビリティが高い
（２）飛ばし読みしても情報が得られる文書
「飛ばし読み」とは文書にざっと目を走らせて、まず要点をつかもうという読み方を指しています。飛ばし読みしても情報の概略が理解できる文書とは、情報の「構造」が明確に示されている文書にほかなりません。
- 見出し要素が適切に十分に使われている
- 重要な語句が強調されていて把握しやすい
- 要点が箇条書きされている
- パラグラフの先頭にトピックスセンテンスが置かれている
- 適切な画像とキャプションが情報を補強している
（３）画像と情報の理解
画面に表示される要素の中で、利用者は画像よりもテキストに最初に注目する傾向が強いと言います。印刷物では、本文を読まずに図表だけを見る利用者が多いとされていますが、オンライン文書では異なる傾向があります。オンラインでは画像のダウンロードに時間がかかったり、精度が低かったりすることに関係するのでしょう。こうしたことからも重要な内容はテキストできちんとおさえ、画像で本文のイメージを広げたり理解を深めるというバランスで、オンライン文書に適した情報デザインが必要であることがわかります。パンフレットなどをHTML化する場合に、よく注意しておきたいポイントです。
（４）印刷利用の考慮
印刷して利用することを考慮した工夫
- 「ここをクリック」などの装置に依存した表現は避ける
- 白黒印刷を考慮し、「赤字の部分は」など色に依存した表現は避ける
- 印刷用のスタイルシートを別途用意する
- ページを細かく分割している場合は、ページをまとめた印刷バージョン、PDFファイルなども必要に応じて提供する
4－2．「WEBアクセシビリティ」
どんな人でもきちんと利用できるように作られた文書は「アクセシビリティが高い」と言えます。W3CのWAIが障害を持つ人や限定的な環境でも使いやすいページを作成するための指針に関して、議論を進めています。WAIによって勧告されたWeb Content Accessibility Guidelines1.0（＝WEBコンテンツのアクセシビリティのための指針）にすべて対応するのが理想ですが、考え方を知るというだけでも十分意味があります。
WEBアクセシビリティ
「ウェブを利用しているすべての人が、年齢や身体的条件に関係なく、ウェブで提供されている情報に問題なくアクセスし利用できる」ようにするための指針
WAI（＝WEB Accessibility Initiative）
WEBに関する標準の策定を行っているW3C内に設けられた組織で、体の不自由な人も 含めて誰もがWEBを利用できるようすることを目的としています。障害者に配慮したWEBサイトの作成方法などに関する指針を公表しています。
（１） さまざまな利用者
WEBの利用者はとても多様です。そのさまざまな利用者に配慮した、「環境に依存しない情報共有」が重要となります。コンピュータ上でグラフィカルなブラウザを使う利用者以下に、次のようなユーザがWEBを利用しています。
- 文字ベースのブラウザの利用者
- 携帯端末やテレビなどコンピュータ以外の装置からの利用者
- 目が不自由なため、音声合成装置でページを「読み上げ」ている利用者
- 印刷したページを読んでいる利用者
これらのどのような利用者でもきちんと情報を理解できるようにしなければなりません。他の人が自分と同じブラウザを使っているわけではないことを注意し、情報共有を目指しましょう。
5. インターネットにおけるアクセシブルなウェブコンテンツの作成方法に関する指針
5－1．目的
ウェブのコンテンツ制作者（ページの作成者、ページデザイナー）及び作成ツールの開発者向けに、バリアフリーなウェブコンテンツを作成する方法を提示し、障害のある人がインターネットのウェブへ容易にアクセスできるようにすること
5－2．指針
様々な形式に適切に変換できるコンテンツを作成するための指針- 音声や画像で表示されるコンテンツには代替手段を提供すること
- 色の情報だけに依存しないこと
- マークアップ及びスタイルシートは適切に使用すること
- 自然言語の使用について明確にすること
- 適切に変換できるような表を作成すること
- 新しい技術を様々な形式に適切に変換できるページを保証すること
- 時間の経過に伴って変化するコンテンツに対してユーザの制御を保証すること
- ユーザインタフェースのアクセシビリティを保証すること
- 特定の装置（デバイス）に依存しない設計であること
- 臨時の対応策を利用すること
- インターネットの技術標準及び指針を使用すること
理解が可能でナビゲーションが可能なコンテンツを作成するための指針
- 文脈やページの構成等の情報を提供すること
- ナビゲーションの仕組みを明確に提供すること
- ドキュメントは明確かつ簡潔であること