岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

MWORKSで実際に行っているホームページ制作流れ(制作の裏側編)

公開日:2016年2月24日 : ホームページ制作関連

MWORKSで実際に行っているホームページ制作流れ(制作の裏側編)_カバー画像

今回はホームページ制作・公開するまでに、制作者側が担当する行程について記事にしました。会社の簡単な紹介を載せるだけのホームページであれば、難しく考えることもないですが、成果を上げるためにホームページを活用したいのであれば、サイト公開まで企画段階からしっかり計画して制作を進めていく必要があります。

MWORKSのホームページ制作の流れページでは、お客様とのやり取りを、お問い合わせからサイト公開まで10ステップで流れを紹介していますが、この記事では、制作側に内容を絞って書いています。

お客様の商売に貢献するためのホームページを、制作者はどのような作業を経て完成まで進めていくのか?MWORKSで実際にお客様に提供しているサービスを基に記事にまとめました。

Web制作者、Webマーケティングの裏側を、ぜひのぞいて見てください。

目的

目的への道イメージ

ホームページを制作するにあたって、まず始めに確認、決定することは目的です。ちなみにホームページを公開するというのは目的ではありません。

新規の取引先を開拓する、店舗に集客する、ネットショップで売上を上げる、優秀な人材を採用する、などホームページを活用して、成果を上げる目標を決めておく必要があります。何も目的を決めずにホームページを制作しても、ただ運営コストがかかるだけになってしまいます。

詳しくは、以前の記事【ホームページに目的は必要?代表的な例8つ】で書いていますので、何かの参考になれば幸いです。

サイトコンセプト

サイトコンセプト

①で立てた目的を達成するために必要な施策になります。目的を達成するために、どのようなサイト構成、コンテンツを用意することで、訪問者を目的に導くのか?企画、戦略を立てていきます。その企画全体をここでは『サイトコンセプト』と呼びます。

サイトマップ

サイトマップ_イメージ

企画を立てた構成・コンテンツがホームページの中でどのような構成でレイアウトされているか、一覧で見られる図『サイトマップ』を作ります。ここで構成を確認して、このサイトマップを基に、計画を進めて行きます。

お見積もり、関係者との確認、ワイヤーフレームの参考、などの作成・確認にこのサイトマップを使用します。サイトマップにはホームページの中にあるすべてのコンテンツとそれぞれの関係性が一覧で確認できるものなので、計画を進めるには必ず必要となります。

ワイヤーフレーム

ワイヤーフレーム_イメージ

デザインの骨組みになります。ヘッダー、メニュー、バナー、サイドカラム、フッターなど、四角いグリッドでページに配置する要素を区切ります。どこに何が入るのかが分かるようにレイアウトを決めていきます。

ワイヤーフレームでは、サイト内の導線を見えるようにすることで、訪問者の方にとって使いやすく、商品購入や問い合わせに繋がるサイト設計を行います。

またこの行程では、サイト全体でデザインが必要な部分を把握する、作業工数の見積り、共通パーツの確認、UI(ユーザーインターフェース)が使い勝手よいか?などを検証します。それによって、次のデザイン制作の行程にスムーズに入ることができます。

デザイン

webデザイン_イメージ

ワイヤーフレームを基に、サイトの企画に合うデザインを制作していきます。信頼感、独自性、情報の見やすさなどはどのようなデザインを採用するにしても必ず押さえておくポイントです。質の高いデザインで、提供している商品やサービスに対して、人の感性に訴求します。

そして、質が高くても競合と同じようなデザインでは独自の価値が伝わりません。打ち合わせでクライアントの商売を深く理解することで、独自性による差別化をデザインでも表現していきます。

その他にも、次の行程に当たるコーディングへの配慮や、スマートフォンでも見やすくするなど、見た目の部分以外でも注意が必要です。

コーディング

コーディング_イメージ

ここからは、コンピュータのブラウザにホームページを表示させるための作業になります。以前の記事、HTMLとは?【初心者向け_ホームページ作成の基本】 でhtmlの記事を書いていますが、HTMLとCSSといったマークアップ言語を使ってコーディング(プログラムのコードを書く)していきます。

現在のWeb環境では多くの人が、パソコン以外にもスマートフォンやタブレットなどからホームページを閲覧しますので、ホームページもそれに合わせどの端末からも見やすく作ることが必要になっています。

Webページ作成

webページ制作

ここまで来るとサイトマップで構成されれたページ作成の作業を進めていきます。コーディング作業と平行して行うこともあります。

この行程までに写真撮影をしたり、事前にお客様から各ページに掲載する文章をお願いするなどして、ページ制作に必要な素材を集めておきます。

そして、訪問者の方に見やすく伝わるようにレイアウト、デザインをしてページの見た目を作っていきます。

サーバーアップロード

サーバーアップロード

ある程度の部分の制作が完了してきたら、実際にインターネット上で見られるように、ホームページのデータを置いておく場所(サーバー)にデータをアップロードします。

ちなみに、ホームページの公開にはもう1つドメインというインターネット上の住所にあたるものを取得しておく必要があります。(サイトリニューアルなど既に取得している場合はそのドメインを使用できます)

詳しくは、以前の記事【インターネットとホームページの仕組み(図解付)】を参考にしてみてください。

CMS(Wordpressなど)化、ショッピングサイト化など

CMS(Wordpressなど)ショッピングサイト化_イメージ

ページ数が少ないサイトの場合などは、⑧サーバーアップロードで完成となります。

しかし現在ではCMSと呼ばれるシステムをホームページに組み込むことで、簡単にページ修正・更新を行うことができるようになるため、MWORKSでは殆どのホームページにCMS(Wordpressなど)を組み込んでいます。
(これにより制作会社にページ修正・更新などを依頼しなくても自社で行うことができる)

その他にも、ショッピング機能をサイトに追加する場合はこの段階で構築の作業を進めていきます。(EC-CUBEなど)

内部SEO対策

内部seo対策

⑥コーディング、⑦ページ作成、⑨CMS(Wordpress)などの行程の中で、内部SEO対策と呼ばれる部分も行っていきます。

SEOとは、簡単に言うと特定のキーワードで自社のホームページが上位に表示されるように、最適化する施策のことです。

詳しくは、以前の記事【さてSEOとはなんでしょう?|SEO対策の基本01】
【SEOの内部施策、外部施策とは?|SEO対策の基本02】
を参考にしてみてください。

どれだけ素晴らしいホームページが完成したとしても、見込み顧客に訪問してもらはなければ、せっかくの計画が無駄になってしまいます。企画段階で設定したターゲットの方により多くアクセスしてもらえるように、内部SEO対策を行います。

動作確認テスト

動作確認_イメージ

コーディング時などでも適宜行っていますが、最後にPC、タブレット、スマホ、各種ブラウザでホームページのデザインが適切に表示されているかを確認します。

あまりにも古いPCやブラウザまで最適化するには、その分コストがかかりますので、クライアントとはどこまでの端末や環境でうまく表示させるようにするか?事前に確認しておきます。

公開

サイト公開

やったー!色々あったけど無事公開できてうれしいです。しばし達成感を味わいます。

ここまで終わるとホームページ公開となります。中小規模のサイトであれば、MWORKS側での実作業期間は3〜4週で完了できるように進めて行きます。そこに、お客様の確認期間や素材を用意していただく期間を足すと、初回打ち合わせからサイト公開までは、約1ヶ月〜2ヶ月程度となります。

まとめ

サイト公開_イメージ

【MWORKSで実際に行っているホームページ制作流れ(制作の裏側編)】各項目の流れを簡単に説明してきましたが、いかがでしたでしょうか?

計画を立てて一つひとつ順番に形にしていくことで、成果を上げるためのホームページ制作は完成することができます。

新規サイト制作やリニューアルの参考になれば幸いです。

この記事の他に、ホームページ制作関連のブログ記事も公開していますので、ホームページ制作|記事一覧をご参考くださいませ。

ホームページ関連おすすめ記事

ホームページに目的は必要?代表的な例8つ

会社ホームページを開設するメリット、デメリット

お問い合わせはこちら

MWORKSでは、『ホームページで成果を上げるサービス』を提供しています。

『ホームページを開設したいけど、どこに頼めばいいかわからない…』
『自社で運営しているが、成果がぜんぜん上がらない…』など、
お困りの点がありましたら、お気軽にお問い合わせください。

お電話、メールフォームから、ご都合に合わせてどうぞ。

【MWORKSでは、個人事業主の方、中小企業の商売の役に立つサービスを提供しています。】

ホームページ制作の内容はこちら >>

Webマーケティングの内容はこちら >>

サービス・プランの内容はこちら >>


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています