無料で制作したい！ホームページ制作の方法を解説

ホームページを作成する方法

ホームページを作成する方法は主に以下の3つです。
● デザインからHTMLやCSSまで自作する
● 無料ツールを使う
● 制作会社に依頼する

それぞれのメリットや注意点などを解説していきます。

この記事は以下のような方を対象としています。
● ホームページの作り方が分からない方
● できるだけ安くホームページを作りたい方
● 費用対効果の高いホームページを作りたい方

ホームページの作成方法の選び方

先に紹介した3つの方法を１つずつ解説します。

デザインからHTMLやCSSまで自作する

HTML及びCSSはWEBページを作る際に使うマークアップ言語です。HTMLは「ハイパーテキストマークアップランゲージ（Hyper Text Markup Language）」、CSSは「カスケーディングスタイルシート（Cascading Style Sheets）の略称です。

Adobe XDやPhotoshop、Figmaなどといったグラフィックソフトでデザインされたページを、WEB上で組み立てる際に必要になる技術となります。デザインを作成出来て、HTMLやCSSを利用したコーディングが自身で出来る場合は、自作で作成することが可能です。

HTMLやCSSで自作するメリット
● 外部に依頼することがないため、低予算で対応が出来る
● 自由度が高い

デザインやコーディングのスキルさえあれば、外部に依頼する必要がないので予算を抑えられます。ただし、デザイン作成に利用するグラフィックソフト（Adobe XD、Photoshop、Figmaなど）に利用料金が必要になることは覚えておきましょう。一部無料で利用出来るデザインソフトもありますので、そういったツールで代用することも可能です。

決められたレイアウトでの作成ではなく、ゼロベースからのデザイン制作になるため、制限が少なく、大枠のレイアウトから細部へのこだわりまで自由自在にホームページを作成することが可能です。非常に魅力的な方法に思えますが、高度なスキルが必要だという点には気をつけなければなりません。

クオリティの高いデザインと、それを忠実にHTMLとCSSで再現するコーディング。2つの専門スキルが必要となる点は覚えておきましょう。また、デザインとコーディングのいずれか片方のスキルしかない場合でも、一部のみを外部に依頼することで予算を抑えることも可能です。

無料ツールを使う

世の中にはホームページを作成するさまざまな無料ツールが出回っています。
うまく利用すれば自作よりも遥かに簡単にホームページが作ることが可能です。

無料ツールを使うメリット
● 低予算でホームページを作成出来る
● 専門スキルが不要

自作でのホームページ制作と同様、外部に依頼する必要がないので予算を抑えられます。誰にでも扱えるように設計されているので、専門スキルがなくてもホームページ作成が可能です。無料で利用出来るツールに限らず、利用料を払うことでより使う安いツールを使用することも可能です。

無料ツールでは広告表示や利用制限がかかることが多いので、金額をかけるべきところには利用料を支払いつつ、トータルで見た場合、予算を抑えたホームページ運用が可能となります。

ただし、基本的にツールのフォーマットに当てはめるという形式なので、自作程の自由度は低くなります。多くのツールでカスタマイズが可能ですが、それには専門スキルが必要になってきます。

制作会社に依頼する

ホームページ制作を専門とする会社に依頼するという方法です。Yahoo!やGoogleなどの検索で、サイト制作会社、ホームページ制作会社、WEB制作会社などといったキーワードでヒットする企業に依頼することが多いかと思います。また、その際は各会社の特徴がありますので、それぞれ重視したいポイントで依頼先に相談することをおすすめします。

デザインを得意とする会社もあれば、WEBマーケティングや集客を得意とする会社もあります。システムを組み込みたい場合はシステムが得意な制作会社という選択肢も出てくるでしょう。

制作会社に依頼することで、クオリティの高いホームページを作る最も確実な方法と言えます。

制作会社に依頼するメリット
● デザインやコーディングなどの専門スキルが不要
● サイトのクオリティが保証される
● 保守・管理も任せられる
● 制作会社のディレクターが相談窓口になってもらえる

制作会社にホームページの制作を依頼することで、自分たちに専門スキルがなくても、クオリティの高いホームページを持つことができます。また、どういったことをユーザーに感じてもらいたいかを伝えることで、様々な提案を頂きながら制作を進めてもらえます。ホームページ制作のプロの意見を取り入れながら、作りたいイメージに近づけて作成していくことが可能です。

ホームページを作るだけではなく、日々の運用も大切になります。制作会社は作って終わりではなく、多くのホームページの保守や運用なども行っています。費用は必要となりますが、保守・管理など、公開後のことも任せることが出来るので、その面は安心なポイントになるでしょう。

制作会社にホームページを依頼する場合、金額はそれなりにかかりますが、クオリティの高いサイトを持つ費用対効果を考えると、検討すべきポイントになります。

ホームページ作成のためのステップ

ホームページ作成には、以下のようなステップがあります。

ホームページの目的を決める

まずは何のためにホームページを作るのかを明確にしなければなりません。
一般的なホームページの目的としては、以下のようなものがあります。

これらは1つのホームページに1つである必要はなく、複数のページで役割を分担しています。目的を達成するためのコンテンツをホームページ内に設置するように、設計する必要があります。

ホームページに必要な要素を決める

目的を決めたら、それを達成するために何が必要なのかを考えましょう。

会社のことを知ってもらいたいのであれば、会社概要や代表者のメッセージ、事業内容や具体的な業績などが一般的です。

商品やサービスの紹介ならば、特長やユーザーに与える恩恵などを掲載しましょう。
商品やサービスを紹介するということは、最終的な目的は購入してもらうことになります。
「購入」ボタンか、直接購入でない場合でも、「資料請求」など購入に近づくためのステップを用意しましょう。
こうした「ページのゴール」となる要素が多くのホームページに設置されています。

お問い合わせの窓口であれば、お問い合わせフォームや電話番号。
人材獲得であれば応募フォームが必須です。

ゴールを決めたら、ゴールに至らせるためには何が必要かも考えましょう。
製品レビューや顧客インタビュー、サービスの流れなどのコンテンツが、ゴールへの誘導をスムーズにしてくれます。

ホームページの構造とデザインを決める

必要な要素を決めたら、それをどう配置するのか、構造を決定します。
ユーザーがスムーズにゴールまで辿り着けるか、不足している情報は無いか等を考えてください。

ホームページの構造として必要なものとしては下記になります。
● ディレクトリマップ（サイトマップ）
● 各ページな構成案（ワイヤーフレーム）

ディレクトリマップは、ホームページにどういったページを作るかを整理したページリストになります。作成するページが何ページになるか？ページに不足がないか？といった点を容易に確認出来るリストです。

次に、作成したディレクトリマップの各ページの構成案を作成します。構成案はワイヤーフレームとも呼ばれます。構成案はデザインを作成することも考慮し、全ページ分の作成が推奨されますが、主要ページのみの作成でも問題ございません。

ディレクトリマップや構成案などで、全体のホームページの構造が決まったら、それを元にAdobe  XDやPhotoshop、Illustrator、Figmaなどを使用してデザインを作成します。デザイン作成が完了したら、次にコーディングといった流れとなります。

ホームページ作成ツールを利用して作成する場合は、デザインをすべて作成することもなく、写真や素材などのパーツを作成して当て込むような対応でホームページが完成することもあります。

ドメイン・サーバーを決める

ドメインとは簡単に言うとURLのことです。インターネット上の住所と言えるでしょう。
「ドメイン名」＋「.com」、「.jp」などを組み合わせて決めます。

例えば、弊社センタードの場合、「centered.co.jp」がドメインとなります。

新しくホームページを作成する場合は、ホームページのドメイン名を決めておく必要があります。ただし、このドメインは世界で1つしか存在させることが出来ません。希望のドメインが取得出来るかを調べて、取得しておきましょう。

ドメイン上に立つ家に相当するものがサーバーです。ホームページを収容する器とも言えます。
大規模なホームページであれば容量の大きなサーバーが必要になりますが、数ページであればさほど気にする必要はありません。

一般的なレンタルサーバーであれば問題ありませんので、お好きなプランで契約して頂ければと思います。CMSやフォームなどのシステムを構築する場合、データベースを使えるプランが必要なこともありますので、そういったホームページの作成を想定されている場合は、事前に確認していただくことを推奨します。

ホームページ作成ツールを利用する場合、サーバーもその利用料に含まれる場合もありますので、そこは事前に確認しておくことを推奨します。

ホームページの実装をする

作成されたデザインをHTML、CSSでコーディングしWEBページとして再現します。場合によってはCMS構築も必要となります。
コーディングまで完了し、ページが完成したらサーバーにデータをアップロードし、公開完了です。

ホームページ制作に使える無料のツール

無料でホームページを作成できるツールを紹介します。

WordPress

世界中のサイトの多くはWordPressで作られていると言われるほど、シェアの高いソフトウェアです。WordPressはオープンソースのソフトウェアですので、誰でも無料に使えるところが大きなメリットと言われています。

ブログ感覚で記事を投稿可能で、専門知識が無くてもデザインの変更や機能の追加も比較的簡単に行えます。

WordPressはテーマテンプレートも多く、無料から有料のものまで幅広く用意されています。有料のテーマテンプレートでは、無料のテンプレートにはついていない機能やデザイン性の高いものも多いため、有料テンプレートを活用しているホームページも多く存在しています。

Wix

豊富なデザインテンプレートがあり、動きのあるページの作成も簡単です。ドラッグアンドドロップで簡単にホームページを作成出来るツールの一つです。

無料版では広告が埋め込まれる、独自ドメインが使えないといったデメリットもあります。有料版にアップグレードすることで、独自ドメインを利用出来たり、広告を非表示にすることも出来るので、まずは無料版でホームページを作成し、その後有料版にアップデートして利用することも可能です。

機能を最大限に使うためには、有料版へのアップグレードが必要となりますので、無料版でお試し利用と考えて利用いただくと良いかと思います。無料版でもホームページとして最低限必要なものは揃いますので、初めの一歩としては問題なく利用いただけるかと思います。

STUDIO

ブラウザ上で簡単にホームページを作成することが出来ます。

無料、有料それぞれに豊富なデザインテンプレートがあり、動きのあるページの作成も簡単に出来ます。無料版では独自ドメインの利用が出来ないため、独自ドメインを利用する場合は、有料版での契約が必要となります。

Weebly

直感的な操作でホームページを作れることが最大のメリットです。テンプレートも豊富で質の高いデザインのページが簡単に作れます。

デメリットには日本語のサポートがない、無料版では広告が表示される、独自ドメインが使えないといった点があります。

Google Sites

Googleが提供しているツールです。Googleのサービスとの連携がしやすく、Googleを中心に利用している方であれば、スムーズに利用することが可能です。ただし、細かな変更や調整ができないといった制限が多い点もあります。

Webflow

手軽かつ自由度が高いツールとして大変注目されていますが、使いこなすには英語力が必要です。
自由度が高い分、習得にも時間がかかります。また、無料版は機能が制限されています。

Jimdo

簡単にホームページが作れて、ECサイトも開設できます。日本語対応もされているので、簡単に作成が出来るツールとなります。

独自ドメインを利用する場合は有料プランを契約する必要があります。無料版は制限も多く、180日以上ログインしないとページが削除される可能性もありますので注意が必要になります。

ホームページ制作会社に依頼するもの一つの手

無料で使えるツールも、機能を最大限に使うのであれば有料版へのアップグレードが必要というものがほとんどです。WordPressならば無料で様々な機能が利用できますが、本格的なカスタマイズには専門スキルが必要です。
もちろん自作するにはそれよりも遥かに手間が掛かります。

ビジネスで使用するクオリティの高いホームページが必要ならば、制作会社に依頼することを検討してみてください。ホームページを作るというだけではなく、最初の設計から公開後の運用まで、専門的な知見に基づいてサポートしてくれるでしょう。

それによって得られる成果、社内リソースに余裕ができて他の業務を充実させられるなど、十分な費用対効果が得られるはずです。

センタードでは、WEBコンサルタント×WEBディレクターが連携し、『貴社のビジネスを成功に導く』サポートをします。WEBマーケティングに関してお困りのことがございましたら、お気軽にご相談くださいませ。