ホームページの作り方(HP作成法)を解説

ホームページの作り方(HP作成法)

サイト作成の流れ

どんなサイトを作りたいかを考える

ブログ形式にしたいのか?一般サイト形式にするのか?をまず考えます。
※ブログ形式とは、定期的に更新されることを前提として作られたサイトで、日付ごとに記事が並べられるサイト。

ブログ形式にしたいのであれば、FC2Seesaaアメーバ(アメブロ)といった無料ブログを利用するか、WordpressMovableTypeのような無料ブログソフトを利用するかになります。

スマホサイトもsmart4meのような無料ブログみたいなサイトがあります(ただしPCだと見れないけど)。

一般サイト形式であれば、HTMLとCSS(スタイルシート)を駆使して手打ちか、ホームページビルダーを使うか、どっかにあるテンプレートを使うかになります。

難易度的にはFC2とビルダー(使ったことないけど・・・)が最も簡単ですね。次Wordpressのテンプレ利用、次手打ちかな。

個人的にお勧めは、お金をかけたくないなら無料ブログの一択になってしまいますが、少しでも(年間3500円とか)お金をかけられるのであればブログ形式ならWordpress、一般サイトは手打ちがいいと思います。

ブログ形式のサイトを作る

無料でブログ形式のサイトを作成するソフトとしてWordpressをお勧めしましたが、このソフトを使うにはデータベースを使うことのできるサーバーと自分で取得したドメインが必要となります。

ゆえに、作る前にサーバーとドメインを契約して準備しておく必要があります。(もちろんお金がかかります)

FC2とかの無料ブログだと広告が入ってしまうし、ドメインもFC2/○○見たいな感じになってしまう反面、まったくお金がかからないという点はいいですよね。

それでもなおWordpressを勧める理由は、

  1. 広告が入らない
  2. 自分独自のサイトURL(ドメイン)で管理できる
  3. テンプレートが豊富で自分でサイトを作る必要がない
  4. 自分でテンプレートを作れるし、他のテンプレにすぐ切り替えられる
  5. かなり多くの人が使っているのでテンパってもググるとでてくる
  6. プラグインが豊富すぎ、導入簡単
  7. コメントスパムも自動除去できます
  8. ブラウザ上で記事の修正、ファイルのアップロードができる

などなど多数あります。

ドメインとサーバー合わせても年間3000~4000円くらいでいいので安いものかと思います。(どうせ手打ちでもこの金額はかかりますので)

一般形式のサイトを作る

手打ちでホームページを作るのははっきり言って要領が悪いし、ゼロからの出発ですと時間もかかります。(ここまで聞いて自信なくした人はWordpressへ)

まったくのゼロから始める人は、今現時点の自分の能力を最大限に使って、下手でもいいので、まずは1つのホームページを完成させてください。

こうして続けていくと、次作るときは前に作ったときよりもいいものが自然とでき、この繰り返しでスキルがアップします。また、前回のものの一部をコピーして作りかえることもできるので、要領も大分よくなります。

手打ちの上達法は、作らざる得ない環境をなるべく作って、何でもいいから作れ!ってことです。

管理人の作成方法

誰から教わったわけでもなく、どこかのデザイン学校へ行ったわけでもないので、正しい作成方法とは言えませんが、

  1. まずホームページ作りに便利なサイトで紹介している場所から落とした960グリッドpsdを使って、PhotoShopでグリッドやらガイドに合わせながら、同じくカラー配色を決めてボタン含めて全体像を作ってから、スライスツールで素材を切り出して、保存。
  2. 主要Webサイトの横幅を参考にするといいですが、サイトの横幅は960が基本です。
  3. HTMLを駆使して対応するカラムを作成して、スライスで吐き出されたimageファイルたちをな入れ込みます。
  4. 見出し、小見出し、段落を入れて、なんとなく体裁を整えた後、CSSを適用する。CSSのセレクタはあとで探しやすいようa1から振ってます。
  5. トップページができたら、トップページのデザインを引き継ぎつつサブページを作成する
  6. サブページのヘッダー、サイドバー、フッターを切り出し、外部ファイルとして読み込みできるようにする。(基本PHPでサイトを作成してますので。HTMLでの切り出しもできるってみたことあるけど)
  7. ひたすらコンテンツを書きまくる
  8. 全体を修正して公開

みたいな感じ。

私がwebサイトのラフデザインを制作する時の流れ(外部サイト)で作成の流れを詳しく解説されています。

PhotoShopがもはや必須ツールとなっていることがお分かりいただけると思います。

値段はくそみたいに高いんですけど、あるのとないのでは作業効率が大分違います。また、PhotoShopにはエレメントっていう値段の安い規格のもあるのですが、パスツールが使えないデメリットが何気につらいので、買うなら製品版で。

そのあとでお金に余裕があるなら、Fireworks、dreamweaver、illustratorを購入されるとよいかと思います。

最新のOSに対応しているかはWindows8にアップロードしてみたを参照。

ページトップへ