Easy for Beginners! A Guide to Creating Professional-Grade Websites Yourself [Free Version]

Have you ever thought, "I want to create a website, but I don't know where to start..." or "Hiring a production company is too expensive..."?

Good news for you! In this guide, I will explain
“How to create a professional-grade website in the shortest time, even for beginners”
in an easy-to-understand way.

In this article, I will first release the
necessary preparations ① and ② for website creation for free.
Furthermore, as a special treat this time, I will also give you a sneak peek at
Basic Step ①: "Site Organization"!

Just by following these steps, the path to creating your website will become clear all at once.

Furthermore, since you can concretely visualize "how a website is built," it will be much easier to take that first step.

✔ [Free Content]

1. Preparation ①: Xserver contract, domain acquisition, and WordPress installation

   • Master the selection and setup points!

2. Preparation ②: WordPress initial settings

   • An easy start that even beginners can feel confident about!

3. Basic Step ①: Basics of site organization

   • Clarify the pages and design of the site you want to create!

First, read this article and gain the confidence that "I can do it myself!"

Table of Contents

1. 1. Preparation ①: Xserver contract, domain acquisition, and WordPress installation

2. Server contract and domain acquisition

3. WordPress installation

4. Preparation ②: WordPress initial settings

5. WordPress login

6. Permalink settings

7. SSL Configuration

8. Delete Unnecessary Data

9. Basics: Site Cleanup

10. Creating a Global Menu (Header)

Show All

1. Preparation Part 1: Xserver Contract, Domain Acquisition, and WordPress Installation

Now, let's proceed with the Xserver contract, domain acquisition, and WordPress installation.

If you compare a website or blog site to a "house," you need "land" and an "address" to build it.
Here, we will first acquire the "server," which is the "land," and the "domain," which is the "address."

Server Contract and Domain Acquisition

Contracting with Xserver

First, click the link above to go to the Xserver site.

Once you are on the Xserver site, click "Sign Up" in the top right corner.

Click "10-Day Free Trial New Sign Up" under "Recommended for Personal Use" on the left.
*Even for corporate use, there is no problem with personal use since it is only for a website.

• Server ID: It does not matter if you use the automatic selection or decide on your own ID. ✅[Automatic Selection]

• Plan: The plan is the No. 1 popular Standard plan ✅[Standard]

• WordPress Quick Start: If you select "Use," WordPress installation, automatic SSL configuration, and domain acquisition settings will be performed automatically, allowing you to start WordPress immediately after acquiring your custom domain. ✅[Check 'Use']

Check the box to use and click 'Proceed to Xserver Account Registration' -> 'I have confirmed' Then, the following form will appear.

An input screen will appear, so follow the input form and enter the information in order.

• Server contract period: The longer the contract period at the initial stage, the more cost-effective it becomes. ✅[12 months]

• Acquired domain name: Once you decide on a domain name, you cannot change it later, so think about it carefully. (You can change the domain if you perform a domain migration, but it is very time-consuming.) ✅[Company name, store name, blog name, etc.]

I think you have seen things like .com or .jp on Name.com. The part at the very end of this domain, the gTLD (Generic Top-Level Domain), also has various types and is important.

The top four are famous gTLDs, so there is no problem using any of them.

The problem is that because they are popular, the domain you want might already be in use.

For example, if you like animals and are planning to write an animal blog, when you set the domain to 'animalblog', popular domains like .com or .net as mentioned above might already be in use and cannot be acquired.

However, I do not recommend acquiring the gTLD as .work or .xyz just because you really want to use the name 'animalblog'.

This is because while unique, low-priced domains like .work and .xyz have little competition and can be easily acquired, low-priced domains are often used in spammy (so-called junk mail) SEO techniques called 'Black Hat SEO'.

At first, I recommend mainstream gTLDs like .com or .net. ✅[.com or .net]

WordPress information: Enter your 'blog name', 'username', 'password', and 'email address'. Since the username and password will be required when logging in, make sure to write them down so you don't forget them. ✅[Write down your username and password]

After completing the input, click 'Proceed to Xserver Account Registration'.

• Enter the customer information to register for an Xserver account.

Enter your email address, password, registration category, name, furigana, postal code, address, phone number, and credit card information, check the boxes to agree to the "Terms of Service" and "Public Notices Regarding Personal Information," and click Next.

A confirmation code will be sent to the registered email address, so check your email and enter the confirmation code.

*If you cannot find the email, please check your spam folder.

Clicking Next will display the confirmation screen for the application form.

Click Proceed to SMS/Phone Authentication.

Confirm the phone number to be used and choose whether to receive the code via text message or automated voice call.

Click Get Authentication Code.

Enter the 5-digit code sent via text message.

Click Authenticate and Complete Application. At this point, the credit card payment will be processed.

If the card payment fails, a message like this will appear: "Automatic renewal setting failed. We apologize for the inconvenience, but please register again. The card cannot be used."

In that case, please change your credit card information and try again.

If there are no issues with the credit card, a pop-up like the one below will appear.

Your application is complete. Closing this screen will take you to the Xserver management screen.

WordPress Installation

Now that you have acquired the "server" (the land) and the "domain" (the address), we will proceed to install "WordPress" (the house).

Regarding WordPress installation, the new WordPress installation, automatic unique SSL setup, and domain acquisition settings have already been completed via the WordPress Quick Start feature during server contract, so I will explain how to reach the WordPress management screen.

Click "Server Management" located within the server section at the top of the screen.

You will be taken to the server panel screen; click "WordPress Easy Install" located in the WordPress section, which is the third item from the top in the middle.

Once you go to the WordPress Easy Install screen, you will find the management screen URL under "List of Installed WordPress." Clicking "http://〇〇 (unique domain)/wp-admin" will switch you to the WordPress login screen. ✅[Click the management screen URL]

Enter the username or email address and password you filled in on the application form to log in. ✅[Enter the username or email address and password you noted down]

If you log in and see a screen like the one above, the WordPress installation is complete.

Preparation Part 2: WordPress Initial Settings

Next, we will proceed with the initial WordPress settings.

WordPress Login

Proceed to the WordPress dashboard by clicking the dashboard URL in the "Installed WordPress List" within the easy installation section of the Xserver dashboard, as part of the preliminary preparation step 1.

In the server panel, click "WordPress" → "WordPress Easy Installation".

Click the "Dashboard URL" in the "Installed WordPress List".

Enter your username or registered email address and password.

When you have successfully logged in, click the star icon on the right side of the Google Chrome URL bar so that next time, you can start directly from the login screen without going through the Xserver dashboard.

If you go to the right of the box where the URL is written, there is a star icon; click it to save it to your bookmarks as shown above, and the star icon will change color.

The saved dashboard URL is stored either below the URL bar or in your other bookmarks on the right.

WordPress Settings

After logging into WordPress, proceed to configure the following settings.

・Permalink settings
・SSL settings
・Delete unnecessary data

Permalink settings

A permalink is a part of the URL set for each individual page.

The domain you chose in the domain settings, https://xxx.com, is combined with the permalink to form a structure like https://xxx.com/contact/.

You can change this on the post screen, but it is more convenient to change it in the initial settings, so I recommend doing so.

Select Settings -> Permalinks from the WordPress dashboard.

The default permalink setting is set to 'Day and name'. Change this to 'Custom structure', clear the contents of the white box, then click '%post_id%' and save the changes.

Please be careful, as if you do not clear the text already entered, '%post_id%' will be appended to it.

SSL Configuration

SSL configuration is the process of adding an 's' to your URL, changing it from 'http://example.com' to 'https://example.com'.
SSL configuration is a very important task; if you do not configure it, you risk becoming a target for crimes such as having your information tampered with or being flooded with spam emails.

Select 'Settings' -> 'General' from the dashboard.

Since both the WordPress Address (URL) and Site Address (URL) are set to 'http://', add an 's' to make them 'https://'.

Scroll down and click 'Save Changes', and you will be returned to the login screen.

Log in as usual, return to the General settings screen, and if you can confirm that it is now 'https://', the SSL configuration is complete.

Deleting Unnecessary Data

When you select the Posts page, there is a post titled 'Hello world'. This is unnecessary, so delete it.

Check the box and click 'Move to Trash'.

It will be deleted, but it moves to the Trash mentioned above, so if you want to delete it permanently, select 'Trash' and click 'Delete Permanently'.

※ When deleting a single post, you can delete it by clicking 'Delete Permanently' without needing to check the box.

Similarly, the 'Sample Page' and 'Privacy Policy' in Pages are also unnecessary, so delete them.

You can select multiple items by checking the checkbox to the left of the title.

Select "Move to Trash" from the bulk actions and click "Apply" on the right to move them to the trash just like before. If you want to delete them permanently, perform the same operation. You can also delete them permanently by clicking "Empty Trash" from the "Trash" section.

Basics: Site Organization

So far, you have looked at Preparations ① and ②. Regarding the preparations, there are steps up to ③, ④, ⑤, and ⑥, but you can easily complete the preparations by following the manual.

Now, as a special treat, I will show you a little bit of the basics of site organization.

Creating a Global Menu (Header)

A global menu is a navigation menu within the site that is placed commonly across all pages of the website When you look at a website, there is basically a menu bar placed at the top with links to major content. This is called a "global menu".

Creating Pages

First, we will create the "Top Page".

To create a global menu, you need to create pages. Dashboard > Pages > Add New

Enter the title you want to add to the global menu in the "Add title" field.

The order is to create the "Top Page" first, then create the necessary pages.

After adding a title, open the "Permalink" section at the bottom right, and you will see the title name entered. If you leave the URL slug as is, the URL will become "https://ooo.com/top-page/" and the Japanese characters will look unprofessional, so change the URL slug to English or Roman characters and click "Publish".

Change it to something like "Top Page => toppage or top" and click "Publish".

When you view Dashboard > Pages, a "Top Page" has been created. Similarly, create pages for items necessary for your company or store, such as "About Us," "What is [Company Name]," "Business Introduction," "Company Overview," "Product Introduction," "Careers," and "Contact Us."

Enter the title, change the "URL slug" in the permalink to English or Roman characters, and click "Publish."

Below the URL slug, the featured image is the image that will be inserted into the background of the title.

Click "Preview" to the right of "Save Draft" to check how the featured image will be displayed.

Adding items to be displayed in the global menu other than the top page will look like the above.

*Be sure to click "Save Draft" then "Publish." If it remains as a draft, it will not be displayed in the global menu.

Displaying the Global Navigation

Next, click Dashboard > Appearance > Dashboard > Menus. Give the menu structure a clear name (Custom 1, Menu 1, etc.) and click "Create Menu" at the bottom right.

Once you click "Create Menu," the items from the pages you created earlier will appear in the "Add menu items" section. Check the necessary items and click "Add to Menu."

The checked items will appear on the right. They will be displayed in the global menu in the order they appear from top to bottom, so change the display order by dragging and dropping (press and hold the item you want to move, move it up or down, and release it).

After changing the order, in the menu settings, check "Global Navigation" and click "Save Menu".

Proceed to the edit screen via Dashboard > Appearance > Dashboard > Customize, and the "Global Navigation" will be displayed next to the company name.

Under "Header," scroll down to find "Layout/Design Settings," where you can change the header layout.

By default, it is set to "Header nav next to logo (left-aligned)," so if you want to separate the logo and header nav, set it to "Header nav next to logo (right-aligned)" to get an image like the one above.

Creating the Sidebar

A sidebar is a menu displayed on the side of a website's main page.

While sidebars are frequently used on blog sites, they are not commonly used on standard websites.You can also customize them to your preference, such as by hiding the sidebar on the top page and displaying it only on other pages.

You can set whether to display the sidebar by going to Dashboard > Appearance > Customize > Sidebar.

If you check the box for "Display sidebar on the top page," the sidebar will be shown on the top page.

Editing Widgets

You can edit the sidebar from Dashboard > Appearance > Widgets.

There are 5 blocks inserted by default, so please click to delete them.please.

To insert images and text into the sidebar, drag and drop the widgets (items) from the left side to the desired location on the right.

When encouraging LINE friend additions at a store, for example, drag and drop "Text" into the "Common Sidebar." Enter "LINE Additions Welcome" as the title, insert the LINE image, paste the LINE link onto the image, and click "Save."

The LINE friend addition icon is now displayed in the sidebar.

Similarly, you can display only images, only text, or even "Pages" in the sidebar, just like a global navigation menu.

Creating the Footer

You can configure color settings, copyright settings, and SNS settings from Dashboard > Appearance > Customize > Footer.

Enter your company or store name for the copyright text.

To hide the SNS icons displayed above the copyright text, uncheck "Display SNS icon list in footer" under "Other Settings."

To set the destination links for the SNS icons, go back one level from the footer and enter the URLs under "SNS Information"; the icons will then be displayed.

The rest of this content is for paid members! "Professional Website Creation Kit"

A special kit that allows anyone to easily create a professional-grade website.

This "Professional Website Creation Kit" is designed to help even beginners complete their website with peace of mind by summarizing the steps in an easy-to-understand way. It also includes many useful tools and design examples that you can actually use.

We will thoroughly support your website creation with the following 3 steps and bonus tools!

◆ Preparation: Setting the Foundation for Website Creation

1. Xserver Contract, Domain Acquisition, and WordPress Installation: A complete guide to help you proceed with initial settings smoothly.

2. WordPress Initial Setup: Complete the initial setup of WordPress.

3. How to Get Useful Google Chrome Extension Tools: Making your work even easier!

4. Purchasing and Installing the WordPress Theme "SWELL": A theme to achieve a beautiful design.

5. Customizing SWELL: Adjust the theme to your own specifications!

6. Plugin Settings and Usage: Add necessary features to improve usability.

◆ Basics: Building the Content of Your Website

1. Site Organization: Create the structure for the content needed for your website.

2. Creating a Contact Form: Easily set up a way for customers to contact you!

3. Integration with Reservation Systems: You can create a website that is also equipped with reservation functions.

4. How to Use SWELL Blocks: Streamline your design using convenient blocks.

◆ Practice: Finishing the Site

1. Site Verification (Demo Site): You can proceed while visualizing the finished product!

2. Website Creation: Combine all the elements to complete your very own site.

◆ Introduction to Other Help Tools

1. Collection of Useful Free Tools: Keep costs down and streamline your work.

2. SWELL Website Creation Design Collection: Professional-grade design examples that are hot!

🌟 Now Available at a Special Price!

Typically, receiving this kind of professional website creation guide and support would cost between 70,000 and 100,000 yen.

However, this time, we are offering it at a special price of 29,800 yen (tax included)! This is the perfect opportunity for those who want to build their own site without relying on expensive agencies. *The paid SWELL theme (17,600 yen) is at your own expense.

On our paid membership site, we explain these contents in an easy-to-understand way with videos and detailed guides. Furthermore, we also provide inquiry support that even beginners can feel comfortable with!

Use this kit to create your own one-of-a-kind website!

For the paid version, click hereto click
*The beginning is the same as the free version, and you can purchase it from the bottom.