Webサイトを作成する3つの簡単な方法:ステップバイステップの初心者ガイド

書かれた記事:
  • ホスティングガイド
  • 最終更新日:10、2019

2019ではウェブサイトを簡単に作成できます。

あなたは技術オタクやプログラマーである必要はありません。

適切な方法に従ってください。 適切なプラットフォームを選択してください。 適切なツールを使用してください。 あなたは100%の罰金になります。

最初に2004でオンラインビジネスを始めたとき、私はウェブ開発に熟知していませんでした。 私は11年後までウェブ開発者を雇っていませんでした。 そして、私は大丈夫でした。

今日では、革新的な開発ツールと優れたWeb公開プラットフォームを提供しています。

ウェブサイトを作る3つの簡単な方法:

クイックリンク:

  1. 最初から作成する
  2. コンテンツ管理システム(CMS)を使用すると、
  3. ウェブサイトビルダーの使用

#1メソッドを使用すると、デザインやサイト機能の柔軟性が向上しますが、ウェブ言語に関する知識が必要です。

#2および#3メソッドを使用すると、Webサイトの作成および管理プロセスがずっと簡単になります。 あなたの能力に応じて、これらの方法の1つを選択する必要があります。

これらの3つの方法のそれぞれをまもなく検討します。

しかし、あなたが始める前に...

開始前に、あなたのウェブサイトには2つのものが必要です:1-ドメイン名と2-ウェブホスティング。

1-ドメインを登録する

ドメインはあなたのウェブサイトの名前です。 ユニークで、あなたのビジネスのブランドを伝える必要があります。

ドメインを検索して登録する最も簡単な方法は、ドメインレジストラに行くことです。

ドメイン登録者は、年間契約または長期契約のいずれかによってドメイン名を登録させることができます。

NameCheapでドメイン名を検索して登録します
ドメイン名の検索と登録 名前安い.

ここに評判の良いいくつかのドメインレジストラがあります。

レジストラ開始価格
.COM .NET
123 Reg£11.99£11 .99
Domain.com$ 9.99 /年$ 10.99 /年
ガンディ€12.54 /年€16.50 /年
GoDaddyは$ 12.17 /年$ 12.17 /年
名前安い$ 10.69 /年$ 12.88 /年
ネットワークソリューション$ 34.99 /年$ 32.99 /年

また、 ダミーのドメイン名.

2-ウェブホスティングを購入する

A ウェブホスト あなたのウェブサイトを格納する大きなコンピュータ(別名、サーバ)です。 Amazon、IBM、FBなどの大企業では、Webサーバーの所有と管理を行っています。 他の企業はホスティングプロバイダからサーバを借りるだけです(これはずっと安く簡単です)。

注:サイトを作成するウェブサイトビルダーを選択している場合は、この手順をスキップしてください(ステップ#3を参照).

ウェブサイトのホスティング

いくつかの初心者に優しいサービスをチェックアウトするホスティングサービス。

ウェブホストサインアップ備考
A2ホスティング$ 4.90 /月高速のWebホスト、フレンドリーな初心者。
お申し込み$ 3.95 /月安いサインアップ価格、初心者フレンドリー。
Hostgatorクラウド$ 8.95 /月合理的な価格、信頼性の高いサーバー。
HostPapa$ 3.36 /月エコフレンドリーなウェブホスト、特別割引。
インモーションセンタホスティング$ 3.49 /月格安サインアップ価格、信頼性の高いサーバー。
Sitegroundは$ 5.95 /月業界#1ライブチャットサポート、強固なウェブホスト。

現在までに、60ホスティング企業以上に登録し、テストし、レビューしました。 我々を参照してください トップ10ホスティング選択 or ホスティングレビューの完全なリスト.

また、 ウェブサイトの構築にはどれくらいの費用がかかりますか.


FTCの開示

WHSRは、この記事で言及された一部の企業からの紹介料を受け取ります。 このような便利なコンテンツを作成するには、多くの労力と費用がかかります。サポートは非​​常に高く評価されています。


ドメイン名とウェブホスティングが整ったら、あなたの袖を巻き上げて作成しましょう!

方法#1:最初からウェブサイトを作成する

必要なスキルとツール

主要なウェブ言語とウェブサイトの基本を知っているならば、あなた自身のユニークで独特なウェブサイトを自分で作ることができます。

それ以外の場合は、#2 / 3メソッドにスキップすることをお勧めします。 ウェブデベロッパーに連絡してください。

あなたが知っておくべき基本的なWeb言語/ツール:

  • HTML(ハイパーテキストマークアップ言語)
    HTMLは、ウェブページおよびウェブアプリケーションの基本的な構造であり、コンテンツをウェブブラウザに意味するものである。 これは、開始と終了を持つ連続したタグと、構造的に角かっこで囲まれたキーワードで構成されています。 例:<strong> </ strong>
  • CSS(カスケードスタイルシート)
    CSSは、WebページのHTMLマークアップを飾るために使用されるスタイル言語です。 CSSがなければ、Webページは何も見えませんが、大きな白色ページには、何らかの順序付けられていないテキストと画像があります。 CSSは、ページを理想的に私たちが望むものにするものです。
  • スクリプト言語
    インタラクティブではないため、HTMLとCSSはスクリプト言語がないと何もありません。 ユーザーに反応する動的なWebページを作成するには、JavaScriptやjQueryなどの言語が必要です。 PHP、Python、Rubyなどのサーバー側言語も時間の経過とともに必要になる可能性があります。
  • データベース管理
    ウェブサイトのユーザ入力データを格納、管理およびアクセスするために、データベースと呼ばれる大きな情報テーブルが考慮される。 MySQL、MongoDB、PostgreSQLなどのデータベース管理システムは、効率的にこの作業を行うためにサーバー側で使用されます。
  • FTP(ファイル転送プロトコル)
    FTPを使用すると、Webサイトのソースファイルをホストされたサーバーに簡単に転送できます。 ファイルをサーバーコンピュータにアップロードするために使用できるWebベースのFTPクライアントとコンピュータソフトウェアベースのFTPクライアントがあります。

IDEを使用した段階的Webサイト作成プロセス

上記の基本的なウェブ言語とウェブサイトの基本を知っていると仮定して、最初のウェブサイトをどのように作成するかについて、プロセスの概要を説明します。

ステップ1:ローカルの作業環境をセットアップする

Subline Textでサイトを作る
Subline Textの作業環境のスクリーンショット

ウェブサイトのソースファイルを作成し整理するためには、適切なローカル作業環境が重要です。 IDE(統合開発環境)をインストールすることで、コンピュータデバイス上にWeb開発環境を作成できます。 IDEは、基本的にテキストエディタ、ビルドオートメーション、デバッガで構成されています。

崇高なテキスト   アトム HTML、CSS、JS、PHP、PythonなどのWeb言語をサポートするWeb開発の基本的なIDEの一部です。

一方、IDEのような拡張されたIDEがあります アドビのDreamweaver (例:Server Connectivity、FTP)を提供しています。

ステップ2:Adobe Photoshopを使用してウェブサイトを計画および設計する

計画ウェブサイトの構造とナビゲーションシステムは非常に重要です。 まず、コンテンツの配信方法を理解する必要があります。 ナビゲーションメニューの数、列またはコンテンツフィールドの数、含めるイメージの数、および場所を計画します。

ベストプラクティスは、Adobe Photoshopを開き、Webページの概略図を作成することです。 ホームページ、ページ、連絡先ページ、サービスページなど、さまざまなページに異なるラフを作成する必要があるかもしれません。

このWebサイトを作成するときに使用したデザインモックアップ
例 - 12月の2016のサイト改訂時に私たちが行ったデザインのモックアップ。

ステップ3:HTMLとCSSを使用してデザインを編集する

Adobe PhotoshopでWebページのラフなデザインを完成させたら、ソースコードの記述を開始することができます。

これは最も簡単な部分です。 CSSに含めるHTMLエレメントにHTMLマークアップを付けて、デザインに合わせてCSSを使用してください。

ステップ4:JavaScriptとjQueryを使って動的にする

HTMLやCSSを使用してフロントエンドのユーザー操作を制御することはできないため、現代ではHTMLとCSSベースのWebサイトだけが存在しません。

JavaScriptや多分改良されたライブラリ、jQueryのようなスクリプト言語を使用して、フォーム、ログイン、スライダ、メニュー、または必要な場所のユーザアクティビティを制御することができます。

ステップ5:FTPクライアントを使用してサーバーにローカルファイルをアップロードする

サイト作成用のFTPソフトウェア

最後のステップは、すべてのソースファイルをWebサーバーにアップロードすることです。 これを処理する最も簡単で簡単な方法は、FTPクライアントを使用することです。

まず、コンピュータデバイスにFTPクライアントをダウンロードし、FTPアカウントを使用してWebサーバーに接続します。 FTPアカウントに正常に接続したら、すべてのローカルファイルをWebディレクトリのルートにコピーします。 いくつかの優れたFTPクライアントは FileZillaを, WinSCPの   Cyber​​duckの.


方法#2:CMSでウェブサイトを作成する

必要なスキルとツール

  • Knwoledge:コンピュータとインターネットの基本操作。 HTML、CSS、およびPHP(必須ではありませんが、基本を知っている方がよい)
  • ツール: WordPress, Joomlaの、および Drupal

CMSやコンテンツ管理システムは初心者の初心者を経験豊富なWeb開発者に合わせるように戦術的に構築されています。

オンラインコンテンツの作成と管理を容易にするソフトウェアアプリケーションです。 それらのほとんどはオープンソースで自由に使用できます。

HTML、CSS、PHPの基本を知っていれば、あなたにとって有利です。 これらのプラットフォームが非常に直感的であるため、わからないと大きな問題ではありません。 ここでは、必要に応じて選択できるCMSプラットフォームのトップ3の無料の選択肢を紹介します。

クイック比較

WordPressJoomlaのDrupal
コスト無料無料無料
使用法311,682万人26,474万人31,216万人
フリーテーマ4,000+1,000+2,000+
無料のプラグイン45,000+7,000+34,000+

また、 トップCMSの比較(2018) - ワードプレス対Joomlaの対Drupal

WordPress

ワードプレスは、さまざまな統計によると、最大数のブログや中小規模のウェブサイトで使用されています。 それにもかかわらず、多くの巨大な大手ウェブサイトでは、単純さのためにWordPressを好む。 WYSIWYGエディタは、最初のコンテンツを作成するために学習する必要がある唯一のものです。

このプラットフォームは初心者のための施設であり、さまざまなクラスのWeb開発者によって大きく開発可能です。 それは自分のリポジトリに多くのフリープラグインとテーマを持っています。 #1 CMSの選択肢として、多くのサードパーティリソースが利用できます。

テーマ
WordPressテーマの選択肢。

プロたち

  • 高い柔軟性とカスタマイズ性
  • 使いやすい、
  • 数多くの学習リソース、
  • 優れたコミュニティ&サポート

コンズ

  • 主要な視覚的なカスタマイズのためのコードが必要
  • 更新がプラグインに問題を引き起こす可能性があります

もっと詳しく知る

Joomlaの

Joomlaは多くの点でWordPressに似ています。 また、使いやすく、簡単にインストールでき、モジュールの助けを借りて簡単に拡張できますWordPressプラグインに相当するもの。 結果として、それは初心者のための次善のオプションです。

しかし、利用可能なオプションの数のために、初心者はJoomlaを探検するのがより怖いかもしれません。 左メニューに加えて、「コントロールパネル」ロゴのすぐ上のトップバーにもメニューがあります。 混乱を避けるため、「コンテンツ」、「ユーザー」、「拡張機能」など、左バーとトップバーのメニューの項目の一部が似ていることに注意してください。

WordPressのように、Joomlaにはいくつかのスタイルとテンプレートが用意されていて、すぐにサイトに独特の外観を与えることができます。 しかし、3つのコンテンツ管理システムのうち、Joomlaはソーシャルネットワークの作成に関して最も簡単なソリューションを提供します。 EasySocialやJomSocialのようなプラットフォームでは、あなた自身のソーシャルネットワーキングサイトからほんの数分です。

ダッシュ
内部Joomlaのシステム。

プロたち

  • 技術的に高度な
  • ウェブサイトは一般的に
  • エンタープライズレベルのセキュリティ

コンズ

  • モジュールは維持しにくい
  • ミドルグラウンドCMS - WordPressほど簡単ではなく、Drupalほど進んでいない

さらに詳しい情報

Drupal

経験豊かなWeb開発者は、Drupalが最も強力なCMSであることを証明します。

ただし、使用するのが最も難しいです。 その柔軟性のため、Drupalは世界で2番目に使用されているCMSですが、初心者の間では人気がありません。 Drupalを使って「完全な」Webサイトを構築するには、手を汚くしてコーディングの基礎を学ぶ必要があります。 初心者にとってCMSの周りにあなたのやり方が分かっているのは難しいことです。

drupalの
新しいDrupalのインストール - Drupalの複雑な機能にもかかわらず、CMSはシンプルで最小限のインターフェースを提供します。

プロたち

  • 習得が容易
  • 素晴らしいヘルプポータル
  • アップデートはシームレスに統合されます
  • より多くの組み込みオプション

コンズ

  • 始動段階での急な学習曲線 - 上級ユーザーにおすすめ

さらに詳しい情報

WordPressを使用した段階的なウェブサイト作成プロセス

この方法では、例としてWordPressを使用します。 あなたは既に ウェブホスティングアカウント 登録されたドメイン名。

ステップ1:あなたのウェブホスティングパネルでWordPressインストーラを見つける

Webホスティングサービスには通常、WordPressや他の一般的なプラットフォームをインストールするための簡単なインストーラーがあります。

あなたのウェブホスティングアカウントにログインして、どのインストーラを持っているか調べてください。 あなたが検索すべき人気のある名前は、Softaculous、QuickInstall、またはFantasticoです。

一部のホスティングプロバイダ(例: Sitegroundは)ユーザダッシュボード(cPanelにログインした直後に表示される画面)に統合インストーラを使用します。 その場合は、「WordPress」を含むタイトルを探してみてください。

例:SiteGround cPanelダッシュボード。

手順2:インストーラを使ってWordPressをインストールする

Softaculousは最も人気のある自動インストーラで、cPanelに搭載されています。 Softculous経由でインストールを進めます。 他のインストーラはほとんど同じです。

Softaculousをクリックし、WordPressの上にある「インストール」をクリックしてインストールを開始します。

あなたのウェブサイトを作成するためのWordPressのインストール

ここで重要な部分があります。

サイト構成

次のようにオプションを構成し、他のフィールドをデフォルトの構成(後で並べ替える)のままにして、インストールをクリックします。

  • プロトコル:http://またはhttp:// wwwをインストールするかどうかを決定する必要があります。 URLのバージョン。 どのようなものを選んでも、大きな違いはありません。 技術的な観点から、http:// www。 柔軟性とクッキー管理の面で優れています。 有効なSSL証明書を持っていて、WordPressをインストールしたい場合は、httpではなくhttpsを選択するだけです。
  • ドメイン:ウェブサイトをインストールするドメインを選択します。
  • ディレクトリ:WordPressサイトをインストールする場所を指定します。 ルートURL(例:http://www.yourwebsite.com/)にインストールする場合は、空白のままにしておきます。 サブURL(例:http://www.yourwebsite.com/myblog/)に追加する場合は、フィールドにディレクトリを指定します。
  • 管理者アカウント:あなたのワードプレスサイトにログインする際に使用するユーザー名、パスワード、電子メールを設定します。

あなたが最後のステップで成功したなら、うまくいった。 あなたのウェブサイトはライブです!

今すぐあなたのWordPressサイトにログインしてください。 サイトのログインページは、設定したウェブサイトのURLの後ろにwp-login.phpのように表示されます。

ステップ3:テーマといくつかの重要なプラグインをインストールする

次に、テーマと必要なプラグインをインストールする必要があります。 あなたのワードプレスダッシュボードの左側のサイドバーを見てください。

WordPressのディレクトリには、無料の既製テーマがたくさんあります。

これらの無料テーマを閲覧するには、「外観>テーマ>新規追加」に移動し、要件に合ったテーマを検索し、インストールボタンをクリックします。

WordPressテーマディレクトリ
WordPressのテーマディレクトリ。

また、「テーマのアップロード」セクションからサードパーティのテーマをインストールすることもできます。 有料の、プロのデザイン、WordPressのテーマ、私はお勧めします エレガントなテーマ (その効率的なコードと美しいフロントエンドデザインのため)。

プラグインについては、「プラグイン>新規追加」を参照してください。

必要なプラグインを検索してインストールします。 3rd パーティプラグインは、[プラグインのアップロード]セクションからインストールすることもできます。

WordPressプラグインディレクトリ
WordPressプラグインディレクトリ。

ここでは、いくつかの重要なフリープラグインを提案したいと思います。 それらを見つけるために、WordPressのpluginsディレクトリにある名前で検索してください。 各カテゴリからプラグインを1つだけインストールすれば十分です。

  • SEOのために:Yoast SEO、オールインワンSEOパック
  • セキュリティ:iThemesセキュリティ、Wordfenceセキュリティ
  • サイト統計の場合:WordPress.comのJetpack、Monster InsightsのWordPressのGoogle Analytics
  • フォーム作成用:お問い合わせフォーム7
  • パフォーマンス:W3合計キャッシュ、WPスーパーキャッシュ

また、 新しいWPサイト用の9 Essential WordPressプラグイン

ステップ4:あなたは準備が整いました!

あなたのサイトは、最後のステップで稼動しているはずです。 しかし、並べ替えるべき事がいくつかあります。

  • [設定]> [一般]で、サイトのタイトルとタグラインを設定します。
  • [設定]> [閲覧]:ホームページに表示する内容と、1つのページに表示するブログ記事の数を指定します。
  • [設定]> [固定リンク]の下で、ブログ投稿のURL構造を設定します。

新しいWPサイトの基本設定
新しいWordPressサイトの基本設定。


方法#3:サイトビルダーでウェブサイトを作成する

必要なスキルとツール

サイト構築者は、ウェブサイトを簡単にセットアップできるようになりました。 ウェブ言語を知らなくても、数分でフル機能のウェブサイトを立ち上げることができます。 彼らはゼロコーディングの知識を必要とするドラッグアンドドロップのWebサイトビルダーを提供しています。

インターネット上には多くのサイトビルダーが散在しています。 このblogpostの26フリーサイト作成者; それらのすべてがニーズを満たすことはできません。

次の3つは、最も話しやすい、潜在的なウェブサイトビルダーです。

ウィックス

Wixを使ってウェブサイトを作る

Wixは市場で最も簡単なサイトビルダーの1つで、さまざまなカテゴリの下でソートされた完全にカスタマイズ可能な500 +テンプレートを備えています。 そうすれば、あなたに合ったものを見つけることができます。

彼らは常にコンテンツ上に見える柔軟なドラッグ&ドロップのWebサイトエディタを提供しています。 リストから1つの項目をドラッグして、Webサイトの任意の場所にドロップして追加することができます。 表示されている項目はすべて移動または編集できます。

唯一の欠点は、Wixフリープランのオンサイト広告があることです。 あなたはComboプランにアップグレードすることでそれを取り除くことができます。これは最低$ 12 /月に戻ってきます。

また、 私たちの詳細なWixレビュー.

Weeblyの

Weeblyを使ってウェブサイトを作る

Weeblyは、ナビゲーション、ユーザーフレンドリーなような多くの点で簡単です。 彼らは何百ものテンプレートを用意していますが、パーソナライズオプションは限られているかもしれません。

彼らは、使用および変更が可能な、あらかじめ設計されたページレイアウト(例:ページ、価格設定ページ、連絡先ページなど)が数多く用意されています。

ドラッグアンドドロップビルダーは使いやすいですが、カスタマイズのために指定された領域に限定されることがあります。 拡張機能やサードパーティアプリケーションの利用も制限されています。

また、 私たちの詳細なWeeblyのレビュー.

Wixを使用した段階的Webサイト作成プロセス

ステップ1:Wixにサインアップする

Wix.comでアカウントを作成します。

5のプレミアムプランと1の無料プランがあります(価格は$ 0〜$ 24.50 / moの範囲です)。 サイトを正常に作成したら、アップグレードオプションが表示されます。

Wixのプランと価格はこちらをご覧ください。

ウィックス登録
Wixサインアップページ。

私はWixの基本的な有料プラン - コンボをお勧めします。 Wix Comboプラン($ 8.50 / mo)には、無料のドメイン名、より多くのCPUリソース、Wix広告はありません。

ステップ2:テンプレートを選択する

Wixはウェブサイトの作成方法を尋ねます。 彼らが提案する最も速い方法は、最終的には実り多いものではないWix ADI(Artificial Design Intelligence)です。

だから私はもう少し長く、より良い方法、ウェブサイトビルダーを歩いていく!

異なるラベルの下にテンプレートが分類されていることがわかります。 あなたの将来のカテゴリをブラウズし、あなたに合ったものを選んでください。

あなたが好きなWixテーマを見つけたら、 'edit'をクリックして続行してください。

Wixでウェブページを編集する
マウスをテーマに移動させると、「編集」ボタンが表示されます。

ステップ3:Wix Website Builderを使用してあなたのウェブサイトをデザインする

しばらくすると、直感的なウェブサイトビルダーに直接着陸します。

ウェブサイトの設計は簡単です。 画面の左右に異なるツールが表示されます。 また、ウェブサイトの任意の場所をクリックしてブロックを編集するか、別の場所に移動します。

ウィックス要素
Wixのドラッグ&ドロップエディタを使用してWebページ要素を構築します。

ステップ4:ウェブサイトを公開する

公開ボタンを押すと、無料のサブドメインかフル機能のドメインかを尋ねられます。 あなたの呼び出しです。

もう少し調整をすることをお勧めします。

'Wixダッシュボード>サイトの管理と編集'に移動し、必要に応じてSEO、ファビコン、ソーシャル、アップグレードを設定します。

Wixサイト構成
Wixサイトを設定します。 クリックすると画像が拡大します。

そして、これらの基本設定が完了したら、あなたのウェブサイトは準備が整いました。

Jerry Lowによる記事

オタクのお父さん、SEOのデータジャンキー、投資家、そしてWeb Hosting Secretの創設者。 Jerryは2004以来インターネット資産を作り、オンラインでお金を稼いでいます。 彼は、思いやりのある落書きを愛し、新しい食べ物を試すのが大好きです。

接続する: