初心者でも簡単！自分でできるプロ級のホームページ制作ガイド【無料版】

「ホームページを作りたいけど、何から始めればいいのかわからない…」「制作会社に頼むのは高すぎる…」と思ったことはありませんか？

そんなあなたに朗報です！このガイドでは、
『初心者でも最短でプロ級のホームページを作る方法』
を、わかりやすく解説します。

この記事ではまず、
ホームページ制作に必要な事前準備①②を無料で公開します。
さらに今回は特別に、
基本編①「サイト整理」のステップも少しだけお見せします！

これらのステップを進めるだけで、ホームページ制作の道筋が一気に見えてきます。

さらに、「どのようにホームページが作られていくのか」を具体的にイメージできるので、最初の一歩を踏み出すのがより簡単になります。

✔【無料公開内容】

1. 事前準備①：Xserverの契約・ドメイン取得・WordPress導入

   • 選び方と設定のポイントをマスター！

2. 事前準備②：WordPress初期設定

   • 初心者でも安心の簡単スタート！

3. 基本編①：サイト整理の基礎

   • 作りたいサイトのページやデザインを明確に！

まずはこの記事を読んで、あなたも「自分でできる！」という自信をつかみましょう！

目次

1. 1.事前準備①：Xserverの契約・ドメイン取得・WordPress導入

2. サーバーの契約・ドメイン取得

3. WordPress導入

4. 事前準備②：WordPress初期設定

5. WordPressのログイン

6. パーマリンクの設定

7. SSL化の設定

8. 不要なデータを削除

9. 基本編：サイト整理

10. グローバルメニュー（ヘッダー）の作成

すべて表示

1.事前準備①：Xserverの契約・ドメイン取得・WordPress導入

それではXserver（エックスサーバー）の契約・ドメイン取得・Wordpress（ワードプレス）導入について進めていきます。

ホームページやブログサイトを「家」と例えた場合、家を建てるには「土地」と「住所」が必要になります。
ここではまず「土地」である「サーバー」と「住所」にあたる「ドメイン」の取得をします。

サーバーの契約・ドメイン取得

エックスサーバーを契約する

まずは上記をクリックしXserverのサイトに飛びます。

Xserverのサイトに飛んだら、右上の「お申し込み」をクリックします。

左側の「個人利用におすすめ」の下「10日間無料お試し　新規お申込み」をクリックします。
※法人利用であってもホームページのみの利用なので個人利用で問題ありません。

• サーバーID：自動選択でも自分でIDを決めてもどちらでも問題ありません。✅【自動選択】

• プラン：プランは人気No.1のスタンダード✅【スタンダード】

• WordPressクイックスタート：利用する✔を選択するとWordpressの新規設置・独自SSL自動設定・ドメイン取得設定が自動で行われる為に独自ドメイン取得後すぐにWordpressを始める事ができます。✅【利用するに✔を入れる】

利用するに✔を入れ「Xserverアカウントの登録へ進む」→「確認しました」をクリックすると以下のフォームが現れます。

入力画面が出てくるので入力フォームに従い順番に入力していきます。

• サーバーの契約期間：最初の段階で契約期間が長ければ長いほどお得になります。✅【12ヶ月】

• 取得ドメイン名：ドメイン名一度決めると今後変更する事ができませんので、真剣に考えましょう。（ドメイン移行をすればドメインは変更できますがすごく手間がかかります）✅【企業名・店舗名・ブログ名など】

Name.comの～.comや～.jpなどは見たことがあると思います。このドメインの一番後ろにつく部分gTLD（ジェネリックトップレベルドメイン）も色々と種類があり、重要となります。

上位4つは有名なgTLDですのでどれを使用しても問題はありません。

問題は人気があるために、自分の欲しいドメインが使用されている事です。

例えば動物が好きなので動物のブログを書こうと思っている方がドメインを「animalblog」にした際に上記のように.comや.netといった人気のドメインは利用されていて取得できないことがあります。

かといってこの「animalblog」という名前をどうしても使用したいので、gTLDを.workや.xyzで取得するのはおススメできません。

なぜなら.workや.xyzなどの個性的な低価格のドメインは競合も少ないので簡単に取得することができますが、低価格のドメインは「ブラックSEO」と呼ばれるスパム的な（いわゆる迷惑メール）SEO手法で利用されるケースが多いからです。

最初は.comや.netなどの主流のgTLDをおススメです。✅【.comや.net】

WordPress情報：「ブログ名」「ユーザー名」「パスワード」「メールアドレス」を入力します。ユーザー名とパスワードはログイン時に必要になるため、忘れないようにメモしておきましょう。✅【ユーザー名とパスワードはメモしておく】

入力完了後、Xserverアカウントの登録へ進むをクリックします。

• Xserverアカウントに登録するお客様情報を入力していきます。

メールアドレス・パスワード・登録区分・名前・フリガナ・郵便番号・住所・電話番号・クレジットカード情報を入力し、「利用規約」「個人情報に関する公表事項」に同意するに✔を入れ次に進むをクリックします。

登録したメールアドレスに宛てに確認コードが送られてくるので、メールを確認し確認コードを入力します。

※メールが見当たらない場合は迷惑フォルダを確認して下さい。

次へ進むをクリックするとお申し込みフォームの確認画面が出てきます。

SMS・電話認証へ進むをクリックします。

取得する電話番号を確認し、テキストメッセージで取得するか自動音声通話で取得するかを選びます。

認証コードを取得するをクリックします。

テキストメッセージで送られてきた5桁のコードを入力します。

認証して申し込みを完了するをクリックします。この時点でクレジットカード決済が行われます。

もしカード決済が通らなかった場合はこのように「自動更新設定に失敗しました。お手数ですが再度登録をお願い致します。カード使用不可です。」という文言が現れます。

その場合はクレジットカード情報を変更してもう一度進めて下さい。

クレジットカードに問題が無ければ下記のようなポップアップが出てきます。

お申し込みが完了しました。となりこの画面を閉じると、エックスサーバーの管理画面になります。

WordPress導入

「土地」にあたる「サーバー」と「住所」にあたる「ドメイン」を取得したので、次に「家」にあたる「Wordpress」の導入をしていきます。

WordPressの導入はサーバー契約時にWordpressクイックスタート機能によってWordpressの新規設置・独自SSL自動設定・ドメイン取得設定がすでに完了しているので、Wordpressの管理画面までの説明をしていきます。

画面上部のサーバー内にある「サーバー管理」をクリックします。

サーバーパネル画面になりますので、真ん中の上から3つ目にあるWordPress内にある「WordPress簡単インストール」をクリックします。

WordPress簡単インストール画面に行くと「インストール済みWordPress一覧」に管理画面URLがあり、「http://〇〇（独自ドメイン）/wp-admin」をクリックするとワードプレスのログイン画面に切り替わります。✅【管理画面URLをクリック】

お申し込みフォームで記入したユーザー名またはメールアドレス、パスワードを入力しログインします。✅【メモしたユーザー名orメールアドレス、パスワードを入力】

ログインして上記のような画面が表示されれば、Wordpress導入の完了です。

事前準備②：WordPress初期設定

続いてWordPressの初期設定を進めていきます。

WordPressのログイン

事前準備①のWordpress導入のエックスサーバー管理画面の簡単インストール「インストール済みWordpress一覧」の管理画面URLをクリックして、Wordpressの管理画面まで進みます。

サーバーパネルの「Wordpress」→「Wordpress簡単インストール」をクリックします。

「インストール済みWordpress一覧」の「管理画面URL」をクリックします。

ユーザー名または登録したメールアドレスとパスワードを入力します。

ログインが完了した時にGoogleクロームのURLが表示されている右側の星マークをクリックすると、次回からはエックスサーバーの管理画面からいかずに、ログイン画面からスタートできます。

URLが書いている枠を右に行くと星マークがあるのでクリックすると上記のようにブックマークに保存ができて星マークに色が付きます。

保存した管理画面のURLは、URL画面の下もしくは右側のその他のブックマークに保存されています。

WordPressの設定

ワードプレスにログイン後、続いて下記の設定を行います。

・パーマリンクの設定
・SSL化の設定
・不要データを削除

パーマリンクの設定

パーマリンクとはページごとに設定されるURLの一部です。

ドメイン設定で選んだドメインhttps://〇〇〇.comとパーマリンクが合わさり、https://〇〇〇.com/contct/というような形になります。

投稿画面で変更ができますが、初期設定で変更している方が便利ですので、変更をおすすめします。

ワードプレス管理画面の設定→パーマリンクを選択します。

パーマリンク設定の初期設定が「日付と投稿名」になっています。これを「カスタム構造」に変更し、白枠内を一度クリアにします。そのあと「％post_id%」をクリックし、変更を保存します。

最初に入力されている文字をクリアにしないと続きで「％post_id%」が入力されてしまうので注意してください。

SSL化の設定

SSL化の設定は現在「http://〇〇com」になっているのを「https://〇〇com」のように「s」をつける設定です。
SSL化は非常に重要な作業で、設定を行わなければ勝手に情報が改ざんされたり、スパムメールが大量に送られてきたりなど犯罪のターゲットになる恐れがあります。

管理画面の「設定」→「一般」を選択します。

WordPressアドレス（URL）とサイトアドレス（URL）がどちらも「http://」になっているので、「https://」（ｓのみ）を入力します。

下にスクロールし「変更を保存」をクリックすると、ログイン画面に戻ります。

通常通りにログインを完了すると、先ほどの一般設定に戻り「https://」となっているのを確認出来れば、SSL化設定は完了です。

不要なデータを削除

投稿ページを選択すると「Hello world」の投稿があります。これは必要ありませんので削除します。

チェックを入れ、ゴミ箱に移動をクリックします。

削除はされますが、上記のゴミ箱に移動するので完全に削除する場合は、ゴミ箱を選択し「完全に削除する」をクリックします。

※一つの投稿を削除する際は、チェックを入れなくても「完全に削除する」のみで削除ができます。

同様に固定ページの「サンプルページ」「プライバシーポリシー」も不要なので削除します。

タイトルの左のチェックボックスに✓を入れると複数選択することができます。

一括操作から「ゴミ箱へ移動」を選択し右の「適用」をクリックすると先ほどと同じようにゴミ箱にいくので、完全に削除するのであれば同様の操作を行ってください。「ゴミ箱」欄から「ゴミ箱を空にする」をクリックで完全に削除する事もできます。

基本編：サイト整理

これまでは事前準備①②を見て頂きました。事前準備に関しましては③④⑤⑥までありますが、マニュアル通り進めば簡単に事前準備が可能です。

それでは今回は特別に基本編のサイト整理を少しだけお見せいたします。

グローバルメニュー（ヘッダー）の作成

グローバルメニューとは、ホームページの各ページに共通して設置されるサイト内の案内メニューのことです。 ホームページを見ると、上のような主要コンテンツへのリンクを置いたメニューバーが基本的に置いてあります。 これを「グローバルメニュー」と呼びます。

固定ページの作成

最初に「トップページ」の作成を行います。

グローバルメニューを作るには固定ページの作成が必要になります。管理画面＞固定ページ＞新規追加

「タイトルを追加」欄にグローバルメニューに追加したいタイトルを入れます。

順番は「トップページ」を作ってから必要な固定ページを作ります。

タイトルをつけて右下にある「パーマリンク」を開くとタイトル名が入っています。このままURLスラッグを変更しない場合は、「URLがhttps://〇〇〇.com/トップページ/」になり日本語表記で見映えが悪くなるので、URLスラッグを英語またはローマ字に変更し「公開」をクリックします。

「トップページ⇒toppage又はtop」などに変更し「公開」をクリックします。

管理画面＞固定ページを表示すると「トップページ」が作成されました。同様に「〇〇会社について」「〇〇会社とは」「事業紹介」「会社概要」「商品紹介」「採用情報」「お問い合わせ」など会社や店舗で必要な項目のページを作成します。

タイトルを入れ＞パーマリンクの「URLスラッグ」を英語又はローマ字に変更して「公開」をクリックします。

URLスラッグの下、アイキャッチ画像はタイトルの背景に挿入される画像です。

「下書き保存」の右隣にある「プレビュー」をクリックするとアイキャッチがどのような感じで表示されるか確認できます。

トップページ以外にグローバルメニューに表示する項目を追加すると上記のようになります。

※必ず「下書き保存」⇒「公開」にしてください。下書き保存のままだとグローバルメニューに表示されません。

グローバルナビの表示

続いてダッシュボード「外観」＞ダッシュボード「メニュー」をクリックします。メニュー構造のメニュー名に分かりやすい名前（カスタム①、メニュー①など）を付けて右下の「メニューを作成」をクリックします。

「メニューを作成」をクリックすると「メニュー項目を追加」欄に先ほどの固定ページの項目が出てきますので、必要な項目にチェックを入れて「メニューを追加」をクリックします。

右隣にチェックした項目が表示されます。現在上から表示されている通りにグローバルメニューに表示されるので、ドラッグ＆ドロップ（移動したい項目を押したまま上下に移動させて離す）をして表示する順番に変更します。

順番を変更後、メニュー設定の「グローバルナビ」にチェックを入れ「メニューを保存」をクリックします。

ダッシュボード「外観」＞ダッシュボード「カスタマイズ」で編集画面に進むと、会社名の隣に「グローバルナビ」が表示されました。

「ヘッダー」＞下スクロールすると「レイアウト・デザイン設定」があり、ヘッダーのレイアウトを変更する事ができます。

デフォルトでは「ヘッダーナビをロゴの横に（左寄せ）」になっているのでロゴとヘッダーナビを離したい方は「ヘッダーナビをロゴの横に（右寄せ）」にすると上記のようなイメージになります。

サイドバーの作成

サイドバーとはホームページのメインページのサイドに表示されるメニューの事です。

ブログサイトではサイドバーは多く用いられますが、一般的なホームページではサイドバーはあまり使用しません。サイドバーはトップページは非表示で、トップページ以外に表示するといったような使い方もできますので、お好みでカスタマイズできます。

ダッシュボード「外観」＞ダッシュボード「カスタマイズ」＞「サイドバー」でサイドバーを表示の有無を設定できます。

トップページにサイドバーを表示するに✔を入れると、トップページにサイドバーが表示されます。

ウィジェットの編集

ダッシュボード「外観」＞ダッシュボード「ウィジェット」からサイドバーの編集が可能です。

デフォルトで「ブロック」が5つ挿入されていますので、クリックして削除してください。

サイドバーに画像とテキストを挿入する場合は左側にあるウィジェット（項目）を右側の表示したい場所にドラッグ＆ドロップします。

店舗などでLine友達追加などを促す際は「テキスト」をドラッグアンドドロップして「共通サイドバー」に持ってきます。タイトルに「ライン追加募集中」＞ライン画像を挿入＞画像にラインのリンクを貼り「保存」を押します。

サイドバーにライン友達追加のアイコンが表示されました。

同様にサイドバーに画像のみ、テキストのみであったり、グローバルナビのようにサイドバーにも「固定ページ」を表示することができます。

フッターの作成

ダッシュボード「外観」＞ダッシュボード「カスタマイズ」＞「フッター」でカラー設定やコピーライト設定、SNS設定などができます。

コピーライトテキストは会社名や店舗名を入力します。

コピーライトのテキストの上に表示されているSNSアイコンを非表示にする際は「その他の設定」＞「フッターにSNSアイコンリストを表示する」の✔を外してください。

SNSアイコンのリンク先設定は「フッターから一つ戻る」＞「SNS情報」でURLを入力したアイコンが表示されます。

この続きは有料会員サイトです！「プロ仕様ホームページ制作キット」

誰でも簡単にプロ級のホームページを制作できる特別なキット

この「プロ仕様ホームページ作成キット」は、初心者でも安心してホームページを完成させられるよう、手順をわかりやすくまとめた内容です。 さらに、実際に使える便利ツールやデザイン例も多数収録しています。

以下の3つのステップとおまけツールで、ホームページ制作を徹底サポートします！

◆事前準備：ホームページ制作の基礎を整える

1. Xserver契約・ドメイン取得・WordPress導入：最初の設定をスムーズに進められる完全ガイド。

2. WordPress初期設定：WordPressの初期設定を完了させる

3. Google Chromeの便利な拡張機能ツールの取得方法：作業がさらに簡単に！

4. WordPressテーマ「SWELL」の購入と導入：美しいデザインを実現するためのテーマ。

5. SWELLのカスタマイズ：テーマを自分仕様に調整！

6. プラグインの設定と使い方：必要な機能を追加して使いやすさアップ。

◆基本編：ホームページの内容を作り込む

1. サイト整理：ホームページに必要なコンテンツの形を作成。

2. お問い合わせフォームの作成：簡単にお客様との連絡手段を設置！

3. 予約システムとの連携：予約機能も充実したホームページを作ることができます。

4. SWELLブロックの使い方：便利なブロックを使ってデザインを効率化。

◆実践編： 実際にサイトを仕上げる

1. サイト確認（デモサイト）： 完成形をイメージしながら進められる！

2. ホームページ制作：すべての要素を組み合わせて、あなただけのサイトを完成させます。

◆その他ヘルプツールの紹介

1. 無料で使える便利ツール集：コストを抑えて作業を効率化。

2. SWELLホームページ制作デザイン集：プロ仕様のデザイン例が熱い！

🌟特別価格でご提供中！

通常、このようなプロ仕様のホームページ制作ガイドとサポートを受けると、7万円〜10万円ほどの費用がかかるケースが一般的です。

しかし今回は、特別価格で29,800円（税込）でご提供します！
「高額な業者に頼まず、自分で作りたい」という方にとって、これ以上ないチャンスです。
※SWELLの有料テーマ（17,600円）は自己負担となります。

有料会員サイトでは、これらの内容を動画や詳細なガイド付きでわかりやすく解説しています。
さらに、初心者でも安心の問い合わせサポートもご用意しております！

あなたもこのキットを使って、世界に一つだけの自作ホームページを作りましょう！

有料版はこちらをクリック
※冒頭は無料版と同じで下部からご購入頂けます。