SANTA's Happy World / HP作成のお手伝い

SANTA's Happy World_(hp_saku) [Since 1998/8/10]_[2004/09/06 更新]


さんたの
超初心者のための
ホームページ作成のお手伝い

 ホームページ作ったはいいけど誰もこない。更新していない、ということで休眠中やら、準備中のままの人も多いようです。それに、このHPを立ち上げてから、私のまわりにもHPを作ってみたいけれど、やり方がわからないとか、むずかしそうと言う人が多い事がわかりました。でもやってみたら意外に簡単にできますよ。

 そこで、そんな方々にお手伝いができればと思い、このページを追加してみました。
私もこのサイトを立ち上げるまではホームページ未経験でしたから、知識といえばこのページを作る時に調べたことだけで、知識不足・誤解もあるかもしれません。というわけで、今の私にできることは簡単なアドバイスをだけです。ですからこれはHP作成講座ではありません。あくまで最初のお手伝いです、お役に立てれば幸せです。

*さんたの環境(Win95、98・IE4.0、5.0・FrontPage Expree)の範囲でしか分かりません。
マック等の方、共通でない部分は自力でがんばって!(すまん(^_^;))

※ リンクやサービス内容は、変更されている場合があります。ここはあまりチェックをしていないので、ご了承ください。


◆HP作成統合サイト

ホームページ作成

初心者の館

こんなHPはどうですか

始める前に

  1. どんな内容のHPを立ち上げるか

    まず大切なのはこれ(中身・コンテンツ)ですね。これに失敗すると続けるのは難しいでしょう。
    私はHPは私的な情報発信手段だと思います。(作品の場合もありますね)
    ですからまずあなたが持っている情報を洗い出してみましょう。

    条件は
    1.好きな事、得意な事、興味を持っているものであること。(これでなくては続きません)
    2.多くの人が知らない情報であるか、追加できる新しい情報があること。
    (知っている人が多くても知らない人も多ければOK、)
    3.興味がある人がある程度いそうな情報であること。または見たい作品であること。
    (得になる、ためになる、おもしろい情報など)
    4.より魅力ある情報にすること(マンガにする、自分の体験からの情報や体験を加えるとか何かひと工夫)
  2. 更新が続くものを含む事

    すごい情報を紹介して、それを見た人が、1回目からどんどん掲示板(伝言板・ゲストブック)に書き込みをしてくれるなら、それに返事を書くだけで掲示板の更新ができて、再訪も増え続けていくでしょう。
    でもそんなすごい情報はめったにありません。(人気フリーソフトの公開・HP作成講座などはそうかもしれませんね。)

    となれば、
    1.日記・エピソード・コラム・エッセイの追加・情報の追加・作品の追加など再訪して頂けるように更新できるものが必要です。
    (続かないところはこれが無いか、あってもこまめに更新していない所が多いのでは?)
    また、日記でも他の人の役に立つ内容が無いと読んでくれません。例えば「今日○○という映画を見た」だけではダメ、簡単な映画解説、感想などがあればOK、と言うことです。

作成準備編

  1. どこに作るか

    あなたのプロバイダー契約にHPスペースがセットならそれを使えますが、オプションの時は追加することになります。

    また、無料ホームページというのもあります。詳しくはアクセスして調べてね。
    便利な点として、プロバイダを変えてもメールアドレスが変わらないということがあります。

    ジオシティーズ・ジャパン(急速に成長しているインターネット上で最大級のコミュニティサイトです。ホームページスペースとメールアカウントがもらえます。事前に登録用のメールアドレスが必要です。他にカウンタとゲストブックなども無料で使えます。他にFTPを使わずに簡単にHTMLファイルをUPする無料サービスも用意されています。)
    トライポッド(検索サイト、ライコスの無料ホームページサービス。)
    クールオンライン(都市別にサーバが分かれていて、都市によりサービスも違うようです。)
    freeweb()
    MEDIA NET JAPAN()
    フリーティケットシアター()
    MILLTO CLUB(ミルトクラブは会員制の通販クラブです。会員だけに限定してより選りの商品を格安の価格で提供。その他のサービスとしてホームページスペースと電子メールなどが付いてきます。)
    ユナイテッド・クラブ(メールアカウントは無しで、ホームページスペースだけです。)
    Users Plaza(ホームページスペースがもらえます。他にフリーメール、フリーカウンタ、フリーMLがあります。)
  2. HP作成ツールを用意する

    私の場合は、IE5.0のおまけのFrontPage Expree(無料)を使っています。
    他にも市販のソフトを買ったり、フリーソフト(無料)をダウンロードして入手できます。
    またプロバイダーによっては、簡単にHPを作れるようなサイトを用意しているところもあるので、それを利用する方法もあります。(ジオにもあります。)

    0円ホームページ作成講座 (ホームページーを制作するのに高価なソフトを使わなくても『それなり』に見えるホームページの作り方をご紹介しましょう )
  3. とりあえず簡単でもいいからHPを作ってみよう

    私はとりあえず作ってみることをお勧めします。
    良くしようと思ったら、キリがありません。自分にできる範囲でやってみて、あとから直していくという方法でもいいと思います。

    それにやってみて初めて分かることも多いのです。
    分からなければ、周りの人や、真似したいページの作者にメールで聞いてみることもできるしネ。

    FrontPageExpress

    HTML Maker AZUKI』(森川 元也さん作成のHTMLエディタ )
    BaseEdit (ボタンと右クリックで快適操作のHTMLエディタ :多摩の岳夫さんのBird's Viewの中にあります)
    HmEdit (タグを色分けして表示でき、JIS/EUCコードの読込・保存にも対応 :アウルさんのアウルのホームページの中)
    HTED32 (メモ帳ライクな軽いHTMLエディタ げんのページの中)
    その他ベクター(win95用)から探してね
  4. HTMLや注意事項、コツを知る

    単にHPを作るだけなら知らなくてもできます。でも知らずに見てくれた人に迷惑をかけることもあります。
    最初にちょっと見ておくとあとから助かるかもね。
    (真似したいHPを保存してHTMLを解析するという手もある(^_^;))

    HTML★タグの玉手箱(説明はていねいだし、ウイルス体験記もあって、初心者向きかも)
    ファー先生のHTMLとCGI入門コース ()
    誰でも書けるHomePageTokyo Cyber Worldの中のコーナー・初心者パソコン講座もあります)
    猫といっしょに学ぶHTML(改訂版)Amris Amusing Atlasの中のコーナー)
    好ましいHTML文書を書くための方法と考え方 (多くの人にとって快適なウェブページを作るために)
    ネットサーフレスキュー[Web裏技]()
    とほほのWWW入門 ()
    ホームページの飾り職人 (ひでさんの窓の飾り職人の中のコーナー)
    HIDEYUKIのページ (初心者のためのパソコン講座公式サポートサイト)
    WEB ゼミナール (色々な人のホームページ作成講座を集めたサイト・すごいリンクの数!探検してみて)
    ゆたかの世界(HTML講座、Javaスクリプト、配色、音楽、cgi)
    ホームページ作成教室「STEP」(メールマガジンで講習:ホームページ作成に必要なHTML講座。そのほかにもJAVAやCGI、Shockwaveなどや画像講座もある。毎回、サンプルプログラムも掲載し、解り易くコツを学べます。しかも、毎号、豪華なプレゼント付き!)
    数字の杜()

  5. 小物を用意する(なくてもできます)

    HPの背景の画像、「Home」・「次へ」・「前へ」・「メール」などのボタン類、仕切線、アクセントの画像、音楽などを使う時はそれらを予め用意しておくといいですね。

    入手方法は、そういう物を無料で提供しているサイトからダウンロードする、市販のCD-ROMを買う、などがあります。自信のある人は自作するという方法もあります。

    どの場合でも著作権や、使用時の約束などを守る事が大切ですね。特に断りがなくても、無料で提供していくださっているサイトにお礼のメールを出すなどすると良いでしょう。

    素材王国 in ジオシティーズ
    かあちゃんのお道具箱(ここの「素材の玉手箱」を見てね
    Z-Plus(ホームページ作成のお手伝いをするためのエリアがあります)
    0-MATERIAL
    3DCG World
    808Animalsいきもの道具箱(へなちょこ動物園の中にあります。)
    AI World
    Angelique
    Aomusi'sWorld
    Art & Technology for Networking
    ARTEMIS
    ATSUKO'S ROOM
    Be One Design
    BLACKBOX素材工房
    CyBar ANEMONE(素材集を探してクリック)
    chimi
    CYFactory
    Free Homepage Parts Factory
    G&J Factory
    HANAKO'S STRAWBERRY FACTORY
    HARU's Room
    Holy's Room
    HOMEMADE
    Icons Maker
    Icon Square
    K link plus
    MA-FA(エム・エー ファクトリー)
    Mizue's Page
    MOSMOS
    MUCH BOX
    NAGAMINE'S PAGE
    NAKA
    nanaの自由なページ
    Owl's woods 〜ふくろうの森〜
    P-box
    POCKET
    P-TOOLS
    Rail & Bikes
    School Icons CLUB
    Smile Park
    TOM's Material Collection
    TOSHI'S STUDIO
    Web Free Material Studio Kaoru
    Webspice画像素材集
    Wonder World
    yayo's collection
    牛飼いとアイコンの部屋
    あらたさんちのWWW素材集
    さんぽみち
    じゅんのホームページ用画像集
    素材なお部屋
    素材のかんづめ
    ふぁんたすてぃっく
    ホームページの素材屋・佐藤商会
    ホームページの調味料
    れこきちアイコン館(Club of Marronの中にあります)
    渡辺屋のフリー素材
    和風素材店 小紋屋
    たら's ほーむぺーじ(きつねなどかわいい素材)
    G-TOOL(3万点の素材。森川さんのページ)
    Momo's Page (素材屋ももさんのページ)
    はいみぃのインテリア館(かわいい感じの壁紙、ボタン、ライン。サンプルが見られて便利です)
    ホームページの飾り職人 (ひでさんの窓の飾り職人の中のコーナー)
    Queen's FREE World これからHPを作ってみようと思っている皆さんに、アイコンや壁紙等の素材をフリーで提供する国です。
    HP素材1キロの小箱じじいの秘密工房の中のコーナー)
    Sanchan's Scketchbook(壁紙やボタンの他に素敵な写真もあります)
    STUDIO MIYSABI(雅さんのなかなか素敵な壁紙、ボタン、アイコンがあります。)

    壁紙を自分で作成したい人に
    H.Yamada's Island - 壁紙を作成できるフリーソフト「壁紙工房」の紹介。
    tomoのホームページ - ホームページの背景画像作成ツール「壁紙Maker Pro」の紹介等。

    アニメーションGIF作成
    Hattori's World (自分でアニメーションGIFを作られるソフトAnimation GIF Maker for Windows 95を提供)
    GIF89a-based Animation on the WWW JAPAN()
  6. 欲しい人は掲示板(BBS)を用意する

    HPを見て下さった人との掲示板での交流は、HP作成者の醍醐味です。メールもありますが、書き易いのは、やっぱり掲示板ですね。
    しかし、書込みの少ない掲示板には、書き込みにくいものです。入ったお店に誰もいなかったら、何も買わずに帰りたくなるでしょう?それと同じです。

    それから最初は、知り合いの人の書込みも大切です。でも何よりも大切なのは、書込みに対するHP作成者(管理者)の返事(レス)です。声をかけてもお店の人がまともに返事をしないような店には、次から行きたくないでしょう?お客様の事を考えて思いやりをもって答えたいですね。

    もうひとつ、掲示板でなぞなぞ、しりとりなどのゲームを取り入れて、遊びの要素を加えている所もありますよ。自分なりのそういう工夫をする方法もあります。他のサイトを参考にしてみてください。

    OTD BBS(私の一押しのBBSです。無料と有料があります。パワーユーザ向けの非常に強力なカスタマイズ機能を持ちつつ、 初心者でも簡単に使うことができます。 OTD BBSはご登録いただくだけで簡単に掲示板を作ることができます。 丁寧なマニュアルもあります。)

    ティーカップ・コミュニケーション(「初心者」に、ニーズに応じたサービスを無料または最小限の負担で提供)
    ネットサーフィンをやっていて、気に入った掲示板があって、提供先のリンクがあったら、そこを見るといいですよ。他に、cgiで作成するという方法もあります。

    アドオフィス(なかなか便利な機能が付いた掲示板です。)
    ZIPANG(ジパング)(県別になっていて、大都市は満員のようです)
    金さんねっと(個人なのかな?無料掲示板やカウンターなど、覗いて見てね)
    ゆたかの世界の中のもーもー補完計画に掲示板cgiがあります
  7. 欲しい人はカウンタを用意する

    これまたHP運営者にとっては励みになりますよね(^.^)。いや落ち込む場合もあるが・・・(-_-;)
    詳しくは、
    無料のアクセスカウンター日本語版リンク集へ
  8. BGMを付けたい人のために

    うっちいの音楽箱!(MIDI Roomをクリック)
    MIDI素材室
    ♪MACHI♪ Sound Collection(HPをお持ちの方に音楽を提供する目的に作ったものだそうです。)
    MIDIサイトへのリンク(MIDIサウンドを公開しているサイト、ほかにMIDI検索エンジンもあります)
    ゆたかの世界(HTML講座、Java、配色、音楽わらべうた、cgi)
  9. Javaアプレット、JavaScript、cgi、ShockWaveなどさらに高度なものもあります。

    スクリプト・メーカー
    KEN IIDA'S WEB PAGEの実験室にJavaアプレット、JavaScript、ShockWaveなど
    Nakagawa Masami Home Page with Java(JavaアプレットやJava関連のリンクもあります)
    うさのJavaScript講座

  10. メーリングリストが作れるサイト

    FreeML(無料サービスの草分け)
    メーリングリスト(広告付きで無料)
    eグループ(無料。自動会員管理、予定表、投票、共有ディスクなどの機能あり)
    アットクラブ(有料。ホームページでも投稿可能で、ツリー表示もできる。)
    MLサーブ(有料。超高速回線を配信が速い。ホームページ上で閲覧もできる)

  11. メールアドレス
    プロバイダーを変えても変わらないメールアドレスは、なかなか便利です。

    freemail(POPサーバー対応のメールアドレス)
    ジオシティーズ・ジャパン(ホームページ作成が条件でメールアカウントがもらえます。事前に別途登録用のメールアドレスが必要です。)
    Hotmail(マイクロソフトの無料アカウント、Outlook Express5.0との組み合わせでWebメールがPOPメールのように使えます。)
  12. FTPソフトでアップする

    ジオシティなどは、専用のUPエディタ(EZエディタ)が用意されていますが、そうでない時は、FTPソフトで、ファイルをサーバーにUPします。

    私は、
    幻影工房の必要最小限のFTP機能を持つ小さいホームページ更新専用のソフト。Auto FTPを使っています。最新のアップ後の変更を自動的にチェックしてFTP送信します。とても簡単です。

◆ このサイトで使ったJavaScript

1.マウスカーソルを乗せると画像が変る

その1:単純に2枚の画像を切り替える

その2:単純に2枚の画像を切り替えるほかに、画像やページへリンクを張る

その3:少しだけ変えた2枚の画像を切り替えることで、画像が動くように見せる

2.開いたページの他に別ウィンドウを開く

3.右クリック禁止

4.マウスのクリックで画像を切り替える

その1:リンクボタンをクリックすると押した画像に変る

その2:リンクボタンをクリックを中止すると、元の画像に復帰


作る時にはこんなことにご注意を


作成注意編(あくまでさんたの考えであって、決まりではありません。)

その1)重たくしない

1ページのサイズは、あまり大きくしない。(あまり重いとダウンロードに時間がかかるので見てもらえません)
特に毎回立ち寄るトップページが重いのは致命的
タイトルやリンクもテーブルタグや、下記の全角記号文字(★●◆など)を上手に使うと、画像を使うより軽いまま、それなりに見やすくなります。(例えば上のその1のタイトル)
写真を貼る時は、サムネイルとリンクで軽くしましょう。
(リンクした画像は普通30〜100KB位?。やむを得なくそれ以上になる場合は「重い」と断るとかサイズを記入しておくとかすると親切ですね)

その2)機種依存文字は使わない(これは決まりですね)(>3チェック

自作の文字やそのパソコン独自の文字は別のパソコンでは見られません。使えるのは

  • 半角英数・記号(例:123,ABC,abc,!"#$%....)
  • 全角英数・記号(例:123ABC!@#)
  • 全角ひらがな・カタカナ(例:あいうえおアイウエオ)(半角カナはダメ!)
  • 漢字(例:愛上尾下記区家子)
  • 全角記号文字(ただし下に表示されている物のみ)

  • 、 。 , . ・ : ; ? ! ゛ ゜ ´ ` ¨ ^  ̄ _ ヽ ヾ ゝ ゞ 〃 仝 々 〆 〇 ー ― ‐ / \ 〜 ‖ | … ‥ ‘ ’ “ ” ( ) 〔 〕 [ ] { } 〈 〉 《 》 「 」 『 』 【 】 + − ± × ÷ = ≠ < > ≦ ≧ ∞ ∴ ♂ ♀ ° ′ ″ ℃ ¥ $ ¢ £ % # & * @ § ☆ ★ ○ ● ◎ ◇ ◆ □ ■ △ ▲ ▽ ▼ ※ 〒 → ← ↑ ↓ 〓


    同様に特殊なフォントなどは、使っても、まずそのフォントで表示されることはありません(見る人のパソコンに入っていないだろうから)。
    どうしても使いたい時は画像にして使います。

    その3)全てのページにホームページ(TOPページ)へのリンクをつける

    検索エンジンなどでホームページ(TOPページ)以外のページにアクセスして、良いサイトだから他も見ようとした時、リンクがないと残念ながら行けません。
    (でも裏技があって、URLの最後を削ってから、つなげてみるとhomeのページ(indexページ)を開けることがあります。でも同一フォルダにない時はダメ)

    その4)ページが続く時は、次へや前へ(戻る)などのリンクを付ける

    ページがいくつかに別れて続く時には、続きのページを見る時にホームページ(TOPページ)へ戻らなくて済むように、「次へ」や「前へ」のリンクを付けると見る人は楽です。

    その5)テーマごとにフォルダに入れる
    将来、コンテンツが増えることを考えると予めテーマごとにファルダを用意し、その中に作成しておくと良いと思います。

    その6)更新状況を載せる

    再訪して下さった方(あー、ありがたい)が、前回来た時とどこが違うのかすぐ分かるようにしよう。
    What's New?や更新履歴、ページごとの更新日などなど他のHPを参考に。

    その7)大きな画像はページに直接貼らない

    その8)画像の名前を書く、サイズを指定する

    その9)同じボタンや画像を使う

    同じ画像は2度目からはパソコン内のキャッシュメモリから使うので早く表示されます。
    つまり、例えばトップページへ戻るためのボタンや仕切り線を一つのものに統一して使えば、一回の読み込みで済みますが、ぺージ毎に色やデザインを変えた別のボタンを使うと、そのつどダウンロードすることになります。

    その10)画像と同様に音楽も重いので選択できるように。

    自動で鳴り続けるのではなく、見ている人がボタンを押すなどして、自分の意思で止められるようにしましょう。

    その11)タイトルタグはちゃんと付ける

    タイトルタグに「index」とか「home」ではなく、ちゃんと記入しておくと履歴やお気に入りで表示されるので、一度来て下さった方が後から再訪しやすくなります。また検索エンジンで表示されるのも普通ここです。
    (<TILTE>ここにタイトルを</TITLE>の部分です)

    その12)同一サイトだと分かるようにする

    HPはリンクが命、統一性がないとリンクで飛んだ先が同じサイトなのか、別のサイトなのか混乱することもあります。

    1. 背景の色や図柄、ボタン類、仕切線、配置(デザイン)、などにある程度統一性を持たせる
    2. 同じデザインでタイトルをつける。 その他ご自分で工夫してみて下さい。

    その13)メールや掲示板があると楽しい

    作者のメールアドレスを載せておくと、共感した方とメールのやりとりという楽しみが双方に増えます。
    HPの不備なども教えてもらえることもあります。
    掲示板もROM(Read Only Member読むだけの人)も含めて楽しみなものです。

    その14)色々な人のことを考える

    ブラウザや機種の違い、フレーム未対応のブラウザ、メモリーの少ないパソコン、OSの違い、モデム速度の違いなどインターネット環境は人により、様々です。
    私はアクティブXなどやジャバスクリプトをオフとかダイアログを表示するにしているので、そういう機能を多用しているサイトはつい敬遠してしまいます。
    また弱視の方、色盲・色弱、耳の不自由な方と様々の方が利用しています。
    そういった方への配慮もぜひ忘れずにしてあげて下さい。(難しいですけどね)

    その14)最終チェック

    リンクが正しく張れているか?メールアドレスは間違っていないか?掲示板は正しく書き込めるか?全てのページがUPされているか?自分がお客様になって最終チェック!
    森川 元也さん作成のHTMLエディタ『HTML Maker AZUKI』には、サイト内のリンクチェック機能もあります。

    ●HPは世界中の人に公開されています。可能なら他の言語(英語など)のページも作られたら最高ですね。(単純に手間は倍以上になりますけど。おいらは・・・sorry Japanese only だす)
    英語のホームページの作り方講座

    (お願い:このHPで配慮不足などがありましたら、メールか伝言板でご指摘下さい。できる範囲で対処いたします。さんた)

    コツ

    1. 背景を統一する場合、画像名を「back.gif」などにすると変更が簡単になります。(一つに統一はしないけれど、何ページかで共通で使うなら「back1.gif」「back2.gif」のようにすればOK)
      新しく変更する背景をこれまでと同じ名前でUPすれば、すべての背景が一度に変わるので、季節毎の変更などの時に、大変便利です。
    2. 各ページで共通で使うものは、最初に共通フォーマットのページを作っておき、それをコピーして使うと少し修正するだけで済むので楽です。(このサイトならタイトルの上の部分、サイト内リンクの部分・ホームへのリンクの上下部分などです。時々修正を忘れちゃうんですけど(^_^;))(但し、HP作成ツールによって、違うかも)
    3. index.html(htm)というページは必ず作る(通常はこれをTOP(Home)ページにします)。
      (これがないと作成注意編その3)の裏技をやられると、全てのファイルの一覧がドドッと表示されます。)
    4. サーバー内のファイルは分かり易いように種類別にフォルダに分けておくといいです。(できないサーバーもあるようです。)
      ・同じhtmlファイルでも、「更新するもの」と「過去の日記のように更新しないもの」を別にすると良いと思います。
      ・自分のパソコンも同じ状態にしておくともっといいですよ。(管理がし易いし、バックアップにもなります。)
    5. ホームページやメールのアドレスは辞書に短縮登録して使うと、記入ミスが防げます。

    作成後は

    その1)宣伝する(マナーは守ってね)
    あなたは、ある人がHPを立ち上げた事をどうやって知るのでしょうか。このジオでは散歩している(ランダムに見ている)人もいるので、偶然見る(知る)こともあるが、そう多くはありません。

    1. 知り合いに連絡する、そしてさらに友達に宣伝してもらう(友達の輪ってやつですね)
    2. 同じ興味を持つサイトのBBS(掲示板)などで紹介する
      (この時、同じ文章をコピーして貼り付けたり、一方的に自分のサイトの宣伝をしても失礼な人と思われて逆効果のこともあります。基本的にそのサイトの感想や話題のおまけとして、紹介しましょう。)
    3. 検索エンジンに登録する

      アクセス向上委員会 (本にもなっています)
      アクセス数増加の秘密窓の飾り職人の中のホームページの飾り職人の中のページ)
      一発太郎(複数の検索エンジンに簡単に登録するサービス。作者のHPであるBlue Windの中にあります)
      アクセスアップマガジン(メールマガジン:アクセスアップに関する情報&サイト運営方法の提供、様々なサイト(ホームページの紹介)を紹介します。

    ご質問は
    「専門用語ばっかりでさっぱり分からない」とか「ここがよくわからん」とか「こういうのないの」という方は伝言板メールで質問してね。できるだけお答えしたいと思います。


     


    名言修行日記ニューエイジな生き方本棚

    バシャール神との対話

    リンク集ホームページ作成目次

    BBS LIST


    ● Site Map

    Main index

    ▲ Page top

    あなたからのメールは最高の贈り物です。(^o^)

    トップページへ

    幸せ感じるニューエイジな生き方のページ 「さんたのはっぴーわーるど」

    1