サイトの制作手順
今回は実際にサイトを作っていく手順を紹介します。 大掛かりなサイトを作るのを前提としているので、ページ数の少ないサイトにはあまり向かないと思います。 プロっぽい手順を踏んでいるので、プロ気分を味わいたい方はどうぞ。
ステップ0：下準備
まずは基本知識を習得しましょう。私みたいに実際に作っていきながら習得していくのもありですが、 ある程度知識があると、上達度のスピードがぜんぜん違うと思います。 最低限のHTMLとスタイルシート・画像に関する基礎知識が欲しいですね。
作成に使うソフトも準備しましょう。 今回の講習会ではHTMLエディターとしてStyle Note+たぐたぐ 画像作成ソフトとしてGIMPを使います。 これらのソフトの使い方を覚えておくと後が楽になります。
ステップ1：設計書を作ろう
いよいよ制作に取り掛かります。最初にするべきことは設計書を作ることです。
- 設計書には
- サイトの目的
- サイトのタイトル
- サイトの雰囲気
- イメージカラー
- コンテンツの洗い出しと重要度づけ
- 全体の階層構造
などを書きます。企業サイトでもない限りあまり深刻になる必要はないですけど、 デザインやコンテンツの質に関ってくるので、頑張って損は無いです。特にチームで作る場合は 全員の意識を統一するためにも必ず作りましょう。
ステップ2：デザインを考えよう
設計書を基に今度はデザインを考えます。
- どんな色や画像を使うか？
- ナビゲーションはどうするか？
- トップページのレイアウトは？
- サブページのレイアウトは？
などを考えます。 色や画像はサイトで取り扱っている内容にあっているか？ レイアウトやナビゲーションは後でコンテンツの増減があったときに対応できるか？見やすい配置か？ などに重点をおいて考えます。
最初は紙にラフスケッチでいいので、たくさんアイディアを出しましょう。 そして、ある程度固まったら今度は画像ソフトを使ってパソコンで描きます。 パソコンで微調整をしながら色の最終決定やレイアウトの確定をします。 同時に素材の作成も行います。 ただ、パソコンで描いたデザインどおりにHTMLを組めるかというと、必ずしもそうではないので、 色はともかくレイアウトに関してはこんな感じにしたいなぁぐらいの気持ちでいましょう。 サブページのレイアウトは原稿が書きあがらないと確定できないことが多いので大まかな部分だけでいいでしょう。
ここで手を抜いてしまうと後で変更するのは至難の業です。 見た目がダメダメなサイトにしないためにも気合を入れて取り組みたいところです。
ステップ3：原稿を準備しよう
デザインがほぼ固まったら、原稿の準備に入ります。 いくら見た目がカッコよくても中身がスカスカじゃ話にならないので、 こちらはもっと気合を入れて取り組みましょう。 原稿とはいってもWEBサイトの場合コンテンツによってそれはイラストだったり、音楽だったりと 必ずしも文章とは限らないのが面白いところです。
特に今回の講習会で行うスタイルシートデザインは、原稿に対してデコレーションをしていくという作り方 なので、原稿が出来上がらないと何もできません。
ステップ4：マークアップをしよう
ここからがいわゆるホームページ制作です。いよいよHTMLエディターの出番です。
ステップ3で書いた原稿に対しHTMLタグを使ってマークアップをしていきます。
HTMLタグはもう大丈夫ですね？まだダメな人はHTML必須タグで最低限のものだけでも覚えましょう。
上手にマークアップできると、スタイルシートを適用させるのが楽になります。
マークアップが完了したら一度ブラウザーで見てみましょう。
見た目はともかく内容は把握できるはずです。
把握できない場合はどこかに欠陥があるので、もう一度マークアップを見直してみましょう。
ステップ5：デコレーションしよう
マークアップが終わったら、スタイルシートでデコレーションをしていきます。
これにより最初に作ったデザイン通りのページができあがるわけです。
スタイルシートが使いこなせないとデザイン通りにはなりません。
レベルアップをするか、あきらめてホームページビルダーなどで機械に自動でやってもらうかは
あなたしだいです。
今回の講習会はビルダーは使えないので、レベルアップしかありません。
ここのやり方は制作実習編で細かく説明します。
ステップ6：最終チェック
全てのページが出来上がったらリンク切れのチェックなどを行いましょう。 特に問題が無ければこれで完成。 FTPソフトを使ってアップロードすれば終了です。
その後は・・・
公開を開始したからといってゴールではありません。むしろスタート地点にようやく立っただけです。 各種検索サイトに登録したりしてアピールするとともに、更新を重ねて情報の充実を図っていきましょう。
わりと大急ぎで書きましたが、大体こんな感じです。この手順は私のやり方なので、もっといい方法が あるかもしれません。これを参考にもっといい方法を自分で編み出してください。 ちなみにステップ3、4、5は同時並行的に行います。当然ですよね。