ウェブサイトを構築する方法:A-to-Z初心者ガイド

この記事では、ウェブサイトを作成するための基本的な手順を紹介します.


  1. ドメイン名を登録する
  2. ウェブホスティングにサインアップ
  3. ウェブページをデザインする
  4. ウェブサイトを検証してテストする
  5. 微調整して成長

基本的なWebサイトの作成は簡単です。労働作業自体は1時間以上かかるべきではありません。ただし、選択内容を理解して状況に合わせるのは簡単なことではありません.

一部の手順ではこの記事の範囲外の追加の知識が必要になる場合があるため、必要に応じて詳細なリソースへのリンクを含めました.

なぜあなたはウェブサイトを作成していますか

始める前に、まず目的を定義することが重要です.

事業体または個人として、ウェブサイトがオンラインプレゼンスの重要な部分になることは誰もが知っています。個人にとっては、基本的なプロファイルのように単純なものでも、ポートフォリオ全体と同じくらい詳細なものでもかまいません。ビジネスの場合、それはあなたの資産の一部と見なされ、あなたのプロフィール、製品、またはあなたがしていることと関係があるべきです.

明確な目的を念頭に置くことで、将来どのようなプラットフォームを使用するか、どのマーケティングチャネルに関与するかなど、より良い決定を下すことができます。.

ウェブサイトが構築されるいくつかの典型的な理由:

  • 製品を販売する –主な目標が製品の販売である場合、Webサイトには製品のショーケース、オンラインショッピングカート、安全な決済ゲートウェイ、できればPOSシステムを含める必要があります。.
  • 情報を表示する –会社や個人の情報を表示することを目的とする場合は、手頃な価格のプラットフォームでシンプルな1ページのウェブサイトを構築することを検討してください.
  • 現在のアイデアと経験を共有する –ブログは通常、アイデアを書いて世界と共有したいユーザーに最適です。.

これらの理由は相互に排他的である必要はありません。たとえば、上記の要素を2つ以上組み合わせたウェブサイトを作成できます。.

独自のウェブサイトを構築するための重要なステップ

ウェブサイトの目的を整理したら、構築する時が来ました!開始するには、まず最初に…

1.ドメイン名を登録する

ドメイン名とは?

ウェブサイトを開始するには、最初に必要なのはドメイン名です.

ドメイン名は、インターネット上であなたのウェブサイトを識別するアドレスです。いくつかの例には、Yahoo.com、Google.com、またはBuildThis.io(現在読んでいるWebサイト)が含まれます。.

ドメイン名を登録する場所?

ドメインを所有するには、ドメイン登録事業者に登録する必要があります.

ドメインレジストラは、登録を続行する前に、ドメイン名が一意かどうかを確認するのに役立ちます。 GoDaddyとNameCheapは、2つの一般的なドメインレジストラーです。私は非常に長い間ドメインを管理するためにそれらを使用してきました.

ドメイン名の選び方?

ドメイン名を選択することは、ブランドを反映するだけでなく、簡単でシンプルで覚えやすいため、多くの場合最も難しい部分です。.

ドメイン名は一意である必要があります。名前は世界中の別の人物または組織が所有していてはいけません。ドメイン名を作成する際に留意すべき一般的な経験則は次のとおりです。

  • 短くて覚えやすい
  • 商標名を使用しないでください
  • 可能な場合は.comまたは.netにアクセスする
  • 創造的であり、複合的または構成された言葉を使用する
  • キーワードに関連性を持たせるようにしてください

実用的なヒント

  • ドメイン名を理解するのに苦労している場合は、アイデアのためにいつでもドメイン名ジェネレータを使用できます。より人気のあるもののいくつかは ワードロイド そして リーンドメイン検索.
  • 初心者の場合は、GoDaddyまたはNamecheapにアクセスしてドメイン名を見つけることをお勧めします。どちらも初心者がドメイン名を簡単に購入して登録できるようにします.

2. Webホスティングアカウントにサインアップする

Webホストとは?

ウェブホストはあなたのウェブサイトの一部として必要なファイルを保存するために使用される大きなコンピューター(別名サーバー)です.

家具や家電製品を保管する家と考えてください。家はあなたのウェブホストであり、あらゆることを行います 家はあなたのウェブサイトのコンテンツです。ウェブサイトのコンテンツには通常、テキスト、画像、動画、その他必要と思われる要素が含まれます.

ホスティングの選択肢は何ですか?

現在、Webホスティングはさまざまなパッケージで提供されています。従来、Webホスティングプロバイダーは、基本的なソフトウェアと技術サポートを備えたサーバーのリースにのみ関与しています。従来のホスティングプロバイダーを使用してWebサイトをホスティングする方が、通常は安価で柔軟性があります。しかし、あなたがウェブサイトをセットアップするために少し余分な作業が必要です.

現在、企業はさまざまなサービスをバンドルしており、ユーザーは1つのサービスプロバイダーからすべてのWebサイトを構築、ホスト、および管理できます。私たちは通常これらの会社をウェブサイトビルダーまたはオンラインストアビルダーと呼んでいます. ウェブサイトをホストする これらの「バンドル」プラットフォームでは、通常、高価で柔軟性に欠けます。でもウェブサイトやオンラインストアを簡単に構築できます.

初心者向けのホスティングプラットフォーム

始めたばかりの場合は、基本的な共有ホスティングで十分です。そのため、Hostingerシングルプランをお勧めします。これにより、1つのWebサイトを月額わずか0.80ドルの低価格でホストできます。.

HostingerホスティングHostingerシングルプラン– 10 GB SSDストレージと100 GB帯域幅(初心者には十分以上)のWebサイトを月額$ 0.80 /でホスト.

eコマース/オンラインストアのホスティングプラットフォーム

Webサイト(eコマースストア)から直接製品を販売することを計画している場合は、Shopify Basicをチェックする必要があります(最低価格$ 29 /月).

ShopifyプラットフォームNBAレイカーズストアやTattly.comなど、800,000のeコマースストアがShopifyを使用しています。 Shopifyベーシックは月額29ドルから.

簡単に作成できるウェブサイト/小規模ビジネス向けのホスティングプラットフォーム

必要なのがビジネスポートフォリオと連絡先の詳細を紹介するシンプルなWebサイトだけの場合は、バンドルされたホスティングオプションが適切な場合があります。 WixとWeeblyは私が気に入っている2つのサイトビルダーです。2つについて詳しく書いており、ここでレビューを確認できます– Wixレビュー/ Weeblyレビュー.

バンドルされたオプションとしてのWixWixはオンラインサービスとして提供されており、コーディングの知識がまったくない場合でも、ドラッグアンドドロップのビジュアルエディターを使用してWebサイトを構築できます。 Wix Unlimitedプランは月額$ 12.50から.

実用的なヒント

  • 利用可能なホスティングにはさまざまな種類があります:共有ホスティング、専用サーバーホスティング、クラウド/ VPSホスティング.
  • 小規模なWebサイトの場合は、共有ホスティングプランを利用する方が安上がりです。より大きなサイトは、クラウドまたは専用ホスティングを使用することをお勧めします.
  • Webホストを選択する前に検討する必要があるいくつかの主要な品質は、価格、サーバーの速度、稼働時間率です。 Hostinger(初心者向け)、InMotion HostingおよびSiteGround(より大きなWebサイト向け)は、人気のある名前の一部です.
  • Webサイトから直接製品を販売する場合は、ShopifyやBigCommerceなどのストアビルダーの使用を検討してください。.

3.ウェブページをデザインする

ドメイン名とウェブホストの準備ができたら、インターネットに何かを公開するときです。ウェブページをデザインするには、ウェブデベロッパーを雇うか、自分で作成します.

ここでは、Web開発タスクを外部委託する方法について詳しく説明します。あなたのためにあなたのウェブサイトを開発するために誰かを雇うつもりなら、あなたは以下のステップをスキップしてそのページに移るべきです.

DIYerにとって、Webページをデザインする3つの簡単な方法は次のとおりです。

1- What-you-see-is-what-you-get(WYSIWYG)Webエディター

WYSIWYGエディターを使用すると、コーディングの必要なしに、Webサイトをセットアップし、Webページを最初からデザインできます。これは通常のワードプロセッサと同じように機能します。テンプレートまたは空白のページから始めて、Webサイトのページを作成します。それが終わったら、ファイルをコンテンツで満たし、ファイル転送プロトコル(FTP)プログラムを使用してフォルダー全体をWebホストにアップロードします.

この方法を使用するには、基本的なHTML / CSSスキルと、インターネットの仕組みに関する一般的な知識があることが最善です.

いくつかのWYSIWYG Webエディターが利用可能です–非営利目的で無料で使用できるものと、有料ライセンスが必要なものがあります。. Microsoft Expression Web, Google Web Designer, ブルーグリフォン, そして オープンエレメント チェックするのに良いものがあります.

FTPプログラムの場合– FileZilla そして WinSCP 2つの最高の無料オプションです.

Microsoft Expression-WYSIWYGエディター例–これはMicrosoft Expression Web Editorのスクリーンショットです。フォルダーリスト(左)–フォルダーを使用してWebサイトを構成します。エディター(中央)–ここにテキストを書き込んでフォーマットします。スタイル/ツールボックス(右)– CSS(オプション)を使用してページのスタイルとデザインを設定します。ページ名インデックス(.html / .htm / .php / .asp)を作成する必要があることに注意してください。これはWebサイトのホームページとして機能します。.

このオプションは、従来のホスティング(Hostingerなど)を使用している場合にのみ可能です。 WYSIWYGエディタの使用は、Webコーディングを学ぶのが好きなら柔軟で楽しいですが、Webサイトをすぐに欲しがる初心者にとっては実行可能なオプションではありません。.

2-コンテンツ管理システム(CMS)の使用

現在、ほとんどのWebサイトはCMSで構築および管理されています。 CMSには、サイト所有者の観点から多くの利点があります。管理が容易で、設計と開発に柔軟性があり、費用対効果が高い(無料!)– 3つの主要な利点.

まだ聞いたことがない場合– WordPressはインターネット上のすべてのWebサイトの33%を占めており、 世界で最も人気のあるCMS.

手順2で従来のホスティングオプションを選択している場合は、数回クリックするだけでWordPressをインストールできます.

HostingerにWordPressをインストールするHostingerでWordPressを設定する方法は次のとおりです。 Hostingerアカウントにログインし、ウェブサイトにアクセスします > 自動インストーラ > ワードプレス > パスワードとウェブサイト名を設定する > インストール.

WordPressをインストールすると、基本的なWebサイトフレームワークが得られます。その後、WordPressテンプレートを使用してWebページをデザインできます。ビルド済みのWordPressテンプレートは WordPress.org(公式テーマディレクトリ)から無料で入手できます。. または、エレガントなテーマや職人のようなプロの開発者からプレミアムテンプレートを購入することもできます.

Dishaは、WordPressを使用してブログまたはWebサイトを作成する方法をここで説明しました。さらに情報が必要な場合は、指示に従ってください.

注–手順2でWixやWeeblyなどの「バンドル」プラットフォームを選択した場合は、CMSを使用できません.

3.ドラッグアンドドロップのウェブサイト/ストアビルダーを使用する

ドラッグアンドドロップのウェブサイト/ストアビルダーは、ウェブサイトを作成する最も簡単で最速の方法です.

Web開発のスキルは必要ありません。あらかじめ作成されたテンプレートを選択し、ビルダーから必要なWeb要素(連絡フォーム、ドロップダウンメニュー、Googleマップ、支払いボタン、ショッピングカートなど)を取得するだけです。フル機能のWebサイトが準備できました.

多くのウェブサイトビルダーがインターネット上に散在しています– WixとWeeblyは最も人気のあるものの2つです。上記のように、オンラインストアを構築している場合は、Shopifyが最適です。.

Wixデモ

Wixエディターを使用してWebサイトを作成および編集するWixでのWebページの設計:サイトメニュー(左)–ページの管理、サイトの背景の選択、サイトのナビゲーションの設定、テキストとリンクの追加、画像のアップロードなどをここで行います。配置(中央/左)–ここでWebサイト要素を配置および配置します。プレビュー(右上)– Webサイトの保存、プレビュー、公開.

Wixのビルド済みテンプレートでWebサイトを設計するWixテンプレート– Wixには何百ものビルド済みテンプレートがあります(すべて表示).

Shopifyデモ

Shopifyエディターを使用したWebサイトの作成と編集Shopifyで構築済みのテーマを使用して、オンラインストアフロントをデザインします。メニュー(左)–ここでテーマを選択し、ショップ要素(スライド、ヘッドライン、画像、フッターなど)を追加します。プレビュー(中央/右)–ここでストアをプレビューします.

ShopifyテンプレートShopifyは、無料のプレミアムテーマを幅広く提供しています(サンプルを参照).

Hostgator Website Builderデモ

GatorウェブサイトビルダーGator Website Builderの使用–メニュー(左)–テーマを選択し、ページを追加し、ここにページセクションを追加します。プレビュー(中央/右)–上部のナビゲーションバーでページ間を移動します。ウェブサイトを保存、プレビュー、公開する.

Gator Website Builderの無料テーマHostgator Website Builderで提供される完全にカスタマイズ可能で応答性の高いWebサイトテンプレート.

実用的なヒント

  • Shopify、BigCommerce、Wix、およびWeeblyによる無料のeコマースサイトテンプレートを1ページで閲覧する
  • Wixを使用してWebサイトを作成するための詳細な手順
  • Wixで構築されたWebサイトの例を見る
  • Shopifyを使用してウェブサイトを作成するためのステップバイステップの説明
  • Shopifyで構築されたWebサイトの例を見る

4.ウェブサイトの検証とテスト

ウェブサイトの準備ができたら、次は主要なブラウザ(Chrome、Firefox、Safari、Microsoft Edge、IE 11など)やさまざまな画面サイズでどのように機能するかを検証およびテストします。.

オンラインで無料のツールを使用してこれらのテストを実行できます.

マークアップ検証

W3C-作成が完了したら、ウェブサイトを検証しますを使用してウェブサイトのマークアップを簡単に検証 W3Cマークアップ検証サービス.

マークアップ検証とは? HTML、PHPなどのコーディング言語またはスクリプトには、それぞれ独自の形式、語彙、構文があります。マークアップ検証は、Webサイトがこれらのルールに従っているかどうかを検証するプロセスです.

ブラウザテスト

さまざまなブラウザーでWebサイトをテストする一度に最大115の異なるブラウザーでWebサイトをクロステストします BrowserShots.

スクリーンテスト

さまざまな画面サイズでWebサイトをテストする使用する スクリーンフライ モニター、タブレット、スマートフォン、その他のさまざまな画面サイズでWebページをプレビューする.

5.ウェブサイトの微調整と成長

あなたのウェブサイトをインターネット上で公開することが第一段階です。あなたのウェブサイトの成功を確実にするためにやるべきことはまだ他にもたくさんあります。まず、いくつかのタスクを紹介します…

ウェブサイトの速度を微調整する

グーグルはサイトの速度がランキング要素の一つであることを明確に述べています。つまり、サイトの読み込みが速いと、サイトのランクが高くなる可能性があります.

また、–ウェブサイトの読み込みが速いほど、ウェブサイトの訪問者は幸せになります。無数のケーススタディや実験で、読み込みの遅いWebサイトがユーザーエクスペリエンスに悪影響を与え、Webサイトの収益に影響することが証明されています。 Amazonのサイトが1秒でも遅くなった場合、Amazonは推定16億ドルの収益を失っていただろう.

現在のウェブサイトの速度が遅い場合, それを改善する方法を学ぶ.

ウェブサイト検索の可視性を向上させる

ウェブサイトに注目させるために、検索エンジン最適化(SEO)のマスターである必要はありません。しかし、いくつかの基本的な検索エンジン最適化スキルは常に持っていると良いです.

でウェブマスターアカウントを作成 Google Search Console ウェブサイトをGoogleに送信し、SEOの問題を特定します。基本的なキーワード調査を行ってから、主要なキーワードのページタイトルと見出しを最適化します。検索結果ページから目立つようにサイトにスキーママークアップを実装する.

SEOに関するその他のヒントについては、SEOダミーガイドをご覧ください。.

HTTPSを実装する

Google ChromeがHTTP Webサイトに「安全ではない」というラベルを付け始めて以来、SSL証明書は大きな問題になっています。ウェブサイトがユーザーから「信頼されている」ことを確認するには– HTTPS接続が必須です.

必須ページを追加

目的や機能が異なる可能性があるため、2つのWebサイトが同じになることはありません。ただし、すべてのWebサイトに必要な3つの標準ページがあります。インデックス(ホームページ)、概要ページ、および連絡先ページです。.

ホームページ

ホームページは多くの場合、ほとんどの訪問者がWebサイトにアクセスした後に最初に目にする場所です。ホームページは適切なピッチを提供し、ビジターをサイトの奥深くまで誘導する必要があります.

ウェブサイトの例-ハウス例– Hausホームページには、明確なナビゲーションメニューとギャラリースタイルのデザイン(製品のショーケースに最適)が付属しています.

ページについて

ページについては、訪問者との親密な関係を築くことです。それはあなたを自己紹介し、あなたのウェブサイトについての詳細な情報(まあ?)を与えることを可能にします。通常、ウェブサイトを所有および運営している人々の写真を含めることをお勧めします.

ウェブサイトの例-ブルドッグスキンケア例–ブルドッグスキンケアの概要ページは、愛らしい記憶に残るメッセージを送信します.

お問い合わせページ

ユーザーや潜在的なクライアントとコミュニケーションを取ることが重要です。したがって–お問い合わせページ。可能なすべての通信チャネル(ソーシャルメディアのプロファイル、連絡先フォーム、電子メールアドレスなど)を含めて、訪問者があなたに連絡できるようにします.

ウェブサイトの例-存続例– Survicateの連絡先ページは、大きなフォームフィールドと明確な行動を促すフレーズで美しくデザインされています。すべての必要な情報で構成されています.

ソーシャルメディアプラットフォームでリーチを拡大する

あなたのウェブサイトはまた、あなたのターゲットとする聴衆のほとんどがたむろするソーシャルメディアプラットフォームに存在するべきです。 BuildThis.ioの場合、これはFacebookとTwitterを意味します。他の人にとっては、LinkedIn、Tumblr、Pinterestなどがあります。.

初心者向けのソーシャルメディアマーケティングのヒントをいくつか紹介します.

ファビコンを追加

B」は、ブラウザのタブの左側に表示される黄色い円の中にありますか?これは「ファビコン」として知られています。ロゴのように、ファビコンはウェブサイトを表す小さな視覚要素です.

Faviconは、ウェブサイトの所有者が見落としがちな気の利いた小さなブランディングテクニックです。それがあなたのように聞こえるなら–あなたを助けるためにこれらの無料のファビコンジェネレータを利用してください.

ウェブサイトのよくある質問を作成

あなたは無料であなた自身のウェブサイトを作ることができますか?

を使用して無料のウェブサイトを作成できます 無料のウェブホスティング 000Webhostのオファーのように、または一部のWebサイトビルダーが提供する無料プランを使用して。たとえば、Wixはリソースが限られた無料プランを提供しており、小規模で少量のWebサイトに適しています.

自分のビジネスのウェブサイトを作成するにはどうすればよいですか?

Webサイトビルダーは、中小企業がアウトソーシングする必要なく独自のWebサイトを作成するための理想的な方法です。これらのオプションは、技術的な知識を必要とせず、多くの場合、便利な事前設計されたテンプレートを提供します > ここをクリックして開始.

最高のウェブサイトビルダーは何ですか?

「最良」とは主観的な用語です。私たちにとって最良のものはあなたにとって適切ではないかもしれません。人気の点で– Squarespaceは、22%の市場シェアを持つ最も人気のあるWebサイトビルダーです。それらの後に、それぞれ2位と3位でWixとGoDaddyのGoCentralが続きます。.

Googleでウェブサイトを作成できますか?

Googleは、G Suite製品群の一部としてサイトビルダーを提供しています。料金はユーザーあたり月額$ 5.40 /から.

WebサイトからPDFを作成する方法?

Adobe Readerがコンピューターにインストールされている場合は、CTRL-Pを押してWebページからPDFを作成できます。開いた印刷メニューから、PDFへの出力を選択し、ファイルを保存します.

今すぐ始めましょう!

あなたは今、成功するウェブサイトを作成して構築するのに十分以上のことを知っています。知識を働かせましょう。今すぐ始めて、インターネットを揺さぶる!

*翻訳:EN ID

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map