WEB制作の流れ|ゼロからのWeb制作 Vol.1

2014.04.30

image001

0f2890d83857f2d3e50d317c4ef807c2_m

こんにちは、鈴木です。

Web制作初心者の私が、日々学んでいるWeb制作の知識をアウトプットしていきたいと思います。

Web制作と言っても、ホームページが出来上がるまでには、たくさんの作業が必要です。そして、ホームページを作ったら終わりではなく、その後運用していかなければなりません。

まず、基本的なWeb制作の流れは以下のようになっています。
image001

1.サイト制作の目的を明確にする

「何」を「誰」に対して「どのように」訴求するかをあらかじめ明確にします。サイトの目的を決めておかないと、何を発信したいのか分からないサイトになってしまいます。

自分達の伝えたい情報を訪問者に伝えるためには、サイトのゴールを決めておく必要があります。

補足。
ここがいちばん大事です。お客様にヒアリングするときも、これを先に明確にします。お客様、業者問わず、目的を明確にせずに、デザインをどうする、細かい機能をどうする、などを目先の要素を先に決めたがる方もいますが、これは誤り!!

オカベ

2.情報整理・企画

目的を達成するためには何が必要かを考え、情報を集め、整理します。

例えば、サイト内のコンテンツや競合するサイトは今どれくらいあるかなど、自分達のサイトにより多くの人が来てもらえるように、様々なことを調査します。

補足2。
ここでは集客する仕組みを考えます。商材やサービス、対象とするユーザ層によって効果的な見せ方や手法は違います。例えば、Facebookが流行ってるからといって安易にページを作っても、アピールしたい層とFacebookの利用者層が違ったりすると、全然効果が出ないのに運用の手間ばかり増えます。

オカベ

3.ワイヤーフレーム作成

サイトの設計図を考え、サイト内をどう構成するかを決めます。自分たちの伝えたいことは何かを考え、サイトの骨組みをします。訪問者の見やすさだけではなく、使いやすさも考える必要があります。

補足3。
面白いからといって奇抜なレイアウトにすると見る人が慣れていなくて使いづらいものになる可能性が高くなります。なので、うちの場合は一般的な型にハメることが多いですね。デザイナー的には冒険したいところですが、見る人/使う人が最優先です。

オカベ

4.グラフィックソフトでデザイン

グラフィックソフトを使い、レイアウトやパーツを作ります。

グラフィックソフトには、画像編集ができるPhotoshop、ウェブデザインに特化したFireworksなど無料のものから有料のものまで様々です。自分達のサイトに必要なソフトを使い、デザインを作っていきます。

補足4。
無料のソフトは、GIMPとかが有名なのかな……
あんまり使ったことないや……

オカベ

5.HTML/CSSコーティング

作ったデザインの通りに、コーティングをします。

HTML/CSSコーティングを行うには、テキストエディタが必要です。テキストエディタにソースコードを記述することでサイトの構造から装飾までを行ないます。

補足5。
メモ帳でも全然書けますが、Drewmweaverだったり、無料で使える高機能なエディタを使った方が早いし便利だったりします。

オカベ

6.HTML/CSS以外のプログラム

新たな機能が必要な時に、コーティングします。

サイトに動きが欲しい時に使う言語にJavaScriptがあります。HTML/CSSだけではウェブページに動きをつけることはできません。

補足6。
動きを付けたいとき、一昔前まではFlashでしたが、最近はjQuery系のプラグインとかが良く使われますね。あと、CSSでもアニメーション付けられますが、それはおいおい勉強してくださいな……

オカベ

7.ウェブサイト公開

制作したサイトをサーバーにアップロードします。

サーバーには無料のものから有料のものまでありますが、本格的にサイトの運営を行うには、有料のものを使うことをお勧めします。

補足7。
無料のサーバだと、独自ドメインは設定できないし、そのサービスが終了したらサイトもなくなってしまいます。
ビジネス用途の場合、独自ドメインでないと心象が悪くなりますので、有料が安心です。

オカベ

8.ウェブサイト運用

サイトに継続的に記事を追加します。アクセス解析を用いて自分のサイトにもっと多くの人に見てもらえるように、改善の必要があるなら新たに作業を開始します。

補足8。
名刺代わりのWebサイトだったら放置していてもでも大丈夫ですが、効果を出したいのであれば、きちんと運営することが大切です。定期的にPDCAサイクルを回して、改善し続けましょう。
結局、全部に補足してもうた……

オカベ

以上が基本的なウェブサイト制作の流れです。

私のとりあえずの目標は、ひとまずウェブサイトを一通り作れるようになることです。

はじめはWeb制作過程のひとつであるHTML、CSSの部分をアウトプットしていきたいと思います。

image001

次回は具体的にHTMLの書き方について紹介します。

お楽しみに!

まずはhtmlが読み書きできないと、話しにならんからね。
鈴木くん、期待してます!
分からないところがあったら、なんでも聞いておくれ〜

オカベ