MENU

【超初心者向け】会社のホームページの作り方の手順を徹底解説

 自社で初めてホームページを作成しようとしても、最初は何をしたらよいのかわからず、困ってしまうことも多いでしょう。ホームページの作成は、多くの専門用語を必要とするため少し難しく感じますが、作成の手順がわかれば工程自体はそれほど難しくありません。

一番大切なことは、ホームページ作成の手順をしっかり理解することです。手順の全体像が理解できれば、ホームページ作成の過程で何をすればよいかの理解が進み、スムーズに作業できるようになります。そこでこの記事では、初心者向けにわかりやすく、ホームページ作成の手順について解説します。

目次

ホームページ作成に不可欠な2つの要素

ホームページの作成方法は実にさまざまです。そこでまず、ホームページの手順を紹介する前に、ホームページ作成の基礎知識について解説します。

サーバー

サーバーとは、ホームページを表示するためのサービスを提供する側のコンピューターのことです。サーバーは、ホームページのデータの保存や、ホームページをパソコンなどに表示するなどといったサービスを担っています。ホームページは、サーバーにプログラムを保存することにより、初めてインターネット上で閲覧することができます。そのため、サーバーはホームページを作成する上で「必要不可欠」なものと言えるでしょう。

ドメイン

インターネット上の住所のことを「IPアドレス」といいます。「IPアドレス」は数字とピリオド(.)で表されており、インターネット上の住所をコンピューターが判断するために用いられる表記です。その表記を、私達が見てもわかりやすいように、アルファベットなどの文字列で表したものが「ドメイン」になります。

例えば、「ドメイン」は企業の名前やお店の名前などをローマ字で表すことができるため、私達が見ても「この企業のことだ」と理解しやすいのが特徴です。「IPアドレス」と「ドメイン」の違いは、数字の羅列か、文字列に変換して人に認識しやすくしたものかどうかになります。どちらにしても、インターネット上の住所を表しているものなので覚えておきましょう。

ドメインもサイトを運営する上で「必要不可欠」なものになります。

佐藤潤嗣

サイトを作成するには、「サーバー」と「ドメイン」が必須になりますね!

WEB用語の基本知識

ホームページ作成で必要となる、主なWEB用語を3つ解説します。

HTML

「HTML」とは、ホームページを作成するときに使用されるプログラム言語のことです。この言語を用いることでホームページの内容や構造を定義することができます。ホームページを作成するベースといっていいでしょう。

CSS

「CSS」とは、HTMLで作成された文章のデザインや画像などのレイアウトをどのように表示するかを定義するための言語です。文字の色や背景などもこの「CSS」で指定することにより、ホームページ上で表すことができます。

CMS

「CMS」(Contents Management System)とは、ホームページの「コンテンツ管理システム」のことです。HTMLやCSSなどの専門的な知識がなくても、簡単な情報の入力を行うだけで、データベース上に保存されているデータの中からホームページを自動的に生成してくれるシステムです。専門的な知識を必要としないため、ホームページの作成だけでなく、更新も簡単に行うことができます。ホームページ作成のツールとして有名なWordPress(ワードプレス)も「CMS」の一種です。

佐藤潤嗣

WordPressはCMSの代表的なツールになります。特に希望がなければ、WordPressを使用することを推奨しています!

ホームページの作成手順

ホームページを作成する方法は大きく分けて「自社で作成する方法」と「制作会社に依頼する方法」の2つがありますが、今回はホームページを「自社で作成する方法」に重点をおいて説明します。

ホームページを作成する手順は以下の通りです。

  • 企画
  • 設計
  • 作成
  • 公開

それでは、4つの手順について順を追って解説します。

企画

まずは、ホームページを作成する目的を明確にします。ここでいう目的とは「どんな成果や結果を出したいのか」を具体的に打ち出したもののことです。例えば「新規顧客を5社増やす」や「商品の売上を今より40万円上げる」などの目的を具体的に設定するとよいでしょう。目的を具体的にすることにより、対象のターゲットや、実行するための手段として何が必要なのかが見えてくるので、作成すべきホームページの種類や必要な機能がわかってきます。

佐藤潤嗣

サイトを作成するには、「サーバー」と「ドメイン」が必須になりますね!

設計

設計では、企画で明確になった目的を「ホームページの構成」として図(設計図)に落とし込みます。ホームページ作成に必要な設計図は、以下の通りです。

  • サイトマップ
  • ワイヤーフレーム

それぞれの設計図について詳しく解説します。

サイトマップ

サイトマップは、ホームページの構成を地図のように見える化したものです。もともと、ホームページは「階層構造」になっています。「階層構造」とは、1つの親に対し複数の子がいて、さらにその孫と世代が下がるほど、枝分かれして広がっていく構造のことです。

この構造に従い、例えば「企業情報」「商品」「サービス」などのホームページに入れ込みたい情報をカテゴリー別に分けて「階層構造」にしたものがサイトマップです。分類する場合のカテゴリー名は誰もがイメージしやすいものがよいでしょう。

佐藤潤嗣

サイトマップ作成は「サイト設計」を行う上で最重要な工程になります。ここで間違ったサイトマップを作成してしますとサイト自体が使い難くなる可能性が大です。

ワイヤーフレーム

ホームページのサイトマップが決まったら、ホームページをどのように表示するのかを決めます。この作業が「ワイヤーフレーム」です。「ワイヤーフレーム」では、ホームページのレイアウト決めを行います。実際にデザインやコーディングなどの作業を始める前に、完成イメージを視覚的な仕様書として「見える化」するためのものです。

複数人で作業する場合でも「見える化」することにより、イメージを共有できます。また「この表示はイメージと違う」「このコンテンツが入っていない」などのやり直しの作業を発生させない効果も期待できるでしょう。

佐藤潤嗣

ワイヤーフレームはデザインを作る前にレイアウト決めに役に立ちます。作ることが一般的ですが、ワイヤーフレームからデザインを作成する際に変更されることも多いので、弊社ではワイヤーフレームをお客様には提示していません。

作成

設計図ができたら、いよいよホームページ作成の作業に入ります。作成で行う作業は大きく分けて2つです。

  • デザイン
  • コーディング

それでは、2つの作業について解説します。

デザイン

まずは、デザインの詳細を決めていきます。「企画」で定めた目的や「設計」で決めたワイヤーフレームを元に「コンテンツの配置」や「色」「画像」「テキスト」「余白」などを決定します。注意しなければならない点として、ページごとのデザインに統一感を持たせるために、配色やフォント、画像のサイズに対してルールを定めることなどが挙げられます。

佐藤潤嗣

デザインはとても難しい作業なので、洗練されたデザインをご希望の方はプロに依頼することをおすすめしています。
もし、自作する場合はテンプレートデザインを使用して、極力デザインを変更しなければ自作のホームページでも十分活用できます!

コーディング

デザインの詳細が決定したらコーディング作業を行います。コーディングとは、プログラミング言語を使ってプログラムを作成することです。ホームページでは主に「HTML」と「CSS」でホームページを作成します。最近では、コーディングせずにホームページを作成できるサービスや、Wordpressなどの「テンプレート」といったツールが充実しているために、ホームページ作成のハードルは低くなっています。

佐藤潤嗣

最近では、知識がなくても実装できるツールが多く存在しているので、自作でも十分に制作可能です。
ただし、カスタマイズするには知識が必要になりますので、その際はプロに依頼することをおすすめしています!

公開

ホームページができあがったら、インターネット上に公開しましょう。公開することで、世界中のWEBブラウザからホームページを閲覧することができます。公開するためには、以下の作業が必要です。

  • サーバーの契約
  • ドメインの取得
  • ファイルのアップロード
  • デバイスで確認

それでは、一つ一つの作業について説明します。

サーバーの契約

ホームページを公開するにはサーバーが必要です。サーバー自体を購入することもできますが、レンタルサーバーを利用するのが一般的です。レンタルサーバーは月額数百円から数万円と、価格に幅があります。ホームページの目的に合わせて、適切なものを選ぶとよいでしょう。

佐藤潤嗣

サーバーはサイトを公開するための建物のような存在です。
サイトを公開するためのウェブサーバーとメールを送受信するためのメールサーバーが使われることが多いです。

ドメインの取得

インターネット上に公開するためには、ドメインを取得しなければなりません。ドメインには無料でレンタルできるものもありますが、企業で運営する場合は独自ドメインの取得を推奨します。

佐藤潤嗣

簡単にいうと、ドメインはインターネット上の住所を表すものになります。本来は「1160.16.~」のようなIPアドレスになっていますが、それを希望のドメインでサイトを表示させるために連携させる必要があります。

ファイルのアップロード

ドメインやサーバーの準備が完了したら、作成したホームページをインターネット上に公開します。契約したサーバーに「HTMLファイル」や「画像ファイル」などをアップロードすることで、世界中どこからでもインターネットを介して閲覧できるようになります

作成したファイルはすべて「FTPソフト」などを使ってサーバーに送ります。「FTPソフト」とは、パソコンからサーバーにHTMLファイルなどをアップロードしたり、サーバーにあるファイルをパソコンにダウンロードしたりする際に使う「ファイル転送用のソフトウェア」のことです。

デバイスで確認

サーバーにホームページのファイルを送ったら、インターネット上にホームページが表示できているかをパソコンなどのデバイスを使って確認します。「全てのリンクを正しく開くことができるか」「表示が崩れていないか」「文字化けがないか」といったエラーはないか、ホームページの全てをくまなくチェックします。

また、全てのデバイスやブラウザでホームページが快適に閲覧できるか、あらゆるデバイスやブラウザを使った確認が必要です。デバイスであればパソコンやスマートフォン(iPhone、Android)、タブレットなど、ブラウザであればInternet ExplorerだけでなくChromeやEdge、Safariなど、いろいろな環境でチェックしましょう。

チェックする中で不具合を発見した際は、その問題となるファイルを修正して再びアップロードします。不具合が解消されていることを確認して問題がなければ、ホームページの作成は終了です。この後は運用の一環として、コンテンツを増やしたり、レイアウトを変更したりすることもありますが、一度ホームページを作成してしまえば、これらはそれほど難しい作業ではありません。

佐藤潤嗣

制作会社でない限り、デバイスやブラウザのチェックを行うことは難しいので、以下のブラウザはチェックしておいた方が無難です。特にスマホ対応は必須の時代となっています。
1:Windows:Edge
2:Android
3:iPhone

ホームページ作成で知っておくべき3つのポイント

ホームページを作成する上で知っておきたい知識などのポイントを3つご紹介します。

  • 独自SSLの設定
  • 独自ドメインのメールアドレス
  • SEO対策の習得

それぞれ詳しく見ていきましょう。

独自SSLの設定

最近では、SSLという技術でセキュリティ的に保護された通信が主流です。SSLとは、ホームページとそれを閲覧するユーザーとのやり取り(通信)を暗号化したものです。この通信を暗号化することにより、通信情報の盗聴やデータ流出を防げます。セキュリティの向上が見込まれるため、ホームページを公開するタイミングで設定することをおすすめします。

佐藤潤嗣

こちらも現在では必須で対応しなければならない作業の1つです。
SSL化されていないサイトは今後表示・閲覧できなくなる可能性をGoogleが提唱しています。

独自ドメインのメールアドレス

独自ドメインを取得したら、同時に独自ドメインのメールアドレスを作ることができます。独自ドメインのメールアドレスには「自社専用のメールアドレスを持つことができる」「会社の信頼度が上がる」「同じアドレスを使い続けられる」などのメリットがあります。

佐藤潤嗣

必須とはいきませんが、会社の担当者のメールアドレスがgmailだと信頼感は落ちますね。
可能であれば、ウェブサーバーとメールサーバーを使用できるサーバーを取得することをおすすめしています。

SEO対策の習得

SEOとは「Search Engine Optimization(検索エンジン最適化)」の略で、自社のホームページをGoogleなどの検索エンジンで上位表示させるための対策になります。検索エンジンで上位表示されるとアクセス回数が増えて「お問い合わせ」や「お申し込み」が増えることが期待されます。

「Yahoo!」も「Google」と同じ検索技術なので、GoogleのSEO対策ができていれば、「Yahoo!」でも同時にSEO対策ができていると考えて問題ありません。Googleの検索ルールに則ってホームページの作成ができていると、検索結果が上位表示されるため、SEO対策としても有効です。

佐藤潤嗣

SEO対策は長期的かつ根気を持って取り組んでいかないと効果が出にくい分野になります。
どのようなキーワードをどんな戦略で狙っていくかが重要となるので、プロに相談することをおすすめしています。

まとめ

今回は、会社のホームページ作成に関する基礎知識やホームページの作り方の手順について解説しました。WEB用語が難しくてホームページ作成に手を出せなかった方でも、作成する手順の全体像の理解が進んだことでしょう。本記事で紹介した情報を参考に、ぜひ自社のホームページの作成にチャレンジしてみてはいかがでしょうか。

ホームページ作成に関して、複雑な機能やデザインを希望するのであれば、自社で実現が困難な場合があります。その際は、ぜひSeekNext合同会社にご相談ください。弊社ではクオリティの高いホームページ作成を適正な価格で提供しています。お客様のご要望に沿った適切な提案や作成を行っておりますので、ご興味のある方はぜひ一度お問い合わせください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

佐藤潤嗣のアバター 佐藤潤嗣 SeekNext合同会社 代表

福岡県のホームページ制作会社の代表。システム会社、ホームページ制作会社に勤務した後、SeekNext合同会社を立ち上げる。福岡を中心に全国のサイト制作・運用に携わっており、実績は100を超える。
大手メディアサイト「比較ビズ」などの監修者も務めており、制作関係なら何でも相談して下さいの精神で活動している。

コメント

コメントする

目次