失敗しないホームページの作り方 ～作成は計画的に～

こんにちは、インドア派商人です。
突然ですが、皆さんはホームページを作成した事がありますか？

何となくHTMLをポチポチ打って、何となくテキストを埋めて…と言った風に、何も決めずに作り始めていませんか？

「趣味で作るのであれば、別にそれでもいいじゃないか」と言われそうですが、趣味であっても時間は大切に使うべきです。
それに、ホームページ作成は結構な手間が掛かります。無計画に進めると予想外の修正が重なり、最終的に時間のロスが大きくなる事もあります。

HTMLを打つ前に、どんなホームページを作るのかをあらかじめ決めておけば、ホームページ作成にかかる時間や余計な手間を省く事ができます。
この様に計画的かつ効率的に動く事で空いた時間を使って儲かる仕組みを考える事だって出来るのです！

計画的なホームページの作り方

1.ホームページの内容を考えよう

まず、ホームページに載せる内容を決めます。手書きでも何でも構いません、ホームページのタイトルやホームページのコンテンツ等、とりあえず思いつく限り書いてみましょう。 TOPページ以外にもページがある場合は、サイトマップも作成します。
↓ちなみにサイトマップと言うのはこういうものです。
※内容は適当です…

2.ワイヤーフレームを作ろう

ホームページの内容を考えたら、今度はどの場所に何を載せるかをワイヤーフレームで決定します。
↓ちなみにワイヤーフレームと言うのはこういうものです。
※内容は適当です…
ワイヤーフレームはレイアウトが違うページ毎に作成します。

3.ワイヤーフレームを元にデザインを作成しましょう

デザイナーや仕事でホームページの作成をしている方は、Adobe IllustratorやFireworksと言った画像作成ツールでデザインする事が多いですが、そういったツールを持っていない方には、Gimpなどの無料ツールがお勧めです。 デザインが完成したら、ホームページに使う画像部分を切り出して画像素材にして用意しておきます。※スライス機能がある画像編集ツールを使うと楽です。

4.HTML・CSSコーディング

デザイン作成が終わったら、次はいよいよHTML・CSSでホームページを作成します。 Dreamwerver等のオーサリングソフトがなくても、atomやterapad等の無料のエディタでもHTML・CSSファイルの作成は可能です。 HTMLやCSSは、本を購入するのもいいですが、インターネット環境があればHTMLやCSSはいつでも調べる事が可能です。 例えば<h1>タグで包括したロゴと<li>タグで包括したメニューを一列に並べたい」と思ったら、「<h1>　<li>　一列」で検索すると、解決方法が見つかります。

…いかがでしょうか？一向に終わる気がしない作業も順序立てて進めていけば、いつもよりも無駄なくスムーズにホームページを作成できそうだと思いませんか？

これがプロのWebデザイナー(ディレクター)の仕事なら、要件定義書作成からWBSによる工数の管理なども必要になってきますが、そこまで行くと一気に敷居が高くなってしまう為、ここでは言及しません。 興味のある方は、調べてみて下さいね。

それではこの辺で！