Home > [Webサイト制作・Webデザイン, ノウハウ・アイディア, ホームページ作成, 必ず読むべき記事] > 初心者のためのホームページ作成手順Webサイト制作フロー

初心者のためのホームページ作成手順Webサイト制作フロー

公開日:2019年02月09日 最終更新日:2019年02月11日

ホームページを作成する前にやること

まずは、ホームページを作成する目的を考える

「ホームページ作成の目的」と言われても漠然としていて困る方もいると思いますので、
ホームページを作成する一般的な目的を記載します。

商品・サービスの販売

イメージしやすいように例を挙げるとヤフーショッピングや楽天のようなネットショッピングサイトです。

サンプル請求

栄養補助食品のサプリメントやドリンク、スキンケア化粧品やメイクコスメ、ボディケア用品などを体験したい人を募集するためです。
サプリや化粧品だけではなく、試用期限付きのソフトウェアやアプリ内課金や無料アプリなどもあります。

資料請求の獲得

システムやソフトウェア、商品やサービス、大学、専門学校、留学、塾、予備校、資格、試験などの資料が欲しい人のためのページです。
資料請求ページに訪問した人は、郵送先やメールアドレスを入力して資料を入手することができます。

お問い合わせの受付

商品やサービスの使い方や掲載内容などユーザーやお客様からのさまざまなお問い合わせを受け付けるためのページです。

情報提供・情報発信

地元、全国のニュース、芸能、エンターテインメント、仕事、育児、教育、家計、家事などのノウハウ、情報を紹介するサイトです。

商品やサービスの使い方、ヘルプ、よくある質問のデータベース化

商品やサービスの使い方などのマニュアル、ヘルプやお問い合わせが多い内容をよくある質問として掲載していくことによりユーザーやお客様の手間を減らすことができます。

会社案内

「企業理念」や「会社概要」「プレスリリース」「IR情報」など会社の情報を公開します。

求人募集・採用

「どのような人材を」「どのような条件で」募集しているのかを求職者に理解してもらうことが目的です。

ホームページを見て欲しいターゲットを決める

目的が決まればターゲットはだいたい決まってきていると思います。
なぜなら、商品やサービスを販売することが目的のホームページであれば、
その商品やサービスを使いたいまたは使って欲しいユーザーは決まっているからです。
また、求人募集や採用サイトの場合は欲しい人材のイメージがあります。
新卒採用なのか経験を優先した中途採用なのか目的があってホームページを作成するからです。

サイトタイトルやキャッチコピーを決める

サイトタイトルやキャッチコピーはホームページを作る目的に関連したキーワードを入れます。

ホームページの作成方法を決める

ホームページの作り方には、次の6個があります。

メモ帳やテキストエディタを使用してHTMLとCSSで作成する

ホームページを作成するには、HTMLと言うプログラミング言語を使用してHTMLファイルを作成してサーバーにそのファイルを置きます。
そのファイルにアクセスしてもらい掲載内容が見れるようになっています。
ただ、ホームページを運用していくとなるとたくさんのファイルを管理していくことになります。
また、ホームページを作成したことがない人にとってはメモ帳とHTML言語での作成はかなりハードルが高いホームページの作り方です。

テンプレートを利用してホームページを作成する

インターネット上には、掲載内容を変えるだけで自分が作成したいホームページを作ることができるようにHTMLファイルをテンプレート化したものを提供している方がたくさんいます。
このHTMLテンプレートを利用することにより0からホームページを作るよりは比較的簡単にホームページを作成することができます。
ただし、メモ帳やHTMLなどのソフトウェアの操作方法、プログラミング言語の知識は必要になります。

ホームページ作成ソフトでホームページを作る

ホームページ作成ソフトは、掲載情報を入力することでソフトウェアがHTMLテンプレートに適切に入れてホームページを作ることができます。
凝ったデザインやオリジナルデザインを作成する場合は、HTMLやCSSと言ったプログラミング言語の知識が必要になります。

無料ブログサービスをホームページとして使用する

クリックと文字入力だけで掲載情報が表示される無料のブログサービスです。
このサービスを利用すれば、伝えたい内容、情報は誰でも配信することができます。

無料ホームページ作成サービスを利用してホームページを作成する

WIX、jimdo、Ameba Owndなどクリックと文字の入力でホームページを無料で作成することができるサービスです。無料なのでサービス提供している会社で広告が自動表示されるサービスもありますが、綺麗なデザインでホームページを作ることができます。
yahoo!ジオシティーズなどのようにサービスの提供が終了する場合もあるので、利用についてしっかり検討する必要があります。

CMS(コンテンツ管理システム)を利用してホームページを作る

CMSを利用してホームページを作るのが今、一番、人気のあるホームページの作り方ではないでしょうか。
CMSとは、WordPressなどを代表する掲載内容とデザインを分けてコンテンツを管理するシステムです。
(※無料ブログサービスも同様のシステムです。)
このサイトもWordPressを利用して作成しています。
掲載内容がデータベースで管理しているので新規登録、編集、削除が簡単にできるため、作成した後の運用更新も楽です。
また、サイトのデザインを変えたい場合もテーマを変更するだけでサイトデザインが変更できます。

サーバーとドメインを取得する

無料ブログサービスや無料ホームページ作成サービスを利用する場合は
サーバーもドメインも必要ありません。
ドメインをサーバーに設定してユーザーが見れるようになるまで24時間~48時間は必要になります。
まず余裕を持って72時間はドメインの浸透する時間を取っておきます。
ホームページ制作をするまでにまだ準備があるのでサイトタイトルやホームページの作り方が決まり
サーバーとドメインが必要だと分かったらここで取得しておけば今後の制作がスムーズになります。

ロゴマークを作る場合はここで作成しておく

ホームページにロゴマークを使用したいとお考えなら
ホームページの配色を決めるための基準になる場合もあるので
ロゴマークをここで作成しておきましょう。

ホームページのカラー・配色を決める

ホームページのテーマカラーを決めます。
商品やサービスのイメージカラーがある場合は、
商品やサービスとの統一性を保つためにそのイメージカラーを使用します。
他には、ロゴマークがあればそのロゴの色や関連した色を使用します。
ターゲットが好きな色などを使用します。

ホームページのデザインを作成する

必要なページを書き出す

サイト構成図のサイトマップを作る前に必要なページを全て書き出して行きます。
例.
トップページ
会社案内
企業理念
事業内容
求人募集要項
お客様の声
よくある質問
お問い合わせ
商品・サービス紹介

サイトマップを作成する

書き出した必要なページをカテゴリー化してサイトマップを作成します。

トップページ、サブページのレイアウトを決める

サイトマップを作成したらサイトのデザインをレイアウトしています。

ホームページの作成に迷ったらすること

競合のWebサイトや参考にしたいWebサイトを実際に見てみる

ターゲットが入力しそうなキーワードで検索して表示されたサイトを見る、
サイトカラーを使用したサイト、デザインが好きなサイト、今現在人気のサイトを実際に自分の目で見ることから始めると良いです。