NEWS & COLUMN
お知らせ・コラム
SCROLL
MARKETING
ホームページ制作の流れを解説！WEB制作フローの４ステップ
2017
.08.23
ホームページ制作会社の選び方のポイントは以前の記事（これでもう迷わない！ホームページを制作する会社のための、制作会社を選ぶ４つのポイント）でお伝えしましたが、実際に依頼した場合の制作フローは、どのような手順で進んでいくのか、よく知らない方も多いのではないでしょうか？
ネット集客を行うために、ホームページ制作を検討してみても調べれば調べるほど、専門用語ばかりで諦めてしまう人も少なくありません。
ホームページは作りたいけど、パソコンやインターネットのことは「難しそうでわからない」という方は、まず制作全体の流れを理解することで、WEB会社に依頼する場合でもご自身で作る際にもスムーズに進めていくことが可能です。
そこで今回は、これまでホームページ制作を行なったことがない方でもわかる、ホームページ制作の流れを徹底解説していきます。
１．企画・構成
１−１企画
ホームページを作る上で、一番初めに行うことはそのホームページのゴールを明確にすることです。
ゴールとは、ホームページがもたらす最終的な成果のことを指します。「商品の販売数を伸ばしたい」「サービスをPRしたい」「購買に繋がる問い合わせがほしい」など、目指すべきゴールが定まってなければ、依頼者も制作に携わるディレクター、デザイナー、プログラマーも何のために作るのか、わからなくなってしまいます。
名刺代わりに機能するだけでいい見栄えの良いホームページを作るなら、必ずしもゴールが必要になるわけではありません。
しかし、ネット上で自身のビジネスを加速させたいと考えているのであれば、そのビジネスのターゲットになるのは誰なのか、ホームページにアクセスしたその人にどんなアクションを起こしてもらいたいのか、しっかりと明確にしておく必要があります。
ホームページのゴールを明確に設定することは、ホームページ制作において一番大切なことと言っても過言ではありません。
１−２構成
ゴールを設定した次は、ホームページが目的を達成するために必要な内容（コンテンツ）を考えていきます。
まずは、自社ホームページに載せるべきだと思う内容を思いつく限り書き出してみましょう。書き出した項目は後ほど整理していくので、この時点では「あったほうがいいかも？」「なくても良いかな？」と思うことでも全て出し尽くします。
例えば、美容室のホームページであれば、「サービスの内容」「料金体系」「連絡先」「お店の場所」などがまず初めに思い浮かぶと思います。さらにネット集客を考えるのであれば、「サロンのコンセプト」「スタッフ紹介」「Q＆A」「ヘアケア情報の発信」など多岐にわたるコンテンツが必要となります。
もし、なかなか浮かんで来ないようでしたら、ビジネスの競合先や似たサービスを展開しているウェブサイトを覗いてみましょう。
数多くのウェブサイトを眺めていると、自身のホームページにも必要な情報は何なのか、少しずつわかってきます。
制作会社に依頼する場合でも自分で作る場合でも、掲載すべき内容をきちんと洗い出せていれば、ホームページ制作が失敗する確率はぐんと下がります。
企画・構成の段階で、将来ホームページがどう機能するのか決まってしまうため、このステップを蔑ろにせずしっかり時間をかけて考えていきましょう。
２．設計・デザイン
２−１設計
企画・構成が出来上がったら、次に具体的なホームページの設計図を作っていきます。
お家を建てるときでも同じですが、完成をイメージできる設計図面がなければ、どんな家を建てればいいのかわからなくなります。仮に完成しても当初のイメージとはかけ離れたヘンテコなお家ができてしまうかもしれません。
ホームページの設計図には、全体的な構成図の「サイトマップ」と各ページの詳細な図面の「ワイヤーフレーム」があります。
まずは、サイトマップから制作していきますが、企画・構成の段階で書き出したホームページに掲載すべき項目をそれぞれ関連性の強いもの同士で、カテゴリー分けして整理します。
ホームページは階層構造になっているため、第一階層にトップページがあり、その下の第二階層に大きなカテゴリーがぶら下がり、さらにその下の階層に小さなカテゴリーがぶら下がっていることが一般的です。
美容室を例に考えて、第二階層に「サロンコンセプト」「メニュー」「スタッフ紹介」「アクセス」「お問い合わせ」「ブログ」を設置すると、このようなサイトマップが出来上がります。
サイト全体の構造ができたら、次は各ページの骨組みであるワイヤーフレームを制作していきます。
ワイヤーフレームとは、ホームページの画面上に何をどこに配置するかを記した、線と枠でできた設計図のことです。
ちなみに、当サイトのワイヤーフレームはこのような感じになります（ブログ記事ページの一部）。
ホームページを閲覧している人は、画面の左から右に、上から下へアルファベットのZを描くように視線を動かしていきます（スマホ画面では上下に）。
したがって、ユーザーから見て「見やすいのか」「使いやすいのか」を意識したコンテンツの配置を心がけることが、レイアウトを組む上では大切です。
２−２デザイン
トップページ以下全てのページのワイヤーフレームができたら、ここからはホームページをデザインしていきます。
デザインを作っていくには、まずホームページに使用する、写真、テキスト、イラスト、ロゴ、バナーなどを用意する必要があります。
ホームページに使用する素材は、制作会社に依頼する場合でも依頼者があらかじめ用意しておくことが一般的です。
ご自身で素材を準備すれば、制作費用は安く収まりますが、インターネット上で画像検索して出てきた画像をそのまま無断で使用したり、フリー素材を規約に反して使用すると、著作権侵害にあたります。
また、ホームページのデザインは全てのページに統一感を持たせることが大切なため、写真の雰囲気やテキストのフォントなどがバラバラになってしまうと、見る人に違和感を与えてしまいます。
したがって、企業や店舗のホームページを制作する場合、掲載する写真はプロカメラマンに、配色や使用するフォントなどはWEBデザイナーに任せてしまう方が賢明です。
ちなみに、先ほどのワイヤーフレームをデザインすると、このようになります。
また、近年では見る人の端末（パソコン、スマホ、タブレット）によって表示が自動的に切り替わる「レスポンシブデザイン」が主流になっているため、スマホなどのモバイル端末での画面表示を意識したデザインが大切です。
３．コーディング
デザインが完成したら、プログラミング言語（HTMLやCSS）を使用して「コーディング」を行なっていきます。
出来上がったデザインをパソコンなどの端末のウェブブラウザで、画面表示するためにプログラムを記述することをコーディングと呼びます。
コーディングは家づくりに例えると、大工さんが道具を使い住宅を組み上げるステップです。
「アニメーションを動かしたり」、「リンクをクリックすると違うページに飛んだり」する機能もこのコーディング作業によって作られます。
当サイトのHTMLソース（コード内容）はこのようになっています。
いかがでしょうか。WEBプログラミングの知識がない方でしたら、何が書いてあるのかサッパリわからないかもしれません。
ご自身でホームページを作ろうとした多くの人が、このコーディングの段階でつまずいてしまい、制作を断念してしまいます。
しかし、最近ではWEBプログラミングの知識があまりない方でも、比較的簡単にホームページが制作できる「WIX」や「JIMDO」などの無料ホームページ制作サービスも存在します。
加えて、「WordPress」や「concrete5」などのCMS（コンテンツマネジメントシステム）を使用すれば、ネット上のホームページ制作サービスよりもオリジナリティ溢れるホームページを作ることが可能です。
ただ作って公開するだけなら先出の各種ツールを使えば十分かもしれません。
しかし、内部SEO対策を施したり、特殊なエフェクトをかけたりするには、ツールだけでは不十分なため、制作会社に依頼した方が満足のいくホームページが完成します。
さらに、ホームページは初めに設定した目標を達成し続けるために、日々、運用・更新していく必要があります。
ネット集客を考えてホームページ制作を行うのであれば、WEBマーケティングのノウハウを持つ制作会社を頼った方が、早く確実に成果を上げることが可能です。
４．インターネットに公開
４−１サーバー契約と独自ドメイン取得
コーディングまでの全ての作業が完了したら、いよいよホームページをインターネット上に公開します。
そのためにはまず、家に例えると土地にあたるホームページの置き場所になるサーバーを借ります。
サーバーは、さくらインターネットやエックスサーバーなどレンタルサーバーを借りることが一般的です。
容量や付加サービスにもよりますが、月額数百円程度から利用することができるため、ホームページのボリュームや目的に合わせて適切なサーバー会社を選びましょう。
ホームページの置き場所を確保したら、見る人がアクセスするためのインターネット上のドメイン（住所）を決めます。
当サイトでいえば、「http://onca.co.jp」の「onca.co.jp」の部分が世界に二つとない当サイトだけの住所であり、全てのページとメールアドレスに使用されています。
無料で使用できるドメインもありますが、ビジネス利用のホームページであれば、有料の独自ドメインを取得することを強くオススメします。
なお、独自ドメインの取得と維持費は、ドメインの種類（.com、.co.jpなど）によりますが、年間数百円から数千円程度で賄うことができます。
４−２ファイルアップロード・確認
サーバーとドメインが利用可能になったら、HTMLファイルや写真、イラストなどをサーバーにアップロードします。
作成したファイルや素材をアップロードするにはFTPソフト（ファイル転送ツール）を使用して、サーバーに転送していきます。
FTPソフトとは、パソコン内に保存してあるファイルのサーバー転送をアシストしてくれるツールです。
また、WordPressなどのCMSを使えば、ウェブブラウザを利用して画像などのデータを簡単にアップロードすることも可能です。
全ファイルのアップロードが完了すれば、全世界のインターネット上に自分のホームページが公開されます。
無事公開することができたら、ホームページにアクセスし、「写真がちゃんと表示されているか」「レイアウトが崩れてないか」「リンク先に飛べるか」などきちんと閲覧できるか１つひとつ確認しましょう。
さらに、モバイル端末（スマホ、タブレット）やブラウザ（IE、Safari、chrome）を変えて、どんな環境でもストレスなく閲覧できるか確認します。
もし、ネット集客を考えてホームページを制作したのに、画像が表示されなかったり、正常にリンクが機能しなければ、見込み客を失ってしまいかねません。
そうなってはしまわないように、様々な環境でホームページを見るすべての人が快適に閲覧できるよう心がけましょう。
５．今回のまとめ
ホームページ制作というとWEBの専門用語が多く出てきて、なんだか取っ付きにくいものだと思われがちです。
しかし、ホームページ制作を自身で行う場合でも制作会社に依頼する場合でも、どんな流れで行われていくのか知っていた方が、理想的なモノが出来上がります。
特にネット集客を考えているのであれば、制作後の更新・運用がとても重要なため、しっかりと企画・構成を練って、目指すべきゴールを必ず決めておくことが大切です。
制作会社に依頼したからといって、すべてを丸投げするのではなく、積極的に打ち合わせを行い、明確なWEB戦略を持ってホームページ制作を行いましょう
