WEBサイトの制作についてのヒント
ホームページを作ったことがない方から、
「ホームページ制作はどうやればできるのですか？」
と、よく質問があることなので、簡単にメモを残しておきます．
HP制作とひとえに言えど、複数の方法があります．
１．一般的なHP制作（WEBサイト制作）
２．手軽にHTML知識なしで作れるHP制作
３．CMS(WordPress)を自分で導入するHP制作
などがあります．
========================================
１．一般的なHP（WEBサイト）制作
========================================
■作る前にすること
・HPのデザインを見る
http://web-selection.com/
http://www.goodeza.net
・HPで作成したいテーマについてのアイデアを考える
ブログ、ニュース、コーポレートサイト、キャンペーン、etc
・HPのデザインラフ(ワイヤーフレーム）を作る
作成するHPの手書きのラフスケッチを作ります．
こんなツールあります．
http://e0166.blog89.fc2.com/blog-entry-872.html
http://cacoo.com/
https://gomockingbird.com/
http://mff2.blog109.fc2.com/blog-entry-229.html
・HPのデザイン（カンプ）を作成する
一般的に、Adobe PhotoshopやFireworksというソフトを使うことが多いです．
Photoshopなどのソフトウェアは高いが、
学生の場合、アカデミック割引がある．
http://kakaku.com/item/K0000105458/?lid=ksearch_kakakuitem_title
http://www.adobe.com/jp/joc/store/education/
ソフトはセットになったPremium版と単体があるが、
WEBやるなら、WEB PremiumがあればOK.
もし、お金をかけたくないのであれば、
無料ツールもある．
これは、Googleで探してみてください．
例えば、PhotoshopみたいなものはGimpというソフトがある．
・スライスする：HPのデザイン（カンプ）から素材を切り出す
作成したデザインから、ロゴやボタンなどの画像を切り出す「スライス」という工程に入る．
これは、PhotoshopやFireworksがあれば、サクサクっとやりやすい．
例えば、このスライス工程と、その後の工程は、下記サイトを見るとイメージしやすい
http://ascii.jp/elem/000/000/555/555233/index-2.html
・動的サイトか静的サイトが必要かを見分ける
動的サイトと静的サイトの説明はこちら
http://bushi18.weblike.jp/webdelivery/?p=130
動的サイトが必要な場合は、WEBエンジニアが必要です．
WEBエンジニアの主な役割としては、WEBプログラミング、WEB+DBサーバーの構築です．
自身で動的サイトを作りたい場合は、PHPやRubyといったWEBプログラミング言語と、データベースとしてMySQLの使い方を学ぶとよい．
ですので、以下、静的サイトをつくる人のための話になります．
■WEBサイトを作る
・HTMLを覚える
一番手始めに、
自分のパソコン上に、index.htmlというファイルを作って、
ファイルには、からまでを記述して保存します．
作成したファイルをダブルクリックと
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
本文
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
基本がわかれば、応用．
HTMLの基本がわかるようになれば、CSSも学習しなければならない．
どんなコードを書けば、どんな仕組みなるかを動かして覚える．
自分で課題設定することが大事．
HTMLだけで完結するホームページ作成は、こちらを参考に．
http://www.dspt.net/
お手本や見本も探してみよう．例えば、こんなの．
http://www.coolwebwindow.com/
できれば、ここらへんの基本が理解できれば、
HTML制作ツールである、Dreamweaver(有料)やAptana（無料）
の使い方を覚えるようにすれば、かなり作成が楽になる．
内容は膨大なので、書籍やブロガーの情報を参考にすればよい．
例えば、こんなサイトをさがすと良い
http://e0166.blog89.fc2.com/blog-entry-797.html
他にも、nanapiなんかのサイトで、初心者向けのトピックスは見つけやすいと思う．
http://nanapi.jp/21022/
http://nanapi.jp/20735/
■HPを公開する
http://www.xrea.com/
を使えば無料でWEBサーバーを手に入れることができる．
これを利用してホームページを公開することができる．
制約はあるが、勉強するには十分なはずだ．
基本的な仕組みを理解しよう
[PC]--[Internet]--[XREA(WEBサーバー)]--[Internet]--[閲覧者]
[PC]-->[XREA(WEBサーバー)]
に向けて、PCで制作したHTML+CSS+画像などをアップロードする必要がある．
アップロードするためのソフトウェアとして、FTPソフトが必要だ．
有名なものに、FFFTPやFilezillaなどのソフトウェアがある．
このために、FTPという用語と、その仕組みを簡単に理解する必要がある．
本がよくまとめられてるので、何か一冊読んでみるといいが、
WEBサイトにも解説したサイトはいくつかある．
例えば、
http://first-web.jp/nyumon/
http://html.seo-search.com/html05.html
さて、XREAに話を戻すと、基本的な知識が手に入ったら、
下記サイトを参考に、どうすればできるか、試行錯誤してやってみるのがよい．
http://www.xreab.com/
以上、十分に理解できる話ではないかもしれないが、
ひと通り、WEB制作過程について、全くの初心者が覚える常識的な話である．
これを手とり足取り教えてもらいたければ、専門学校に通うとよい．
30万円あれば、ある程度教えてくれる．
http://school.dhw.co.jp/senka/
しかし、学校では実践的な内容は教えてくれない．
現に、僕の隣にいるWEBデザイナーは、
「ツールの操作方法は学校で教えてくれた．しかし、まだ知らないことが多すぎる」
と言っている．彼は課題にぶちあたる度に僕から学んでいることが多いようである．
========================================
２．手軽にHTML知識なしで作れるHP
========================================
めんどくさいことはいい、HPさえ作れればいいんだ！って人には・・・
http://jp.jimdo.com/
こういうのは、誰でもできるように作られたサービスなので、
柔軟性にかけるが、ニーズによっては、これで十分だ．
他にも、お店のホームページを作りたければ、
http://omisenomikata.jp/
というサービスもある．
========================================
３．CMS(WordPress)を自分で導入してカスタマイズするアプローチ
========================================
こういったサイトを見て、やってみるのが早道．
http://mage8.com/wordpress.html
とにかく、自分でやることが大事．
手順と違った現象が発生すれば、パソコンやサーバーやソフトウェアの前提（バージョンや対象）
もしくは、操作に違いがあるはずなので、その違いを調べて、なぜおかしいのかを追求することで力がつく．
最初から、マニュアルに頼り切らないのが大事だ．
あとは、わからないことがあれば、知っていそうな人に聞いてみる．
