ホームページって
どうやって作られるの?
出来上がるまでのながれ

ご依頼をいただいてから実制作に入るまでの準備、
サイトができあがっていき、お客様に納品されるまでの工程の例を
フローチャートでご紹介します。

ホームページはアップロードしたら完成というものではありません。
開設してから育てあげていくことがとても重要。
公開後に行うべきことも解説していきます。

サービスフロー

ご相談・ヒアリング

お客様のご要望をメモする女性スタッフ

「なぜホームページを作成するのか」サイトを立ち上げる一番の目的をお聞かせください。
集客や販売など売り上げに直結させることであったり、
インフォメーションを発信したり名刺のような役割を担うためであったり、
お客様によって様々な目的があると思います。
まずは、ざっくりとした内容から明確にしていきましょう。
想定されているご予算についてもお気軽にお話しください。
「どんなホームページにしたいのか」というお客様の理想をお尋ねしまして、
コスト内で実現できるようプランニングしていきます。

サイトマップの作成

企画会議の風景

ヒアリングでお聞かせいただいたお話を元に、
ホームページのコンテンツ内容と構成を考えていきます。
まずは、お客様の事業・活動内容を熟知し理解することが第一です。
そして、ターゲットの傾向や競合調査などのマーケティングを行い、
目的を達成するまでの導線を描いていきます。
また、キーワード選定をはじめSEOの施策もこの時点で着手します。
これらを図にした「サイトマップ」をお作りして、
お客様にサイトの構成を提案させていただきます。

概算お見積り

グラフ計算のイメージ画

サイトマップ作成により概ねサイトのボリュームも見えてきますので、
概算のお見積りをいたします。お見積りは無料となっております。
もしお客様のご意向に沿うことができなかった場合でもこの時点でお断りいただけます。
ご確約がいただけましたら、デザインの下書きに入っていきます。

ワイヤーフレーム作成~素材あつめ

女性カメラマン

ご要望のカラーや方向性、デザインに沿って、ワイヤーフレームと呼ばれる設計図を作成していきます。
サイト内に配置する文章の題材やキャッチコピー、写真など
必要となる素材がより具体的にはっきりしてきますので、
それらをピックアップしまして、お客様にご準備を始めていただきます。
お客様で素材をご用意していただくことが難しいという場合は、サポートさせていただきます。

モノデザインワークスでは通常、主にテキスト(記事)を軸にしてサイトデザインを組み上げていきます。 あくまでケースバイケースですが、“記事タイトル→記事本文→写真や装飾素材”という流れで素材準備を行っています。 ワイヤーフレームを組む前に、サイトマップで作成したコンテンツ案に沿ってテキストライティングを始めることも多いです。

コーディング

コーディング画面

ラフデザイン・ワイヤーフレームをお客様にご確認していただき、ご了承をいただけましたら、
今度はそれを元にインターネットで表示するためのソースコードを作っていきます。
コーディングと呼ばれる工程で、WEB制作には必須となる専門的な作業になります。
まずは、揃った記事のSEOリライト、METAデータの作成を行っていき、
写真や映像などの素材を適切な形へと加工修正、
ホームページを構築するために必要な各ファイルの生成といった作業を続々と進めて、コーディングしていきます。

ドメイン・サーバースペースのご用意

ノートパソコンに入力するプログラマー

ホームページを置くための場所「サーバー」と、
インターネット上でのサイトの住所となる「ドメイン」の準備も始めます。
ホームページを公開するにはこの2つがなくてはなりません。
お客様ご自身でレンタルサーバー等をご用意していただくか、
もしくはモノデザインワークスで管理しているサーバースペースをお使いいただくことも可能です。

動作テスト~納品・公開

紙袋からあふれる綺麗な植物

コーディング作業が完了したら、各ブラウザや主要スマホ機種で正確に表示されるか動作テストを行います。
また、SEO上のペナルティ要素はないか?文章や写真などにプライバシーに関わることや問題点がないか?
細かい校正作業を慎重に進めていきます。

エラーやトラブル要素がないことを確認出来たら、お客様への納品となります。
ホームページのデータをサーバーへアップロードして、いよいよインターネット上へ公開です。

サイト公開後の管理

ノートパソコンとスマートフォン

ホームページは公開して完成ではありません。そこから育てていくことがとても重要となります。
新規でアップロードしてもすぐには検索エンジンに認識されませんので、ググっても表示はされません。
これは2、3日、1週間で上がるものではなく、数か月は掛かるものだと認識しておいたほうが良いと言えます。
しかし、1日でも早く検索エンジンに表示されるようになって欲しいものです。
さらに、上の順位で載せてもらえれば、サイトへのアクセス数の増加へもつながります。
そのためにも、SEOやアクセスチェックを行いながらサイト成長させることが大切です。

SEOの必須項目のひとつにもなっているのが、サイトの更新・管理という運営作業です。 常に最新情報を発信して、ホームページの活性化に取り組んでいるサイトへは、検索エンジンも良い評価をつけます。 その逆であれば評価も当然悪くなってしまいます。 SEOにかかわらず、古い情報のまま更新を怠っていたり、規格が以前のまま放置されていて正常に表示できない状態では、 ユーザーに信用してもらうことはできません。 お知らせ欄やブログを更新していくだけでも、ユーザー、検索エンジンの印象は全くちがったものとなります。

エラーなどへの対応

スマホでショッツピング

ブラウザやOSのアップデートなどにより、「ホームページがどことなく昨日とは違って見える?」なんてこともあります。
サイトで使っている機能に脆弱性が確認されたり、そのサポート自体が終了してしまうと、
アクセスするたびに警告が表示されるケースも。
こうしたエラーが発生した場合には対応が必要です。

モノデザインワークスでは、サイトを作り終えて完了するのではなく、
ホームページの更新や管理対応、運営をしていくためのご支援も行っております。
サイトの規模にあわせたご提案をさせていただきますので、ご相談ください。

※作業工程は、案件によって順序が前後したり、同時進行で行われることもありますが、
基本的にはこのような流れで製作が進んでいきます。
もしも進捗中にわからないことがございましたら、ご遠慮なくお聞かせください。

オプションサービスの
製作フロー

トップページに動画を使いたい

ヒアリング
絵コンテ作成
撮影・素材あつめ
編集
エンコード
コーディング

サイトのワイヤーフレームも、動画を活用したトップページデザインにすることを前提として作成していきます。
動画ファイルのサイズ(重さ)は、ユーザビリティや通信環境への負荷を考慮しますと、
長くてもおよそ20秒前後に収まる作品にすることが望ましいと言えます。
その限られたサイズの中でも、お客様のサービス内容や情報をしっかりと魅力的に伝えることのできるコンテを練ります。
絵コンテ(台本)が決定しましたら、それに沿って撮影・素材収集を行い、編集作業でまとめあげていきます。
動画作品が完成しましたら、ホームページに載せることのできるサイズ・ファイル形式へエンコードを行い、
WEBコーディング作業の工程へと送ります。