ホームページ制作-実践編

初めてホームページを制作する際に役に立つサイトおよびいくつかのテクニックをまとめてみました。 素材やHTMLサンプルの使用権については、それぞれのホームページを参照してください。 (このページの内容は、予告なしに変更されます。) 問い合わせはこちらまで

★ホームページ制作の概要
 
初めてホームページを作る人のために、対話型で簡単に制作できるツールを準備しているプロバイダーも多い。これは、専門知識なしに制作できてしまうので、初心者にとってはとても有益でありがたいことです。しかし、メンテナンスや拡張を考えると、最低限必要な知識は習得しておく必要があります。少なくとも、データのアップデート方法は習得しておくべきですし、理解できない事項やトラブルが発生した時、何を調べれば良いのか、誰に問い合わせれば良いのかぐらいは把握しておいてください。思い通りに情報が掲載できなかったり、更新ができなかったりすると、せっかく訪問してくれた人を失望させることになってしまいます。

以下に、筆者が実施している制作のステップごとにその概要を記述します。基本的なことですから、完成後でも目を通して理解していただくようおすすめいたします。必ずしもこのような順序で制作する必要はありません。(伝統的なシステム開発方法を基本にしており「今風」ではありません。)市販の文献などを利用している方はその内容を遵守してください。「走りながら考える」ことも重要ですし、とりあえずプロトタイプとして作ってみた後、詳細な部分を修正したり付け加えるという方法もあります。(最近のHP制作は、プロトタイプを作って全体の操作イメージを確認しながらデザインを固めていく方式が中心となっています。)
また、後々、変更や拡張が容易に行えるよう、各ステップの決定事項は文書化(電子化)するよう心がけましょう。
 
●ホームページ制作のステップ

1.基本デザイン
2.詳細デザイン
3.データの準備
4.HTML文書作成
5.CGIプログラム開発
6.テスト&レビュー
7.公開
8.更新&拡張
 
●基本デザイン

このステップでは、制作するホームページのイメージを創造し掲載するコンテンツを決定します。このサイトの「顔」を作るという観点からとても重要です。イメージが湧かないときは、同様な目的を持つ他のホームページを検索してみてください。ネットサーフィンしているうちに、こんなこともできるのか、こういう構成もあるのか、というようにイメージが広がってきます。この段階で、さしさわりのない範囲で気に入ったページをダウンロードし研究してみるのも有効です。次の項目を決めてください。

0.ターゲット: 性別、年代、職業、職種 など
1.目的: プライベートな情報配信、ビジネスのプロモーション、アンケートデータ収集 など
2.優位性: 他のサイトに無い情報、他のサイトより優れている情報 など
3.コンテンツ: 各ページの内容、著作権表示 など
4.制作スケジュール: 各ページの制作期間、完成時期、公開時期 など
5.制作方法: 完全自作、プロバイダーの開発ツール利用、その他の無料開発ツール利用、委託 など
6.開発ツール: ビルダー、ブラウザー、FTP、素材、その他のライブラリー など
 
●詳細デザイン

このステップでは、サイトとホームページの全ての仕様を決めます。つまり、サイト設計とURL設計を完了します。どのページのどこにどの情報をどんな形式で盛り込むか、いつ更新するかなど、可能な限り詳細に落としてください。行き詰まったら可能な範囲でサンプルページを作成してみることをおすすめします。(通常、インデックスページをプロトタイピングして作成の難易度、容量などを確認してみるとよくわかります。) 次のような項目を決めてください。順序にこだわらず、分かりやすいものからとりかかってみてください。実際には、ホームページ(スタートページ)は、他のページの後で制作するのがよい。

1.ファイル・フォルダ構成: 階層構造、どのフォルダ(ディレクトリ)にどのファイルを配置するかなど
2.各ページの設計: URL、フレーム、データ(テキスト・画像など)の配置、プロパティ(色・フォントなど)、フォーム、ハイパーリンクなど
3.データ設計: 使用するデータのタイプ・大きさ・長さ・属性(テキスト、画像、認証ページではID、パスワードなども)
4.サンプルページの作成: HTMLの概略の理解
5.ワークロード見積: 各ページの難易度を考慮して制作時間とスケジュールの再設定
 
●データの準備

このステップでは、必要なあらゆるデータを作成します。本文(テキスト)、画像、ロゴ、ハイパーリンクのURL、コンテンツによっては映像や音声も準備しなければなりません。この作業はHTML文書作成と並行して行われるかもしれませんし、その前に行われる場合もあります。例えば、HTML文書に挿入するファイル名が決まっている場合、HTML文書は作成できますが、画像の大きさなどは実ファイルを挿入してみないと正確にはわかりません。早期にデータをそろえるとHTML文書の編集時間が短縮できます。次のデータを準備します。

1.掲載するデータファイル: テキスト(txt,docなど)、画像(gif,jpgなど)、サウンド(rm,mp3など)など
2.必要な構成部品: ロゴ、ボタン、バナー、背景画像など
3.その他の装飾部品: FLASH、GIF Animation など
 
●HTML文書作成

このステップでは、ビルダーソフトを使って各ページ(HTML文書)を作ります。文書といってもタグ付きの簡易言語によるプログラム作成です。(記述するステートメントは、ブラウザでソースを表示させればわかります。) 高機能のビルダーを使用すればプログラムであることを意識せずHTML文書を作成できます。しかし、ビルダーも万能ではありませんので、メモ帳や他のテキストエディターで文書を開き、直接プログラムのステートメントを入力しなければならない場合もあります。また、簡単なHTML文書は、HTML形式をサポートするワープロソフトでも作成できますが、できれば初めから信頼できるビルダーソフトを決めて使い込んで行くのが望ましいと思います。次の作業を行います。

1.ビルダーによる作成: ほとんどのHTMLステートメントをGUIにより作成
2.エディターにより編集: ビルダーでサポートされないタグやコメントの作成、ステートメントをレビューしながら作成

大量のテキストは、ワープロなど使い慣れた他のエディターで作成し、テキストファイルまたはHTMLファイルとして保存して挿入したり、カット&ペースト、ドラッグ&ドロップで挿入する方が容易かもしれません。
 
●CGIプログラム開発

このステップでは、HTML文書だけでは実現できない機能(掲示板、チャット、フォーラム、各種申し込みなど)を、CGIプログラムを使って開発します。サイトで訪問者との双方向のコミュニケーションを実現するためにはCGIプログラムが必ずといってよい程、必要になります。CGIは、簡単なものでも通常のHTML文書の10倍以上の制作工数になります。さらに、Perl言語の知識を持ち、サーバー側のプログラミング環境にも精通していなくてはなりません。
しかし、最近ではネット上のサイトやインターネット関連の書籍の付録CD-ROMなどで、フリーのサンプルプログラムが入手できます。著作権・使用条件に問題が無ければ、専門知識なしでも、それらを利用できるかもしれません。また、大手のプロバイダはよく使われるタイプのCGIプログラムを、あらかじめ提供している場合が多い。(掲示板などは、HTML文書に数行のステートメントを貼り付けるだけで使えるようになっている。) 訪問者の反応を把握するためにも、是非最初から提供して欲しい。
●その他のプログラム開発

このステップでは、JAVAスクリプト、JAVAアプレット、スタイルシート、FLASH などのステートメントを作成し、HTML文書に挿入します。これらのステートメントの作成は、ビギナーには敷居が高いかもしれませんが、最近は、さまざまなサンプルが提供されているので、次のような特性を理解した上で活用してください。

1.ブラウザにより対応が異なる。
2.組み込んだページは重くなる。
3.HTMLビルダーでは、開発できないし、デバックできない。

これらは、あくまでスタンダードなHTML文書の補足として考えるべきである。というのは、動く装飾品の開発にハマってしまい、肝心のHTMLの基本がおろそかになってしまうことがある。こうした傾向は、特に経験の浅いエンジニアやプログラマーによく見られる。
●テスト&レビュー

このステップでは、完成したファイルをFTPで転送し、実際に稼動させてみます。できれば、回線速度など稼働環境の異なる複数の人にモニターになってもらい、感想や意見を送ってもらいましょう。意外な不具合やパソコンの違いから生ずる予期せぬクレームがあるかもしれません。ブラウザの種類やディスプレィの解像度によっても異なる場合があります。チェック・ポイントは次のとおりです。

1.パフォーマンスの測定: 表示速度(xx秒)、ボトルネックのページ・画像 など
2.不具合の発見: アドレス・リンク先の間違い、HTML記述の間違い、音切れ など
3.変な表現の発見: ブラウザ・フォント・リゾリューション・PCの種類による違い など
4.特殊効果の確認: 個々の特殊効果(GIFアニメ、マーキーなど)が効いているか など
5.全体の印象と各ページの印象: 本来の目的に応じた効果を期待できるかどうか など

レビュー結果によっては、例えば、画像の一部を別ページに挿入する、フォントサイズを変えるなど、デザインのステップに戻り、修正しなければならない場合もあるかもしれません。根気よく調整を繰返してください。
 
●公開

このステップでは、完成したWebページを一般公開します。すでにサーバー上で稼動しているはずなので、開設したことをさまざまな手段を使って、特定の、あるいは不特定多数の人に知らせる、というプル型、プッシュ型のプロモーションを行うことを意味します。次のような方法があります。

1.特定者への通知: メール、メーリングリスト、年賀状・暑中見舞い など
2.不特定者への通知: 各種サーチエンジン、掲示板、フォーラムへの登録、相互リンク依頼 など
 
●更新&拡張

このステップでは、開設したサイトを新鮮な状態に保つための施策を検討します。サイトに掲載された情報が何も変わらないことがわかると、訪問者が再度訪れることはまれです。常に魅力ある情報が更新されていれば、人々は定期的に訪れるようになります。また、HTML文書が完成し公開すると、次に、どんな人が訪問してくれたのか、どのくらいアクセスがあったのかといった管理情報も必要になると思います。情報の一方的な配信だけでは、HPの意義も半減してしまいます。目的に応じて必要な管理情報が収集できるよう機能を充実させましょう。さらに、面倒なファイルの更新についても迅速に行える手段を検討してみましょう。

1.メンテナンス・プロシージャの策定: バックアップやアップデートの方法の検討、ファイル・ディレクトリの見直し など
2.拡張計画の策定: 追加ページ・変更ページの検討、補助機能(統計、アンケートなど)の準備 など

ここから、「基本デザイン」に戻る。

★ホームページ制作のためのおすすめホームページ

ずばり!見てもらえるホームページの作り方

W3C Web Style Sheets
MA-FA(エム・エー・ファクトリー) サーフレスキュー【Web裏技】
G-TOOL CGI/Perlハンドブック
ホームページ作成のためのColoring Room CGI ROOM
ZSPC Java-Da!
PLUG-IN CENTER JavaApplet
Doctor-HTML ビデオが流れるホームページの作り方 
HTML文書作成マニュアル もっとすごいホームページの作り方
色見本の館 サーチエジン登録ガイド
一撃必殺 JavaScript日本語リファレンス サーチエンジン無料一括登録

★制作のテクニック
●画像の最適化

○Web用の修正

Webサイトで扱う画像は、低解像度(72dpi または 96dpi)、かつ実際の表示サイズに合わせてリサイズし、減量するのが普通である。画像をリサイズする方法は、バイキュービック法、バイリニア法、ニアレストネイバー法の3種類である。バイキュービック法とバイリニア法は、階調が滑らかになるように中間のピクセルを作成して補正する。このうち、バイキュービック法は、エッジ部分をより強調する特徴がある。しかし、リサイズした画像はどうしてもボケた感じになるため、適度なアンシャープマスク(シャープネス)をかけて補正してやる必要がある。

○軽量化

限られたディスク容量を効率的に使用し表示速度を速めるには画像の容量を小さくするのが最も効果的である。基本的な減量の方法を紹介しますので、ブラウザーで確認しながら適切な容量に落としてみてください。

1.圧縮率を高くする。
   
JPEG画像は、ほとんどのフォトレタッチ・ソフトを使ってファイルする際に、圧縮率を変えることができます。
    圧縮率を上げ過ぎると容量は減少するが画質が落ちてしまいます。(ノイズやシミが目立つようになる。)

2.色数を減らす。
   
GIF画像は、256色>16色>2色と、減色すると容量が小さくなります。
    減らし過ぎると原画の色が失われてしまいます。

3.小さくする。
   
各フォトレタッチ・ソフトでサイズ変更処理を行い画像を小さくすれば、自然に容量は減ります。
    小さくし過ぎるとHP編集用ソフトで調整(拡大)した際にモザイク状になってしまいます。
 
ネット用の画像に最適化する機能があるソフトの使用をおすすめします。
 
●GIFアニメーション
GIFアニメーションは、最もよく使われている簡単な動画の手法です。これは厳密には動画ではなく、何枚かのGIF画像を連続して表示することによりあたかも動いているように見せる技術です。従って、リアルな動画や長い動画の作成には適していません。ファイル容量もGIF画像の枚数分以上に大きくなります。この特性を考慮し、数枚の画像にとどめた方が無難です。なお、ビデオからGIFアニメーションを自動作成してくれるソフトも市販されていますので、制作頻度の高い方は検討してみてください。

○作成手順
   
1.GIFアニメ作成用ソフトをインストールする。(ネット上のフリーウェア・シェアウェアにもいくつか登録されています。)
    2.フォトレタッチ・ソフトで動きに応じたGIF画像を数枚作成する。
    3.作成した画像を1で順番に取り込み表示間隔を指定する。
    4.テスト表示してスムーズに動いたらファイルする。HP作成用ソフトでHTMLページに挿入する。

○ポイント
   
1.できるだけ小さくする。大きいと表示時間がかかり、動きもぎこちない。小さいとスムーズで見やすい。
    2.サイズと色数を統一する。異なると違和感のある動きになったり、雑な印象を与えたりする。
    3.最初から色数を考慮して原画を作成する。色数が少ないほど容量が減り動きがなめらかになる。
 
●サウンド

最近ネット上では様々なタイプの音楽を使用したサイトが増えています。ホームページにバックグラウンド・ミュージックを挿入する程度のことは難しいことではありません。MIDI、MP3、RAを始め、様々なサウンドを再生するフリーのプラグイン・ソフトも簡単に入手できます。

○ストリーミング再生とダウンロード再生(ネット配信)

サウンド、ビデオなどのマルチメディアは保存すると大容量ファイルになります。まず、再生するのは訪問者ですから、彼らにとってストリーミング再生が好ましいのか、ダウンロード再生が好ましいのか、プラグイン(再生ソフト)の品質を考慮して決めなければなりません。CD並みの音質を追求するのであれば、ファイル容量は大きくなりますがMP3形式で準備し、ダウンロード配信してから専用のプレーヤーで再生すればよい。ただし、再生開始までに時間がかかる。
Windowsには標準のメディア・プレーヤーが組み込まれており、再生するファイルタイプの登録も容易にできますが、ネットでのストリーミング再生能力は決して優れているとは言えません。WAV形式やMP3あたりが現在の標準のようですがネットでは容量の大きいWAV形式はあまり使われていません。MACのサポートする形式も目立ちません。(WAVファイルを不用意にアップしてディスクをパンクさせないように!)
低速アナログと高速デジタルの入り乱れたネットワーク環境の日本では、長いサウンドをネット上できれいに再生するというのは相当難しいようです。したがって、MIDIで制作する場合は別として、作りやすく、容量が少なく、音質が良く、ネットに強い(音切れが少ない)形式を選択することが重要です。MP3などは音質の割には容量も少なくダウンロードして再生するのには適していますが、ネット上でのストリーミング再生には向きません。ネット上で連続再生するには、

1.作成の段階から回線速度を考慮したファイルが作成できるオーサリング・ソフト(RealProducerなど)
2.様々な回線速度や不安定な回線に対応できるストリーミング/バッファリングに優れた再生ソフト
3.大量データの送信に適した伝送プロトコル
4.ネットでの再生に適したデザインのファイル形式

を使用しなければなりません。筆者の経験ではRA形式(.rm)が優れているように感じていますが、この種の情報はまだまだ不足しています。こうすれば長時間途切れず再生できる、というノウハウをお持ちの方は是非情報をご提供ください。

○サウンドの圧縮とファイル形式

パソコンやインターネットで使用されるサウンドのうち比較的よく使われるものを列挙します。実際にサウンドを作成する際には、形式により、使用するアプリケーション上で、サンプリングサイズ、サンプリングレート、チャンネル、回線速度などの設定を適切に行う必要があります。「容量」は約5分のサンプルサウンドを変換した際のファイル容量です。(RM:回線速度と品質を変えた最小<28k-Voice>・最大<ISDN dual-Stereo Music>の値。)
 

拡張子

特 徴

容量(KB)

WAV Windows標準のサウンド形式。音楽CDを作成する際のソースファイルとして使われる。 52459
RM RealAudioのストリーミング再生用形式。ネット上での再生に広く使われている。 624/2425
MP3 MPEGサウンドの圧縮技術をベースにした形式。圧縮率:約1/10。

3617

AIF,AIFF Macで標準のサウンド形式。

-

AU,SND UNIXで標準のサウンド形式。

-

MID,MIDI MIDI機器から作成されるサウンド形式。サイズが小さくBGMやカラオケに適している。

-


この他にも、ブラウザのプラグインにより再生できる形式、携帯プレイヤー用の圧縮形式がいくつか存在します。ネットで使用する場合は、容量・品質に加え、著作権保護について十分検討してください。(参考:サウンドの基礎と音楽配信


●ビデオ

まず、ネット上でリアルなビデオ(動画)を再生することはサウンド以上に難しいということを認識してください。一般ユーザーがインターネットでビデオの再生を試みる際、ネックになるのは、遅いアナログ回線
とプロバイダーが与えてくれる、あっという間にいっぱいになる保存ディスク容量です。この問題が解決できない限り、まともな映像の長時間ストリーミング再生はできません。従って、普通は、ぎりぎりまで品質と容量を落とし、ハイライト部分だけの(数秒から数10秒の)ビデオを制作する、ということになります。実際にビデオを作成する際には、次のような作業が必要です。

1.ビデオキャプチャー・デバイスと専用ソフトでビデオをパソコンに取り込む。
2.取り込んだビデオを編集用ソフトで適切な長さに編集する。
3.タイトル、効果、テロップ、ボイス、ミュージックなどを追加する。
4..目的に応じたファイル形式で保存する。

ビデオキャプチャーの段階で、WEB用の制約を考慮し、ビデオサイズ、圧縮形式、サウンド属性を設定します。編集して完成したビデオはそのままネットにアップするか、RealPlayerなどで再生する場合は、さらに専用のオーサリングソフトで形式を変換しWEB用に最適化してからアップします。筆者のテスト結果から言えることは、リアルな動きをストリーミング再現するのは、ISDN Dual (128kbps)でも難しい、ということでした。

○ビデオの圧縮とファイル形式

パソコンやインターネットで使用されるビデオのうち比較的よく使われるものを列挙します。
「容量」は約2分50秒のサンプルビデオ(画面サイズ:320X240)サウンドを変換した際のファイル容量です。(RM:とサウンド品質<Stereo Music>と品質<スムースビデオ>を固定し、回線速度を変えた最小<56k>・最大<LAN>の値。)
 

拡張子

特 徴

容量(KB)

AVI Microsoft社が開発したWindows標準のビデオ形式。 177501
RM RealPlayerのストリーミング再生用形式。ネット上での再生に広く使われている。 726/3149
MPG,MPEG 急速に普及しているビデオ形式。画像の大きさや品質によりタイプが異なる。

ASF Microsoft社が開発したWindows標準のストリーミングビデオ形式。
WMV Microsoft社が開発したWindows標準のダウンロードビデオ形式。
MOV,QT Macで標準のビデオ形式。Windows でも QuickTime for Windows で再生可能。


この他にもブラウザのプラグインにより再生できる形式がいくつか存在します。ネットで使用する場合は、あらかじめ容量、品質など検討の上十分なテストを行ってください。


●HTML

○ビルダーを使用した制作

HTMLはホームページを制作する上で最も重要な基本技術です。高機能なビルダーを購入し作成する方も多いと思いますが、ここでは、Windows標準のFrontPageエディタでの作成方法の概略を紹介します。FrontPage2000 は、さほど多機能ではありませんが、参考文献やFAQのHPなども充実しており、入門者が使い始めるのに手頃なエディタだと思います。ページの表示時間や、IE(インターネットエクスプローラ)だけでなく NetscapeCommunicator でのプレビューもできるため、時折不具合らしき現象も認められるのですが、筆者はDreamweaverと共に使用しています。以下にHTML文書を更新する手順を記述します。

1.PC側とサーバー側のフォルダ(ディレクトリ)、ファイル名を同じにする。(ディレクトリとファイルのネームと階層の同期化)
   
-サーバー側: ”homepage>news>news.html”  (http://xxx.xx.jp/~xxxxx/news/news.html) 
         ”homepage>img>img01.jpg”  (http://xxx.xx.jp/~xxxxx/img/img01.jpg) 
    -パソコン側: ”homepage>news>news.html”  (D:\homepage\news\news.html)
                             ”homepage>img>img01.jpg”  (D:\homepage\img\img01.html)

2.更新するファイル(D:\homepage\news\news.html)をクリックし、IEでコンテンツを表示する。

3.ツールバー>ファイル>Microsoft Front Page で編集 をクリックし、Front Page を起動する。
   
”Microsoft Front Page で編集”が表示されない場合は、IEのツールバーの”インターネットオプション”>”プログラムで指定要。”

4.更新する部分の変更処理を行う。(参考:新規作成の場合はツールバーの”ファイル”から。)
   
-テキスト:直接入力、ツールバーの挿入からファイル指定、ワードからD&D、メモ帳からC&P  など
    -画像:ツールバーの挿入からファイル(例:D:\homepage\img\image01.jpg)を指定、D&D、C&P など
            -ここで画像の大きさを微調整する。

5.画像のプロパティの確認・変更する。
   
挿入した画像を右クリックし「画像のプロパティ」をクリック、「全般」の「画像のソース」の相対パスを確認・変更する。
       ”../img/img01.gif” (サーバー側では、news.htmlのある”news”から一段上がって1段下がった”img”の中のファイル)
        絶対パス(フルパス)では、”/homepage/img/img01.jpg”と指定する。
URLでは、”http://xxx.xx.jp/~xxxxx/img/img01.jpg”と指定する。(通常は相対パスで指定する。)
  
*参考:パスの指定方法

-”news.html”と同じディレクトリ(”news”)にある場合;
    相対パスでは、”img01.jpg”
    絶対パスでは、”/homepage/news/img01.jpg”
    URLでは、”http://xxx.xx.jp/~xxxxx/news/img01.jpg”
-”news.html”のあるディレクトリの下位のディレクトリ(”dddd”)にある場合;
    相対パスでは、”dddd/img01.jpg” 
    絶対パスでは、”/homepage/news/dddd/img01.jpg”
    URlでは、”http://xxx.xx.jp/~xxxxx/news/dddd/img01.jpg”
その他、必要に応じ「代替表示」、「ハイパーリンク」などを入力して”OK”。

6.ツールバー>ファイル>上書き保存 で保存完了。

7.IEの”更新”ボタンをクリックして変更が正しく反映されているかチェックする。

8.FTPまたはWeb発行ウイザードでアップする。(操作は各々のFTPソフトにより異なる。)

-news.html;ASCII(テキスト)モードで ”homepage>news” へ転送。
-img01.jpg;バイナリーモードで ”homepage>img ” へ転送。(転送モードに注意してください。)

*FTPを使用する場合はまず次の設定を行なう。(メジャーなプロバイダならHPを参照してください。)
  -ホスト名
  -ユーザ名
  -パスワード

9.必要に応じて、フォルダ、ファイルのアクセス権を変更する。(755、644など)

○FTPを使用しないファイルのアップロード・ダウンロード(Windows Me)

WindowsMeでは、エクスプローラとFTP機能が一体化し、わざわざFTPをダウンロードしてセットアップする必要がなくなった。「マイネットワーク」フォルダの接続アイコンをダブルクリックするだけで、FTPサーバーのフォルダを開くことができ、通常のファイル操作と同様の感覚でアップロード、ダウンロードできる。

1. デスクトップの「マイネットワーク」を開き、「ネットワークプレースの追加」をダブルクリックしてウィザードを起動する。

2.「ネットワークプレースの場所」に、プロバイダーから指定されたFTPサーバー名を入力する。
 たとえば、「ftp://plaza12.mbn.or.jp」のように「ftp://」から始まるURLを入力し、「次へ」をクリック。

3.「匿名でログオン」のチェックをはずし、「ユーザー名」に自分のユーザー名を入力して「次へ」。

4.任意のタイトルを入力して「完了」をクリック。これで、「マイネットワーク」フォルダに、設定したタイトルの接続アイコンができる。

接続アイコンをクリックして実際に接続し、サーバー側のフォルダを開き、パソコン側のフォルダ間でファイルのドラッグ&ドロップによる転送が可能である。フォルダ、ファイルを右クリックして「プロパティ」からアクセス許可も指定できる。

○ビルダーの限界

HTMLの膨大なタグやオプションパラメーターを制作者の思い通りに完璧に生成してくれるビルダーは存在しない。例えば、CGIプログラムの追加にしても、Javaスクリプトの挿入にしてもビルダーの機能より「切り貼り」の方がわかりやすいし便利と感じるだろう。慣れてくるとソースを開いてビルダーで生成できないオプションを打ち込むことも多くなる。HTMLの初心者は大事なインデックスページをワープロ感覚で作り始め、後で思うようにレイアウトできない、画像が表示されない、どこが間違っているかわからない、と悩んでしまうことが多い。HTMLは、ワープロ文書ではなく「プログラムコード」である。さらに、デザインセンスやレイアウトの技術も必要とされる。慣れないうちは、テーブルやテンプレートを使って全体の配置が崩れないように配慮し、A4サイズ程度の大きさにレイアウトしよう。(こうすることにより、後で無理な変更が生じても基本レイアウトは崩れることはない。)画面に入らない横書きのテキストを左右にスクロールするページ程見難いものはない。

★サーチエンジンへの登録とリンク

●サーチエンジンのタイプ

サーチエンジンは、日本で著名なものでも10種類近くある。小規模なものも含めると100種類を越えるようである。(増えつづけているので正確な数は不明。)日本語サーチのできない海外のサーチエンジンも含めると膨大な数になる。実際には登録の方法や完了までの期間は各社とも少しづつ異なるし、検索の機能、情報量、精度も微妙に異なる。しかしながら、登録方法と構造上の特性から、次の2種類に大別される。

○インデックス型

Yahoo! など。登録方法はWeb管理者や推薦者が、登録フォームに、URL、サイトの説明、キーワード、カテゴリーの選択などの検索に必要な情報を全て入力して申請し登録される。フォームに入力する項目の種類や説明文の長さなどは各エンジンによって異なる。審査が通れば申請者の意図する内容がほぼ確実に反映されるが登録に手間がかかる。(Yahoo!は、審査基準も厳しく、個人のサイトは特に、なかなか希望するとおり登録してくれないのが実情である。)

○ロボット型

Infoseek、Google など。基本的に、URLと申請者のメールアドレスを入力するだけで、後はロボット(プログラム)がURL(Webページ)を検索し、必要な情報を勝手に抽出し登録する。申請は簡単であるがキーワードや説明文は巡回ロボットまかせのため後述するHTMLの書き方に注意しなければならない。(巡回申し込みができないものもある。)

●代表的なサーチエンジンの特徴

サーチエンジン
タイプ
特徴
Yahoo! ディレクトリ型+巡回 以前は企業サイトは比較的審査が緩かったが、最近は個人も企業もコンテンツの審査が厳しく、なかなか登録してもらえない。アクセス件数を向上させたいなら、まずYahoo!に登録するのがポイント。これでヒットしなかった場合は「Google」の検索結果を表示する方式。リンク集に登録されれば、カテゴリ検索も可能。(カテゴリーやサマリーはYahoo側が独自に作成しているらしい。)
*2005年10月より表示方法が大幅に変更になった
infoseek ロボット型
(巡回可)
検索結果がサイト別にまとめて表示されるので見やすい。絞り込みの精度が高いのか情報量が少ないのか、ヒット数は比較的少ない。申請後、おおよそ数日程度で検索結果が反映される。(タイトルもサマリーも<meta>から抽出。)
goo ロボット型
(巡回可)
Googleを使用。
Excite ロボット型
(巡回可)
同上。
BIGLOBE ディレクトリ型
LookSmartが提供するディレクトリへのサイト登録申請(有料)サービス経由でディレクトリに登録。ページ検索は Google を利用。(重要度順)
Google ロボット型
(巡回可)
キーワードの背景カラーを目立つように変えて検索結果を表示するので、わかりやすい。申請から登録までに1週間〜1ヶ月程度、巡回も同程度かかる。(タイトルは<title>、サマリーはページのテキストから抽出。)

とにかく、登録には次のように時間が必要である。早期に検索可能にするためには、公開前から、検索エンジンの特徴を理解し、キーワードの漏れなどが無いように十分なチェックをすべきである。筆者の経験では、2,3回修正を加えてやっとこちらの意図する検索が行なえるようになった。(2,3ヶ月はかかると考えた方がよい。)

○初回申請からデータベースに反映されるまでの時間

数日から1ヶ月以上に及ぶ。構文が長すぎたり、誤った記述によるにエラーがあると、再申請しなければならない。何がエラーなのか教えてくれないので、無事登録されたどうかは自分で確認するしかない。(1ヶ月待って見当たらなければ再度申請する、ということである。)

○巡回の間隔

数日から1ヶ月以上のサイクルで巡回するもの、定期的でないもの、巡回しないものがあり、キーワードを追加してロボットに渡すにはこのタイミングが重要である。実際に、どのタイミングで各エンジンのロボットが巡回してくるのかははっきりしない。更新状態、アクセスカウント、他サイトからのリンクの状況などによっても異なるであろうし、それぞれのロボットがページから吸い上げる情報も異なる。

○登録されても油断するな

一度登録されても、さまざまな理由で次回以降に対象から外される場合もある。テキストの少ないURLやFLASHを使用したURLなども要注意である。数多くの検索エンジンに恒久的に登録しておきたいなら、コンテンツが更新されるシンプルなページのURLを申請する方が無難である。

●サーチエンジンへの登録

○登録はエンジンごとに慎重に行なう

サーチエンジンの数だけ登録作業が発生するわけだが、無料または有料で一括登録してくれるWebサイトもある。ただし、検索エンジンにはそれぞれ、特性(クセ)や考慮点があり、欠点もある。各エンジンの登録ページの違いを十分考慮して、検索にヒットしやすい最適な登録を行う必要がある。最近では、メジャーなエンジンは統合され、用途別エンジンは別として、まず、Yahoo、Google、Infoseek に登録すればよいだろう。最近は、個人や中小企業のサイトについては、無料ではYahoo のディレクトリへの登録は難しいようである。

Yahoo のようなインデックス型の場合は、まず、リンク集に掲載するため、自分のサイトが属するカテゴリーを決める。(当サイトの場合は、パソコン、Windows、インターネット..など)審査の厳しいエンジンの場合は、カテゴリーなどの申請内容は検査係がチェックし、変更またはキャンセルされる場合もある。検索対象にはなるがリンク集には掲載されない場合もある。キーワードの登録を許さない(キーワード検索ができない)エンジンもあるので、登録するカテゴリーやタイトルのネーミングが重要なポイントになる。

Google のようなロボット型の場合は、URLを申請するだけで後はロボットまかせなのだが、HTMLファイルの書き方により部分的なコントロールが可能である。(インデックスページにこれを正しく記入しないと、ロボットが勝手にダイジェストするため、検索するとHP上の言葉がおかしな説明文として表示される場合がある。)他のHPのソースなどを参考にしながら正しく記入してください。また、エンジンによってはインデックスページ以外のページも変更情報を紹介する場合がある。例えば、個人名を挿入した年賀状のページを追加したら、個人名でヒットした...などである。

○まず、サイトの内容を完成させる

Yahoo は、営業用のサイトは、特に審査が厳しくなっているようだ。責任者の住所や「特定商取引法に基づく表示」など、必要事項を必ず明記してから、登録申請(サイト推薦)を行なう。コンテンツの不備のためにリジェクトされる場合も多い。どこまで、厳密に審査されるかは、各エンジンによって異なる。個人サイトも油断は禁物である。登録数自体が制限されていると思われる場合もある。

○登録用紹介文とキーワードの準備

まず、各エンジンで指定された長さの紹介文を作成する。長さはエンジンにより異なるので全角30文字から150文字程度のものを準備しておく。紹介文は、単なるサイトのコンテンツの説明だけでなく、複数ヒットした場合に、いち早く人の目を引きつける魅力的なキャッチコピーや印象的な文章で構成されなければならない。ダラダラとした一般的な文章ではせっかくのビジネスチャンスを逃してしまうかもしれない。ただし、Yahoo についてはは、キャッチコピーや派手な表現を許可されないだろう。最近主流の Google は、URL を登録するだけで簡単に反映される。

○巡回ロボットへ紹介文とキーワードを知らせる

ロボット自動巡回型のサーチエンジンにキーワードを吸い上げて登録してもらうには、インデックスページに、次のようなMETAタグを使用したHTML文を組み込む。吸い上げてくれるキーワードの長さや数は、各エンジンによって異なる。あまりに多くのキーワードを指定しすぎてエラーになってしまう場合もあるので、まずそれぞれのエンジンの登録条件を確認しよう。(ロボットは毎日巡回している訳ではないので、エラーになるとまた2、3週数週間待たされることになるかもしれない。)

<head>
<title>麦山ママ子のレシピ集</title>
<meta name="keywords" content="recipe, food, レシピ, 料理, 指導, 調理 ">
<meta name="description" content="テレビや雑誌でおなじみの料理研究家 麦山ママ子が提供する料理のサイトです。料履歴50年の豊富な経験から生まれる一味違う美味なメニューの数々...>
</head>

これで、"recipe, food, ..."で検索可能になり、検索結果の説明に、"テレビや..."が表示される。

○ロボットへ知らせる情報を制限するには

<META>タグは次のように記述する。

<meta name="robots" content="noindex,nofollow">

<meta http-equiv="robots" content="all">

ZZZ

意 味

all 当ページおよびすべてのリンク先ページの検索を許可する。
none 当ページおよびすべてのリンク先ページの検索を禁止する。
index 当ページ検索を許可する。
noindex 当ページ検索を禁止する。
nofollow リンク先ページの検索を禁止する。

○登録がエラーになる例

ロボット型の代表的エンジンである「Infoseek」では次のような条件では登録できない。(HTML作成時に参考にしてください。)

1.METAタグ内で REFRESH を使用している
2.METAタグ内で NO ROBOTS を使用している(「goo」の場合)
  <head>
  <meta name="ROBOTS" content="NONE">
  <title>検索対象にしないページ</title>
  </head>
3.METAエレメント(keyword)の文字が1000バイト以上、サマリー(description)が160バイト以上ある
4.プロバイダや管理者が「robots.txt」を組み込んでいる
5.JPドメイン以外でEUCを使用している
6.対象サーバからの反応待ちがタイムアウトになる
7.外字が使用されている
8.文字コードが2種類以上使用されている

その他

1.「cgi」というワードがURLに入っている(ロボットによってはプログラムの書き方で異なる)
2.メタタグ、タイトル情報が正しく記述されていない

●登録の考慮点

○ASCII と漢字

日本人のインターネットユーザーの多くは、まず日本語の漢字に変換したキーワードでサーチする傾向が強い。これは、サーチエンジンの特性を考慮すると大変効率の悪い方法である。インターネットのサーチは、ASCIIコード(半角のアルファベット・数字・記号)から始まり、後にダブルバイト文字(漢字)が追加された。このため半角アルファベット「recipe」で検索した方が全角の「レシピ」より効率よく検索できる。つまり、検索の対象となるタイトルやキーワードは半角アルファベット(英語など)を使用して登録した方がサーチが速く、ヒット数が多い場合に比較的手前に表示される傾向がある。日本語変換のわずらわしさや英語の浸透度を考慮すると、検索ワードを半角のアルファベットで入力するケースもどんどん増えるだろう。日本語のサーチエンジンに対しても、できるだけ検索対象キーワードには英語も含めて登録するように心がけよう。

○個性的なサーチエンジン

上述のように、エンジンの種類によって個性があるので、それぞれの特徴を活かして登録しよう。とはいっても、それぞれのサーチエンジンの登録や検索の仕様は公開されておらず、また、変更される可能性もある。特に、日本語の処理については参考となる情報はなかなか見つからない。米国では、検索結果をより上位に表示するために専門の業者が最適化プログラムを開発している。(日本語のキーワードには適用できない。)日本でインターネットビジネスを展開している企業も、HPの作成以上にサーチエンジンの研究が重要であることを認識して欲しい。通販などのビジネスサイトの業績はサーチエンジンのヒット率と表示順位に依存する割合が非常に高い。
例えば、「Yahoo」は、カテゴリーごとに表示される順序が決まってくる。前に表示させたいならそれなりのカテゴリに登録するなどの工夫が必要になる。この辺りのノウハウを蓄積することがサーチエンジン攻略のポイントである。

○登録後のフォローアップ

最近では、反映されるまで1ヶ月前後はかかる場合が多いようである。必ず、さまざまなキーワードを入力してヒットするかどうかチェックしてください。意外なキーワードの組み合わせで上位にヒットしたり、ポピュラーなキーワードなのにヒットしない、など悩むこともあるだろう。その場合は、速やかにHTMLを修正して違いを検証しよう。「ローマは1日にして成らず」である。
 
●相互リンクなど
 
 
相互リンクは、互いのサイトのいずれかのページに相手のURLを掲載することである。「URL」といっても「http://……」を直接記述するのではなく、リンク先のバナーやリンクアイコンを使用するのが一般的である。最近では、広告と区別をするために、バナー広告位置とはまったく違う場所にリンクアイコンを置いたり、はっきりと相互リンクであるという注釈をつけていることもある。

相互リンクを行うことで、双方のホームページアクセス数が増加するという相乗効果が期待できる。しかし、アクセスカウントを増やすために、あらゆるサイトに相互リンクを貼るユーザーがいる。これは必ずしも成功とはいえない。相互リンクを行なう場合には、相手との関係を見極め、最も効果的なリンク方法を選択するよう配慮する必要がある。相互リンクの申し込みがあったら、まず競合関係など不利益やトラブルをもたらす関係かどうか見極め、そのホームページの内容は健全かどうか調査しよう。そして、相互リンクのリンクアイコンの位置や注釈の位置と分量について対等の条件にすることが望ましい。

なお、Google は、アクセス数の多いサイトにリンクされたページ程、検索結果のより上位に表示される傾向がある。