WEBサイトの構築手順!ページ作成～公開するまでの流れ
WEBサイトの構築手順
初めてWEBサイトを構築する際は、何から始めてよいのか全くわからないかと思います。
私も初めてWEBサイトを立ち上げる際は、ちんぷんかんぷんでした。
何もわからない状態で初めて飲食店のホームページを作ったのですが、毎日コツコツ作業し、1ヶ月程で10ページ程度のサイトを作る事ができました。
時間はかかってしまいましたが、直接人に教えてもらう事も無く、NETで調べるだけでWEBサイトを作成する事ができました。
本当に便利な世の中になったと思います。
現在もまだまだ勉強中でプロの方には遠く及びませんが、WEBサイトを3つ、ブログサイトを2つ、通販サイトを1つ、仕事で使う管理用のWEBツールを1つ、テーブルオーダーアプリを1つ、と、どんどん製作範囲を広げています。
WEB関係の仕事をしているわけでは無く、1から自分で勉強しているため、これからWEBサイトの構築を始める方と同じ目線で物事を見られるかもしれません。
SEO対策をしっかりと行って、『検索順位の上位に表示されるページ』、アフィリエイト等で『稼げるページ』を作るのは非常に難しいですが、WEBサイトを公開するまでの作業はそれ程難しくないと思います。
初めから完璧なサイトを作ろうとすると、それはもう途方も無い作業と勉強をしなければいけないため、ハードルを下げるためにもまずは一度サイト公開までこぎつけて、少しづつサイトを進化させて行けば良いのではないでしょうか。
01作りたいサイトの内容を決める
ここが正直、一番重要なポイントです。
何も開始わからない状態で作業を開始しているにもかかわらず、一番最初に一番重要な選択を迫られるのです。
この後に続く作業の大半はいくらでもやり直しや変更が可能ですが、『サイトの内容』や『サイトのタイトル』を変更するのは推奨されておらず、一からサイトを作り直すに等しいともいえる行為です。
あくまでも『お試し』的に作成し、新たに作り直すのであれば良いのですが、作ったサイトを使って更新していこうと考えている場合は、サイトの内容は、しっかりと時間をかけて考えましょう。
今後の『サイトへの集客』もこのサイトのテーマによって大きく変わってきます。
02テンプレート選び
『サイトのテーマ』が決まったら、自分のサイトのデザインを決めるために、テンプレートを探しましょう。
ブログサイトを作るのであれば、ブログサイトを作り易いテンプレートを、お店のWEBページを作るのであれば、お店のWEBページの雰囲気に合ったテンプレートを選ぶなど、ただ好きなデザインを選ぶだけでなく、実際に作る時の事を考えて選びましょう。
テンプレートは『レスポンシブデザイン』を選ぶのがおすすめです。
PCやスマートフォン、タブレットなど、WEBサイトを観覧するデバイスや画面サイズに合わせてデザインが変わるテンプレートで、編集するファイルが1つで済むためオススメです。
他にも、PC用・スマホ用とファイルを分けてページを作る手法があります。
もちろん、一から自分で好きなデザインを作っても良いのですが、初めのうちはテンプレートを使って作成するのがおすすめです。
手間はかかりますが、デザインは後々変更する事も可能なため、慣れるまでは少しでも作業を簡単にし、サイト完成までのハードルを下げるのが良いかと思います。
『有料のテンプレート』にはオシャレなデザインがたくさんありますが、『無料のテンプレート』の中にも良いものはたくさんあるので、是非探してみて下さい。
使いたいテンプレートが決まったら、サイトからダウンロードしましょう。
03HTMLの編集
使いたいテンプレートが決まったら、いよいよHTMLファイルの編集です。
ダウンロードしたテンプレートの中に『index.html』というファイルがあるかと思います。
そのファイルがサイトのトップページになります。
ここからは、『テンプレートファイルをどのように変更したいか』が人によって異なるため、1つ1つの意味を理解しながら、自分で考え、学習していくしかありません。
もちろん身近に質問できる相手がいれば良いのですが、ただ結果を教えてもらうだけでは、今後自分でサイトを作っていく事はできません。
しっかりと意味を理解しながら進めていきましょう。
ここでは、自分で調べて解決できる力を身に着けるのがとても重要で、時間はかかっても良いので、調べれば何とかなるという感覚になればもう怖いものはありません。
本当に教えてもらえる人がいなくても、どうにかできてしまいます。
HTMLファイルを編集する際は、何らかの編集ツールを使うのがおすすめです。
WindowsのPCには、『メモ帳』というアプリが最初から入っており、メモ帳を使って編集する事も可能ですが、HTML編集用のツールを使う事で、コードが色分けされるなど、編集し易くなるため、専用のツールを使うのがおすすめです。
無料で使えるツールがたくさんあるので、ダウンロードしてみましょう。
ちなみに、私は、Visual Studio Codeという無料ツールを利用しています。
また、編集したHTMLファイルをダブルクリックする事で、ファイルをWEBサーバーにアップロードせずとも、WEBブラウザ上での表示を確認する事ができます。
ここが一番挫折しやすいポイントになるかもしれません。
私のように直接HTMLファイルを編集する方や、有名な『WorPress』というCMSを使うにせよ、HTMLの学習は必要になります。
できそうに無いなと感じた方は、ここで辞めればまだ費用は発生しないため、特にダメージはありません。
できそうに無いけれど、サイトを持ちたいという方は、『Amebaブログ』や『はてなブログ』、『Livedoorブログ』などのブログサービスを使えば、あまり専門の知識は必要とせずブログサイトを持つ事が可能です。
ただブログを書きたいというのであれば、『ブログサービス』で全く問題はありませんが、本格的にやりたい方やアフィリエイトなどをしたい方は、HTMLの学習を頑張る必要があります。
身近に頼れる方がいない場合でも、自分で調べればどうにかなるものですし、どうしても行き詰ってしまった際はネット上で質問すると教えてもらえる場合も多いです。
簡単な質問であれば私も回答できるかと思いますので、気軽にご相談いただければと思います。
04CSSの編集
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、主に装飾について書くファイルです。
先ほどのHTMLは、WEBページの構造やコンテンツの内容を記述するファイルですが、『CSS』は表示や出力に関する設定を記述します。
先ほど少しお話した『レスポンシブ』デザインもこの『CSS』によって実現されており、画面サイズによって表示方法を変更します。
おそらくダウンロードしたテンプレートの中に『xxxx.css』という拡張子のファイルがあるので開いてみましょう。
私のこのブログサイトのcssは、このようになっています。
body {
color: #666;
line-height: 2.8rem;
}
例えば、1つ目の『body』の設定は、HTMLファイルの『<body>タグで囲まれた部分』の
1行目：文字の色は【#666】とする
2行目：行の高さは、【2.8rem】とする
といった設定です。
ダウンロードしたテンプレートのデザインをそっくりそのまま使うのであれば、編集する必要はありませんが、デザインをいじりたい場合は、CSSファイルの内容を編集、追加などしていく必要があります。
『css』ファイルの中身全てを理解する必要はありませんが、操作したい箇所は理解する必要があります。
05サーバーの準備
上記までの作業は、基本的に費用が発生しません。
HTMLファイルやcssファイルを編集し、HTMLファイルをダブルクリックすると、ブラウザ上での表示を確認できるからです。
編集したHTMLファイルや、cssファイルをサーバーにアップロードする事で、世界中の人が作成したサイトを観覧できる状態になります。
『無料で使えるサーバー』も確かに存在しますが、『機能が不十分』だったり、『広告が強制的に表示』されるなど色々なデメリットがあり、あまりおすすめできません。
WEBサイトの作成を頑張っていこうと考えている方は、初心者の段階であっても有料のレンタルサーバーの利用をおすすめします。
やっていけそうだなと思った方は、使用するサーバーを探してみましょう。
06ドメインの取得
WEBサイトを運営する上で必要になってくる費用は、上にあげた『サーバー代』と、『ドメイン代』です。
ドメインは、URLの一部となるインターネット上の住所のようなもので、このサイトでは、『jun-jun.net』というドメインを取得しています。
他にも、『〇〇〇.com』や『〇〇〇.jp』など様々な種類があり、ドメインの種類によって料金が変わってきますが、毎年千数百円の費用が発生します。
既に取得されているドメインは取得できませんが、〇〇〇の部分は自分の好きな文字を設定する事が可能です。
レンタルサーバーは、多少の手間はかかりますが、他のサーバーへ引越しをする事ができますが、ドメインは基本的に同じものを使い続けます。
良く考えてからドメインを決定しましょう。
07サーバーにファイルをアップロード
HTMLファイルやcssファイルの編集を終え、レンタルサーバーとの契約、ドメインの取得が完了し、ドメインとサーバーとの紐づけが完了したら、最後に編集したファイルをサーバーにアップロードします。
サーバーにアップロードすれば、世界中の人々があなたのサイトを観覧できる状態となります。
サイト公開後にすること
ファイルをサーバーへアップロードし、インターネット上でサイトを見る事のできる状態になれば、とりあえずの作業は完了です。
しかし、作ったサイトを多くの人に見てもらうためにはまだまだやるべき事がたくさんあります。
01サイトマップの設置
ファイルをサーバーへアップロードしただけの状態では、確かに誰もがインターネット上でページを見る事が可能なのですが、ページを見つけてもらう事ができません。
『クローラー』と呼ばれるロボットが新しく作成したあなたのページを見に来て、サイトの内容をデーターベースに登録(インデックス)し、その後ページ内容を評価(順位づけ)します。
そうして初めて、検索エンジン(Google・Yahoo!・safariなど)でキーワード検索すると、検索結果にページが表示されます。
新しいページを作った事をクローラーに知らせるのが『サイトマップ』の役割です。
02SEO対策の勉強
自分の作ったページを多くの人に見てもらうためには、検索順位を上げなければいけません。
サイトを見に来てもらえるルートの大半は、検索エンジンによるキーワード検索からの流入です。
最近では、SNSのアカウントでサイトの紹介をして、サイトを訪問してもらう方法もありますが、フォローワーの多いSNSのアカウントを作るのも非常に難しいです。
誰もが検索順位の上位を狙っているため、ライバルと競って勝たなければ上位表示されません。
こうすれば上位表示されますといった明確な答えは無いため、日々勉強し、サイトに対策を施していかなければいけません。
また、評価基準は日々変わっていくため、新しい情報も入手していかなければいけません。
03サイトの更新
立ち上げたサイトは、新しいページを追加したり、古くなった内容を書き換えたり、SEO対策を施したりと定期的に更新していかなければいけません。
毎日更新する必要はありませんが、全く更新しない場合は、情報がどんどん古くなり検索順位が落ちて行く可能性も高いです。
最後に
色々と大変そうだなという書き方になってしまいました。
確かに大変ですが、サイトの更新は楽しいですし、素人の私でもインターネットで調べるだけでどうにかサイトは作れているため、それ程難しい作業ではないかと思います。
私のサイトはサボりつづきで多くのアクセスを集めるには至っていませんが、上手な方は始めて数か月で多くの集客に成功している方もたくさんいらっしゃいます。
簡単に始められる反面、地道な作業が必要になりますが、これからサイト構築を始める方には是非頑張っていただきたいと思います。
ここではもの凄く大雑把に概要を記載していますが、各記事で詳細について書いているので、参考にしていただけると幸いです。