Webサイトの作り方|基礎からわかる作成方法とステップ
更新日 2024年8月8日(公開日 2022年3月29日)
現代のビジネスには、Web サイトの作成は欠かせません。多くの方が最初の一歩を踏み出す際に不安を感じることでしょう。
このブログでは、初心者にもわかりやすく、Web サイト作成の基本と具体的な手順を解説します。プロフェッショナルな Web サイトを持つことで、ビジネスの信頼性を高め、新しい顧客を引きつけることができます。ぜひ最後までお読みください。
\いますぐ Web サイトを作成/
もっと詳しく ▶︎ Wix の AI サイトビルダーをご存知ですか? AI で Web サイトを自動生成する、次世代の Web 制作ツールをお試しください。ほかにも、Wix のAI 機能の紹介と使い方を紹介した記事も要チェックです。
目次
02. サイトのコンテンツ設計
04. サイトを制作/外注
05. 公開
はじめに:サイト作成に必要なもの
Web サイトを作る際に最初に必要なのが、ドメインとレンタルサーバー(ホスティングサービス)の選定です。
ドメイン名はあなたの Web サイトのアドレスとなり、ビジネスやブランドを象徴する重要な要素です。短くて覚えやすく、活動内容が推測できるような名前を選びましょう。次にサーバーですが、これは Web サイトのデータを保存し、インターネット上で公開するための場所を提供します。
信頼性、速度、サポートの質を基準に選ぶことが大切です。初心者向けには、使いやすさとコストのバランスが取れたサービスを選ぶことをおすすめします。
01. レンタルサーバーの購入方法
レンタルサーバーには、無料と有料のサービスがあります。無料サーバーはコストがかからないため魅力的ですが、広告が表示されたり、機能が限定されていることが多いです。
一方、有料サーバーは月額料金が必要ですが、広告がなく、より高い性能とサポートが得られます。購入方法は、提供会社の Web サイトで必要なプランを選び、アカウントを作成して支払いを行うだけです。サービス内容、サポート体制、料金を比較検討し、自分のニーズに最適なものを選びましょう。
無料レンタルサーバー
使える機能やサポートサービスが限られる
データ容量が比較的少ない(平均 1GB )
独自ドメインが使えない
レンタルサーバー会社の広告が表示される
高度なセキュリティ機能は有料プランとなることが多い
有料レンタルサーバー
サポート体制が整っているのではじめてでも安心
大容量のデータを保存可能
独自ドメイン使用可
広告の非表示が可能
充実したセキュリティ機能と安定稼働が期待できる
Wix で Web サイトを作成すると、自動的に業界最高グレードのレンタルサーバーが利用できます。無料プランでは、500MBのクラウドストレージと500MBの帯域幅を提供し、ビジネスの成長に応じて容量を拡張することが可能です。さらにプレミアムプランにアップグレードすれば、最大50GBのクラウドストレージと無制限の帯域幅を享受できます。
もっと詳しく ▶︎ 初心者向けにレンタルサーバーについてわかりやすく解説したブログ記事もぜひチェックしてみてください。
02. ドメインの購入方法
ドメインとは、 ドメインは、Web 上での住所のようなもので、ユーザーがあなたのサイトを簡単に見つけられるようにする重要な要素です。
ドメインの取得方法はとてもシンプルです。まず、お好みのドメイン登録業者のサイトにアクセスします。次に、希望のドメイン名が利用可能かどうか確認するため、空きドメイン検索をします。利用可能な場合は、そのドメインを選択し、登録手続きに進みます。
手続きには、連絡先情報の入力や登録料の支払いが含まれます。これで、ドメインの取得は完了です。自分のサイトにふさわしい、覚えやすいドメイン名を選びましょう。
独自ドメインの取得がおすすめな理由
ドメインの費用は、選ぶドメインの種類や業者によって異なりますが、一般的には一年で数千円程度からスタートします。特定の人気の高いドメインやプレミアムドメインでは、それ以上の費用がかかることもありますが、独自ドメインを取得することは多くのメリットがあります。
プロフェッショナルな印象を与えることができる
覚えやすいドメイン名は訪問者に再訪を促しやすくなり、ブランドアイデンティティを確立しやすくなる
SEO(検索エンジン最適化)の観点からも、独自ドメインは信頼性が高く評価されるため、検索結果でのランキング向上に寄与する可能性がある
独自ドメインからビジネスメールを作成することができる。
これらの理由から、ビジネスや個人の Web サイトを作成するなら、独自ドメインの取得がおすすめです。
独自ドメインと共有ドメインの違いは「戸建の住所」か「マンションの一室の住所」のよう違いだと考えると分かりやすいでしょう。
独自ドメイン:世界にひとつしかないドメイン名のことです。企業やブランドのサイトでは通常、会社名やブランド名を含む独自ドメインを使用しています。独自ドメインは完全にユニークな所有物であるため、有料で取得し、その後も半永久的に維持管理費を支払う必要があります。
共有ドメイン:レンタルサーバー会社や Web サイト作成サービスなどが発行する、無料で使用可能なドメインです。なお、アカウント名など変更できる場所以外の部分はそのブログサービスを利用しているユーザー全員で共有することになります。サービスのユーザーになると発行され、設定の手間や維持費もかからないため簡単に使い始めることができます。ただし、ユーザー解約後は利用不可となりますので注意が必要です。
Webサイトの作り方4選
Web サイトを作成する際に選択できる方法を紹介します。必要となる費用や技術力などを比較し、どの方法を採用するか検討しましょう。
01. Wix を使って作成する
Wix なら、「なるべく費用を抑えて、自分のサイトを作成してみたい」といったニーズに答えてくれます。初めて設定しようとすると手間がかかる、サーバーやドメインの契約をする必要がなく、その上初心者にとって便利な HTML テンプレートなどが利用して、Web サイトを作ることができます。また、ビジネスの成長に合わせて、サイトに予約機能やネットショプ機能を直感的に追加することができます。
メリット
業界最高標準の安定性・信頼性を誇る Web ホスティング を提供。大規模なサーバー障害が起こったとしても柔軟に対応することができます。
安心のサポート体制や充実したヘルプセンター記事
機能の拡張性に優れた Wix アプリストア
直感的な操作で、デザインがカスタマイズできる高い操作性
Google が新たに定めたウェブに関する主な指標(CWV=コアウェブバイタル)においての優秀なパフォーマンス。
デメリット
独自ドメインを接続するためにはアップグレードが必要。
より手早く作成したい場合は、スマホからサイトを作ることができます。AI のテキスト生成機能や、画像編集機能、便利な機能はそのまま、片手で本格的なビジネスサイトが作成できます。ぜひお手持ちのスマホから、ホームページ作成をお試しください。
こちらのオンラインコースで、Wix エディタを使ったウェブサイト構築のノウハウや Web デザインのスキルを学び、魅力的なウェブサイトを作り上げましょう。
もっと詳しく ▶︎ さっそく、Wix を始めるなら、「Wix の使い方」完全ガイドもぜひ読んでみてください。
\900種類以上のテンプレートが無料/
02. オープンソースや CMS を使って作成する
Web サイトやブログが作成できるオープンソースのツール(Wordpressなど)を使うことで、面倒なサイト構築を簡略化しサイト運営に集中することができます。
オープンソースのため、誰もが拡張機能や付随するツールを開発することができ、さまざまな便利ツールが使えます。ブログ記事やコンテンツを簡単に追加したり、プラグイン(拡張機能)を自由に追加してサイトをカスタマイズできるのが特徴です。一方で、サイトのシステムが公開されているため、サキュリティが脆弱になりやすいという懸念もあります。オープンソースでサイトを構築する際には、自身で、堅牢なセキュリティ対策を実施することが肝要です。また、ドメインやサーバーの管理も自分で行う必要があります。費用を払い忘れると、サイトがオンラインで見れなくなるリスクもあるため、管理を怠らないようにしましょう。
メリット
無料でダウンロードして使える
豊富なプラグイン(拡張機能)を使って自由にサイトをカスタマイズできる
インターネット上にたくさんの情報がある
デメリット
個人で作る場合は専門知識が必須
ソフトのダウンロードに加えて別途サーバー契約が必要
オープンソースのため、セキュリティが比較的脆弱
運営・メンテナンスなどはすべて自分で行う必要がある
03. HTMLやCSSで自分で構築する
Web デザインや開発の経験があるという方は、自分でコーディングを行うというオプションもあります。高い専門知識があれば、ツールの制限を受けずに自由にウェブサイトを構築することができます。「あの人の書いたコードは美しい」「前任者が構築したシステムを改修するのがすごく難しい」などの談議がしばしば行われるほど、コードにはそれぞれの開発者の色が出るものです。自分を表現する作品としてゼロから Web サイトを作りたいという人には、自作が適していると言えるでしょう。
スキルを習得するための時間や手間はかかりますが、自分のスキルアップが目的の場合に向いている方法だと言えます。
メリット
スキルを磨くことができる
ツールの制限を受けない
コードをきれいに書くことができる(コードの品質は SEO にも影響)
デメリット
必要なスキルを身につけるまで時間と手間がかかる
技術力によってデザインを妥協せざるを得ない
開発に手間と時間がかかる
04. Web サイト制作業者に依頼する
自分で作るよりはプロに任せたいという場合は、信頼できる制作会社にサイトの作成を依頼しましょう。自分が思い描いているサイトのイメージがしっかりと伝わるよう、依頼する前に必ず「これは外せない」という点を洗い出しておくことが重要です。
Wix では公認の Web デザイナーにサイト作成を依頼できる「Wix Marketplace」というサービスも展開しています。依頼したいサービスの種類を選び、質問に答えていくだけで制作者のニーズに適した Wix パートナーから提案が届きます。また、サービス種類や地域などでパートナーを検索し、一覧から選んでオファーを出すこともできます。
メリット
自作するよりもクオリティの高いサイトに仕上がる
SEO やコンテンツに関するアドバイスがもらえることも多い
サイトを公開した後の運用まで任せられる
デメリット
自作する場合と比べてコストがかかる
意思疎通が難しい場合がある
思い通りのデザインになるかの保証がない
実際にそれぞれの方法でサイトを作成した時のメリット・デメリットが理解できたでしょうか。これらの方法の中で、初めてサイトを作成する方におすすめなのが、サイト作成ソフトを使った方法です。その中でも代表的なツールを次の章で紹介します。
おすすめ無料サイト作成ツール Wix
「自分で Web サイトを作ってみたいけど、予算は低く抑えたい」「初めてホームページを作成するので、サポートがあると安心」そんな方には、WIx のサイト作成ツールの利用がおすすめです。
Wix (ウィックス)
世界で 2 億人以上に選ばれているサービス。コーディングの知識がなくても、デザイン性と機能性に優れたホームページを作成できることが特徴です。900 種類以上から選べるホームページテンプレート、SEO ツール、万全のWebセキュリティなど、本格的な Web 運営のための機能が充実しています。有料版と無料版があります。
Webサイトの作り方を選ぶ方法
Web サイトの作り方が分かったら、あとはご自身の条件に応じてどれを使うかを選ぶだけ。以下のリストを参考にして、ご自身に最適なサービスを絞り込んでみましょう。
01. ウェブ制作にかけられる費用
まずは、Web サイトを作成する意図を思い返してそれに見合った予算を考えてみましょう。個人でビジネスを始めるのでできるだけ初期費用を節約したいのか、会社サイトを丸ごとリニューアルしたいので予算はそれなりに出しても良いのかなど、サイト作成一つとってもパターンは様々です。
一般的な価格帯は次の通りです。レンタルサーバーの契約料金はプランや容量に応じて月々数百円〜数千円で、会社によっては初期費用が発生する場合もあります。独自ドメインも年間5,000円程度で取得することができます。
サイト作成サービス:無料、または有料プラン
Wix:無料、または月額 500円 から必要な機能に合わせて選べる多様な有料プラン
オープンソース:サーバー契約料金(月々)+有料プラン使用料
コーディングで自作:サーバー契約料金 + ドメイン料(月々)
制作会社に依頼:30,000円~30万円(数ページの場合。ページ数や依頼する制作会社により大きく異なります)
02. サイト構築の専門知識の有無
自分の知識レベルに合っているかどうかも、Web サイトの作り方を選ぶときの重要な指標です。完全初心者でも簡単にサイトが作成できるサービスを求めているのか、それなりに知識があるのでカスタマイズ性を重視するのか、または自分で作るよりも依頼する方がコスト的・時間的にも得策なのか、といったところも検討しておきましょう。
サイト作成サービス:完全初心者OK。サービスによっては自分でデザインを編集したり、コードが追加できるものもある
Wix : 完全初心者にもフレンドリー。初心者でも本格的に SEO やアクセシビリティ設定を最適化するガイドが充実。
オープンソース:初心者にも扱いやすいが、プラグインを使ったより自由なカスタマイズをするためには知識が必要
コーディングで自作:専門知識が必須
制作会社に依頼:完全初心者OK。知識があれば制作会社の担当者にニーズを伝えやすいというメリットがある
03. 完成までに必要な時間
次に重要なのが、「サイトをいつまでに作成したいか」ということです。たとえば、イベントの開催を翌週に控えているので簡単なサイトをとりあえず作成しておきたいという場合や、会社サイトをリニューアルするのでじっくり時間をかけてプランニングを行いたいという場合があるかもしれません。
また、作成する Web サイトのコンテンツ量やページ数によっても所要期間は異なります。
サイト作成サービス:最短 1 日で作成
Wix : 最短 1 日で、外観や機能も本格的なウェブサイトが作成可能
オープンソース:知識レベルに応じて1週間~(初心者の場合は学習期間が必要)
コーディングで自作: 1 週間~
制作会社に依頼:平均 1 か月〜 3 か月。使用するコンテンツや画像などは基本的にクライアント(この場合はあなた)が準備するため、準備が整うまでの期間や制作会社との打ち合わせスケジュールによって期間は前後します。
04. サポートの充実度
Web サイト作成がはじめてで疑問点が発生する可能性がある、分からないところを質問しながら解決していきたいという場合は、サポート体制が整っているサービスを選ぶと安心です。特に、海外発のホームページ作成サービスを使用するなら、日本語でのヘルプドキュメントやカスタマーサポートの有無を確認しておきましょう。
サイト作成サービス:無料でサポートが受けられるところが大半だが、中には有料プランユーザーのみにサポートを提供しているサービスも。
Wix:充実したヘルプセンター記事の提供や、オンラインチャット、カスタマーケアでの電話折り返しサポートでの対応を提供。
オープンソース:日本語の各種ドキュメント、オンラインでの問い合わせに対応。日本語のサポートフォーラムもあり
コーディングで自作:サポートなし
制作会社に依頼:技術面は制作会社がすべて対応してくれるので安心
05. 運営・メンテナンスのしやすさ
意外に盲点なのが、「Web サイトは作成・公開したらそれで終わり」ではありません。公開した後も、ブログを始めるためにページを追加したり、デザインをアップデート品が、サイトを成長させていく必要があります。また、古くなったページをリニューアルするなど長期的なメインテナンスも重要です。サイトを常に最新の状態にアップデートするように意識しましょう。
また、サーバーがダウンしてサイトが表示されなくなったり、手違いでいつの間にか前のレイアウトに戻っていたといった問題が起こった時の対応も行っていく必要があります。
サイト作成サービス:サイトを公開した後の編集も簡単に行える。サーバー契約もサービスに含まれるため、セキュリティに力を入れているサービスを選べば万が一の時も安心。
Wix:ブログの投稿やサイトの更新も Wix エディタ一つで管理可能。サーバー契約もサービスに含まれ、24時間体制でサーバーセキュリティを監視しており、急激なアクセス増加があっても安心。
オープンソース:サイトのカスタマイズは可能だが、サーバー契約が別のため別途問い合わせが必要
コーディングで自作:上記と同じく、いつでも編集可能だがサーバーの安定稼働に関しては自己メンテナンスが必要
制作会社に依頼:制作会社によってはサイト公開後の運営まで丸投げできるとこともあり。変更したい箇所があれば連絡をとり、変更を依頼します。
Webサイトの作成手順:5ステップ
サイト制作の流れは、大きく5つ手順に分けられます。初めてサイトを制作する方も、順を追ってサイトの構成を考えることで本格的なサイトを作成を目指しましょう。
1. サイトの目的(KPI)を明確にする
まずはWebサイトで「何を達成したいか」を明確にしておきましょう。Web サイトと一口に言っても、さまざまな種類や目的があります。どの種類を選ぶにしても、肝心なのは計測可能な目標(KPI)を定めた上で、サイトを作成することです。
ランディングページ(LP):購入や申し込みなどのアクションをとってもらうことが目的
ネットショップサイト:商品を販売することが目的
ポートフォリオサイト:自身が作った作品を掲載し、新規クライアントに対し実績やスキルをアピールすることが目的
それぞれ、目的が異なるため、作りたいサイトがどんなタイプに分類されるのか確認しましょう。
2. サイトのコンテンツ設計
次に、コンテンツを設計します。ページを訪問したユーザーが、目的を達成できるように、わかりやすい動線を意識しましょう。ウェブサイトに必要な構成要素やパーツをリストアップすることで、ウェブデザインの準備も抜けなく取り組むことができます。デザインを作成する前に、どんなコンテンツにするのか、内容を固めましょう。
ウェブサイトを構築しているページがどのように繋がっているのかを可視化するサイトマップを作成しましょう。サイトマップが作成できたら、それぞれのページに対して SEO 戦略を立てるために、キーワード調査を行います。この時、競合分析も同時に行うことがおすすめです。競合業者のサイトを分析することで、ブランドイメージの差別化や、ターゲット層のニーズなどを明確にすることができます。
3 . ブランドイメージを反映した Web デザインのコンセプトを用意
いよいよ、Web デザインに取り掛かります。STEP2 で定めたコンテンツ設計と競合分析に基づいて、オリジナルのブランドコンセプトを定めます。このコンセプトに基づいて、ブランドカラーの策定やロゴデザインの制作に取り掛かりましょう。
ロゴデザインはプロのデザイナーに外注することが一般的です。自分で作成したい場合は、オンラインのロゴメーカーツールが便利です。ロゴジェネレーターを利用すれば、初めてロゴをデザインする人でも、簡単なアンケートに回答するだけでAI がオリジナルロゴを作成してくれます。
4. サイトを制作/外注する
サイトマップやデザイン素材をサイトに実装していきましょう。この時、スマホなどの異なるデバイスや異なる環境でデザインが正確にできているかテストを行いながら制作することをおすすめします。どの環境からでも問題なくページが見えているか、設計した通りにシステムが動作しているかのチェックを公開前に必ず行いましょう。
5. 公開
いよいよ公開です。万全を期していても、予想外のエラーは発生します。ページの公開ができたら、公開されたページの動作確認や表示に問題がないか、最終確認を行いましょう。Webサイトは、公開したら終わりではありません。定期的に Web サイトを更新したりコンテンツを追加することは、訪問者とのエンゲージメントアップに繋がるだけでなく、検索エンジンからもポジティブな評価を得ることができます。Google アナリティクスなどのトラッキングツールを利用して、サイトの成長具合とパフォーマンスを定期的に測定しながら Webサイトを運営していきましょう。
まとめ
この記事では、Web サイトの作り方について詳しく紹介しました。どの方法でホームページを作成するか決まりましたか?
Wix なら、メールアドレスの登録だけで、すぐに無料 Web サイトの作成が始めらます。まずは Wix の豊富なホームページテンプレートとパワフルな編集機能を無料でお試しください。
\高機能SEOツールを搭載/
もっと詳しく ▶︎ おすすめの Web サイト作成 AI ツールや、「WixはSEOに弱い?」という質問に徹底解説する記事も要チェック。
編集者: Miyuki Shimose
SEO & ブログコンテンツマーケター