サイト(ホームページ)作成のために知っておきたいこと

記事
IT・テクノロジー
サイト(ホームページ)を作成しようとする時に、何も知らないでは無駄な時間やお金を使うことになってしまいます。
サイト作成を丸投げできる会社などもありますが、数十万から百数十万かかる場合もあります。
また、自分の思い描いていたものと違うものが出来てしまったということも起こります。
そのようなことが起こらないようにするためにはある程度の知識は必要です。
ここでは最低限知っておいてほしいことを掲載していきます。


WEBの仕組み

まずはWEBやインターネットの仕組みを理解しておきましょう。
まずは専門用語から
○ドメイン
⇒インターネットで使う住所のようなもの。例えばココナラなら「coconala.com」がドメインとなります。これをブラウザでURLバーに入力するとページが見られます。
○サーバ
⇒サイトを置いておく場所。正確にはHTMLファイルを置くことによってサイトが表示できるようになります。また、ドメインをサーバーに紐づけることによってURLを入力することでどこからでも見られるようになります。
○ブラウザ
⇒サイトを見るためのソフトもしくはアプリ。chromeやedge、firefox等が有名なところです。ドメイン(URL)を入力してサーバーから取得したHTMLファイルを見た目を変えて表示するものです。
○ワードプレス
⇒世界で最も利用されているサイトを作るパッケージです。ソースやコードが分からなくても最低限のサイトを作ることもできます。CMSに長けていて簡単にブログサイトなどを作成できます。最近ではワードプレスで作成されたサイトがかなり多くなっています。

下記は簡単なサイトを閲覧する構図です。
アートボード 131.jpg


ドメインとサーバーは専らレンタルで入手します。
これはサイト作成に最低限必要なもので、丸投げで無い場合はご自身で契約することになるかと思います。
ドメイン会社はお名前.COMやムームードメインが有名です。
費用は年間数百円~数千円が多いです。
サーバーはレンタルサーバー会社からレンタルすることが多いですが、クラウドサーバやバーチャルプライベートサーバー等様々な形があります。
これは月数百円~数万円と幅があります。

■サイト作成の流れ

簡単にインターネットの仕組みを理解したところで、サイト作成の流れを見ていきましょう。
サイト作成の時に必要になるものや用意するものも把握しておきましょう。

ヒアリング

まずはサイト作成の土台が必要です。
そのためにまずはヒアリングを行うことが多いでしょう。
ヒアリングの項目としては

○サイト作成の目的(宣伝用、集客用、販売用など)
⇒ここでサイトの基本的な必要要件が分かります。例えば販売用に作成する場合は決算システムや商品と閲覧や投稿のシステムが必要になります。おのずとどのような仕組みが必要かが分かり、構造の指標が分かります。

○予算や納期
予算や納期によってサイトの構成が変わったりデザインが変わることもあります。
費用と期日内で完成させられる内容と完成イメージに違いが出ないかをここですり合わせておくことが重要です。
よくあるのがサイト作成会社の営業は予算と納期を提示したのに、その目算が甘い場合は納期が延びたり修正で追加の費用が掛かったりすることもあります。イメージと全然違うものが出来上がってくるということもあります。
ここは確実に意識合わせをする必要があります。

○サイト内容
⇒サイトにどのような内容を載せたいかを提示して頂きます。
その際、独自の画像や写真、ロゴなどがあれば提供をすることとなります。無い場合は別途取得料金や作成料金がかかることが多いので、できれば自分で用意できるものは用意をしましょう。
文章に関しても、掲載したい内容がはっきりしていれば提示したほうが安く済みます。特に専門的なサイトの場合、文章作成を依頼するとかなりの時間がかかる場合があります。
サイト作成を依頼する相手はサイトを作るプロですが、他の業種のことを詳しく知っているということは稀です。
サイト作成者が文章を作成しようと思うと専門知識を調べたり競合等から文章を精査するなどが必要になるので時間も費用もかかる上に、内容も希薄になってしまうことがあります。
文章は出来るだけ自分で作成するようにしましょう。

○サイトマップの作成
⇒サイト内容が見えてくればサイトのページ構成ができるようになります。
ページごとにどのような内容で、どのような機能が必要かなど、要件がはっきりしていきます。
また、ページ数によって費用が変わることもありますのでサイトマップの作成はよく考えて作成しましょう。
後からページを増やさなければならなくなったなどの場合は追加の費用が発生することもあるからです。
サイトマップデモ.JPG
基本的には上記のように階層でページ構成を考えると分かりやすいでしょう。
タイトルとファイル名、できれば掲載内容の紐づけなどもこの段階でできるとサイト作成が速くなります。

○サイトデザイン
⇒サイトの雰囲気や基本のカラー、様々な指標でデザインの概要を決めていきます。
これはデザイナーがデザインを作成する工程で、とっかかりとなりますのですり合わせを十分に行ったほうがいいです。
どのような完成イメージかを伝える時に参考になるサイトなどを提示すると伝わりやすいです。



ヒアリングがサイト作成で一番重要なものになります。
ここで認識違いがあると全てがずれていきます。
デザインや仕上がり、納期や費用など想定とは全く違うことにならないようにしっかりと話し合いをする必要があります。

デザイン

次にヒアリングを元にデザインの作成が始まります。
デザインには段階があり、ここでもその都度すり合わせが必要です。

○ワイヤーフレームデザイン
⇒まずは、ページの大まかなコンテンツ配置を行います。
ワイヤーフレームデモ.JPG
この段階では写真や文章の反映は行わず、サイト共通部分の配置や各ページのコンテンツ配置を確認します。
ヒアリングで掲載内容が固まっていればどこに何を配置するということがはっきりします。この後のデザインもしやすくなります。
大抵はイラレやフォトショップなどで作成され、画像やPDFで確認することが多いかと思います。
また、画像や写真を所有していればここで提示しておくとデザインがしやすくなります。

○ラフデザイン
⇒大体のサイト雰囲気を作成し、認識に差異が無いかを確認します。
大抵はトップページを作成して、共通部分(ページの最初や最後、バーツ等)やサイトカラーなどを確認します。

○デザインカンプ
⇒上記を元に各ページのデザインを作り込んでいきます。ここで細かいところを詰めていきます。
この段階で画像の加工やパーツの作成で作られた画像を別途保存することとなります。
このデザインと素材がこの後の作業者(コーダー)に提供するものとなります。

ここまででサイトの完成形が見えてくるかと思います。

コーディング

コーディングとはデザインとヒアリングを元にブラウザで表示するためのソースを作成する工程です。
ここでサイトに動きがあるような場合はjavascriptを作成したりもします。
また、動的ページ(商品の購入や予約機能、お問い合わせフォーム等があるサイト)である場合はデータベースやプログラムの作成も行います。

デモサイトの確認

専らはテスト用のサイトを用意してコーディングしたファイルをサーバーに上げます。
新規立ち上げの場合はテストサイトを作成しないこともありますが、その後の運用などを考えてもテスト用のサイトを作成しておいた方がよろしいかと思います。
テスト用にはサブドメインを使うなど、本番環境に反映がしやすい環境構築をしましょう。
作成ができたら、そのサーバーをブラウザで確認して内容やデザイン、動きやシステム的な部分を確認していきます。
制作者も校閲は行いますが、専門用語など誤りが出るケースもありますので発注側でも確認をしっかりしたほうがいいです。

納品

ドメインとサーバーの手配を業者が行っている場合はそのままコーディングしたファイルをアップロードして完了となります。
ドメインとサーバーを独自に用意している場合はドメインとサーバーの設定を行いそこにアップロードして納品となります。
この辺りは、ドメインとサーバーの設定も込みで請け負っているかを確認しましょう。
ドメインとサーバーを独自で用意している場合でファイルの納品だけの場合はご自分で設定とアップロードをすることになるからです。
この辺りのネゴシエーションもしっかりしておきましょう。

運用・更新

サイトを作成しても放置していては意味がありません。
サイトを更新したり、検索結果などによって対応をしていくことが大事です。
これは作成した会社や製作者が請け負う場合や、月間契約等をすることもあります。
ドメインとサーバーを独自で用意している場合は、運用・更新は必要になった時だけその都度依頼するという契約が安く済みます。
その際もどのようにしたいかなどの要件をしっかり固めることが重要です。


以上がサイト作成の大まかな流れになります。
一番大事なのはヒアリング段階でここに時間をかけたほうが、いいサイトに仕上がります。
また、後々の費用対効果を考えると追加料金などが発生しないように最初の構成をしっかり考えることが大切です。

この内容は業者や製作者によって変わってくる場合があります。
大まかではありますがサイトを作成したいと思った方の参考になればと思います。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す