WSJ21[GHP] - ホームページをつくるまえに

■Section 1-1■良いホームページ作成講座■

▼GHP講座1 − ホームページをつくるまえにやること


◎ ホームページを作るまでに必要な物などを一通り説明していきます。
◎ 管理人のPONTAと一緒にグッドホームページ(GHP)を目指しましょう!

★まず、考えること★


・制作するコンテンツを考えよう!

 ホームページを作る上で最も重要な要素は「コンテンツ」です。 ホームページとは、「コンテンツ」を寄せ合わせた物ですから、コンテンツ内容次第で訪問者が決まるのです。
 ですから、初めに「コンテンツ」を考えます。 そして、どのような方向性を持ったホームページにするかを明確に決定することが大切です。


・コンテンツ数を考えよう!

 ホームページの主となる「主要コンテンツ」の数を決めます。
 「1つ2つの少ないコンテンツに絞り、詳しく載せる方法」と「平たく多くのコンテンツを載せる方法」との主に2つの方法があります。
 前者は、サイト運営者の深い知識が必要になりますが、更新するコンテンツは比較的少ないので管理が楽にできます。
 後者は、薄い知識でも十分対応できますが、更新するコンテンツの量が多いので管理が大変になります。更新が滞れば訪問者も減ってしまいます。


サイト名(ホームページ名)を考えよう!

 サイト名は、見ただけで、聞いただけで内容が分かるように心懸けて下さい。 「誰々のホームページ」の様なサイト名では「誰」が管理しているかは分かりますが、 どのようなサイトであるかまでは分かりません。 サイトの内容が分からなければ、あまり行ってみようとは思いませんよね。 だから「ホームページの内容が分かる」サイト名にするのが良いのです。


★ホームページを作る為に必要な物★


★ホームページスペース

 家を建てる場合のように、ホームページを作る場合にも「場所」が必要になります。 インターネット接続時に有名プロバイダと契約している場合には、初めからホームページスペースが割り当てられていたり、 プロバイダのサイトから無料で登録でき、広告も付きませんので、それを使うことを推奨致します。 また、プロバイダではホームページスペースを割り当てられていない、 もう既に家族の人が使用しているといった場合にはレンタルサーバを考えましょう。 レンタルサーバと言っても「有料」か「無料」かの二通りあります。 無料の場合は大概広告が入るので、思い通りのレイアウトにならないことや、 訪問者にとってデメリットになるので、よいホームページを目指すにあたり、あまりお勧めできるものではありません。


  → レンタルサーバを利用する場合

 レンタルサーバを利用する場合は次のことに気を付けましょう。
  ・有料か無料か? → 有料の場合は月額いくらか?
  ・ホームページスペース(貸し出される容量)は適切か?(何MBと書いてある)
  ・CGIは利用可能か?(掲示板やチャットが設置可能か?)
  ・サポートは大丈夫か?


★ホームページ制作ソフト

 ホームページを作る為のソフトです。 Windows付属のメモ帳でも十分ですが、必要に応じてHPビルダーなどのホームページ制作ソフトを使うこともできます。 ただし、そのようなソフトを使うと良いホームページへの道が遠ざかっていきます。 手書きで書けるようになることも当講座の目的ですので、メモ帳のようなテキストエディタを使用するようにしましょう。 初期費用も掛からないので手軽に行えることでしょう。


★画像編集ソフト

 ホームページを彩る上で画像は不可欠です。 「文字より図、図より絵」という様に「文字→図→絵→動画」になるにつれ情報の理解度も上がります。 実際に生活している中でも、周辺と違う物には目が移るでしょ?文字だらけの物より、絵が描いている方が楽しく読めるでしょ?
 画像編集ソフトのお勧めはAdobeSystemsのPhotoshopです。 しかし価格が10万弱、学割でも4万弱という高値なので、機能を制限したPhotoshopElement2をオススメ致します。 こちらですと、12,800円、学割で6,400円なので手が届く範囲だと思います。 少し高性能のスキャナー購入すると一緒に付いてきたりもしますので、 スキャナーが欲しいという方はバンドル品を購入するのが良いでしょう。
 また、パソコン購入時に付属ソフトが付いている場合はそれを使うとお金を掛けずに済みます。 それに、自分自身で使い慣れているソフトの方が効率的ですしね。 でも、Photoshop以外のソフトだと、私は教えられませんが・・・


★ホームページを作る前に★


★ホームページ制作ソフトを準備しよう!

 ホームページは、HTMLと言われるホームページ記述言語で書かれています。 今表示されている画面上で「右クリック」→「ソースの表示(V)」を選んでみて下さい。 何やら理解不明なものが表示されていますよね、これがHTML言語なんです。 以下、このホームページの源をソースと呼んでいきます。
 テキストエディタで手打ちする場合はこのHTMLを覚えなくてはなりません。 このHTMLを覚えることにより、より柔軟でより良いホームページを作ることができます。 手打ちによるホームページ制作は、ファイルサイズを減らすにはもってこいの方法です。 また、CSSを併用することによってサイト全体を統一することが容易にできるんです。 手打ちによる利点は、何よりも初期投資が不必要なことですね。
 ホームページビルダーの様なホームページ制作ソフトを使用する場合は、数千円〜数万円の初期投資が必要な上、ソフトの使い方を覚えなくてはなりません。その代わり、HTMLを覚えて手書きで書くより視覚的な編集ができ、労力を省いてくれるでしょう。


 → 手打ちを推奨する訳

 ホームページ制作ソフトは最初の間はきっと重宝することでしょう。 しかし、小慣れてくるとCSSやJavascriptの様なものを使い、 HTMLだけでは実現できない演出をしたくなるので、 将来性を考えるとテキストエディタで作る方が理想的でしょう。


 → HTMLは覚えるべき!?

 ホームページを「持つ」だけで終わるか「見せたい」と思うかによって異なってきます。 「持つ」だけで良いのなら、ホームページ制作ソフトで十分なので覚える必要はありません。 また、当講座を見る必要もないことでしょう。 一方、「見せたい」と思うのでしたら、細かな設定ができるようにHTMLを覚えるべきです。 また、覚えて作っていく間に楽しくなっていきます。実際に友人から楽しくなったと言われました。


★画像編集ソフトを準備しよう!

 サイト名も周囲と同じ文字だったら見分けが付きません。 そんなときに役に立つのが画像です。 周囲と異なった状況を作ることにより、人の目を引き、より良いナビゲーションに役に立てることが出来ます。


 → あったら便利な周辺機器「スキャナ、デジカメ」

 昔に撮った写真を公開したい。撮った写真を直ぐに公開したい。 そんなときに役立つのは「スキャナ」や「デジカメ」といった周辺機器です。 スキャナは、写真や紙など2次元的なもの高画質なデジタル画像にします。 昔に撮った想い出の写真や、紙に描いた絵を公開したい場合に必要です。 デジカメは、3次元の物をデジタルデータで保存するので、手間なく公開できるという利点があります。
※より多くの画像を公開するには大容量のホームページスペースが必要になります。


★ナビゲーションを考える?★


★サイト構成を考える!

 ホームページには様々な「コンテンツ」があります。 製作者側としては「多くの人に見て貰いたい」と願っています。 訪問者側、見る側としては「自分の欲しい情報、興味を引かれる情報が見やすく分かりやすく整理されている」ことを願っています。
 また、製作者自身は自分のサイトで迷子になることはありません。 しかし、訪問者は何処に何があるのか分からないので迷子になります。 なので、訪問者の立場に立ったサイト構成を考える必要があるのです。
 更に、訪問者は検索エンジンなどを利用してトップページ以外のページから訪れることが多いので、 それぞれのページにトップへのリンクを張っておくという些細な心がけが使いやすい良いホームページへの一歩となるでしょう。


★トップページはメニュー?

 トップページは、通常、訪問者が初めに目にするページです。 まず、見るべき情報が何処にあるのかを探すことでしょう。 探している情報を見つけることができなければ他のサイトを探しにいきます。 だから、各コンテンツへのリンクは見やすく機能的に配置しておくことです。 フレームを使ってメニューを別画面に表示しておくのも「ひとつの手」となります。


 → メニュー専用のページ「サイトマップ」

 企業さんのページにはよくサイトマップという形でメニュー専用のページを設けているところがあります。 こうすることによって見たい情報をいち早く正確に提供することができます。 個人サイトでもページ数が多くなると、便利機能の1つになるでしょう。
 また、サイトマップがあるページは訪問者に優しいページとして評価されることがあります。


★ページは軽くするのが鉄則!

 特にトップページは軽くしましょう。 トップページを表示するのに5秒も10秒も掛かっていたのでは訪問者は待ちきれずに何処か別の場所へ行ってしまいます。
 ブロードバンド(高速回線)が普及している中、まだナローバンド(低速回線)を使用している多くの人がいるのが現状です。 ですからトップページは画像を含め30KB以内にするのがベストといえます。 ※ISDN64Kbpsでは最大秒間8KBなので平均秒間6KBとして「6KB×5秒=30KB」 トップページ以外でも不要な画像は省いて、同じ時間で多くのコンテンツを見てもらえる工夫をすることが重要になります。 写真やCGを公開する場合にはサイズを明記しておくことにより待ち時間によるストレスを軽減することができます。


★ナビゲーションの仕方〜まとめ〜

 ・コンテンツを見やすく機能的に整理する。
 ・コンテンツへのリンクは内容が分かるようなコメントを付けておく。
 ・サイトマップも作っておくと尚更良い。
 ・どのページからでもトップページへ戻れるようにする。
 ・現在どのコンテンツにいるか分かるように工夫する。
 ・サイズの大きなコンテンツへはサイズも明記する。


★制作時の注意事項★


★ファイル名、フォルダ名の付け方

 ウェブページや画像には、それぞれ適切な名前を付ける必要があります。 名前は全て「半角英数」に統一します。 また、ネット上ではWindows上と異なり、大文字小文字が区別されるのでリンクを張る際には注意しましょう。 小文字のみに統一すると分かり易くて良いでしょう。


★ファイルの拡張子

 [.html][.jpg][.gif][.png]など拡張子は小文字にする習慣を付けておいた方が良いです。 また、拡張子が複数ある場合「[.htm]と[.html]、[.jpeg][.jpg]」も片方に統一しておくと管理が楽になるでしょう。 私の場合は「.html」「.jpg」に統一しています。一般的にもこちらの割合の方が多いです。


★未完成コンテンツへのリンク

 リンクをするな!  折角開いても「工事中」という文字・・・訪問者のストレスが溜まる姿が目に浮かびます。 未完成ならリンクを張らない方がよいでしょう。 完成して初めてリンクを張るようにして下さい。


★入力文字

 「半角カタカナ」「機種依存文字」は文字化けの原因になりますので極力使わないようにしましょう。 「機種依存文字」ってのはなんだよ?と言われる方は本多哲郎さんのページをご覧下さい。 かなり詳しく書かれています。

★画面構成を考える★


★見やすいページとは?

 ・サイト全体のデザインが統一されている。
 ・項目毎に色分けされている
 ・効果的に画像が配置されている
 ・ページがスムーズに切り替わる。


★画面の対象サイズ

 現在のモニタ解像度の主流は「1024x768」です。 継いで「800x600(一割弱)」や、より高い解像度が並んでいます。もはや「640x480」は存在しません。
 また自分のモニタ解像度が大きい(PONTAは1600x1200)からといって、 この大きさを基準にして作ったのでは横に広がり、解像度の低いモニタではとても見れたものではありません。 そこで、基準とする画面サイズが必要になるのです。 現在主流の「1024x768」にするか「800x600」を対象に入れるかが問題となるわけです。(当講座は「800x600」を基準)
 基本は「800x600」で作り、フレームメニューを付けると「1024x768」にする方法も良いでしょう。 トップページでフレームの有無で分けると、どちらの訪問者の意志も尊重できます。
 大手検索エンジンの「Yahoo」のトップなんかは「800x600」を対象として制作されています。


★ブラウザの違い

 IE、NN、OPなどブラウザやそのバージョン毎に表示のされ方が異なります。 全てのブラウザに対応することによって訪問者の数にも差が出てくるでしょう。
 初めはIEのみの対応でも良いですが、慣れてくるにつれ、他のブラウザに対応していきましょう。 そうすることによって、ユーザー思いの良いホームページへとなっていきます。

●もどる●  講座2-1→