ホームページをつくる目的っていろいろありますよね。

日記の公開とかアフィリエイトでちょっとお小遣いを稼ぎたいとか････
その目的にあった手法でページ作りをしていくのが一番でしょう!!

日記の公開は無料で簡単に出来るブログサービス等がありますのでそちらを使うのが手っ取り早くて簡単だと思います。

そろそろちゃんと自分でページ作りを･･･とお考えの方に参考になればとこのページを作成しました。

作成までの大まかな流れはこのようになります

１．無料スペースを借りる(サーバーを選ぶ)
▼
２．ファイル、フォルダの用意
▼
３．ページ作成(ページにリンクをつける)
▼
４．アップロード
▼
５．サイト宣伝

　　　　　　　　　　　　⇒もっと詳しく


何があればHPがつくれるかですが基本的にテキストエディターがあれば作れます。
ウィンドウズに入っているメモ帳で作れるという事です。

ただエディターで作るにはソースを打ち込んでいかなければいけません。
覚えるのも結構大変です。なので作業にはお勧めはしませんが、ちょっと勉強するのは大事です。

HTMLのソースの書き方はタグという命令を打ち込んでつくっていきます。

具体的なノウハウは追々追加していくとして、もうすでにわかりやすく公開されたページが多くありますので今のところははそちらの紹介をしていきます。


▼ホームページの基礎知識を学べるリンク集
初めてののホームページ講座
WEBデザイナーになりたい初心者のためのホームペーージ講座。
超初心者さん ホームペ−ジできるかな
WEBデザイン、ホームページ制作初心者用に、説明。
kotskotsすたいる
パソコン初心者対応。一通りの情報が載っています。
Heidi's lesson
基本知識がわかりやすく解説されています。
とほほのWEB入門　　
WEB入門の方に。 逆引きリファレンスが便利！


HTMLタグの逆引きにはこのページが参考になります。

◆HTMLリファレンス
ＨＴＭＬクイックリファレンス	HTMLタグリファレンス
みんなのタグ辞書	HTMLタグを解りやすく説明されているHTMLタグリファレンス。HTML小技・雑学など。

便利ツールとしては下記ページが利用できます

◆便利ツール
HTMLタグ簡単作成	HTMLタグ簡単作成ツール
HP作成講座 HTML CSS JavaScript タグ一覧	タグリファレンス、タグ一覧。ホームページ作成の参考
Another HTML-lint gateway	HTMLの記述に誤りがないかチェックし、採点してくれます
DOWVLOAD TIMER	ダウンロード時間を測定表示時間を調べる事ができます。

▼カラーコード表

各色グラデーション

			#ffffff	#000000
#fcfcfc	#fffbfb	#fffffb	#fbfffb	#fbffff	#fbfdff	#fffbfd	#fffbff
#f9f9f9	#fff4f4	#fffff4	#f4fff4	#f4ffff	#f4faff	#fff4fa	#fff4ff
#f4f4f4	#ffeaea	#ffffea	#eaffea	#eaffff	#eaf4ff	#ffeaf4	#ffeaff
#efefef	#ffdfdf	#ffffdf	#dfffdf	#dfffff	#dfefff	#ffdfef	#ffdfff
#e9e9e9	#ffd5d5	#ffffd5	#d5ffd5	#d5ffff	#d5eaff	#ffd5ea	#ffd5ff
#dfdfdf	#ffbfbf	#ffffbf	#bfffbf	#bfffff	#bfdfff	#ffbfdf	#ffbfff
#bfbfbf	#ff8080	#ffff80	#80ff80	#80ffff	#80bfff	#ff80c0	#ff80ff
#7f7f7f	#ff0000	#ffff00	#80ff00	#00ffff	#0080ff	#ff0080	#ff00ff
#4a4a4a	#950000	#959500	#009500	#009595	#004a95	#95004a	#950095
#353535	#6a0000	#6a6a00	#006a00	#006a6a	#00356a	#6a0035	#6a006a

⇒もっと詳しく

ある程度 ページ作りの基礎を理解したところで、今度はちゃんと形成を整えていきましょう
見栄えをよくするためにはレイアウトやコンテンツの表示方法などが重要です。

ビジュアル的な要素としてはスタイルシートを使ってページを綺麗に見えるようにしていきます

といってもやっぱり自分で色々打ち込んでいくのは大変ですね。

無料のテンプレートなどもたくさんありますのでそちらを使うのもいいと思います。


※私が作ったオリジナルの無料テンプレートも提供いたしますので、どうぞご利用ください！

▼私の作ったオリジナル無料テンプレートです。どうぞご利用ください ※これからどんどん増やしていく予定です!! >>もっと見る
■テンプレート1 ダウンロード	■テンプレート2 ダウンロード
■テンプレート3 ダウンロード	■テンプレート4 ダウンロード
■テンプレート5 ダウンロード

他に、ページで使う写真やイラストも無料で使えるものが多く公開されていますので、そちらも使っていくといいと思います・・・

◆WEBデザイン参考ページ
嫌われないWEBデザイン	現役Webデザイナーによる、「嫌われないWebデザイン」基礎講座
２u WEBデザイン.com - おしゃれなホームページの作り方	Webデザイナーになるのでスクール・学校に通っている人も、Webデザイナーになる気のない人も、Web制作を学ぶなら、この講座で。
WEBデザインって面白い	このサイトでは、「Fireworks」をつかった、ロゴデザイン・写真加工のアイデア、 WEBデザインのアクセントとなるようなアイデア、カラーテクニックなどを公開しています。

◆無料テンプレート
テンプレートとフリー素材のWEB MAGIC	プロのWebデザイナーが提供する、個人サイトから商用まで利用価値大のホームページテンプレートとフリー素材です。 ホームページ作りを楽しむためのお役立ちサイトです。
HPテンプレート素材配布チュー	ぜ〜んぶ手作りっ！？ホームページの無料テンプレートを配布しています。
ＲＡＧＡＲＤ　ＴＥＭＰＬＡＴＥ	無料テンプレート＆ウェブデザイン講座を公開しています。 HTML、XTHML+CSS、Serene Bach三種類のテンプレートを配布。
ＷｅｂＤｅｓｉｇｎＴｅｍｐｌａｔｅｓ	「Webデザインテンプレート集」はトップページや飾り枠など、きれいにみえるレイアウトのHTML/CSSソース配布サイトです。
シンプレスト	パーツテンプレートを中心として配布。

基本的にページ作りは見やすさを最重要に考えましょう。
私が個人的に考える点は、背景は白色が一番いいと思います。

あとは、画像を多様しない事。
ごちゃごちゃとしたページは見づらいです。スッキリとしたページ作りを考えましょう。

音楽も勝手にならしたり、文字の点滅も必要ないと思います。
色味も統一した色調で揃えた方がいいでしょう。

デザイン重視でテキストリンクの下線を消しているページもよくありますが、はっきりとリンクとわかるように下線はあった方がいいと思います。

あとはレイアウトです。縦、横を揃える。行頭を揃える。これだけで大分見やすさが変わってきます。

リンクも内容毎にすっきりとまとめて何を伝えたいかがわかるように心がけましょう！

いろいろ書きましたが、客観的にみて見やすいかどうかという事だけです。
自己満足のページにならないように作っていきましょう!!


ホームページを飾る画像素材ですが、素材の方も無料配布しているページがたくさんありますので、利用しましょう

▼素材配布ページのリンク集
素材のポータルサイト 素材協同組合
品数豊富でなんでも手に入ります。
素材王国
壁紙、イラスト、アイコン、ボタンなど無料で提供・紹介。どれも定評の素材です。
ホームページの飾り職人
素材集とテクニック集。
篆刻素材AOI　　
和風素材をはじめ多数のフリー素材を提供。

冒頭でメモ帳があればページが作れるといいましたが、やっぱりこれは手間です。
時間もかかるし、作業も大変。

ちゃんとページ作成をするにはやはり作成ソフトを使うのがいいでしょう･･･

各社いろいろなソフトが出てますが、一般的に仕事で使われているのは「Dreamweaver 」です。

ちょっと値段が張るので、初心者で手軽にといえば「ホームページビルダー 」ですね。初心者の方はこちらがいいと思います。圧倒的にうれています。

個人的にはやっぱりDreamweaverが使いやすい気もしますが・・・。

お金かけてまでは・・・という方は無料ソフトを使うという方法もあります。

Netscape Composerというソフトが無料でつかえます。
使いかたに関してはこちらのサイトを参考にしてみてください。

もう一つ有名なのがHomepageManagerです。こちらも無料でユーザも多いソフトです。
詳しくはこちらのサイトを参考にして下さい。

いろいろな無料ソフトの入手はVectorや窓の杜 にありますので、いろいろ試してみるといいです。

◆ホームページ作成ソフト(有料)
ドリームウィーバー8	Webデザイナーの多くが使用している人気ソフト ホームページ制作に必要と言われるHTML言語の特殊な知識がなくても、質の高いホームページの制作を可能にします。 それでいて、プロフェッショナルのテキストコーディングにおいても、作業効率を飛躍的に向上させることができます。
ホームページビルダー10	低価格でも多くの機能を備えた定番ソフト 一般ユーザではダントツの売れ行きで日本で一番売れているホームページ制作ソフト
ホームページ制作王7 ダウンロード版	初心者向けのホームページ作成ソフト グラフィックツールも付属
ホームページ Ninja	日記の更新が全自動！ホームページ作成・更新が全自動・携帯ホームページも全自動・画像、ムービーなど、ホームページを楽しくする機能がたくさん！更にHTMLファイルが読み込めるなど充実のページ編集機能を搭載！

ホームページ作成ソフトと共に欠かせないのが、画像の編集ソフトです。

画像を扱う場合も無料ソフトがありますので、簡単にという方は無料ソフトを利用するのもいいと思います。
ART Viewerは複数の画像を見るときに便利なビューアーです。一括でファイルのリネームなども出来ます。

他に、 デジカメで撮った画像やイラストなどを加工したり文字を入れることが初心者でも簡単にブラウザ上できる 使えるかんたん画像処があります。

本格的な画像ソフトになるプロの殆どが、「Photoshop」を使っています。
ただかなり値段が張ります。

「Photoshop Elements」という一般向けのものもありますのでそっちで充分です。(それでもちょっと高いですが・・・)

Photoshopと肩を並べてWeb製作で使われているのが「Fireworks」です。
こちらは、Webに特化した機能になっていて、使い勝手もいいです。

Web製作をするのであれば「Fireworks」の方がお勧めです
(photoshopほどの画像加工はできませんが、WEB製作では充分です。HTMLの書き出しやオブジェクトの選択などはphotoshopよりも使い勝手がよく作業が断然早いです)

◆画像編集ソフト
Fireworks MX Mac Japan Full Commercial	Webに特化したプロフェッショナル仕様の画像編集ソフト Dreamweaver」との連携にも優れています
Photoshop Elements 4.0	ビットマップ形式の画像を扱うプロフェッショナル仕様の画像編集ソフト
Adobe Illustrator CS2	ベクター形式の画像を扱うプロフェッショナル仕様の画像編集ソフト。

WEBデザインナーを目指すのであればもちろんですが、ちょっとしたページを作るにも独学では大変。
WEBの製作が出来るようになると幅広く活用できますね。

っで、手軽に通信講座っていう手もありかと思います。

WEBの技術は需要もありますし、自分自身で活用出来る場も多いので、もうちょっと専門的にと考えている方は講座を活用するのがいいでしょう・・・

◆WEBデザイン通信講座
実践WEBデザイン塾	プロフェッショナル仕様のWeb制作ソフト「Dreamweaver」と画像処理ソフト 「Fireworks」の操作方法やデザインが学べるオンライン講座
デジハリの通信講座	産学共同で有名なデジタルハリウッドの通信講座。 Adobe社・Macromedia社のソフト計11種類が教材としてついてきます。
el]:school(エルスクール)	コンピューター関連の講座が充実しているeラーニングスクールです。
デジタルアカデミー	デジタルアカデミーは、SOHOワーカー・副業・独立を目指している方のための、他にはない新しいインターネット上の学校です。 サポートやバックアップ体制も充実しています。

ホームページを公開するにはHPスペースを確保しなければなりません。
はじめは、無料で借りられるレンタルサーバでいろいろ試すのがいいと思います。

PC上で手軽に申し込んで開始できるサービスが沢山ありますので、そちらを活用しましょう！！

無料でcgiをサポートしているのがinfoseekです。楽天 のサービスも利用できてアクセスの解析などのいろいろなサービスが利用可能です。
ただ、自動的についてくる広告が上と下の二箇所についてきます。しかも大きいです・・・。

通常のページであればお勧めはFC2です。広告が一番下に1行付くだけなのでほとんど目立ちません。
自作ページをおくならばFC2がお勧めです。(私もつかってます)
FC2トップページの左側メニュー最上段にある「ユーザー登録」をクリックて登録してください。

以下、他の無料レンタルサーバ表になりますので、ご参考に･･･

	容量	広告	商用	ＣＧＩ	FTP
XREA.COM	５０ＭＢ	有	○	○	○
FreeWebSerice JETMAN	４０ＭＢ	無	×	○	×
land.to	１００ＭＢ	有	○	○	○
ホットシェイク	３０ＭＢ	有	○	○	○
KTNET	１００ＭＢ	有	○	×	○
RedBlueWebServer	無制限	無	×	○	○
Real Integrity	１００ＭＢ	有	○	×	○
FREE HOME PAGE	２０ＭＢ	有	○	×	×
55street	１００ＭＢ	有	○	×	○
ぶっとび、ねっと	無制限	有	○	○	○
ZERO-YEN.COM	１００ＭＢ	有	○	×	○
cocofree.com	１ＧＢ	有	○	×	○
FC2WEB	１００ＭＢ	有	○	×	○
ほーぷねっと	５０ＭＢ	有	○	×	○
イースター	１００ＭＢ	有	○	×	○
ribbon Network	２０ＭＢ	有	○	×	○
インフォシーク isweb	５０ＭＢ	有	○	○	○
トクトク	無制限	有	○	○	○
PC1.JP	１００ＭＢ	有	○	?	○
FK SERVER	２０ＭＢ	有	○	×	○
ナスカ	１００ＭＢ	有	○	×	○
スペースかきこ	２０ＭＢ	有	○	×	×
Netcom無料ホームページ	５０ＭＢ	有	○	×	○

レンタルサーバー(格安)

将来的に有料サーバに移転を考えている人保証のない無料サーバではちょｔっと不安という方は 「ロリポップ」がお勧めです！！


ロリポップ！ は月250円という格安レンタルサーバです

可愛い掲示板やカウンターもたくさんって、ホームページ作成ソフト【 ウェブエディタ ウーパ！ 】もあるので簡単にページつくりができます。

破格値段でサービスが充実してますので絶対におすすめです！


ロリポップ！

その他無料サービス(CGI)

■ 無料カウンタ

一番星	登録不要　Javaスクリプト1行張るだけ　(アクセス解析付)
すごいカウンター	FC2運営　(C言語型)　(アクセス解析付)
せっかくカウンター	テキスト版やオリジナル画像使用可　(CGI)　(アクセス解析付)
Counter Bridal	結婚情報サイト運営　(PHP+MySQL)　(アクセス解析付)
COUNTER@XREA	エクスリアサービス　(C言語)
PHP SERVICE!	オリジナル画像使用可　(PHP)

■ 無料掲示板

FC2 BBS	(ケータイ対応)　広告が目立ちません　(C言語+MySQL　高速・安定)
OTD BBS	好きなようにデザインをカスタマイズ可
ロケットBBS	表示時はHTML　(ケータイ対応)　広告が目立ちません
CGI BOY	楽天系の会社が運営　(CGI)
PHP SERVICE!	マルチスレッドタイプ有り　(PHP)
BBS PLUS	広告スペースはテキスト形式　(CGI(Perl))

■ 無料チャット

CAHT@XREA	オリジナルアイコン使用可能(ケータイ対応)
CGI BOY	パケ代節約に配慮(ケータイ対応)
FC2 チャット	FC2の専用サーバで運営
PHP SERVICE!	テキスト広告が発言最上部に挿入される
DoChat.NET	(ケータイ対応)
JetCHAT	(JAVA型で高速)
infoseekレンタルチャット	メンバーサービス。(JAVA型で高速)

■ 無料日記・無料ブログ

CGI BOY	画像アップロード機能付(ケータイ対応)
FC2絵日記	広告が目立たない(ケータイ対応)
さるさる日記	ケータイからも読み書き可能
マイぷれす	ブログ機能搭載の無料レンタル日記
livedoor Blog	メンバーサービス
Doblog	NTTデータが運営
excite ブログ	メンバーサービス
マイプロフィール	プロフィール・日記・ブログ・バイオグラフィ

■ 無料メールフォーム

フォームズ	ログ30件保存機能つき
FormMan	ログ保存機能付
FormMail.jp	問い合わせ、アンケート等に

■ 無料アクセス解析

AccessAnalyzer.com	機能豊富
FC2 Analyzer	広告が目立ちません
忍者TOOLS	100ページまで解析可能
infoseek アクセス解析	メンバーサービス

copyright 　2006 初心者の為のweb製作支援　All right reserved