Web制作,基礎,ホームページ,制作フロー

ホームページを作成したいけど、デザインやコーディングの経験がない方は、
どのようにしてホームページを制作すればいいのか、戸惑いますよね。

そこで今回は、初心者の方でもわかりやすいように、
制作会社のWeb担当者が日頃行っている、
ホームページの作り方の手順とコツを簡単にまとめてみました。
制作の流れを知ることでやるべきことも見えてくるので、
ぜひ確認していきましょう。

最高の6ヶ月！超実践型プログラミングスクール【.pro】

<ご注意>
あくまでも一般的なホームページを作る流れのため、
制作会社、事業会社、クリエイターの方と異なるケースがあるため、
ご了承ください。

それでは、早速、ホームページ制作の手順を見ていきましょう。

■ホームページ制作の手順

企画
設計
制作・実装
- デザイン
- コーディング
公開
運用

■企画

最初に、関係者（お客様、社内関係者、制作メンバーなど）で、
ホームページの仕上がりの共通認識をあわせる為、
ホームページの目的（ゴール）を決定します。

どのようなターゲットで、どようなペルソナ（ユーザー像）なのかを
明確にする作業からはじめます。

ここで言う目的とは、「ホームページを使ってどんな成果を出したいのか？」ということです。
「なぜホームページを作成するのか」という、
根本的な部分を明確にさせておく必要があります。

■ 設計

目的が明確になったら、具体的にホームページの設計のフェーズに入ります。
まずは、ホームページの掲載内容を整理し、
必要な情報をまとめて構成を組み立てていきます。

どのページが、どのカテゴリーに属して、
どのカテゴリーがどのメニューに属するのか、という構造をまとめたものを、「サイトマップ」や「ディレクトリマップ」とよびます。
ここでホームページの形が決まっていくので、
しっかりと組み立てていきましょう。

さらに、各ページの構造をつめていきます。サイト全体の構造は、
ワイヤーフレームで作っていきます。
ワイヤーフレームとは、その名のとおり「ワイヤー(線)」と、
「フレーム(骨組み)」を使って、
各ページのどこにどの様な情報を掲載するかを示した図のことです。

■ 制作・実装

設計が終わったら、いよいよ制作段階です。

・画像、テキスト、ロゴなどの準備

ホームページに掲載する画像やテキスト、法人であればロゴを用意します。
自社で用意するかクライアント側で用意するかは、会社や案件によって異なり、場合によっては、制作会社から外部の会社に発注するケースもあります。
画像についても、会社、案件によって異なります。
制作会社に代行してもらうことも可能ですが、
その場合はその分の制作費用が発生します。

ロゴは、クライアントに制作データ（AI,PSD）を予め準備してもらうよう伝える必要があります。

・デザイン

素材が準備できたら、ホームページのデザインを作っていきます。
ホームページのデザインは、どのページも、
同一のホームページのものであることがわかるように、
全体の統一感を持たせることがポイントです。
印象がバラバラになってしまわないように、配置や配色、
使用するフォントなどの、トンマナを詳細に詰めていきます。

・コーディング

デザインが完成したら、制作したデザインをそのままWeb上で表現していきます。Webサイトを実際に形にしていくことを「コーディング」と呼びます。一般的なサイトのコーディングは、HTMLおよびCSSを使用し、定められたガイドラインに基づき、ルールに則って制作しています。特に動きのないサイトを作るならHTMLとCSSだけで問題ありませんが、トップページで使われているような写真が横にスライドして動く実装をしたいときは、JavaScript（jQuery）などで構築する必要があります。

■ 公開・運用

・独自ドメインの取得

まずは、インターネット上にホームページの置き場所を作りましょう。
そのためには、ドメインとサーバーが必要です。
ドメインとは、インターネット上におけるホームページの
住所表示のようなものです。

無料でレンタルできるドメインもありますが、
企業がビジネスとしてホームページを作成する場合、
無料ドメインはおすすめしません。独自ドメインの取得を強くおすすめします。

・サーバーのレンタル

ホームページを公開するためには、ドメインの他にサーバーが必要です。
サーバーとは、ホームページのデータを置いておく場所のことです。
ユーザーが、このサーバーにアクセスすることで、
作成したホームページが表示されます。
サーバーがなければ、ホームページは公開できません。

サーバーはレンタルサーバーを借りることが一般的です。
月額数百円～数万円と料金に幅があるので、
予算や目的に合わせて適切なものを選ぶといいでしょう。

・ホームページを確認する

作成したファイルをすべてアップロードすると、
ホームページがインターネット上に公開されます。
自分のホームページにアクセスして、きちんと表示されているか
確認してみましょう。

すべてのリンクが正常に動作するかどうか、
ひとつずつクリックして確認していきます。
写真が表示されているか、文字が潰れていないか、
レイアウトが崩れていないかなどが主なチェックポイントです。
もし、画像、文言のミス、表示崩れがあったら、ファイルを修正して再度アップロードを行います。

近年のスマートフォンの普及により、
ホームページもモバイルファーストが推奨されています。
パソコンだけでなく、スマートフォンをしっかり確認するようにしましょう。
また、iPadなどのデバイスでも、ブラウザ別に問題なく表示されているか
確認することをお勧めします。

この段階を経ることで、世界中のWebブラウザからホームぺージが閲覧できるようになります。

■まとめ

ホームページの制作および公開後における一連の流れを解説しました。
「難しそう」という印象からホームページ作りを断念してしまった人は、
まずは作成手順を把握することから始めてみましょう。

全体像が把握できれば、なにを勉強すればいいのか理解できるようになり、
ごく簡単なホームページなら初心者の方でもすぐに作れるようになります。

また、自分で作れないような複雑なホームページを外注する場合も、
作成手順を把握しておくことで、悪質な業者に騙されることもなく
スムーズに制作を進められます。

是非、こちらの記事を参考にしてみてください！