ホームページを自分で制作する方法｜費用や更新方法を分かりやすく解説
自分のビジネスや趣味をより多くの人に知ってもらうために、自分でホームページを作成したいと思ったことはありませんか？
もちろん、デザイン会社やスキルを持った知人に依頼することはできますが、コストをかけずに、自分のペースで、思い描いた通りのデザインのホームページを制作できれば素敵ですよね。
本記事では、ホームページを自分で制作したい人向けに、活用できるツールや費用、作成方法の選び方などを初心者でも分かりやすく解説します。
目次
ホームページに世界中からアクセスできる理由
これまで、ビジネスを行うには実際の拠点が必要でした。ビジネスの種類やオーナーの判断によって場所は異なりますが、通勤しやすい、またはお気に入りの場所、人が集まる繁華街、ショッピングモール内などにテナントを借りて会社やお店を開くのが常でした。
それが、インターネットとホームページの登場により、今では自宅にいながらにしてサイトを通じたオンラインでビジネスができるようになりました。実店舗を持たずに、ホームページだけでビジネスおよび集客を行う会社やネットショップなどが、続々と登場しています。もちろん、飲食店やペットショップなど輸送が難しいものを扱う業種や、美容室、エステサロンなどお客さんと対面するサービス業などは引き続き店舗が必要です。しかし、実店舗の運営と並行してお店のホームページを開設し、そこからネット予約を受け付け、メニューを掲載するといった新しいマーケティング手法が人気を博しています。
ホームページの魅力は、時間や場所を問わずに顧客に情報を知ってもらうことができる点です。しかも、これまでは顧客が店舗に直接来られる人に限られていたところ、ホームページであれば世界中からアクセスしてもらうことができます。
ホームページは主に、以下の 3 つの要素で構成されています。
1 : サーバー
サーバーとは、インターネット上でデータの保管と提供を行うコンピュータのことです。
ホームページを公開するには、ホームページ上に掲載する内容（文章、画像、ページ構造など）を保管するためのサーバーが必要です。サーバーは無料のものと有料のものがあり、それぞれ利用できる機能が異なります。
2 : ドメイン
ドメインとは、それぞれのホームぺージを見分けるための住所としての役割を果たします。
「https://www.wix.com」のように、URL の後半に表示されている文字列がドメイン名です。ビジネスの種類や所在地によって、好みのものを選んで購入します。
3 : HTML
ホームぺージは通常、「HTML」と呼ばれる専用の言語で作成されます。ホームぺージが発明された当初は、この HTML を自分で記述してページを作成する必要がありました。
しかし、今では Wix のようにコードをほとんど書かずにドラッグ＆ドロップでサイトをデザインできるノーコード・ローコード式のプラットフォームが人気を集めています。Wix のさらに進化したエディタなら、より早くもっと自在にノーコードでホームページが作成できるようになりました。
自分でホームページを制作する3つの方法
上記の 3 つの要素があればホームページを自作できます。それぞれを別のサービスから購入して揃えることも可能ですし、すべてをパッケージとして提供している専用のホームページ作成ツールを使用するのもよいでしょう。
1. 【難易度：★★★】HTML、CSS、JavaScript で構築
1 つ目は、自分でコードを書いてサイトを作成する方法です。Web 開発の経験がある人、または興味があって将来的にスキルを習得したい人におすすめです。
ホームぺージのコーディングで使用する一般的な言語は、以下の通りです。
HTML（HyperText Markup Language）：Web サイトを作成するためのマークアップ言語です。<p>これはブログです</p> など、それぞれの役割を持つタグで内容を囲むことで「ここからここまでが文章」「これは画像」といった具合に種類を区別します。
CSS（Cascading Style Sheets）：スタイルシートとも呼ばれる CSS は、サイト上で表示させたいスタイル（文字の色、フォントサイズなど）を指定するものです。
JavaScript：Web サイトにインタラクションを追加するためのプログラミング言語です。シンプルなホームぺージを作成する場合は必須ではありませんが、ボタンを押したときに何か別の要素を表示させたい、問い合わせフォームに入力されたデータのエラーチェックをしたい、など動的なスタイルを追加したい場合は、習得しておくと便利です。
HTML を記述するには、自身の PC に専用の HTML エディタが必要です。コーディングができたら、上記の通りサーバーとドメインを別途自分で用意する必要があります。
HTML を使用したオリジナルサイトの構築手順
HTML を編集するためのテキストエディタ（無料の VSCode など）をダウンロードします。
好みの HTML テンプレートをダウンロードして、テキストエディタで内容を変更したり、画像を追加します。
サーバーとドメインを購入し、必要な設定を行ってサイトを公開します。
必要な準備・コストなど
必要なスキル：HTML、CSS、JavaScript の知識とサーバー、ドメインの取得および接続に関する理解
スキル習得までにかかる時間：約 2～3 か月
費用：本などの教材費、スクールやオンラインコースへの参加費用など
メリット：自分でホームぺージをゼロから構築できるスキルが身につく
デメリット：経験や知識がない場合は作成までに時間がかかる。スキル不足で理想のデザインに仕上げるのが難しい
こんな人におすすめ：将来的にホームぺージ制作のプロとして仕事の依頼を受けたい人、HTML についてのスキルを習得したい人、時間がかかっても自分で試行錯誤しながらやってみたい人
2. 【難易度：★★☆】オープンソース
ホームぺージを自作したいけど、プログラミングを勉強する時間はかけられないという場合は、オープンソースのホームページ作成ツールの利用を検討してみましょう。ホームぺージやブログサイトを作成するためのシステムで、HTML の知識や経験がない人でも、コツさえ掴めば見映えの良いサイトを作成できます。
オープンソースとは、ソフトウェアを構成しているプログラム「ソースコード」が無料で公開されているため、誰もがコードを再利用したり、拡張機能、テンプレートなどを開発することができます。オープンソースでホームページを作成する場合は、無料で利用できますが、サーバーとドメイン費用は負担する必要があります。
オープンソースを利用してホームページを作成手順
サーバーとドメインを契約します。
利用したいオープンソースのホームページ作成ツールを選びます。
テーマ（デザインテンプレート）をインストールして必要な初期設定を行います。
サイトのデザインやコンテンツを作成して公開します。
必要な準備・コストなど
必要なスキル：それぞれのオープンソースツールごとの基本操作の理解、サーバーとドメインの設定、セキュリティ保守設定など
スキル習得までにかかる時間：約 1～2 か月
費用：オープンソースの利用自体は無料。サーバーとドメイン費用が発生
メリット：多くの人が使用しているため、不明点があっても Web 検索で情報が見つかることが多い
デメリット：オープンソースは、だれセキュリティが弱い部分があり、だれでも脆弱性を見つけて攻撃できる
こんな人におすすめ：基本的な IT スキルがあるがゼロからの構築よりも時間を短縮したい人
3. 【難易度：★☆☆】無料ホームページ作成ツールを使用
もっと簡単にホームぺージを作成したいという人は、ブラウザさえあればだれでも使えるスキル要らずのツールを利用するとよいでしょう。Wix のようなホームぺージ作成ツールなら、ドラッグ＆ドロップで本格的なコンテンツやデザインを作成し、短時間で公開できます。
ホームページ作成ツールでの作成手順
欲しい機能や料金を比較検討して、使用したいツールを選びます。
選んだツールに登録してアカウントを作成します。
デザインとコンテンツを決定します。Wix では、HTML テンプレートが 900 種類以上、豊富に用意されています。
サーバーを準備します。ホームぺージ作成ツールの場合、サーバー料金が含まれている場合がほとんどです。
ドメイン名を取得します。
サイトを最終チェックして公開します。
必要な準備・コストなど
必要なスキル：コーディングがほぼ不要になるため、ツールの操作を覚えるのみで簡単
スキル習得までにかかる時間：最短で数時間～数日でサイトを作成可能
費用：無料〜月数千円（有料プランアップグレードすることで、高度機能が使えることも）
メリット：時間と費用を抑えて個人でホームぺージを作成できる。また、カスタマーサービスが受けられる
デメリット：ツールによって価格設定や機能が大きく異なるため、最初の見極めが重要
こんな人におすすめ：自分でホームぺージを初めて作成する人、本格的なサイトを作成したい人、ホームページ作成にかける時間を短縮したい人、自分なりのアイディアと創作過程を楽しみたい人
もっと読む▶︎ Wix を使ってみたい方必見、「Wix の使い方」ガイドもぜひ参考にしてみてください。
自分でホームページを作成する方法の選び方
上記 3 つのうちどれを選ぶかは、ホームページが必要となるタイミングやビジネスの状況に応じて異なります。以下では、作成方法の中から、自分に合ったものを絞り込んでいくためのヒントを紹介します。
時間や費用
まず、ホームページをいつ公開したいのかをざっくりと決めます。その上で、希望する公開日に向けて、自分がホームページの作成にどれだけの時間をかけられるのかを考えてみましょう。
毎日 1 時間作業できる、週末は時間がある、もしくは今のタイミングだと仕事が忙しいのでなかなか難しそう、などさまざまなケースが考えられます。たとえば、「2 か月後にサイトを公開」「週末のみ 3～4 時間作業可能」の場合は、だいたい 4 時間 × 8 週間で計 32 時間ほどをホームページ作成に費やせることになります。
また、予算もどの方法を選ぶかに関わる重要な要素です。月々、もしくは一括して支払える費用を決めた上で、その範囲内に収まる方法を検討しましょう。
自分のスキルアップや自分で更新する手間がかけられるか
ホームページ作成の知識やスキルがあるかないかで、選ぶべき方法は大きく変わります。多少なりとも HTML の知識があり、それを生かしてみたいという人はコーディングに挑戦するのもよいいでしょう。上記のとおり、HTML エディタでゼロから構築することもできますし、Velo by Wix のように、オンラインのツールで作ったホームページのコードをカスタマイズし、希望する機能やデザインを追加することも可能です。
ホームページ作成がまったく初めてという人は、まずは無料のホームページ作成ツールを利用してみましょう。
また、ホームぺージは一度作成および公開すれば終わりというわけではありません。営業時間やサービスが変わる度に内容の修正が必要になり、本格的にオンラインビジネスを展開したい場合、 SEO 対策を含む継続的なメンテナンスが求められます。さらに、ある日サイトを開くとエラーが出て接続できないということもあるかもしれません。この場合は、迅速な復旧対応が必要になります。
このメンテナンスをすべて自分で行えるかどうかも、作成方法を選ぶときの重要な判断材料です。HTML やオープンソースコードを利用してサイトを構築した場合は、当然、保守運営もすべて自分で行わなければいけません。一方で、第三者運営のホームページ作成ツールを使用した場合やプロに制作を依頼した場合は、メンテナンスがすでに毎月のプランに含まれていたり、追加で契約できることがほとんどです。
サイトの種類、デザイン
ホームぺージは正確な情報を掲載することはもちろんですが、それらの情報を「どう見せる」かという点でデザイン性はかなり重要です。さらに、使用する色や画像の種類によってもサイト全体の雰囲気が大きく変わってきます。
いずれの方法を選ぶにせよ、HTML テンプレート（フルカスタマイズが可能）、テーマ（選ぶテーマによってはフルサイト編集が可能）、ホームぺージ作成ツールで用意されているデザインテンプレート（カスタマイズが制限される場合もあり）といった形で、サイトのひな形を利用できます。もちろん、単にひな形に文章を入れただけでは、他のサイトと似たデザインになってしまう可能性も否めません。テンプレートを活用して制作を効率化する一方で、自分のサイトをどこまでカスタマイズしたいのかという点でも、使用する方法は絞られます。自分だけのオリジナルサイトデザインにしたい場合は、Wix の白紙テンプレートがおすすめです。便利な編集機能はそのまま、より自由にデザインを構築することができます。
もっと読む▶︎ 完全にオリジナルで作成するなら、「白紙テンプレート」からサイトを作成すこともできます。ぜひブログ記事をチェック。
以上のポイントをよく比較して、自分に合った方法はどれかを考えてみましょう。
初心者でも、それなりに Web 関連の経験がある人であっても、必要となる時間とコストを一番有効に使いたいならホームぺージ作成ツールの使用がおすすめです。たとえば、Wix なら数百種類揃った HTML テンプレートをカスタマイズするだけで、数日あれば本格的なホームぺージを作成できます。テンプレートはフルカスタマイズ可能で、ネットショップやイベントの集客・管理、オンライン予約などさまざまなビジネス機能を追加可能。初心者でもドラッグ＆ドロップ操作なので安心ですし、経験者はテンプレートから制作したサイトに独自のコードを追加することもできます。
さらに、Wix のシステムにはサーバーが付属しており、サーバー代金は実質無料です。セキュリティ対策も万全のため、メンテナンスにかける労力を最小限に減らすことができます。
自分でホームページを作成する手順
それでは、Wix を例に挙げて、実際にホームページを自作する場合の手順を説明します。初心者でも、5つのステップで本格的なサイトを作成できます。
1. テンプレートからデザインを選択
まずは Wix に無料登録し、好みのホームページテンプレートを選びます。あらゆる業種に対応した 800 種類以上のテンプレートが用意されており、一覧を見ているだけでもデザインのインスピレーションが得られます。テンプレート内のテキストや画像は自由にカスタマイズが可能です。
2. パーツやセクション編集でデザインをカスタマイズ
Wix の特徴は、ブラウザ上でさまざまなパーツ（テキスト、画像、ボタンなど）を追加し、ドラッグ＆ドロップして自由に配置できることです。ホームページの作成がまったく初めてでも、直観的な操作で楽しく作業を進められます。
Wix エディタには思い通りのサイトを作成するためのさまざまな機能が揃っているため、ぜひさまざまなカスタマイズを試してみてください。Wix エディタを使って作成された、おしゃれなホームページデザインの事例も参考にしてみてください。
パーツを追加：見出しやボタン、動画の埋め込みなど、さまざまなコンテンツパーツを追加することができます。
セクションを追加：セクションとは、1 つの Web ページ上でそれぞれのコンテンツを区切るためのブロックのことです。テンプレート上で編集したいセクションをクリックすると、機能的な差し替えデザインが提案されるため、デザインを崩さず便利にカスタマイズできます。 サイト作成に慣れていない場合、一番怖いのは「編集中にサイトのデザインが崩れて戻せなくなる」ことでしょう。Wix なら、セクション内のアイコンをクリックするだけで自由にレイアウトや色を変更でき、失敗した場合は取消できるため安心です。
サイトデザイン：色やフォントを一括で編集できます。エディタ上でカラースタイル（サイト全体で使用する色）を指定し、サイトにブランドイメージを反映させられます。
Wix App Market：ビジネスに必要なあらゆるアプリを追加して、サイトの機能を拡張できます。
3. コンテンツを編集
だいたいのデザインが決まったら、次に文章や画像などのコンテンツを編集していきます。ホームページ上に掲載する文章はできる限り簡潔にまとめ、ビジネスの概要やメリットを端的に表すものにすると効果的です。長文やニュースを掲載したい場合は、別途ブログページを開設し、継続的に更新していくことをおすすめします。
文章を追加：簡潔かつ SEO キーワードを意識した見出しや文章を追加しましょう。
写真を差し替え：Wix では、数百種類揃った高画質の写真・動画素材を無料でサイトに使用できます。また、Shutterstock や Unsplash といったストック画像サイトの写真から選んで追加することも可能です。
ロゴの追加：トップページやヘッダーおよびフッター部分には、会社やビジネスのロゴを追加しましょう。まだロゴがない場合は、ロゴジェネレーターで簡単な質問に答えるだけで、おしゃれなロゴを無料で作成できます。ロゴができたらファビコンの設定も忘れずに。
モバイル版エディタ：スマホからサイトを閲覧する人が多いという事実を頭に入れて、モバイルサイトのデザインも怠らないようにしましょう。2022 年上期に LINE が実施したインターネットの利用環境調査では、「日常的なインターネットの利用環境はスマホのみ」という回答が最多という結果が出ています。 Wix なら、サイトを作成した時点でモバイル版のサイトが自動作成されます。モバイルエディタに切り替えて、公開する前にモバイルサイトの表示を確認しておきましょう。
プレビューで表示を確認：画面右上の「プレビュー」をクリックして、実際のサイトの表示を確認しましょう。
4. 公開前準備
サイトの編集が終わったら、公開に向けての準備を行います。各種設定を行い、エディタ右上で「公開」をクリックするだけで、簡単にサイトを公開できます。
各ページの URL を設定：それぞれのページに分かりやすい名称の URL を設定します。
サイトのデザインを保存：エディタ右上の「保存」をクリックして、編集した内容を保存します。Wix では作業内容が自動で保存されますが、予期せぬ状況で変更内容が失われないよう、定期的に保存をクリックしておくことをおすすめします。
ドメインを設定：Wix では無料の Wix URL を使用できますが、サイトの SEO 対策やブランディングのために、独自ドメインの取得をおすすめします。ドメインは購入する必要がありますが、Wix の年額プレミアムプランを契約した場合は 1 年間ドメインが無料になるクーポンを受け取ることができます。
SEO 設定：ダッシュボードからサイトの SEO 設定を簡単に行うことができます。Wix の SEO チェックリストで対策が必要な点が表示されるため、SEO に詳しくない場合でも、指示に従うだけで基本設定を網羅できます。
ホームーページを公開する前に、こちらのチェックリストで最終確認を行いましょう。
5. 公開・運営
サイト公開後には、検索結果での表示順位やアクセス数などの数字を適宜確認し、必要に応じてリニューアルを行いましょう。ホームページをレベルアップするために、取り組みたい目標を決めて、段階的に改善していくことが大切です。
Google コンソールに提出：サイトを Google 検索に掲載して、アクセス数を伸ばしましょう。上記の SEO チェックリストで基本的な設定を行った後、サイトを Google に提出します。
アクセス解析機能でパフォーマンスをモニタリング：Wix アクセス解析のレポートを活用して、サイトのアクセス数や売上、訪問者の動向といった各種データを確認します。
SEO 設定をアップデート：ダッシュボードで SEO チェックリストを定期的に確認し、改善が必要な点があれば更新します。
コンテンツのメンテナンス：ホームページのコンテンツも定期的に確認し、必要に応じて更新しましょう。新しいサービスの提供を開始した、メンバーの交代があった、会社住所が移転したなど、サイト上で足りていない情報はないか、また古い情報がそのままの状態になっていないかどうかを適宜チェックすることが重要です。
まとめ
いかがでしたか？自分でホームぺージを作成するのは長い道のりに見えますが、手順と必要なものさえ理解していれば、実は初心者でも数日で本格的なページを作成できます。
まずは、Wix で無料のサイト作成を試してみてください。シンプルな 5 ステップで簡単に美しいサイトが完成します。ネットショップやブログなど、豊富に揃ったビジネスツールやアプリを自由に追加できるため、サイトをまず作成してから徐々に機能を拡張していくことも可能です。
デザイナーが手がけたホームページテンプレートから好みのものを選んで作成することで、プロ並みの本格サイトをすばやく作成・公開できます。いますぐ、Wix の高機能なエディタをお試しください。
自分でホームページ制作に関連するQ&A
無料でホームページを作れるサイトは？
Wix なら、だれでも無料で Web サイトが作成できます。ほぼすべてのデザイン機能が無料で利用でき、理想の Web サイトの実現をサポートしています。 Web サイトを作成したら、すぐに Web サイトを公開することができ、手間のかかるレンタルサーバーのセットアップは不要です。Web サイトは、Wix のプラットフォーム上で安全に保護されているためコンテンツの制作に集中できます。
ホームページは自分で作れる？
ホームページを自作するにはいくら費用がかかる？
もっと読む▶︎ ホームページ作成の費用や独自ドメインの取得方法は、そのほかのブログ記事もぜひ読んでみてください。
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
