また、トップページからこのページまでのアクセスの経路を示す情報を提供しています。この情報は、ページの先頭付近と終端付近で合計二度提供されていますので、この情報が二度目に出現した箇所を、ページの終端と捉えていただくことができます。一度目の出現はこのご案内の直後です。すなわち、次のような形式で提供しています。以上で、ご案内を終わります。

HOME ＞ PC関連 ＞ ウェブサイト作成関連 ＞ ウェブサイト作成の際に確認すべき事項

ウェブサイト作成の際に確認すべき事項

ウェブサイトを(新規に)作成する場合に、気に留めておくとよいことをまとめておきます。この文書は HTML や CSS の文法解説ではありません。

ウェブサイトの作成・運営は、正しい文法に従えば、それほどの手間にはなりません。W3C が「製作者の負担の軽減」を(本当に)意識しているのか、あるいはどの程度意識しているのかは分かりませんが、偶然にせよ必然にせよ、正しい文法による HTML・CSS が、作成の労力を大幅に軽減してくれることは間違いありません。

目次

この文書の発生経緯

私はこのサイト(mtblue.org)を作る以前に、2つのウェブサイト作成を経験しました。1つめのサイトでは "<font size='x'>" や "<b>" 、あるいは "<center>" などを多用していました。しばらくしてからスタイルシートという技術を知り、2つめのサイトで導入したのですが、相変わらず "<span style='xxx'>" や "class='red'" などと書いており、本来目指すべきである「論理構造と装飾の完全な分離」は、ここでも実現できませんでした。気づいた頃には、既に作成してしまった HTML 文書が膨大となり、とてもすべてを書き直す気にはなれませんでした。かなり無茶なマークアップをしたため、スクリプト等によって一括処理をさせることもままならない、悲惨な状況でした。

ウェブサイトの基礎的なデザイン(必ずしも視覚的なもののみを指しません)は、サイト構築の早い段階で固まりますから、サイトそのものがまだ存在していないうちに、充分な計画を立てることが重要です。その際に、マニュアル様のものがあると便利であると考え、この文書を作成しました。が、直接背中を押したのは、最近になって友人たちが相次いでウェブサイトを構築しようと言い出したことかも知れません。この文書には経験と主観による記述が多数ありますことを、あらかじめご承知おきください。

目次へ戻る(C)

してはいけないことを書き出す

製作物の品質向上のための態度として、長所を伸ばす方法と、短所を削る方法があります。HTML という規格そのものがかなり単純明快なものであることを考えると、短所を削っていけば、自然、利用しやすいウェブページを作成することができると言えます。また、自分が普段閲覧しているウェブサイトを思い返してみても、不便であると感じた点の方が、そうでない点よりも、強く印象に残っているものです。これらの点を書き出し、ページ作成の際に避けていくようにすれば、少なくとも、「利用しづらくないページ」の域には達することができます。

HTML・CSS の文法違反
避けなければなりません。
HTML・CSS の文法は、W3C によって検討・策定されています。法的な拘束力はありませんが、これに従って文書を記述すれば、多くの恩恵を受けることができます。例えば、ほとんどすべてのブラウザで閲覧が可能になる・文書の論理構造を明確にできる・新しい規格が登場した場合にも移行が容易である・作成や再構築の際の労力が大幅に軽減される・その道の人から一目おかれる、などです。極論すれば、「"<font>" タグは存在しないものと思え」ということです。なお、ある仕様を W3C が勧告("Recommendation")してから、それを実際に導入するに足る状況(ブラウザが実装・対応する)になるまでの期間は、「2年」というのが定説(『ウェブ・ユーザビリティ』, Jakob Nielsen, 2000)のようです。重要なのは「正しい文法を用いる」ことであって、「常に最新の規格を用いる」ことではない点に注意してください。
日本語の文法違反
避けなければなりません。
守らなければならないのは、人工言語の文法だけではありません。日本語(外国語を使いたいのならばそれらも同様)の文法が不適切である場合、文書の内容が正しく伝達されない危険があります。言葉は、情報伝達のための最大にして唯一の手段です。「伝わりさえすればよい」のではなく、「伝わらなければならない」と捉えるべきです。閲覧者も読解のための努力を惜しむべきではありませんが、まずは、作成者が謙虚になって正しい文法を用いることが肝要です。わけの分からない言葉遣いのサイトで解説されている内容を、手放しで信用することができましょうか。様々の議論はあるようですが、名詞が形容詞を修飾することはできませんし、「必ずしも」には「ない」が呼応します。細かい例外を重箱の隅をつつくように列挙する前に、大前提を確認しましょう。我々に保障されているのは、表現の自由であって破格の自由ではありません。
不要な画像の使用
避けなければなりません。
文字で表現することのできる情報を、画像によって表示するべきではありません。閲覧者は画像を読み込まないようにブラウザの設定を変更しているかも知れませんし、そもそも画像表示機能のないブラウザを使用しているかも知れません。何より、転送量を無用に増大させ、種々の不利益を生む原因になります。過去とは比べものにならないくらいに広帯域接続が一般にも普及しましたが、ある閲覧者が、その帯域のすべてを単一のウェブページの表示に費やしてくれるわけではありません。「ウェブページのサイズは小さいほどよい」、今も昔も、変わらぬ真理です。本当に画像の表示が必要になる場面は、グラフ・スクリーンショット・写真・イラスト等を公開する場合くらいのものです。
ハイパーリンクの文字列が内容を示していない
避けなければなりません。
「ここ」などにアンカーが設定されている場合、リンク先を見てみないと内容を判断することができません。特に、音声読み上げブラウザなどでは、その弊害が顕著です。また、ウェブページは常に印刷される可能性をはらんでいることも留意すべきです。印刷された文書に「ここをクリック」などと書かれていても、そのリンク先が何なのか、見当もつきません。きちんと、リンク先の内容を端的に示した文字列を指定すべきです。例えば、「このサイトの作者にメッセージを送る」などです。
色に依存している
避けなければなりません。
「赤色で示される部分は重要であることを意味します」と言われても、「赤色」が表現できない環境では何が重要なのか分かりません。音では「赤」を表現できませんし、モノクロのレーザープリンタや印刷機で印刷される可能性も考慮に入れるべきです。
執拗に海外サイトへのハイパーリンクを設定する
避けるべきです。
主に企業のサイトへのリンクについて、日本語で書かれたページが存在するのにも関わらず、本社だかなんだか知りませんが、わざわざ英語で書かれたサイトの方にリンクを設定するのはおかしな話です。情報が極度に新しい、あるいは特殊である、などの理由によって、英語ページ(本社ページ)でしか閲覧できないというのなら納得もできるのですが、大半はそうではないようです。これらは、いわゆるデッドリンクと大差ありません。日本人の TOEIC の点数の低さを、少しは鑑みるべきです。自力で誤訳した文書よりも、見識のある他人が訳した文書の方が、信頼できるというものです。
外国語の乱用
避けるべきです。
英語ができるのは自分だけだと思った方がよいでしょう。筆記体になっていたりすべて大文字になっていたりすると、それがどんなに簡単な英文・単語であっても読む気をなくします。同じ単語であっても、小文字で書かれた場合と大文字で書かれた場合では、読む際の速度に 10% の差が出てくるそうです(『ウェブ・ユーザビリティ』, Jakob Nielsen, 2000)。英語を母語としない我々日本人の場合、さらに深刻な「読みづらさ」を被るであろうことは、想像に難くありません。ましてフランス語やドイツ語でメニューを構築するのは論外です。わけが分かりません。そして多くの閲覧者の行動は、辞書を参照することではなく、ブラウザの「戻る」ボタンをクリックすることです。
"Sorry, this page is Japanese only."
「英語が書けるけれども書かない」という意味なのでしょうか。それとも、「私の日本語は完璧である」という意味なのでしょうか。そもそも誰に向けたメッセージなのでしょうか。謎です。この文字列を検索キーワードにして Google にて検索をかけてみたところ、2003年10月5日現在、約43,800件の該当がありました(日本語のサイトに限定)。 スペルミスの"sory" でさえ、141件もの該当がありました。 悲しいことです。どういうわけか、英語のページから "sorry, this page is english only" を検索しても、66件しか該当しませんでした。 悲しいことです。
そのページで使用される言語は、そもそも "<html xml:lang='ja'>" と記述すれば、充分明示したことになります。わざわざ <body> 要素内に記述する必要はありません。
閲覧者に無用な努力を強いる
避けなければなりません。
閲覧者は、あるウェブページを閲覧するために常に全力を傾けるわけではありません。仕事が終わって疲れている状態かも知れませんし、多くのページの中から有用なページを探すために流し読みをしているかも知れません。とかく時間に追われているかも知れません。冗長な文書よりも簡潔な文書の方が、どのような閲覧者にとっても都合がよいはずです。また、使用する色も、極力少なくすべきです。例えば、赤は最重要事項、青は重要事項、緑は補足事項、などと言われても、わざわざ覚える気にはならないものです。直感的に理解のできる、明快な表現・ナビゲーション・サイト構造を提供しましょう。

以上の点について、参考にするとよいウェブサイトを紹介します。

目次へ戻る(C)

サイトで用いるすべてのタグを書き出す

HTML の各バージョンで様々なタグが規定され、それらは増加傾向にありますが、ぶっちゃけた話、通常の文書の書き方で使われるタグは限られているものです。それらをすべて含んだ最小限のモデルページを作成し、そのページに対してスタイルシートを適用することで、サイトデザインを効率的に洗練できます。

文書そのものがもっている要素

そのサイト・文書が、何かの操作方法を説明するものなのか、調査・研究結果を発表するものなのか、テーブルを主に使用した一覧表なのか、あるいは日記なのか、といった形態によって、いくらかの構造上の差が出てくることは自明です。しかし、およそほとんどすべての文書は、見出しをもち、段落(本文)をもち、文責表示をもちます。タグで示すと、それぞれ、"<h1>"〜"<h6>" 、"<p>" 、"<address>" です。

"<address>" タグは、正しくは「連絡先」を示すタグであることに注意してください。しかし現実的に、連絡先は文書の作成者を明示し、そして実質的に、これは著作権表示としての機能を兼ねています。

ハイパーテキスト固有の要素

紙媒体の文書(テキスト)ではない、ハイパーテキストのハイパーテキストたる所以は、ハイパーリンク機能にあります。タグで示すと、"<a>" です。

必須ではないがほぼ確実に用いることになる要素

画像・強調・引用と出典・箇条書き・略語の説明・用語の定義とその説明などです。タグで示すと、それぞれ、"<img>" 、"<em>"・"<strong>" 、"<blockquote>" と "<cite>" 、"<ul>"・"<ol>" と "<li>" 、"<abbr>"・"<acronym>" 、"<dl>" と "<dt>" と "<dd>" です。

まとめ

以上のタグを並べてみると、

と、わずか10種類22個のタグを用いるだけで、大抵の内容は表現・伝達できるということが分かります。あとはこれらのタグが1度以上使用されているモデルページを作成し、外部スタイルシートを適用して視覚的デザインを練り上げてゆけばよいのです。

例えばこのサイトのほとんどのページは、「見出し」・「段落」・「文責表示」の3つの要素のみで構成されています。

目次へ戻る(C)

HOME ＞ PC関連 ＞ ウェブサイト作成関連 ＞ ウェブサイト作成の際に確認すべき事項

この文書について

URI
【 http://www.mtblue.org/pc/web/ 】
この文書へは、トップページ、PC関連、ウェブサイト作成関連、とリンクをたどることで到達できます。
最終改訂日
【 2011年11月23日 (水) 】
ご連絡・お問い合わせ先
青山 までお願いします。次の二通りの方法がご利用いただけます。
【 http://www.mtblue.org/contact/ 】 (サイト上のメールフォームから連絡する)
【 webmaster@mtblue.org 】 (通常の電子メールで連絡する)
© 2000-2025 AOYAMA Naoki, mtblue.org, All Rights and Responsibilities Reserved.