ホームページ制作・リニューアルの流れと注意点

公開日 : 2021.08.11 最終更新日 : 2021.10.08

ディレクション

ホームページを作るには、お客様の協力が絶対に必要になってきます。お客様の中には要望も何もなく、かっこいいサイトを作って下さい、今っぽくリニューアルして下さいなど完全にお任せなご依頼もあるのですが、弊社では出来る限りお客様にも制作に参加して頂いています。

理由としては、サイト制作中のミスマッチを防ぐという理由もありますが、一番の理由は「良いホームページ」を作るためです。

そこでお客様にもご協力頂けるように今回はホームページが出来るまでの工程を改めてご説明させて頂きます。

ホームページを作る目的を明確にする

まずは、「なぜホームページを作るのか？」を明確にした上で、ホームページを制作していきます。目的が明確になっていないホームページは数多く存在しますが、目的に応じてホームページのデザイン・構成・必要なシステムなどが決まっていくので、必ず目的を明確にする必要があります。

サイトからの問い合わせを増やしたいのか
採用力をアップさせてたいのか
製品の訴求力をあげたいのか

ホームページの目的を明確にするためにはお客様へのヒアリングが非常に重要です。ヒアリングシートなどを用意せずに担当者通しの打ち合わせのみで目的を決めてしまうと良いサイトが出来上がりません。きちんとヒアリングシートを用意して、お客様の目的をしっかり理解して、制作に取り組んでいきます。

なお、弊社では下記のようなヒアリングシートを用意して、目的を明確化してからホームページ制作作業に入っていきます。

ヒアリングシートを見る

設計

お客様へのヒアリングと打ち合わせが終わったら、サイトマップとWEBデザインの元となるワイヤーフレームを作成します。ヒアリングから導き出された目的に応じて、ホームページを設計して行く作業です。

ホームページ全体のページ階層が把握できるものをサイトマップと言い、ページのどこに何を掲載するのかをレイアウトして表した設計図のことをワイヤーフレームと言います。この工程で、ホームページのトップページと下層デザインのおおまかな掲載内容が図としてわかるようになります。この時、クライアントから掲載する画像やテキストも用意してもらうのが一般的ですが、写真をうまく撮れない、文章が用意できないというお客様の場合は、カメラマンやライターに依頼し、弊社で用意することもございます。

デザイン

サイトマップやワイヤーフレームが出来上がったら、ホームページ全体のデザインを行っていきます。
WEBデザインは時代によってトレンドが変わりますが、ホームページの目的から外れないよう、機能性・デザイン全体の統一感を意識して制作することが重要です。

デザイン全体に統一感を持たせるために、各ページごとに共通したコンテンツの配置・配色・画像の大きさ・フォントなどを使用します。

また、スマートフォン・タブレットなどの複数の異なる画面サイズの端末にも対応させるため、パソコンだけでなく他のモバイル端末から見たデザインも制作します。WEBデザインとは言っても、パソコンで表示することだけを考えるのではなく、どの端末からでも見やすいデザインをつくることを心がけます。

また、現在のホームページではスライダーやスクロールに合わせた動きなどを付け、ホームページを華やかに見せることが増えていますが、今までだとどうしても画像での確認になってしまい、デザイン時点で動きの確認まですることができませんでした。しかし現在は、デザイン時点である程度の動きまで実現することが可能です。

コーディング

モックアップ後の修正が完了したら、コーディング作業に入っていきます。

コーディングとは、プログラミング言語を使ってプログラムを組み立てることを言います。デザイナーが作成したページデザインをもとに、ウェブブラウザで閲覧できるように、「HTML」や「CSS」などを記述していくことで、実際のページを組み立てていきます。リンクをクリックすると別のページに跳ぶことができるのも、コーディング作業がなくては成り立ちません。

このように、コーディングを行うことによって、デザイナーが作成したデザインが、「Google Chrome」や「Internet Explorer」「Safari」などのウェブブラウザで実際に閲覧できるようになります。

その後、JavaScriptというプログラム言語を使用してホームページにスライダーやスクロールに合わせた動きを付けたりします。

CMS（Contents Management System）構築

「CMS」とは、お客様自身でホームページ上の「お知らせ」や「ブログ」などを更新出来るシステムのことを言います。

一番有名なCMSには「WordPress」というものがあります。WordPressは全世界で使用されていて、全世界のホームページの40%以上がWordPressで制作されていると言われています。CMSの組み込みは結構工数の掛かる作業となっております。また、CMSの有り・無しで、費用も大きく変わります。

テストアップ

諸々の作業が終わりましたら、本番アップ前に動作チェックや文字構成などを行っていきます。

制作抜けや不具合がないよう弊社では下記のようなリストを使用し、一つ一つ確実にチェックしていきます。

チェックリストをみる

弊社でのチェックが終わり次第、お客様に最終チェックをして頂きます。

本番アップ

以上、全ての工程が終わりましたら、ようやく本番アップを行います。本番アップをすることで一般の方がホームページへアクセスすることが可能になります。

弊社では本番アップに合わせて、Google Analyticsの設定・Google Serch consoleの設定を特定の理由がない限り、必ず行わせて頂いております。

本番アップするだけではGoogleやYahooでの検索で表示されるまで時間が掛かりますが、Google Serch consoleに登録することで表示されるまでの時間の短縮になり、もしサーバーにウィルスの侵入があった場合もアラートしてくれたりします。Google Analyticsも設定しておくことで、ホームページの閲覧数や流入経路などを確認することができ、次回のリニューアルや新しいコンテンツの制作に役立てることが出来るようになります。