初心者でもわかる！”ホームページ制作（Webサイト）の基礎”について

秋葉原クリエイティブ（AKC）です。
本日は、ホームページって「そもそもどうやって作るの？」という疑問に対して、ホームページ制作における基礎的な部分を紹介したいと思います。

初心者でもわかる内容になっておりますので、ホームページ（Webサイト）を作成してみようと思っている方は必見です！！

■ 目次
1. ホームページ作りに必要な基礎知識
2. ホームページの作成方法（5つの方法）
3. ホームページの作り方の手順
4. まとめ

１．ホームページ作りに必要な基礎知識

ホームページを作るには、「Web制作会社への外注する」、「WordPressなどのCMS（Contens Management System）を利用する」、「HTMLやCSSを書く」など、さまざまな方法があります。

CMS（コンテンツ管理システム）：
コンテンツを制作、編集、公開する プロセスを効率化するソフトウェア

しかし、いずれかの方法を選ぶにしても必要最低限の基礎的な知識がないと、スムーズに進めることができません。
また、Web制作会社へ外注する場合であっても、自身で基礎的な知識を理解しておくことは、外注先と話をするうえで重要になってきます。

では、これからホームページ作りに必要な基礎知識について解説していきたいと思います。

（１）ホームページの仕組み

まず、ホームページを作成するにはデザインが必要となります。
デザインはHTMLやCSSなどの言語を使用して作成しますが、ホームページ作成用のツールは世の中に多く公開されており、こちらを使えばコード（言語）に関する知識がなくても作成することができます。

※コードに関する知識がない方には、「ノーコードツール」がおすすめです。
  以前、「ノーコードツール」についてご紹介した記事があるので、
「もう少し詳しく知りたい！」という方は、こちら ↓ をご覧ください。

（２）サーバーの契約

サーバーには、先ほど説明したHTMLやCSS、画像などのファイル（≒ホームページの情報）が収められており、利用者のリクエストに対してこれらの情報を提供するためのシステムです。
大企業では自社でサーバーを所有して管理することが多いのですが、中小企業や個人事業者の場合は、無料のサーバースペースを利用するか、有料のレンタルサーバーを利用するのが一般的です。

（３）ドメインの取得

ドメインとは、インターネット上の住所となります。
皆さんもご存じの、どのサイトにもある（https//〜）のURLのことです。

作成したホームページを公開するには、”ドメイン”と”サーバー”が必要となります。ドメインはホームページの場所を示す住所となり、サーバーはホームページを設置する土地のようなイメージです。

ドメインとサーバーを紐づけることで、世界中のユーザーがインターネットを介してサーバーにアクセスし、ホームページを閲覧することができます。

また、ドメインには独自ドメインとサブドメインがあります。
独自ドメインは好きな文字列の直後に「.com」や「.net」などがくるもので、サブドメインは好きな文字列の直後に「.”AAA”.com」や「.”BBB”.com」などがくるものです。
無料のホームページ作成ツールを利用したときは、サブドメインを割り振られるケースが多く、上の例の前者はAAA社、後者はBBB社というホームページ作成ツールを利用したときに取得できるドメインです。

独自ドメインは取得費用や更新費用がかかりますが、本格的なホームページを作成するのであれば、ホームページの信頼性とGoogleなどの検索結果を良くする（SEO）観点から独自ドメインをおすすめします。

（４）ホームページ（中身）の作成

サーバーとドメインの準備ができたらホームページを作成します。
企業や店舗の公式サイト、自社商品を販売するECサイト、広告用のランディングページなど、用途によって必要な機能や適切なデザインは異なります。
競合他社のホームページを参考に、どんな機能があれば便利か、どんなデザインが見やすいのかなど、ユーザーの視点から考えることが大切です。

・ECサイト：ECサイトとは、Eコマースのサービスを提供するWebサイトの　
　通称です。Eコマースとはネットを通じて行われるモノやサービスの売買
　の総称で、ECサイトとはネットを使ったモノやサービスの販売サイトのこ
　とです。
・ライティングページ：検索結果や広告などを経由して訪問者が最初にアク　
　セスするページのことです。

２．ホームページの作成方法（5つの方法）

（１）自分でHTMLやCSSなどプログラミング言語を使い作成

最初に紹介するのは、前述したHTMLやCSS等を利用していちからホームページを自作する方法です。
この場合のメリットは、自作なので自分のイメージ通りにホームページを作ることができること、そして自作なので費用が格段に安いことが挙げられます。
しかしデメリットは、HTMLやCSSの専門知識が必要になるので、かなりのパソコン・Webの上級者でないと難しいという点です。

（２）WordPressなどのCMSを利用

次に、WordPressなどのCMS（コンテンツ・マネジメント・システム）を利用する方法です。
この場合のメリットは、テキストや画像、バナーなどを配置していくだけでホームページを作成できます。
テンプレートをもとにレイアウトを変更するだけでオリジナルのホームページを作成できるため、多くのユーザーから利用されています。
コードに関する知識がなくても、基本的な操作はできるように作られているうえ、ホームページ制作時のみならず、作成後の運用もしやすいという点で、初心者でも利用しやすい方法と言えます。

（３）専門業務者へ依頼

専門業者に依頼する方法は、もっとも確実に、クオリティの高いホームページを作成できる方法です。
この場合のメリットは、実績のある業者を選べば、デザインや機能の面では満足のいくホームページを作成できることです。
一方、相応のコストがかかってしまう点はデメリットです。
特に、独自のデザインやさまざまな機能を追加しようとすると、ホームページを作成するだけで高額な費用になってしまう可能性もあります。

（４）市販の有料ソフトを購入して作る

家電量販店やECサイトでは、ホームページ作成用の有料ソフトが販売されています。代表例は「ホームページビルダー」や「Dreamweaver」などです。
有料ソフトを利用すればクオリティの高いホームページを作ることができますが、費用がかかるほか、多くのソフトではHTMLやCSSなどの専門知識が求められる点がデメリットになります。
ホームページビルダーをはじめとする、一部のソフトではコードに関する知識がなくてもホームページを作成できるようになっていますが、初心者にはあまりおすすめできません。

（５）無料のツールを利用して作る

インターネット上で利用できる無料ツールやフリーソフトを利用する方法もあります。費用を抑えられる点が最大のメリットですが、機能が少なく、サポートの面で不安があるツールがほとんどです。
また、サブドメインで運営するようなツールの場合、サービスが終了してしまった場合、ほかのドメインに移せなくなってしまうため、注意が必要となります。

３．ホームページの作成手順

ホームページを作るうえでは、実務的な作業だけでなく、事前の企画や準備も重要です。土台となる計画がしっかりしていないと、作成後に不便や不都合が生じるリスクもあります。
また、制作会社に作成を依頼する場合は、追加の要件が発生するたびに費用がかかってしまうため、はじめに構造や機能を決めておく必要があります。
ここからは、ホームページの作り方について、実際の手順に沿って解説していきます。

（１）ホームページの目的を明確にする

はじめに、ホームページを作る目的を明確にしておくことが大切です。
企業や店舗の概要を示すだけで良いのか、認知度や売上を向上させたいのかなど、ホームページを作成する目的は多種多様です。

（２）ホームページに掲載する内容を決める

ホームページを作る目的が決まったら掲載する内容を決めます。
たとえば、コーポレートサイトであれば、会社概要や代表者紹介、事業内容などの項目が必要となります。

（３）ホームページの構造設計を行う

ホームページを作る目的と掲載する内容が決まったら構造設計へ入ります。ホームページは階層構造になっており、トップページから各種メニュー、下層のメニュー、個々のコンテンツの順にアクセスできるよう配置を設計します。トップページにはどんなメニューがあって、それぞれのメニュー内にどんなコンテンツがあるかを把握するうえで役立つのが、サイトマップと呼ばれる設計図です。

（４）構造のワイヤーフレームを作成する

構造設計およびサイトマップの作成が完了したら、ワイヤーフレームを作成します。ワイヤーフレームとは、ホームページの全体的なレイアウトをあらわすものです。メインビジュアル、グローバルナビ、メガメニューなどのコンテンツを配置していきます。ワイヤーフレームはホームページの骨組みとなるため、完成後の視認性や操作性を左右するものとなり、PC版とモバイル版でそれぞれ必要になります。

（５）ホームページの外観デザインを制作する

ワイヤーフレームに基づいて必要な画像やテキストを準備し、その後、デザインの制作に取り掛かります。デザインを制作する際は、ホームページのコンセプトにもとづき、全体的なデザインを統一することがポイントです。

（６）デザインをもとにコーディングをする

デザインが固まったらコーディング作業に入ります。コーディングとは、HTMLやCSSなどのプログラミング言語を使用して、プログラムを組むことです。ホームページ上の表示や挙動、リンクなどはすべてプログラムにもとづいて動作します。コーディングではプログラミングに関する知識が必要となるため、エンジニアが担当しますが、コーディング不要のホームページ作成ツールを利用する場合は、直感的な操作のみでデザインを反映できます。

（７）ホームページを公開する

コーディングが終わり、動作が確認できたらホームページを公開します。
作成したHTMLファイルや画像ファイルをサーバーにアップロードすることで、世界中のユーザーがホームページを閲覧できるようになります。

４．まとめ

ホームページを作成する際は、サーバーやドメインの準備、作成目的と掲載内容の決定、構造やデザインの設計、コーディングの順序に沿って進める必要があります。
作成の流れとしては、実務的な作業に注目しがちですが、『戦略を策定すること』がとても重要になります。

たとえばホームページを使って売上を上げたいのかどうか、事業規模はどれくらいを想定しているか、公開後の集客方法や運用体制にどれくらいコストをかけるのかなどを事前に整理しておくことが戦略策定につながります。

そのため、私たち、秋葉原クリエイティブ（AKC）も、こうした戦略策定からご支援させていただき、お客様と一緒に歩みながら、ホームページ作成をはじめとするさまざまなWeb制作を行っております。

本日は、ホームページの作り方の基礎についてご紹介しました。

今回のnote記事を通じて、少しでも、はじめてホームページ制作に携わる人たちのお役にたてれば幸いです。