SITEMAP [初めてのホームページ講座] [WebMasterへの道] [3.ホームページ作成]

WebMasterへの道

3. ホームページ作成

3-1. テーマの選定

当然のことでしょうが、ホームページを作るといっても、何を作っていいのか解らなければ、何も作れません。 私も最初は何を作ろうか迷ったものです。 そこで「ホームページのテーマ」が非常に重要なファクターとなってくるわけです。

何を隠そう、私の最初のホームページは「ワールドカップ」に関する内容でした。 でも失敗でしたね。(笑) 季節ものはすぐに廃れるし、情報量では企業に勝てないしで、僅か1ヶ月でやめちゃいました。

そこで考えたのが、自分の特技や趣味でした。 それから生まれてきたのが現在の「初めてのホームページ講座」でした。

これらの教訓を活かし、一般的ではありますが、以下のことに着目すれば、良いホームページを作ることが出来るでしょう。

一番大事なことは、「ずっとやり続けることが出きる」テーマを選定することです。 いきなり良いホームページは作れませんので、徐々に改良していくためには、飽きてしまえば意味が無くなるからです。 また、飽きなくてもテーマの対象が無くなってしまうものなど(私のように)も避けた方が無難です。

また、著作権に触れるものもよくありませんが、人のホームページを参考にするのは非常に良いことだと思います。 私も関連するホームページはよく見ています(真似はしないけど)。 メルマガに関しても、情報収集はなるべくやるようにしています。

何よりも、一番大事なステップで、一番慎重に決めた方が良いことを自分の経験からはっきりと言えます。 また、できれば他人が見ても参考になったり、面白かったりとする内容が良い事は間違いありません。 アクセスアップを目指すなら、当然の項目となります。

このアクセスアップを気にするのであれば、自分の事に関する内容は避けた方がベターです。 自分の知り合いを除く、いわゆる他人はあなたのことを知りたいわけではなく、あなたの知識があ知りたいからなのです。 当然、おもしろおかしく飾るのであれば、そのおもしろさを求めて人が集まるでしょうが。

アクセスアップと言えば、誰よりも詳しい情報を提供する方が訪問者にとっては良いWebと言えます。 そういうサイトには自然に人が集まり、活性化するものです。 浅く広くよりも、狭く深いサイトの方が重宝されるので、自分の得意分野で勝負する方が良いに決まっています。 またアクセスが集まれば自分のやる気にも繋がり、更に良いサイトへ変身できることでしょう。

結局の所、次のような点に気を付けながらWebを作ることが何よりだと考えます。

[Go To Top]

3-2. 作成準備 その1

テーマが決まれば、次は実際に作る準備です。

私の場合、HTML等は全く知りませんでした。(存在も)そこから、手元にワードがあったので、そのWebデザイン機能を使って書き始めました。

が、明らかに準備不足でした・・・というのは、全体の構成をどのようにするのかがハッキリしていなかったからです。 作ったはいいものの、どこからどこへリンクするか等は全く考えておらず、ましてやトップページすら何にするかを決めてませんでした。 更に悪いことに、タイトルすらも。

これではうまくいきません。そこで必要になるのが、Web全体の構成をおぼろげながらにも決めておくことです。

全体の構成はおおよそのもので構いません。おぼろげながらに考えておいてとりあえずどこまで作り上げてからアップ(公開)するかを決めておきます。 一度アップすれば、各自の責任感や、充実感から何とか先を作っていけるからです。 後のことは後で考える程度の軽い気持ちの方が長続きします。

ですが、一度は紙の上にでも全体をどうするのか、考えておいた方が良いとも言えます。 そうした上で、とりあえずどこまで作り上げてからアップ(公開)して、その先はそれから作る、というようなことを決めていても良いでしょう。

[Go To Top]

3-3. 作成準備 その2

ここの準備はもっと大事かもしれません。

といっても、実際に作りながら準備しても間に合う項目なので、実作業が前後しても問題はありませんが。

ここでは、実作業のための準備についての説明です。 実際に作り出すと、HTMLタグが書けない、イメージ(画像)が無い、これでうまくいってるのだろうか、等と様々な問題や疑問が生まれてきます。 そのための準備が必要となります。最低限必要なものをあげておきますので参考にして下さい。

金銭的問題があるのであれば、ブラウザのみで後はフリーのものを使いましょう。基本的にタダでできます。

3-3-1. ブラウザ

世の中様々なブラウザが存在します。 一般的にインターネットエクスプローラ(IE)とネットスケープナビゲータ(NN)が最も普及していますが、Lynxなどのテキストオンリーのブラウザもあります。 このLynxでどのように見えるか、これを試すことの出来るサイトもあります。

Another HTML-lint gateway
http://www.vector.co.jp/htmllint/htmllint.html

個人的には、IE4.01,5.0とNN4.05,4.08,4.5を常用しており、確認用に各3.0を使用しています。 ホームページを作成する際には、あらゆるバージョンを想定した作成が必要であると言われますが、基本的に3.0以上を考慮しておけば問題ないと思います。 当然、フルテキストのブラウザも頭の中には入れておいた方がいいでしょうが。 特に最新バージョンを使っている方々は注意が必要です。 Webサイトである以上、どれか専用のブラウザでしか見ることが出来ないというのは極力避け、アクセス向上に努めたいものです。

結論的には、そのホームページのコンテンツ(内容・テーマなど)に合わせて訪問者が訪れるわけですから、その訪問者が何を使っていそうかを推測するか、或いは、アクセス解析をして、それに合わせたブラウザでの確認をすることが好ましいと思います。 私自身は、アクセス解析を行っており、その結果、たまに3.0で確認、通常は4.0を使用しています。

ちなみに、NN4.5は殆どNN4.0xと同じ表示になります。割愛しても、基本的に互換性は高いので問題ありません。

ここのアクセス解析結果は、公開しています。参考にして下さい。

さてここでは、IEとNNについての簡単な説明をしておきます。

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

最近はバージョン4.01が最も普及しているようです。 これまでのバージョンの経緯は以下のようになっています。

また、最新は5.0ですが、まだ普及には時間がかかると思います。 事実上、4.01が最新であり、HTML4.0への部分対応、スタイルシートの強化、ダイナミックHTMLの強化、などがメインです。 また、オブジェクト構造化されたスクリプトは非常に強力で、動的コンテンツの制作が可能になりました。

何はともあれ、当分4.0とお付き合い・・・5.0インストール時はカスタムを選択して、4.0を残すようにしましょう。 (やれやれ・・・)

  • V1.0 :1995.8
  • V2.0 :1995.11
  • V3.0 :1996.8
  • V3.01:1996.10
  • V4.0 :1997.10
  • V4.01:1997.11
  • V5.0b:1998.11
  • V5.0 :1999.3

ネットスケープナビゲータ(NN)

最近バージョン4.5を公開、と共にAOLへ買収されたネットスケープ社のブラウザです。(今後も変わらず開発していくそうですが) インターネット老舗の方々に非常に人気のあるブラウザで、そのシェアは約半分近いものです(最近のシェアは3割程度)。 初めて動的なコンテンツを可能にしたレイヤーを導入、常に最新技術を盛り込んできましたが、MS社の台頭によりその力も均衡、逆転されてしまったようです。

  • V1.0 :1994.11
  • V1.1 :1995.4
  • V1.2 :1995.7
  • V2.0 :1996.3
  • V3.0 :1996.8
  • V4.0 :1997.7
  • V4.01:1997.7-
  • V4.07:1998.9
  • V4.08:1998.10
  • V4.5 :1998.10
  • V5.0 :1999.??

※上記のバージョンは基本的にWindows用です。

3-3-2. ホームページ作成支援ソフト

ホームページを作成するには、最低限でもパソコンが必要です。 となれば、その上で動作するソフトがなければなりません。 ここでは、ホームページ作成に必要なソフトの紹介をします。 (紹介であって、推薦や推奨、斡旋とは違いますので、この内容に対しての偶発的を含むトラブル等の責任は当方は一切取りません)

ベストな選択は各個人で様々でしょうが、ベターな選択としては、限りなくフリーソフトを活用することでしょう。 フリーを使用することで必要経費を低く押さえることができ、自分のレベルアップにも繋がるからです。 そのためには、HTMLのタグや文法をしっかり勉強することが必要です。

ちなみに私は、全てのページをテキストエディタのみで書いていますので、全く費用は発生していません。 これは、HTMLがわかってくると、専用ソフトで書いたタグの無駄さと、汚さが嫌になってきたからで、中級者レベルにはこの方法をお薦めします。 (自称中級者の私でした・・・)

メーカ製のホームページ作成ソフト

各有名メーカから様々なソフトが発売されています。 どれを買うか迷う方は、少々古いですが、ホームページ作成ソフト一覧を参考にしてみて下さい。 どこのソフトもメリット・デメリットがありますので、まず試用版で試しに使ってみることをお薦めします。 どのソフトも得手不得手があり、どれが一番良いかは判断付け難いですが、雑誌なんかを参考にするのも1つの方法です。 (噂ではホームページ・○ル○ーが売れているらしいけど、Dre○mwaverも良いらしい・・・)

FrontPage 98(Microsoft)
http://www.microsoft.com/japan/office/frontpage/
Visual Page 2.0J(シマンテック)
http://itools.symantec.co.jp/vp20special.html
クラリスホームページ 3.0(クラリス)
http://www.filemaker.co.jp/html/products/datasheet/homepage3/dch3.html
ホームページ・ビルダー 2000(日本IBM)
http://www.ibm.co.jp/software/internet/hpb
HOTALL 6.0(DBソフト)
http://www.db-soft.co.jp/
Adobe PageMill 3.0(アドビシステムズ)
http://www.adobe.co.jp/product/pagemill/pagemill.html
Dreamweaver 2
http://www-asia.macromedia.com/jp/


シェアウエア、フリーウエア

個人ユーザーを中心に各種支援ソフトが公開されています。 メーカ製のものと異なり、安価であったりタダであったりするので、これを使うことも有効な手段となると思います。 ただし、サポートなどは受けられない場合が多いので、十分注意しましょう。

一般的にタグ挿入型や機能限定型が多く、HTMLの知識を必要とするものが多いようです。 しかし、組み合わせて使ったり、部分的に使ったりと言う場合は、非常に効果的なツールとなり得ます。

HomeSite(試用版)
アメリカのC-Netのダウンロードトップ10に入った強者。各種Web作成支援に対応。
TagPad(シェアウエア)
http://www2r.biglobe.ne.jp/~asaki/
やはりテキストエディタ、という方にはいいのかも。
Edit HTML(シェアウエア)
http://www.threeweb.ad.jp/~hirotomo/edithtml32/
タグ挿入型。クリック1発でブラウザ起動。各種漢字コード対応。
HyperEdit(シェアウエア)
http://www.dicre.com/
リンクチェッカ機能。タグ挿入型。
ToClip Hyper(フリーウエア)
http://www2s.biglobe.ne.jp/~t-susumu/toclip/
エディタ機能は無く、いつものエディタと組み合わせて使用。一風変わった便利なツール。

この他にも各種ソフトがあります。ベクターや窓の杜で調べてとりあえず使ってみましょう。

3-3-3. イメージ関連ソフト、サンプル

HTMLだけのホームページでは味気ないものです。 そこで必ず必要になるのがイメージです。入手する方法は2つで、1つは自分で作る、もう1つはフリー画像を使う、です。 ホームページ作成の初期段階では、後者のフリー画像を使うことをお薦めします。

これは、最初の内は自分のホームページ全体のイメージが掴みづらく、そのイメージに合ったイメージ(画像)を作っても、また作り直しということに為りかねません(私も経験者の1人)。

ここでは、メーカ製のソフトやシェアウエア、フリーウエアとフリー画像のダウンロードサイトを紹介します。

メーカ製のイメージ作成ソフト

最近の主流はドロー系、ペイント系とそれを支援するツールの統合型ソフトです。 1つのソフトで写真の修整やレタッチでのイメージ作成、GIFアニメーション、そしてイメージの管理などが可能となってきました。 が、非常に高価なものが多いのも特徴です。

PhotoShop 5.0(Adobe)
http://www.adobe.co.jp/product/photoshop/index.html
Illustrator(Adobe)
http://www.adobe.co.jp/product/illustrator/index.html
PaintShopPro5.0(Jasc)
http://www.jasc.com/
PhotDraw 2000(Microsoft)
http://www.microsoft.com/japan/Office/PhotoDraw/

簡単なものであれば、Wordや一太郎などのワープロソフトでも書けます。(画像形式には気を付けて下さい)

シェアウエア、フリーウエア

画像サイズの圧縮や、GIFアニメーション作成、減色ソフトなど、様々なソフトがあります。 これも組み合わせによっては強力なツールとなり得ますので効果的に使いましょう。

D-Pixed(フリーウエア)
http://www.win.ne.jp/~doichan/
有名な256色お絵かきソフト。
Animation GIF Maker(フリーウエア)
http://www.asahi-net.or.jp/~zb8n-httr/
GIFを元にアニメーションを作成。
GifPro(シェアウエア)
http://member.nifty.ne.jp/koki/gifpro/
GIFを元にアニメーションを作成。高機能。
BTJ32(フリーウエア)
http://member.nifty.ne.jp/koudukirinka/
Bitmap、Jpeg変換。
サムネール作成ソフト ESAM(シェアウエア)
http://www.asahi-net.or.jp/~ij7t-snhr/
縮小画像作成。

フリー画像サイト

自分でイメージを作るのが面倒な方や、初めてホームページを作る方には、この方法でイメージを得ることが最も早く、安くできる方法です。 私も始めはこの方法でイメージを使わせて頂きました。

[MA-FA]エムエーファクトリー
http://www.ma-fa.com/
Queen's FREE World
http://www.alles.or.jp/~queen/
MOYA's倶楽部
http://www.nwj.com/neotown/moya/club/club.htm
素材の雑貨屋さん
http://www.tcn-catv.ne.jp/~Angelique/zakkaya/zakkaya.html
(有)informationCenter 蘭
http://www.ran.co.jp/

この他にもたくさんあります。検索エンジンで探してみましょう。

色使い

イメージを使わずとも、コンピュータの持っている力を引き出すのも1つの方法ではないでしょうか。 例えば、色を効果的に使って、わざわざ重いイメージを使わないのもスマートな方法です。

ただし、微妙な色使いは避けた方が良いようです。環境によっては、表示できる色数が限られ(216色)意図した色が表示できていない方もいるからです。

色指定がよくわからない、等があるかと思いますので、サポートしてくれるサイトをご紹介します。

初めてのホームページ講座にもカラーパレットはありますけどね!

RGBエステ(フリーウエア)
http://hp.vector.co.jp/authors/VA011430/
Dakiny's Room
http://www.dakiny.com/
ホームページ作成のためのColoring Room
http://rm.netoffice.ne.jp/coloringroom/
Mariのいろえんぴつ
http://member.nifty.ne.jp/marimari/index.htm
色の散歩道
http://www.asahi-net.or.jp/~bt6k-ickw/
[Go To Top]

3-4. HTML作成

さてここまで来たら、後は実際に作成するだけです。

この実際に作成するのが一番難しいと感じる方も多いでしょうが、これは馴れてしまえば大したことはありませんし、わからなければ、誰かに聞くのも良いでしょう。 Web上では、身近な人がいなくても、親切な誰かが必ず教えてくれます。(礼儀次第だけど)

また、メーカ製の作成ソフトを使えば、ワープロ感覚で作れてしまうらしいです。 最初から完璧に出来る人はいないでしょう。 みんな、それなりの努力をしているはずなので、恥ずかしがることはありません。

実際の作成に関しては、当サイトのリファレンス群に譲るとして、この章はこの辺で終わりにします。

この他にもメーリングリスト(ML)を参考にするのも良い方法です。 プッシュ式でメルマガと同じくメールとして手に入れる事の出来る情報として非常に重宝します。

Homepage Mailing List(中級者向け)
http://www.zip.co.jp/homepageML/
ホームページ・クリエーターズ・フォーラム
http://hpcf.com/

どうしてもHTMLの文法などわからない、面倒くさいと思う方は、専用ソフトの力を借りるのも1つの方法です。 たたき台はソフトで作って、タグを手書きで修正する方も多いようで、効率化を考えると非常に賢い方法です。 また、完全にソフト依存の方も多く、むしろHTMLを全て手書きで書く方は希なようです。(といいつつ2割〜3割程度いる)

私の場合は、全てテキストエディタで作成していますが、非常に非効率で、馴れるまで結構時間を要します。 ただし、大きなメリットとして無駄なタグが殆ど存在せず、軽いHTML文書の作成が可能です。 軽いHTMLは、訪問者の読込時間を軽減させ、ストレスを与えない文書といえます。

ちなみに、専用ソフトの生成するタグは文法的にみると、非常にずさんなもので、DTDも何もあったものではありません。 (そういうソフトが多いらしい) これはWorldWideな見地で考えると、一部有名ブラウザのみでしか見ることの出来ない、互換性の少ないHTML文書であり、 例えば身障者にとっては不必要な情報に他ならないのです。 これは、世の中には目の見えない方は音声発声ブラウザを使っており、これらは通常HTML文法に沿わない限りは文書の正確な発声もままならなくなるからです。

このようなことを総合的に考えると、最初はソフトを使っていても、最終的にはHTML文書を手書きで修正できるようになった方が良いと考えます。 そういうことがこのサイトの文法に拘り続ける所以です。(と言いながら、間違いだらけのHTMLもあるが・・・)

HTMLが難しいのはよく分かりますが、世のため人のためと思って、是非正しい文法を身につけて下さい。 うんちくが長くなりましたが、1人でも多くの人が正しいHTMLを覚え、マナーアップを図って頂きたいと思う今日この頃です。

また、このような助言を様々なサイトから得ることが可能です。

矢野啓介のページ
http://www.asahi-net.or.jp/%7Ewq6k-yn/
アクセス向上委員会
http://www.access.or.jp/
AtoZ ホームページ作制体験
http://www.yin.or.jp/user/moriya99/index.html
間違いだらけの間違いだらけのHTML書法
http://hp.vector.co.jp/authors/VA000199/html/html.html
[Go To Top]

Last modified Feb,2001
Copyright(C)1999 T.Miyazaki , All Rights Reserved.