ウェブサイト制作の流れ

販促や集客のためにホームページを作ろうと思っても、途中で挫折してしまう人が多いようです。
「ホームページの業者が持ってきた見積もり、全くわからん！」 「なかなか更新できない」 「これって2年前のコーディングだよなぁ」ってよく思います。その理由のひとつとして、専門用語が多すぎて、なにが書いてあるのかまったくわからない。もう一つは、数年前と作り方も変わってしまったなど…まあ、紙媒体と違って、作った！できた！ハイ配布！ってなわけではないから…^^;
しかし本来、ホームページ作りはそんなに難しいものではありません。専門用語のせいで難しく感じられがちですが、制作フロー自体はそんなに複雑ではないのです。だって、ホームページもチラシも店や会社の宣伝をするものでしょ？最終目的は同じはず。本来、チラシも目的の明確化やターゲットセグメンテーションは行ってるはずだし、人が作ってるものだもの。^^;

「難しそう」という印象からホームページ作りを断念してしまった人は、まずは作成手順を把握することから始めましょう。
全体像が把握できれば、なにを勉強すればいいのか理解できるようになり、ごく簡単なホームページなら初心者の方でもすぐに作れます。ただ、ホームページは作成するだけでなく育てないと、意味のないものになってしまいますが…^^;
また、自分で作れないような複雑なホームページを外注する場合も、作成手順を把握しておくことで、悪質な業者に騙されることもなくスムーズに制作を進められます。 というわけで、初心者の方でもわかりやすいようにホームページの作成手順をまとめてみました。まずはWeb制作の全体像を把握して、ビジネスに寄与するホームページを作っていきましょう。

全体の流れ

１.企画→２.設計→３.制作→４.公開→５.更新

企画→（お申込･ご契約）

まず、ホームページの目的を明確にします。
目的とは、「ホームページを使ってどんな成果を出したいのか？」ということです。 「かっこいいホームページを作りたい」などではなく、「そもそもなぜホームページを作成するのか」という根本的な部分をはっきりさせておく必要があります。 これは、制作を業者に外注する場合であっても、必ず自分たちで考えておかなければならない部分です。

目的によって、ホームページに必要な要素は変わってきます。ホームページのタイプが変わってくるのです。（参照：ホームページの目的別パターン）

「インターネットを使ってどんどん集客したい！」
「とりあえず店舗の情報があればOK。社名と連絡先がわかる程度の、名刺みたいなもの」
「ホームページ上で物販したい」などなど… それぞれにより、作成方法やそれにかかる負荷も変わってきます。

名刺としての機能を持ったホームページを作りたいだけなら、あまり凝ったことをする必要はありません。無料で使えるホームページ作成ツールやテンプレートなどを使えば、それなりに見栄えのいいホームページが手軽に作成できます。

一方、インターネットでのビジネスを考えている場合は、もう少ししっかりと取り組んでいく必要があります。ホームページを使って商品を売りたいのか、問い合わせを増やしたいのか、顧客への情報提供と交流を行いたいのか。ホームページで獲得したい具体的な成果を、ここで明確化しておくことは必要不可欠でしょう。 インターネットで集客したいのであれば、この段階からSEO（検索エンジン最適化）についても考えておかなければなりません。当社では、この時点でドメイン取得とサーバー契約を行い、出来上がった時点での上位を狙います。せっかく制作しても見てもらえないでは意味がないですもんね。例え、名刺ページであっても…^^;

設計→（打合せ（撮影）･原稿作成）

具体的にホームページを設計していきます。ここでホームページの形が決まっていきます。しっかりと組み立てていきましょう。 「掲載内容を書き出し」や「サイト構造･各ページの構造の決定」など行います。

掲載内容の書き出し

たとえばホームページに名刺程度の役割を求めているのであれば、「事業内容」「連絡先」「アクセス」などの情報が必要だと考えられます。さらに踏み込んでWeb集客を考えるのであれば、「お客様の声」「事例」「Q&A」「問い合わせフォーム」など、さまざまな要素が必要になってきます。自分たちの理念や考え方を表現したいなら、ブログの設置が効果的かもしれません。

このように、まずは自社のホームページに掲載すべきだと思う内容を、思いつくがままにすべて書き出してみましょう。 この段階では、まだ整理された状態でなくても構いません。とにかく必要だと思う要素を、ひたすらに書き出していくのです。
思い浮かばない場合は、競合のホームページをチェックしてみましょう。何十、何百ものホームページを見ていると、だんだんと絶対に必要な情報がわかってくるはずです。この過程を無視していきなり作り始めてしまうと、ホームページの作成は高確率で失敗します。必ず目的を明確にし、掲載すべき内容をすべて洗い出しておきましょう。

ホームページの構造を決める

内容の書き出しが終わったら、まずはその掲載内容を整理します。必要な情報を種類ごとにまとめて、関連付けて構成を組み立てていくのです。 ホームページは階層構造です。一番上の階層はトップページで、その次の階層には大きなカテゴリーがあります。 それぞれのカテゴリーの次には、より小さなカテゴリーがぶら下がっています。

制作現場においては、こういった「どのページがどのカテゴリーに属して、どのカテゴリーがどのメニューに属するのか」という構造をまとめたものを、「サイトマップ」や「ディレクトリマップ」とよびます。当社ではhtmlでも基本作ります。その方がクライアントさんにとっても整理しやすいですからね。「サイトマップ」は他にもいろんな意味合いで使われることがあるので、「ディレクトリマップ」とよんだ方がわかりやすいかもしれませんね。実際にグーグルなどのロボット型検索エンジンには同じサイトマップというファイル名でXMLファイルをサーバーにアップして予め検索エンジンに読んどいていてもらうことをします。SEO的にはこれをしておかないとクロール（検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。）数がしてもらいにくいので^^;

ワイヤーフレーム

サイト全体の構造が決まったら、ワイヤーフレームで各ページの構造を作っていきましょう。 ワイヤーフレームとは、その名のとおり「ワイヤー(線)」と「フレーム(骨組み)」を使って、各ページのどこになにを掲載するかを示した図のことです。 ページのどこになにを掲載するか、という配置を決めていきます。
「どうすれば見やすいか」「どうすれば使いやすいか」ということを、閲覧者の目線に立ってよく考えていきます。

次にホームページに掲載する画像やテキストを用意します。 自作の場合はもちろんですが、制作会社に外注する場合も、画像やテキストはクライアントが用意することが一般的です。 「書ける人がいない」「写真やイラストは作れない」という場合は制作会社に代行してもらうことも可能ですが、その場合はその分の追加費用がかかります。

「社内で画像やテキストを用意できる人がいない、でも制作会社に委託すると高い」という場合は、クラウドソーシングサービスを活用してもいいと思います。 クラウドソーシングなら、必要な素材を必要なだけ頼むことができます。フリーランスのクリエイターが多いので、一般的な企業に頼むよりも安価であることも特徴です。正直、当社でも使う場合もあります。^^;近年ではさまざまなサービスが台頭してきているので、依頼内容によって適切なサービスを選ぶといいでしょう。

クラウドソーシング5サイトのご紹介

サイト名	アドレス
ランサーズ	https://www.lancers.jp
クラウドワークス	https://crowdworks.jp
Sufuti	https://www.shufti.jp
Shinobiライティング	https://crowd.biz-samurai.com
JobHub	https://jobhub.jp

制作/制作･校正

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

キレイなサイト作りで心掛けたいこと

同色系でまとまりのある配色にすること

均等の取れたマージン設定をすること

文字に強弱をつけること

外注の場合は、この作業をデザイナーが実施します。大抵は「デザインカンプ」とよばれるデザイン案が複数提示されます。その中から気に入ったものを選ぶ、というスタイルが一般的です。なお、スマートフォンなどのモバイル端末にも対応させる場合は、パソコンだけでなくモバイル端末から見たデザインも作っていきます。パソコンサイトとモバイルサイトで完全に別個のサイトを作る場合もありますが、近年は閲覧するデバイスによって自動的に表示が切り替わる「レスポンシブデザイン」が主流になっています。SEO的にもレスポンシブの方が、アクセス数も増えて上位に行きやすくなると思います。

コーディング

画像やテキストなどのコンテンツ、そしてデザインができあがったら、コーディングに入っていきます。

コーディングとは、できあがったデザインをウェブブラウザで閲覧できるように、HTMLやCSSなどの言語で記述していくことです。 こういったプログラム言語で記述されたものを、「ソースコード」とよびます。

ホームページ制作をチラシ作成に例えると…
ディレクトリマップやワイヤーフレームの作成は、ラフ作成。
デザイン作りは、素材集め。
そしてコーディングは、実際に家を組み立てる、実際の印刷データの作成そして印刷工程。
このコーディングを行うことによって、もう配布するだけになります。実際に印刷に回す前に昔なら文字校･色校など何度か確認作業が入ります。このコーディング作業ができると、「Internet Explorer」や「Google Chrome」などのウェブブラウザで閲覧できるようになります。「リンクをクリックすると別のページに跳ぶことができる」、スマホでタップすると電話がかかるなどの仕組みも、このコーディング作業によってつくっていきます。

ホームページを作ろうとする人のほとんどが挫折してしまうのが、このコーディング。しかし現在では、HTMLやCSSなどの記述ができなくても、ホームページを作成できるサービスもあります。もちろんこれらのプログラミング言語を理解できた方が、ホームページ作成の自由度は上がります。しかし必須ではないので、どうしても抵抗がある人は作成ツールやソフトを使うといいでしょう。

初心者向けで有名なホームページ作成ソフトとしては、「ホームページビルダー」があります。うちのクライアントさんでも自分でいじりたいからといって触ろうとする人もいます^^;８割の方が挫折しますが…^^;
他にも、最近ではインターネット上には「WIX」などの無料のホームページ作成ツールがたくさんあります。また、「WordPress」などのCMSとよばれるソフトウェアを使っても、手軽に見栄えのいいホームページが作成できます。まあ、先日ちょっと問題があったようですが…

公開/公開･SEO対策

この段階を経ることで、世界中のWebブラウザからホームぺージが閲覧できるようになります。
ドメイン取得とサーバーレンタルが終わったら、パソコンに保存してあるホームページをインターネットに公開しましょう。 「HTMLファイル」や「画像ファイル」などをサーバーにアップロードすることで、ホームページは世界中のブラウザから閲覧できるようになります。作成したファイルをすべて、FTPソフトなどを使ってサーバーに転送する作業です。 FTPソフトとは、パソコンに保存されているファイルをサーバーに転送するソフトのことです。「FFFTP」など、フリーで配布されているものもたくさんあるので、好きなものを選んで使ってみるといいでしょう。

サーバーへのアップ

作成したファイルをすべてアップロードすると、ホームページがインターネットに公開されます。自分のホームページのURLにアクセスして、きちんと閲覧できるかどうか試してみましょう。すべてのリンクが正常に動作するかどうか、ひとつずつクリックして確認していきます。 時々こんな問題もあります。

「写真が表示されない」→画像はRGB分解されていますか？

「文字が潰れている」→フォント設定はちゃんとできていますか？

おかしい場合は、ファイルの修正+再アップロードを行いましょう。
パソコンやスマホ、またインストールされているChromeやSafariやInternet Explorerなどのブラウザでも閲覧できるか確認しましょう。