pickup
ホームページ作成フロー

フリーでやり始めた方や、今後フリーでのWebデザイナーを目指す方などは『どのような順序で制作していけば…』と、悩んでいる方も多いと思います。

そんな方は“ホームページの制作フロー”をしっかりと知ることから始めましょう!

制作会社によって制作フローは異なります。

スポンサーリンク

制作前の打ち合わせ

Webサイトの制作を依頼してくるクライアントは、必ず何らかの目的・理由があって依頼をしてきます。

その目的を達成するために、クライアントと綿密にヒアリングをして情報の確認をします。

①ターゲットを決める

ホームページの「ターゲット」と「ゴール」を決めるところからヒアリングは始まります。

ターゲットとは具体的な人物像を描くことです。

そのターゲットを設定すると、そこにヒットする読者がいた場合、購入する可能性は高くなり集客効果や宣伝効果も高まります。

またゴールとはホームページを作る目的を決めることです。『販売促進がしたい』『集客を増やしたい』などがあります。

これらを設定がすることでホームページの方向性が明確になってきます。

②コンセプトを決める

ホームページの方向性が決まったところで、具体的なコンセプトを決めていきます。

コンセプトが決まっていないとデザインと機能がバラバラだったり、使い勝手が悪くなってしまいます。

そのためコンセプトは抽象的な言葉を具体的に決めることで誰が見ても分かりやすいホームページになります。

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

コンセプトが決まったらホームページのタイトルを決めます。

タイトルをつける際は、一般的にお店や会社の名前がそのままタイトルになることが多いです。

タイトルが決まったらキャッチコピーを付けます。キャッチコピーは無くても構いませんが、キャッチコピーがあることでそのホームページの存在感が出てきます。

キャッチコピー使用例

・Family Mart  →  「あなたとコンビにFamily Mart」
・セブンイレブン → 「近くて便利に」など

④制作ポリシーを決める

制作ポリシーとはホームページを作る上でのルールのようなものです。

・デスクトップ用とモバイル用でWebサイトを分けるか
・対応ブラウザをどこまでに設定するか
・Word PressなどのCMSを使うか

制作者が複数の場合はデザイナーポリシーやコーディングポリシーも決めておくと統合する際に手間が掛からなくて済みます。

⑤サーバー・ドメインを習得する

作成したホームページをインターネット上に公開する際に、サーバーやドメインが必要となります。

サーバーはイメージ的にビルの一室を間借りするような感じになります。サーバーは自作でも組み立てることは可能です。

ドメインは、Webサイト上の住所になります。ドメインはタイトルと同じくホームページの顔となる部分になります。

ポイント

クライアントとの打ち合わせではなるべく専門用語を使わないことをオススメします!クライアントと認識違いがあってはクライアント側が求めるWebサイト制作はできません。

デザイン作成

①サイトマップ作成

サイトマップとはWebサイトの全体像のことです。

ヒアリングの内容から各ページにどのようなコンテンツを配置していくか、どんなコンテンツがあれば興味を引くことが出来るのか、更にはどのようにページとページを結びつけるかを決めていきます。

②ページのレイアウト作成

トップページや商品紹介ページ、会社概要など、様々なページのレイアウトを決めていきます。このページ単位の設計図のことをワイヤーフレームと言います。

ユーザーは左から右、上から下に視線を移していくため、重要なコンテンツは上の方に配置するなどしてユーザーの心理を踏まえたレイアウトを心掛けると良いと思います。

紙とペンで作成してもOK。色を付けると尚更良いと思います

③デザインの最終確認

全ページの画像を作り終えたら、図や文書の使用やページを見ながらクライアントにデザインの最終確認をとります。

ポイント

クライアントと最終確認をする際は双方のイメージが合っているか相違がないか、図や文書を使いながらしっかりと確認をしましょう。

コードを書く

①コーディングをする

 作成したデザインを基にソースコードの打ち込みをします。

コーディングとはHTMLやCSSといったマークアップ言語で見出しをつけたり、リンクを設定したり、文字を太くしたりして、制作したデザインをブラウザで見える形にすることを言います。

最近では便利なエディタもたくさん登場しています。タグごとに見やすく色分けしたり、開始タグを入力してEnterキーを押すと閉じタグを自動で挿入してくれるものもあります。

②ロゴやバナーを作る

事前に設計図で打ち合わせをしたデザインでロゴやバナーを作成する。

また忘れがちなのはファビコンの作成です。

ファビコンとはホームページをブックマークした際に横に表示されるアイコンです。

③ブラウザのチェックをする

様々なブラウザでレイアウトが崩れていたり、表示のおかしいところがないかを確認する作業です。

ブラウザも種類が多いので出来るだけメジャーなInternet ExplorerMicrosoft EdgeGoogle ChromeMozilla FirefoxSafariは最低限確認した方がよいでしょう。

またスマートフォンやタブレットからもちゃんと表示されるか確認はしておいた方がいいでしょう。

④動作チェック

インターネット上で誰でも閲覧できるようにするため、サーバーにアップロードして、動作確認をします。

リンクが切れていないか、間違えて別の場所に飛ばないかテストサーバーでしっかりと確認してから公開します。

ポイント

ブラウザチェック時にクライアント側にも各ページのレイアウトや機能性をしっかりと確認をしてもらう。

制作したホームページを公開する

①検索エンジンに公開

ホームページをより多くのユーザーに閲覧してもらうために、GoogleやBingの提供するWebマスターツールに登録するとクローラーが自動的にホームページを巡回してくれるだけでなく、SEO( 検索エンジン最適化)に必要な様々な機能を提供してくれるので、非常に便利です。

SEOとは
SEO(Search Engine Optimization)とは、GoogleやYahoo!などのサーチエンジン(検索エンジン)で、特定キーワードで検索が実行されたとき、ホームページが表示される順位を上げるためのさまざまな施策のことです。
FINAL SEO  参考までにSEO対策の企業を載せておきます。

ポイント

TwitterやFacebook、InstagramなどのSNSを活用すれば、戦略的に自社ホームページの存在を認知させることができます。

②解析ツールを利用する

公開後はGoogleアナリティクスなどの解析ツールを使用して、アクセス数やCV数などを解析しながら指標を立てていきましょう。

③ホームページを更新する

様々な統計データを参考しにしてアクセスアップを目指しましょう。アクセス数が増えるとサイト運営のモチベーションも上がります。

ポイント

ホームページを頻繁に更新することによって、クローラーの巡回数も増え、ホームページの検索順位も上がりやすくなると言われています。
また統計サービスの結果は今後の対策に必要となってくるため、こまめに確認をしておくといいでしょう。

まとめ

制作するホームページの規模によっても変わりますが基本的な制作フローはこのようになります。

ホームページ開設を外部に委託する場合でも、こうした制作の流れを知らないと後で思ったとおりのデザインにならないこともあるので注意したいですね。

ホームページ開設を考えている方など参考程度覚えてもらえたらうれしいです。

スポンサーリンク

Twitterでフォローしよう

おすすめの記事