How to Create a Website

ウェブサイトを5つの簡単なステップで作成する方法(更新)

Looking for a quick tutorial on how to create a website?

Creating a website usually involves a LOT of coding. You’ll need to know a bunch of different languages such as HTML, CSS, Javascript, PHP, and more to create a fully functional website. But should you really create a website from scratch using code?

Short answer: No. There are simple ways to create a website that is powerful, fast, and packed with features. And you don’t have to know a single line of code to do it!

So, if you’re wondering how to create a business website in hours with little to no work involved, this is the right article for you. We’re going to show you how to create a WordPress website even if you have no idea what WordPress is and why you should care.

Let’s take it step-by-step.

Why You Should Create Your Own Website

One of the best ways to establish yourself online is by creating your own website.

Creating your own website is super easy, and brings many benefits with. Your website is an essential tool whether you’re running businesses, selling art, and building a personal brand. Here’s a quick look at the benefits of having your own website:

  • Build an online presence: With a website, you can establish yourself as an expert in your field and build credibility with potential clients or customers.
  • Control your brand image: You can design your website to reflect your unique style, values, and messaging in a consistent way.
  • Get more views: A website can get your brand seen by way more people than the biggest sales convention in the world.
  • Sell products and services: You can set up an online store and offer your products to customers worldwide and round the clock.
  • Gain business insights: Websites allow you to track and monitor your traffic and their behavior so that you can optimize your site for conversions.

So, if you’re looking to grow your business, showcase your work, or simply establish yourself online, creating your own website is the way to go.

How to Create a Website With No Coding

Now that we’ve gone over why you should create a website, let’s go over how to create a website. We’re going to take through the entire process of building a website without any coding. So, let’s get started.

Step #1: How to Set Up Your Hosting Server

Before you create a website, you need to get:

  • A domain name
  • Web hosting
  • An SSL certificate

You might run into videos and articles online that talk about building a free website. Believe us when we say it, there’s no such thing as a truly free website. Most free hosting sites offer extremely bad hosting, no technical support, and slap their branding on your website.

If you’re testing themes for web development or looking to experiment with a web page and its design, that’s fine. But for any self-respecting business owner, “free websites” are a horrible way to go.

Select a Hosting Service

Most modern hosting services will offer a custom domain name, web hosting, and an SSL certificate. But we recommend using one of these three hosting providers to start building:

All three hosting services are completely optimized for WordPress. And you get a free domain name and SSL certificate when you buy website hosting. For this article, we will show you how to get started using Bluehost. But it’s a somewhat similar process for our other recommended hosting services.

NOTE: These are all paid hosting services. You can create a website for free using free hosting. But if you’re serious about building a business, we recommend using hosting services that take your business seriously.

Sign Up for WordPress Hosting

Head over to Bluehost and click on Get Started:

Getting started with bluehost

Then, choose your hosting plan on the next screen. We recommend getting the Plus plan if you’re looking to scale the business. But if you’re just looking to get started, even the Basic plan should be fine for you.

Choose Bluehost plan

After that, you’ll choose the domain name for your website.

Choose domain name on Bluehost

Finally, Bluehost will confirm your order and try to upsell you some added services such as Domain Privacy Protection. It’s entirely up to you whether you want to get this extra stuff. We don’t recommend it for small businesses, but if you think that the upsells are worth it, go ahead and add them to your cart.

Bluehost Upsells

After that, you complete the checkout process.

Step #2: How to Install WordPress on Your Server

Once you’re done with the checkout, Bluehost will send you an email to log in to your cPanel account. The cPanel is your web hosting control panel. From there, you can manage your email inboxes and FTP accounts, get support from Bluehost, and more.

When you log in to cPanel, you’ll see that Bluehost has already installed WordPress for you. WordPress is a website builder and content management system (CMS) to create and publish content on your website. It’s open-source software that anyone can use to make any kind of website imaginable.

Why Choose WordPress?

It started out as a blogging platform in 2003 but soon transformed into a CMS and later a full-fledged website building platform. Today it powers more than 38% of all websites on the internet.

If you want to build an eCommerce website, then you have a choice between Wix, Shopify, Squarespace and WooCommerce. These are the most popular apps to create a new website for an online store.

We recommend using WooCommerce over other platforms as it’s the leading eCommerce website software in the world and unlike most other services, it’s free. The cool part is that WooCommerce acts like a WordPress plugin and is based on WordPress. So, even if you want to build an eCommerce store, we recommend getting started with WordPress.

Log In to Your WordPress Site

To get into your WordPress dashboard, all you have to do is click on the Log in to WordPress button:

Log in to WordPress from Bluehost cPanel

Your WordPress dashboard will look something like this:

WordPress dashboard example

NOTE: The WordPress installation process is different for different hosting services. You may have to manually install WordPress if you’re not using Bluehost, depending on your hosting service. Mostly, you’ll need to locate a software installer inside your cPanel called Softaculous. Softaculous is a setup wizard that will help you install WordPress on your server.

Configure Your WordPress Settings

When you first log in to your WordPress dashboard, you’ll want to take care of a few small details before launching your product.

Head over to Settings » General to set the website title and description tags:

WordPress General Settings

Then, change your WordPress Address and Site Address to their HTTPS versions to use SSL on your site:

Use HTTPS URLs

When you’re done, hit the Save Changes button at the bottom.

Step #3: How to Create a Website Theme

Before you can dive into building a lead generating machine, you need to design your website. The traditional way is to hire a designer to design a website with an amazing user experience for you.

But you can skip this step altogether and use a WordPress theme instead. Most WordPress themes come with design templates that you can use straight away and customize according to your need.

What is a Theme?

A WordPress theme allows you to create pages and posts on your site with zero coding. WordPress themes are template files written in PHP, HTML, CSS, and JavaScript. Each file works together to create the design and functionality of your WordPress site.

A typical WordPress theme will include some, if not all, of the following theme files:

  • footer.php
  • header.php
  • index.php
  • page.php
  • sidebar.php
  • archive.php

WordPress themes also include a functions.php file and style.css file.

If you’re not sure what any of this means, don’t worry. You don’t need to be a coding expert to install and use a WordPress theme.

Selecting a WordPress Theme

There are tons of free and paid WordPress themes that can help you create a website easily. We recommend using a theme builder such as SeedProd.

How to create a website in WordPress using SeedProd

SeedProd is the #1 drag-and-drop WordPress website builder.

You get a drag-and-drop landing page builder that’s packed with options to build product sites and landing pages. Unlike WordPress website builders, you can customize every inch of your landing page including navigation menus, footers, fonts, and styles. SeedProd also works with any WordPress theme and creates mobile-friendly landing pages.

With SeedProd, you get pre-built website templates for high-converting landing pages that you can publish instantly. This includes templates for:

And lots more! You can even create your own theme using the SeedProd Theme Builder. The best part is that any website you build with SeedProd looks just as good on a mobile device. Check out the full list of features in our SeedProd review.

Install and Activate SeedProd

Go ahead and install and activate the SeedProd plugin.

SeedProd ライセンスキーを入力

If you’re not sure how to do that, check out this article on how to install a WordPress plugin.

Create a WordPress Theme Without Coding

Then, in your WordPress dashboard, head over to SeedProd » Theme Builder:

SeedProd テーマビルダー

This is where you can create all the individual parts that make up your theme, including:

  • Header
  • フッター
  • Single Post
  • Single Page
  • Archive (Blog Page)
  • Home Page
  • Sidebar

You can create each of these theme parts individually by clicking the Add New Theme Template button. And then, you can edit each of these elements using a drag-and-drop visual builder.

SeedProd で WordPress ヘッダーを編集する

Or, you can use one of the many fully designed themes in SeedProd by clicking on the Themes button. Just choose any theme that matches your business closely to get started:

SeedProd スターターテーマ

It doesn’t have to be an exact match. You can even select one based on the design. You can edit everything about these themes including fonts, the web design, and the overall user experience.

Step #4: How to Customize Your Website

Now that you have a theme to get you started, you’ll want to edit that theme to suit your business. This is super easy to do.

SeedProd’s page builder comes with various content blocks in a drag and drop editor. Even if you’re never used a page builder before, you’re going to find it super easy to use. Just drag and drop different design elements from the sidebar:

SeedProd ドラッグ&ドロップビルダー

これらのブロックを使用して、次のような非常にインタラクティブなランディングページを作成できます。

  • RafflePressのプレゼント企画で、ローンチ前にサイトのエンゲージメントを増やしましょう
  • お問い合わせフォームで、サイトのリード情報を収集しましょう
  • カウントダウンタイマーで、リリースに関するFOMO(取り残されることへの恐れ)と期待感を高めましょう
  • ソーシャルボタンで、ソーシャルメディアでの共有を獲得しましょう
  • FAQ blocks for better Search Engine Optimization

その他多数!

You can edit any of the content blocks on the page by simply clicking on them. This includes the navigation menu or the blog posts on your site. Once you lock down your website’s design, you can build your website any way you want it.

Step #5: How to Integrate Your Email Marketing Service with Your Site

工事中ページの設計が完了したら、ページビルダーの上部にある「接続」タブをクリックし、メールマーケティングプロバイダーを選択して、サイトのリード情報を収集します。

SeedProdでEメールマーケティングを統合する

Marketing tools and integrations can help build your online presence. So, we highly recommend setting up an email list.

We recommend using Constant Contact as your email marketing service. It’s a robust service that allows you to create powerful email marketing campaigns easily.

When you’re done configuring your email marketing service, click the Page Settings tab at the top of your screen as an added bonus.

SeedProdポッドキャストランディングページの設定を編集する

ここで、ランディングページにSEOプラグインGoogle Analyticsプラグインを追加できます。広告パフォーマンスを追跡するために、FacebookピクセルやPinterestピクセルなどのカスタムトラッキングコードを設定することもできます。

Pro Tip: You should also set a blog subscription widget on your site. It doesn’t matter if you’re running a personal blog or a business website.

Step #6: Add a Click to Subscribe Button to Your Landing Page

プッシュ通知購読者を収集するために、クリックして購読ボタンを追加することもできます。プッシュ通知は、リピートトラフィックを増やし、エンゲージメントを高め、公式グッズがあれば販売するためにも役立ちます。

SeedProdでは、サイドバーからカスタムHTMLモジュールをドラッグアンドドロップするだけです。

最初の折り目のメールサインアップフォームのすぐ下に、購読ボタンを配置しました。

Webinar Landing Page Subscribe Button

しかし、ボタンは好きな場所に挿入できます。

For this part, you need some experience with HTML and CSS. Or, you can copy this code and paste it into your Custom HTML block:

<button onclick="subscribeOnClickButton()" style="border: none; padding-left: 5%; padding-right:5%; text-align: center; display: inline-block; color: blue;">Get Updates via Push Notifications</button>

That’s a standard button in HTML with very little styling. The only fancy bit is the onclick function in the code. It basically means that your visitors can click on the button to subscribe to something. Now, we need to give the button some extra code to allow your visitors to subscribe to push notifications.

PushEngageのホームページにアクセスし、開始するボタンをクリックします。

PushEngage

次に、PushEngage を試すために無料プランを選択するか、ビジネスの成長に真剣に取り組んでいる場合は有料プランを選択します。有料プランには、より多くのキャンペーンオプションと、さらに大きな購読者リストを構築する機能が付属しています。

あなたのPushEngageダッシュボードで、サイト設定 »サイト詳細に移動し、セットアップ手順を表示するにはここをクリックボタンをクリックします。「任意のサイト」の下に、インストールコードが表示されます。

PushEngage どのサイトにもインストールコード

警告:ダッシュボードから取得したコードをコピーする必要があります。コードはPushEngageユーザーごとに固有です。画像内のコードをコピーしてプッシュ通知購読者を収集することはできません。

PushEngage ダッシュボードでコードを取得したら、このスニペットをコードに追加します。

<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>

最終的なコードは次のようになります。

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>

You’ll want to add this code to the HTML block in your landing page after the code for the button. It should look something like this:

HTML Code for Push Subscription Button

Feel free to customize the styles for the button any way you please. When you’re done customizing your webinar landing page, go ahead and hit the Save button.

Step #7: How to Publish Your Site

When you’re done editing your WordPress site, go ahead and publish it by clicking on Save » Publish:

SeedProd ページを公開

Then, go back to your Theme Builder and click on Enable SeedProd Theme:

SeedProd テーマを有効にする

これで完了です!

Bonus Step: How to Create a Website That’s Popular

Once your store is live, you’ll want to extend your functionality to get better conversion rates on your site. Here’s a quick list of essential plugins and marketing tools you can use to boost your growth instantly:

1位. PushEngage

PushEngageプッシュ通知サービス

PushEngage は世界No.1のプッシュ通知プラグインです。

Push notifications help you grow your website traffic and engagement on autopilot. And if you’re running an online store, PushEngage also enables you to increase your sales by helping you create automated eCommerce push notifications.

You can get started for free, but you should buy a paid plan if you’re serious about growing your business.

Here’s a glance at what you get with PushEngage:

  • コンバージョン率の高い自動キャンペーン
  • 複数のターゲティングおよびキャンペーンスケジュールオプション
  • 目標追跡と高度な分析
  • スマートA/Bテスト
  • 専任のサクセスマネージャー

You’ll see that PushEngage is hands down the best bet if you want to build traffic, engagement, and sales for your business. And if you’re on a budget, you can always get a little creative with your push notifications.

#2. OptinMonster

OptinMonsterを使い始める

OptinMonster is the world’s most powerful conversion toolkit. This plugin has everything you need to start, grow, and scale your email lead generation process. You can create some incredibly high-converting campaigns such as:

その他多数!

Check out our review of OptinMonster to get a closer look at what it can do to grow your business.

#3. AffiliateWP

AffiliateWP ベストアフィリエイトプログラム

AffiliateWPは、製品やサービスのアフィリエイトプログラムを作成できるWordPressプラグインです。使いやすく、信頼性が高く、設定にコーディングは一切不要です。

一番良いところは? AffiliateWP を使用すると、完全に自動化されたツールを使用してアフィリエイトネットワークを成長させることができます。

AffiliateWP has a whole host of great features, including:

  • アフィリエイトの追跡と管理
  • リアルタイムレポート
  • ユーザーフレンドリーなアフィリエイトオンボーディング
  • 自動アフィリエイト支払い
  • カスタマイズ可能なメール通知
  • 人気のプラグインやサービスとの連携
  • ワンクリックでアフィリエイトデータをインポート/エクスポート
  • 無料およびプロのアドオン

It’s super easy to use AffiliateWP, which separates the plugin from its alternatives. Get started right now and start growing your affiliate network. If you’re not 100% convinced, you can check out our review of AffiliateWP first.

#4. All in One SEO

オールインワンSEO

All In One SEOは、世界最高のWordPress SEOプラグインです。

AIOSEOは最新のSEOベストプラクティスを実装するのに十分強力であるだけでなく、特定のSEOの問題をすぐに解決するための高度なオプションも利用できます。これには以下が含まれます:

  • ローカルオーディエンスを持つ中小企業向けのローカルSEOモジュール
  • オンラインストア向けのWooCommerce SEO
  • WordPressエディター内のSEOオプティマイザー
  • 検索エンジンでの即時インデックス作成のためのスマートサイトマップ
  • リッチスニペットでコンテンツをランク付けするためのスキーマプラグイン

And a lot more! You can learn more about the features in our review of AIOSEO.

#5. MonsterInsights

MonsterInsights

MonsterInsights is a WordPress plugin that makes it easy to use Google Analytics. Google Analytics is too complicated to use for a beginner. But even worse, it’s easy to get lost in a sea of data without getting any actionable insights on growing your business.

MonsterInsights focuses on insights over volumes of data. You don’t need a single line of code to install Google Analytics on WordPress.

MonsterInsightsがあなたのために何ができるかを簡単に見てみましょう。

  • コードなしでGoogleアナリティクスをトラッキング
  • Googleアナリティクスのどのバージョンとも互換性があります
  • 最もパフォーマンスの高いコンテンツを見つけるためのレポート
  • Detailed Audience Insights
  • eコマースアナリティクス
  • フォームサインアップアナリティクス
  • カスタムディメンションからの追加インサイト
  • アフィリエイトリンククリックトラッキング
  • GDPRコンプライアンス
  • プレミアムインテグレーション

If you need to look at the features, check out our review of MonsterInsights.

What to do Once You Know How to Create a Website

Now that you know how to create a website, you need to bring people or traffic to your site. Creating a website is actually the easiest part of building an online business. The tricky part is to generate traffic on your site and get people to buy from you consistently.

まずプッシュ通知から始めることをお勧めします。プッシュ通知は、エンゲージメントとコンバージョンを向上させるための優れたツールです。納得できませんか?プッシュ通知キャンペーンに関するこれらの素晴らしいリソースをご覧ください。

PushEngageは世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう

コメントを追加

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従ってモデレーションされ、すべてのリンクはノーフォローとなりますのでご注意ください。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

ウェブサイトを離れた後も訪問者をエンゲージし、維持する

見逃せないプッシュ通知で、すべてのウェブ訪問の価値を高めましょう。

  • 永久無料プラン
  • 簡単なセットアップ
  • 5つ星サポート