ホームページ(WEBサイト)作成時の注意点  


ドメインの取得やレンタルサーバーとWEBサイトの作成・運用は別のことです。
「ホームページの作り方を教えてください」あるいは、「FTPソフトってなんですか」といったお問い合わせにはお答えできません。
こうしたお問い合わせは本来サポート外ですが、以下、最低限知っておいていただきたいいくつかの注意点を列挙いたします。

   最低限以下のことはご理解を

レンタルサーバーのWEB領域にファイルをFTPした、あるいは既存のサイトをドメイン名(http://ドメイン名)でアクセスできるようにURL転送サービスを設定したが、ホームページが「見えない」「検索されない」「表示が乱れている」などの原因は、大体以下のようなことが原因です。

  1. 指定のディレクトリにファイルをアップロードできていない(WEBサーバー内のディレクトリを確認せずにアップロードしている→当然、表示されません)。
  2. ホームページ作成統合ソフト任せで作っているため、不必要なJava Scriptや意味のないフォント指定タグなどが埋め込まれ、トラブルを増やしている(特にIBMのHomepage Builderはその傾向があります。お問い合わせのあるトラブルサイトのほとんどはIBMのHomepage Builderで作られています)。
  3. 不要なスクリプトが多い反面、絶対に不可欠なBODYの色指定やページタイトルを入れていない。
  4. ブラウザのデフォルト値を絶対視しているため、他の環境での見え方の差を理解していない(例えば表示枠の余白指定や文字の大きさ、文字の書体)。
  5. 画像ファイルを適切にリサイズ、リサンプリングしないままアップロードしている。
  6. 日本語のファイル名をつけている。
  7. ファイル名の大文字・小文字を間違えている。
1.に関しては、必ずWEBサーバー内のディレクトリ構造を確認し、ファイルをアップロードしてください。Homepage Builder など総合ソフトにFTPも任せているかたは、特にご注意ください。最低限、FTP先の初期ディレクトリを指定してください。
2.に関しては、「ソフト任せでソースを確認しないレベルでは、html作成に限界があります」としか言いようがありません。
初心者は動くオブジェクトや音を出すことにすぐ心を奪われますが、これをJava Scriptで実現させているHomepage Builderなどは、結果として予期せぬトラブルをいくつも起こしやすくなります。ひどいものになると、ページの95パーセントがJava Scriptで占められているなどというhtmlもあります。Java Scriptは便利ですが、セキュリティ上、危険な要素も含んでいます。ブラウザのセキュリティ設定によっては、Java Scriptが原因で正しく表示されなかったり、エラーが返ってきたりします。
また、現代では、iPaDやiPhone、アンドロイドマシンなど、様々な環境でWEBが閲覧されていることを考慮してください。Java Scriptを多用するなど、特定の環境に依存するWEBサイト設計は、多くの閲覧者を獲得するにはマイナスです。
3.4.に関しては、まず、最低限度、 <BODY>の後に bgcolor="white" などの背景色指定をすることを忘れないでください。これを忘れると以下のようなことになります。
Internet Explorerでの表示例1
[1]

これはWindows XP+Internet Explorer6で、テスト用ページを表示したものです。
WEBデザイナーがこの環境しか確認していなければ、これでOKとするかもしれません。
しかし、このページはもしかするとこのように見えているのかもしれないのです。

Internet Explorerでの表示例2
[2]

上の[1]と[2]はまったく同じhtml内容のページを、どちらもWindowsのInternet Explorer6で表示したものです。htmlファイルが同一なのですから、違いが出た要因はブラウザやOSの環境設定にあります。
種を明かせば、まず[1]ではブラウザの背景色がたまたま白になっていますが、[2]では「Windowsの設定に任せる」となっています。そのWindowsの環境設定で、無地背景色が白以外になっている(この場合は薄い緑色)わけです。
Windowsの環境設定で、背景色を白以外に指定しているコンピュータはたくさん存在します。(背景色が白だと、長時間ディスプレイを見続けたとき目が疲労しやすいため、上級者ほど薄いグレーやパステルカラーなど、白以外の、目に優しい色に設定しています。)
また、[1]ではブラウザ(Internet Explorer)の設定で、文字の大きさの設定が「中」になっていますが、[2]では「大」に設定されています。そのため表示されるフォントの大きさが違ってきて、「中央揃え」のcenterタグでの整形が見苦しくなってしまいました。
技術と知識のあるWEBデザイナーならば、当然こうした基本的なことは理解していますから、背景色を白にしたければ、<body>タグの次に必ず bgcolor="white" というタグを挿入し、[2]のようなケースを避けます。また、不用意に<center>タグを使った文字のレイアウトはしません。

5. はWEBページデザインでは極めて基本的なことですが、意外と理解していないかたが多いようです。
そもそも、ディスプレイに表示する画像と印刷する画像では、解像度設定がまったく違ってきます。きれいに印刷するためには200dpi以上の解像度が推奨されていますが、WEBではそのような解像度は意味がありません。OSとディスプレイによって使える解像度が限定されているからです。
ディスプレイの解像度はdpiではなく、ドット(ピクセル)の数で表されます。一般的には横が1024×縦768(15インチ液晶や17インチCRTの標準)、あるいは1280×1024(17インチ液晶)程度ですが、これを無理矢理dpi値で表せば、せいぜい72〜96dpi程度の解像度です。
それ以上の解像度にしても、ディスプレイに表示した場合、表示しきれないほど巨大なものになるか、自動的に縮小表示されるためにかえって汚くなるだけです。もちろん、WEBサーバー内のディスク容量や通信データ量を浪費しますし、画像の表示速度も遅くなります。
デジカメで撮影した画像をそのまま使うなどはもってのほかです。まずは画像解像度とは何かを知ってください。

6.7. も基本的なことですが、無頓着なかたが多いようです。WEBサーバーはUNIX系のOSを使っていることが多いため、WindowsやMacとはファイル名の約束事が違います。
まず、トラブルを避けるため、ASCII文字(欧文と数字、限られた記号のみ)以外の文字でファイル名をつけるのは避けなければなりません。日本語名のファイルをそのままアップロードするなどというのは問題外です。
また、UNIXではファイル名の大文字・小文字を厳然と区別します。Abc.jpg と ABC.JPG は、WindowsやMacでは同じものとして処理されますが、UNIXでは別のファイルとして認識されます。トラブルを避けるためにも、WEBページに使うファイル名はすべて小文字にするなど、最初から自分なりのルールを決めておきましょう。

   他の人はまったく「別のもの」を見ているかもしれない

ブラウザの天地・左右の余白(マージン)も、ブラウザによってまちまちであることを忘れてはいけません。余白ができてはみっともないレイアウトなどでは、必ずマージン指定をします。
htmlの<body>要素には、margintop marginbottom marginleft marginright という天地左右の空きを指定するタグがあります。これを指定しないと、天地左右の空きはブラウザのデフォルト値任せになってしまいます。
ちなみに、Internet Explorerでは天地15ピクセル、左右10ピクセルとなっています。Netscape Navigatorではそれぞれ8ピクセル、Operaではmarginではなくpaddingとして8ピクセルとなっています。
WEBデザインでは、天地左右に空きができてしまっては成立しないもの(背景画像などで隙間なく埋め込みをしたい場合など)がたくさんありますから、デフォルトの余白を取りたくないため margin=0 と指定することが多いのですが、逆に余白をもっととりたいなどという場合もあるでしょう。
いずれにせよ、<BODY>の中にmargin要素を指定しておくことが重要です。

Internet Explorerでデフォルト任せにした場合

margin=0を指定した場合


上はmarginを指定しないで表示した場合。画像もテキストも天地左右にブラウザのデフォルト値による余白がつく。
下はmargin=0を<BODY>要素に指定した場合。天地左右の余白はなくなる。余白がないと見苦しい場合もあれば、逆に、背景に画像を入れてレイアウトする場合などは余白ができてしまうとみっともないので、状況に合わせて指定する必要がある。


スタンダードコースのフレーム転送では、余白をゼロに指定したフレームが使われていますので、そこに読み込まれた元のHTMLは、ブラウザのデフォルト値が解除されます。つまり、Internet Explorerではデフォルトで天地15ピクセル、左右10ピクセルの余白があったものが、それぞれ余白ゼロになります。
そのため「レイアウトがずれた」と言って怒るかたがいらっしゃいますが、それはもともと天地左右のマージンを「指定していなかった」ことによるものです。Internet Explorerのデフォルト値を生かしたければ、

<BODY topmargin="15" bottommargin="15" leftmargin="10" rightmargin="10" bgcolor="white" ......>

……というように、きちんとマージン指定をしてください。こうすれば他のブラウザでも同じ余白で表示されます(正確にはブラウザによってピクセル値の解釈が違ったり、WindowsとMacとで微妙に違ったりはしますが、それはいたしかたないことです)。

スタイルシートでも、以下のような指定が有効です。

margin・・・・・・・・・・・・・・・・・・・・・・・マージンに関する指定をまとめて行う
margin-top・・・・・・・・・・・・・・・・・・・上マージンを指定する
margin-bottom・・・・・・・・・・・・・・・下マージンを指定する
margin-left・・・・・・・・・・・・・・・・・・・左マージンを指定する
margin-right・・・・・・・・・・・・・・・・・・右マージンを指定する
padding・・・・・・・・・・・・・・・・・・・・・・パディングに関する指定をまとめて行う
padding-top・・・・・・・・・・・・・・・・・・上パディングを指定する
padding-bottom・・・・・・・・・・・・・・下パディングを指定する
padding-left・・・・・・・・・・・・・・・・・・左パディングを指定する
padding-right・・・・・・・・・・・・・・・・・右パディングを指定する

WEBサイト(ホームページ)は「印刷物」のように固定された情報ではありません。
現在、最も多い環境はWindows(98SE以降)+Internet Explorer(バージョン5.5以降)という環境でしょうが、その中でも、Windowsの環境設定やInternet Explorerの環境設定によって、同じWEBページでもまったく見え方が違ってきます。

次の例は、上のバラの花のページと同じhtmlを、何かと問題の多いことで有名だったNetscape Navigator4.Xで表示させた例です。現在ではこのブラウザでWEBを見ている人はほとんどいないでしょうが、ブラウザによる見え方の違いを説明するために取り上げます。

Netscape Navigator4.7での表示例
[3]

画像と文字が重なって、惨憺たる状態ですね。
これは、文字を読みやすくするために行間の空きをスタイルシートで指定しているところに画像を入れた場合に起きるトラブルです。Internet Explorerでは問題なく表示されますが、Netscape Navigator4.Xではこのように悲惨なことになりました。現在はNetscape NavigatorはFirefoxへと移行し、Firefoxユーザーが日々増えています。Firefoxは非常に優れたブラウザで、旧Netscape Navigatorのような表示の不具合はほとんど見られませんが、それでもInternet Explorerとの見え方の極端な差が出ることがあります。
WEBデザイナーは、最低でもInternet Explorerの他にFirefoxでの見え方の検証をする必要があります。

Netscape NavigatorやFirefoxは、文字の大きさは無制限に変更できますが、ブラウザ側で文字表示を小さくするとさらに悲惨なことになります。
Netscape Navigator4.7での表示例2
[4]

本文は画像の下に隠れてまったく見えなくなり、バラの画像もほとんどが切り取られ、消えてしまっていますね。スタイルシートで行間指定をしているだけなのですが、Netscape Navigator4.xではこうなってしまうのです。
実際、こういう状態になっているWEBサイトはたくさんあります。作っている人はInternet Explorerでしか見ていないので気がつかないのです。初心者のサイトではなく、プロが作っているであろう大企業の商用サイトなどにも、こうしたお粗末なものがかなりあるのが実情です。そのほとんどはIBMのHomepage Builderなどの統合ソフトで作成されており、製作者がHTMLのソースを確認していないと思われます。
次に、Operaで見てみましょう。

Operaで見た例。文字化けしている。
[5]

今度は文字化けしていますね。
別にOperaが特に文字化けするというわけではないのですが、htmlの<head>部分に正しく文字コード指定記述をしていないと、このように文字化けすることもあります。
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS"> 
 のように記述します。
特に日本語EUCで記述してあるページは文字化けしやすいのですが、<HEAD>内に、<!--入口 -->という1行を入れておくと文字化けするケースをかなり減らせます(裏技的なものですが、説明は面倒なので省略)。
新スタンダードコースのURLフレーム転送では、フレームの生成をレジストラのロボットに任せているため、使用言語指定まではできません。そのため、ブラウザ環境によってはタイトル文字などが文字化けする可能性もあります。

<head>といえば、検索エンジン用のメタネームも<head>内に一応入れておいたほうがいいです。

<meta name="robots" content="index,follow">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,">
の3行は入れておきましょう。

また、一口に検索エンジンと言っても、GoogleとYahoo!では検索のシステム(採用している理論)が違うので、どちらにも有効な対策をすることは困難です。Googleは本来、<head>よりもむしろ<body>の中身を重視する傾向があるので、画像だけで構成された(タイトル文字なども見栄えのよいGIFにしている)ページは一向にヒットしなかったりします。

「フレーム転送にした途端、Googleでのヒット順位が下がった」というお客様がときどきいらっしゃいます。元々の転送先URLの順位が下がったのであれば、それは別の要因です。
ホームページは毎日万単位で増えており、検索順位競争は熾烈を極めています。工夫せず、放っておけば、次第に順位が下がるのは当然なのです。
また、最近では新規登録が間に合わず、Googleなども登録申請後、実際に拾われるまで2か月は待たされます。 サイトを開設すれば次の日からすぐGoogleで検索できるなどと思うのは大変な間違いです。特に通販サイトなどでは、立ち上げから認知まで、最低でも半年は余裕を見た計画を立てなければなりません。ネットショップをスタートさせて、すぐに注文があるなどということはありえません。
大手検索エンジンはほとんどGoogleかYahoo!に吸収されてしまいました。どちらも検索エンジンにからめた広告料システムを導入していますので、WEBの世界も金次第の「検索エンジン暗黒時代」が到来しています。かつてのように、検索エンジン対策だけでヒット率が上がることは難しくなっています。

   WEBページは「印刷物」ではない   

WEBページと印刷物を混同されているかたがたくさんいらっしゃいます。
例えばワードファイルは印刷をすることを前提にしています。誰が見ても同じものに見えます。
「どこそこの改行位置を〜にして」「文字を気持ち大きく(小さく)」「背景色をほんの少し明るく」などなど、細かな指示も意味があります。
しかし、WEBページではそうした校正が不可能なことも多々あります。
上記のような「環境による見え方の差」がどうしても生じるからです。
ディスプレイの解像度がどうなっているのかがまず大きな問題です。古いノートパソコンやモバイルPCでは、640×480という解像度が使われていることがあります。最近の高級機では1280×1024が珍しくありません。この2つの環境では、表示面積は実に4倍以上の違いになります。
横幅1280に合わせてレイアウトすれば、横幅640のディスプレイでは半分しか見えませんから、面倒な横スクロールバーが出っぱなしになります。とても読めたものではありません。
逆に、小さなディスプレイに合わせて固定的なレイアウトをすれば、解像度の高いディスプレイでは異様な余白が出て、文字は小さくなり、いらいらさせられます。
色調は、ディスプレイの調整具合に依存しますし、WindowsとMacでも相当「色味」が違います。
文字の大きさは、すでに説明しましたようにブラウザの設定に依存しますし、ブラウザ側で文字の大きさを変更できないようにポイントやピクセル値で指定したとしても、WindowsとMacでは使っているフォントそのものが違うので、相当な差があります。同じWindowsでも、Internet ExplorerとFirefoxでは、例えば13ピクセルという文字の大きさの解釈が違い、一回り違って見えます。ブラウザで標準書体を明朝系にしているかゴシック系にしているかでも違います。無理矢理フォント指定をしたために、ブラウザが書体をわざわざ欧文書体にして表示し、文字化けすることもあります。
こうしたトラブルの原因は山のようにあり、WEBデザイナーたちは日々そうしたトラブルに遭遇し、対処する方法を学んでいます。当然、数をこなさなければ身につきません。見た目だけでなく、本当に「使える」WEBデザインは、短期間に習得できるようなものではありません。
Homepage BuilderやFrontPageを買ってきて1週間で使い方を覚え、一見かっこいいサイトをアップしたつもりでも、他の環境で見れば悲惨な画面になっているということがよくあります。また、ホームページ作成ソフトに任せたhtmlソースは汚く、検索エンジン対策も無視されています。問題のあるサイトの多くは、こうしたホームページ作成ソフトで作られています。(ソースを見ればすぐ分かります。 GENERATOR= と、ソフトが自己主張をしていますから。)

ホームページ作成ソフトを使うなということではありません。使い方次第では非常に便利なものです。
しかし、ホームページ作成ソフトを使う場合でも、最終的にはhtmlのソースで細部を確認することは必須ですし、その際、htmlタグやスタイルシートの意味をある程度理解できていなければ、トラブルが分かったとき、修正ができません。特にHomepage Builderなどが吐き出すHTMLソースは汚いので、レイアウトの乱れが分かった場合、ソースレベルで修正するのは困難です。そんな苦労をするくらいなら最初からHTMLをテキストエディタ上で編集したほうがずっと早いでしょう。
ホームページ作成を趣味の一環としてとらえ、失敗も楽しさのうちと考えながら勉強していくのは大変結構なことです。ネット上にはWEBサイト作成のヒントがたくさんありますので参考になさってみてください。
しかし、短時間で信頼性を得て、確実な成果を上げなければならない商用サイトを、WEBサイト制作経験ゼロから独力で立ち上げるのは難しい(ほとんど無理)ということも言えます。

また、WEBデザインとWEBサーバーの管理はまったく別のことです。WEBデザインに長けたデザイナーがサーバーの管理ができるわけではありません。ファイルのアップロードを間違えて、重要なディレクトリを消してしまってサーバーの機能を停止させてしまうといった重大なトラブルを引き起こすことはよくあります。
FTP情報を盗まれて、サーバーを乗っ取られた、という事態も起きています。そうした部分でのセキュリティ面も、十分にご検討ください。
domain-get.com のTOPへ   t-kobo.com のTOPへ