悩んでいる人これから個人事業主としてビジネスをスタートする予定だけど費用を抑えるために自分でホームページを作りたいから、準備するものから流れまで全部教えてほしい！
こんな方のお役に立てる記事です。
本記事の内容
・ホームページ作成全体の流れ
・ホームページ作成の事前準備
・ホームページ作成の手順
・ホームページの中身づくり
・チェックそして公開
ホームページを自分で作って公開するぞ！という人はぜひ読み進めてみてください。
この記事を書いた人
- 2015年からローカルメディアを運営（月間20万pv）
- 累計41のブログ・ホームページ構築経験あり
- WEBマーケター（企業のWEBサイトやSNSのビジネス運用）
- WEBマーケティングの講師（金融機関のセミナーなど）
この記事を書いている私はブログメディア運用歴6年のWEBマーケターです。高卒で建設現場の作業や不動産営業という仕事からWEBで独立し、現在はインターネットからの収益や企業のWEB顧問をしながら、地方で家族4人と暮らしています。
個人事業主のためのホームページ作成全体の流れ
ホームページはこのような流れで作成していきます。
まずはこの全体像を理解してから作り始めるとスムーズに進めることができます。
ホームページを作るにはメールアドレスと、ドメインやレンタルサーバーの支払いにクレジットカードが必要です。
また、どんなホームページにするのかを事前に考えておくことでその先の作業がとても楽になります。
それがホームページ作成の事前準備です。
準備が終わったら実際にサーバーを契約してホームページを立ち上げていきます。その後中身を作っていきます。
ホームページの中身ができたら表示をチェックし公開、という流れです。
まずはじめに、ホームページ作成で設定するツールの組み合わせを紹介します。
ホームページ作成を構成するもの
レンタルサーバー
ホームページにはサーバーが必要ですが、サーバーを保有している専門業者から一部を有償で借りることでホームページを運用することができるようになります。今回は初心者の方でもとても簡単に扱えるエックスサーバーを中心に説明します。
こちらの記事ではレンタルサーバーについて、そしてレンタルサーバーを選ぶコツについて紹介しています。
ワードプレス（WordPress）
ワードプレス（WordPress）とは、ブログを作るシステムの名前で、プログラミングやコードの知識がなくても比較的簡単にページを作ることができるものです。
世界中でブログやホームページの作成にも活用されています。
※ホームページを作る方法はいくつかありますが、htmlやcssなどのWEBコーディングの知識がなくてもホームページを作れるように年々進化しているWordPressで作っておけばOKです。
ドメイン
ドメインとは、URLのhttps://xxxxxxx.xxxの場合のxの部分のことで、インターネット上の住所表示のようなものです。
レンタルサーバーとドメインは少し費用がかかります。でもとても低コストなので安心してくださいね。
それでは事前準備をはじめていきましょう！
ホームページを作成するための事前準備
ホームページを作成する前に準備してもらうものがあります。準備するものは『掲載する内容』と『用意するもの』の２種類があります。
個人事業主がホームページに掲載する内容
ホームページはインターネット上のあなたの代わりの営業マンです。ホームページへの訪問者に対してあなたの代わりに文字や写真で事業を紹介してくれます。
どんな内容を紹介するかを考えていきましょう。
事業の情報
ホームページに事業の情報を掲載するために、個人事業の情報をテキストで準備しておきましょう。
いちいち毎回打ち込むよりもテキストで残しておくとコピペするだけでよく、ミスを減らせるのでテキストとして情報を準備することをおすすめします。
- 屋号・商号
- 所在・住所
- 業種
- 免許・資格
- 電話番号
などでしょうか。ホームページに掲載して紹介したい情報はGoogleDocsやSheets（ワードやエクセル）にまとめておくといいですね。
サイトの構成
次にサイトの構成を考えていきます。サイトの構成とは、設計図のようなものです。
どんなページが必要で、それぞれにどんな内容が掲載されていて、どんなURLになるのかを事前に決めておく必要があります。
今回は仮に、
- トップページ：URL＝xxxxx.xxx/
- 事業概要：URL＝xxxxx.xxx/about
- サービスについて：URL＝xxxxx.xxx/service
- お問い合わせ：URL＝xxxxx.xxx/contact
- プライバシーポリシー：URL＝xxxxx.xxx/privacypolicy
という構成で進めていきます。法人であれば会社概要としますが、今回は個人事業主ということで事業概要としました。
そしてURLのパーマリンクを/aboutにしていますが法人で会社概要であれば/companyでも良いと思います。
それぞれに掲載する内容はこのような一覧シートを作っておくと便利です。
ホームページ作成前に用意するもの
ホームページの素材になる画像と、設定やサーバー契約に必要なものを紹介していきます。
ホームページを彩る画像
「百聞は一見にしかず」って言いますよね。文字だけで説明するよりも写真や画像があるだけでたくさんの情報を伝えることができます。
ホームページには文字情報だけでなく写真や画像を効果的に活用してあなたのサービスの魅力をしっかり伝えていきましょう。
ロゴマーク
ホームページの上の方にロゴマークを表示させるのが一般的です。
ロゴマークは必須なわけではありませんが事業のイメージを伝えるためにも覚えてもらうためにもあるといいと思います。
一般的には『モチーフ＋屋号』という形が多いですね。
商品の写真
商品やサービス提供の写真があればいいですね。まだこれから立ち上げる人はどうしても写真素材がないかもしれませんが、すでに事業始めていて撮影できる方は撮っておきましょう。
写真がない人は当面の間は写真素材サイトから購入した画像を使用するのでもいいかもしれません。
フリー素材も世の中たくさんありますが、可能な限り人が使っていなさそうな写真を選びましょうね。
自分の写真
今回はホームページに会社概要ページを作る予定です。
地域ビジネスで個人事業主になり独立開業しようと思っている人は会社概要には代表あいさつの文章と顔写真を掲載しましょう。
顔を出すのはサービスの信用を上げるためにも大切です。
人と合う地域ビジネスなのに「顔を出すのは恥ずかしい」、「インターネットに顔が出るのは不安だな…。」って思ってる人、その気持ちは事業に対する自信の無さとなってお客さんに伝わります。
地域ビジネスで個人事業主になるときなんて実績も信用も限りなく少ないんですから、頑張って表に出していきましょう！
メールアドレス
docomoやauなどキャリアのメールアドレスはビジネスには不向きですので使うのはやめてくださいね。独立してホームページ作るならGmailを作っておきましょう。無料ですから。
Gmailを使っていくなら、ブラウザはGoogleChromeにしたほうがいいですね。
クレジットカード
レンタルサーバーの契約にはクレジットカードが必要です。
クレジットカードはすでにお持ちですか？個人事業主になるときにはなにかとクレジットカードはあると便利なものです。
事業関係の支払いは、すべてクレジットカードで決済すると決めておけば、経費を一覧で把握することもできますし、会計ソフトのfreeeなどと連携しておけば、会計入力などの手間も省けます。
ホームページの立ち上げ
ドメインを決める
ホームページの住所となるドメインを決めていきましょう。ドメインの決め方について少し説明します。
ホームページに重要なドメイン名
あなたの屋号やサービス名、将来法人化を見越しての会社名、ブランド名、発信する情報を表すようなドメイン名にしましょう。ホームページのタイトルや内容と関連性の強いワードを含めることで、見込み客かもしれない訪問者にとって印象に残るドメイン名になります。
ドメイン名を決めるときのポイント
個人事業主なら.jpでOK
ドメインは、.comにはじまり、.net、.io、.tokyo、.info、.okinawa、、、ととても多い種類があります。
基本的にはドメインはどれでもいいんですが、日本でビジネスを展開するなら.comよりも少しだけ費用がかかる.jpをおすすめします。
jpは短く打ち間違えがないですし、「ドットジェーピー」は伝えやすいですよね。
短くてシンプル
ドメインは短く覚えやすいものがいいです。短いと手入力の際に入力間違いが減ります。でもサービス名を省略しすぎて意味不明なドメインや当て字のような数字のドメインはやめましょうね。ホームページの内容と一致していて、見込み客かもしれない訪問者に不安を与えないような、安心感があるドメインにしましょう。
設定できるのは3文字以上63文字以下までですができるだけ短く。使える文字は、半角英数字文字 (a〜z、0～9） と半角のハイフン「-」です。
ハイフンを使用して
1つの文字列（単語）で取得できることが理想なんですが、過去に沢山の種類のドメインが取得されてきましたので、「これにしよう！」と決めていたとしても調べてみると取得できない・・・orzなんてことは結構あります。そんなときは気持ちを入れかえて、途中にハイフン「-」を使用したり、地域名を入れたりして違いをだすしかありません。
わかりやすいスペルに
「1とl」「cとk」「oと0」「rとl」「bと6」「2とz」など、見て間違いやすい文字、読み方で打ち間違えやすい文字はなるべく組み合わせないように気をつけておきましょう。
サーバーとドメインの契約
それではホームページを立ち上げるためにまずはレンタルサーバーの契約をしていきます。
私が基本的に利用しているエックスサーバーは、サーバーを借りて、ドメイン選んで、ワードプレスのインストールまでが５分くらいで簡単にできるのでおすすめです。
エックスサーバー
手続きしたら１〜２時間程度でホームページにログインできるようになります。
ホームページ設定
https://xxxxxx.xxx/wp-admin（xxx部分はあなたが取得したドメイン）というURLにアクセスしてこんな画面がでてきたらOKです。
ついにホームページにログインできましたね！（パチパチ）
意外と簡単だったでしょ？昔はもうちょっと複雑だったんですけど、こんな簡単になってしまいました。
そしてそして、ここからが本番です、頑張っていきましょう！
エックスサーバーでワードプレスのクイックインストールをするときに決めたユーザー名（またはメールアドレス）とパスワードを入力してログインしましょう。
次回から入力する手間を省くために［□ログイン状態を保存する］にもチェックを入れておきましょうね。GoogleCromeでパスワードをブラウザに記憶させることもおすすめします。
ダッシュボードについて
ログインしたらダッシュボードが表示されます。これはホームページの裏側と思ってください。
ホームページの表側・外観を見たいときは左上の家マークやホームページ名をクリックすると表示されます。
左側はメニューで、設定によって表示される内容は違います。右上の表示オプションは、ダッシュボードに表示するものを選択できます。
どこにいるかわかんなくなったら【ダッシュボード】をクリックしておけばここに戻ってこれます。
機能の追加（プラグイン）
ワードプレス（WordPress）はいろいろな使い方ができる分、必要最低限の機能しか備わっていません。そこで使い方に応じて足りない機能面を強化するために『プラグイン』を追加していきます。
プラグインとは機能を追加するアイテムのことです。車のオプションみたいにアイテムを使い方にあわせてセレクトして行く感じ。基本的に無料のものを使っていきます。
プラグインはおすすめのものはいくつもあるんですが、今回は公開に向けて最低限必要なものだけを導入します。（ホームページの運営に必要なプラグインはまた別の記事で紹介しますね。）
それではダッシュボードの
外観＞プラグイン＞新規追加をクリックしてください。
最初にホームページの作り途中を見られないようにするために「準備中」を表示させておくプラグインを入れておきます。
右上の［プラグインの検索］部分に以下の文字をコピペしてください。
WP Maintenance Mode
※コピペは、Macの人は【⌘command＋C】、Windowsの人は【Ctrl＋C】でコピー、そしてそれぞれ【⌘command＋V】、【Ctrl＋V】でペーストできますので試してみてください♪
プラグインが見つかりましたか？プラグインの【今すぐインストール】ボタンをクリックしましょう。そのあとに表示される【有効化】ボタンを押してください。
同じ流れで
外観＞プラグイン＞新規追加をクリックし
Contact Form 7
を［プラグインの検索］部分にコピペし【今すぐインストール】そして【有効化】してください。
Contact Form 7は問い合わせフォームを作るプラグインです。
メンテナンスモードの有効化
WP Maintenance Modeのインストールで【有効化】を押していますが、実はあなたのホームページは公開されたままです。ただし、「URLを知っている人」限定でアクセスできるようになっているという状況です。
作り途中の中途半端なホームページを見られないためにも「準備中」の設定をしていきましょう。
ダッシュボード＞設定＞WP Maintenance Mode
設定画面の最初の一般タグのステータスを【有効化】します。そして【一般】の右隣の【デザイン】タブに移動して準備中と伝わるテキストを入力しましょう。
その後、下にある【設定を保存】をクリックすればOKです。
ダッシュボードの上部にはこういうアナウンスが表示されます。これが表示されると準備中という表示になっているということです。
しかしダッシュボードの【サイトを表示】をクリックして外観を確認すると今まで通り表示されています。それはログインしている状態では外観を確認できるようになっているからです。
GooglechromeのシークレットモードやEdgeなどの別ブラウザ、スマホのSafariアプリでURLを直接入力すると準備中と表示されているのを確認できます。
個人事業主のホームページ中身作り
それではこれからホームページの中身を作っていきます。ページの中身を作ってレイアウトに落とし込んでいきましょう。
パーツの作成
まずは組み立てる前のパーツを作っていきましょう。ここで作るパーツは、
- 問い合わせフォーム
- 各ページ（問い合わせページ、その他のページ）
です。
問い合わせフォームの作成
ホームページに問い合わせフォームを作っていきます。問い合わせフォームは多くのホームページにありますね。問い合わせフォームで送信された内容はメールで受信することができます。
問い合わせフォームが不要な方はこのパートを飛ばしてくださいね。
問い合わせフォームで必要な項目はあなたのビジネスに当てはめて考えてみてください。今回は、おなまえ、電話番号、メールアドレス、お問い合わせ内容で作っていきます。
また、それぞれの項目で入力が必須か任意かを指定することができます。問い合わせしやすいフォームを作っていきましょう。
ダッシュボード＞お問い合わせ＞新規追加
お問い合わせフォームのタイトルを入力します。［タイトル］の部分に「お問い合わせ」と入力してください。
まずは、お問い合わせのフォームを作っていきます。
今回はおなまえとメールアドレスを必須項目にします。必須項目に設定するということは、その項目に入力がなされていないと送信ができない仕組みになるという意味です。
すべての項目を必須にすることもできますが、今回の場合でいうと「電話番号は教えたくない」人は問い合わせ送信ができないということになります。メールアドレスさえあれば一応連絡ができるのでメールアドレスだけを必須項目にしました。
お客さんかもしれない人の情報は多く取得したいという思いで必須項目を多くすればするほど問い合わせハードルが高くなってしまいますので注意しましょう。
一応、入力欄の一番上にある<label>氏名［text* your-name］</label>について簡単に説明します。
<label>と</label>というラベルタグというもので氏名と［text* your-name］を囲むことによって、「氏名」とフォームの部品（今回は１行の入力フォームテンプレート）を関連付けています。（って言っても難しいのでここはほんと覚えなくていいです）
そして、［text* your-name］は、１行の入力フォームテンプレートである［text］、必須項目の［＊］、そしてテンプレートの名前に［your-name］というメールタグに指定しました、という意味です。
今回お問い合わせフォームでの設定では以下のことを行います。
- 氏名をおなまえに変える
- 電話番号（任意）を追加
- 電話番号とメールアドレスに入力の参考になるプレースホルダーを入る
- 題名というフォームを無くす
- メッセージ本文というフォームのラベル名をお問い合わせ内容（任意）に書き換え
- 「送信」ボタンの表示を「送信」から「内容を確認して送信」に書き換え
こういう風になりますね。
<label> おなまえ（必須）
[text* your-name] </label>
<label> 電話番号（任意）
[tel your-tel placeholder "090-1234-5678"] </label>
<label> メールアドレス（必須）
[email* your-email placeholder "name@example.com"] </label>
<label> お問い合わせ内容 (任意)
[textarea your-message] </label>
[submit "内容を確認して送信"]真似して入力してもいいですし、すべて削除してコードをそのままコピペしてもOKです。
一旦右側の【保存】ボタンを押してください。
タイトルの上に「コンタクトフォームが作成されました」とでます。
そして「このショートコードをコピーして・・・・」という文字とともに青く塗られた部分に白文字で【contact-form-7 id=”XXX” title=”お問い合わせ”】という文字列が出てきます。これはページを作成のときに使います。
次にメールタブをクリックすると画面が移ります。
↓
ここでは、お問い合わせ内容をメールで受信するための設定を行います。
そして、[your-name][your-tel][your-email][your-message]ってでていますよね？
これは一つ前のフォームの設定で指定した使用できる有効なメールタグです。
[your-tel]だけ太文字になっているのは設定されていないよ、と教えてくれているんです。それ以外はすでに設定されているということですね。
送信先、送信元はそのままでOKです。題名を変えます。ここの題名は、あなたのメールアドレスに届くときのメール件名になります。
題名のところの［your-subject］を削除してお問い合わせと入力してください。削除する理由は、フォーム設定で［your-subject］要素を削除したため無効になっているためです。
題名のところはこうなります。（コピペしてもOK）
[_site_title] "お問い合わせ"
さらにメッセージ本文の内容を以下のように書き換えます。（すべて削除し、こちらをコピペしてもOK！）
おなまえ: [your-name]
電話番号：[your-tel]
メールアドレス：[your-email]
お問い合わせ内容:[your-message]
--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されましたこの設定は、あなたのメールアドレスにお問い合わせの内容がどのような形で届けるのかを決めています。
このようになったらOKです。
最後に、メッセージの設定をします。上にあるメッセージタブをクリックするとこういう画面になります。
メッセージが正常に送信された項目の文章を書き換えましょう。例えばこんな感じとかどうでしょう。
お問い合わせありがとうございます。１営業日中に対応させていただきますのでしばらくお待ちくださいませ。
設定したら右側にあるステータスの青い【保存】ボタンをクリックして保存が完了です。
つぎのページ作成で使用しますので【contact-form-7 id=”XXX” title=”お問い合わせ”】の部分をコピーしておいてください。
各ページの作成
準備編のサイトの構成で考えたページを作っていきましょう。まずはお問い合わせページから作っていきましょう。
お問い合わせページ
ダッシュボード＞固定ページ＞新規追加
するとこういう画面になります。タイトル部分にページ名「お問い合わせ」と入れてください。
タイトル下の部分にある【＋】をクリックするとこういうウインドウが出ます。
ここにショートコード[/]というボタンがなければ下にある【すべて表示】をクリックすると左側にたくさんアイテムが出てきます。
見つからない場合は検索窓で「ショート」と入れると見つかります。
クリックすると本文のところにショートコードを入力するパーツが出てきます。
そこに先程お問い合わせフォームの作成で表示されたショートコードを貼り付けます。
URLの設定をしていきます。右上の歯車マークをクリック。
固定ページのタブの下にある「パーマリンク＞URLスラッグ」を設定します。
今回はhttps://xxxxxx.xxx/contactとしますので、「contact」と入力してください。
これでお問い合わせページはとりあえず完成です。上のブルーの【公開】ボタンをクリックします。左下にでてくるページを【固定ページを表示】をクリックしてフォームができていたら完成です。
↓
こんな感じに表示されれば完成です！おめでとうございます^^
その他のページ
同じ要領で各ページを作っていきますが、ホームページの中身は同じものがないためここでの作り方は割愛しますね。別記事でページの作り方やブロックエディタの使い方を説明しようと思いますのでご了承ください。
ダッシュボード＞固定ページ＞新規作成
から、タイトルを入力→URLスラッグ入力→公開とすべての固定ページを作成してください。
お問い合わせページと、事業概要ページ、サービスページはできましたか？プライバシーポリシーページは最初から作られていたのを今回は使います。中身については後で作り直してくださいね。
また、サンプルページなるものが最初から作られていますのでそれを削除します。
【ゴミ箱へ移動】をクリックするとゴミ箱フォルダに移動します。
レイアウト
サイト構成で考えていたページがすべてできたらホームページのレイアウトをしていきます。
ホームページメニューの設定
ホームページにはメニューは必要ですね。事業のホームページってTOPページの次に会社概要ページを見られる率が高くなります。
メニュー
トップメニュー、グローバルメニュー、フッターメニューはなにを設定する
メニューの作成
ダッシュボード＞外観＞メニュー
まずは新規メニューを作ります。新しいメニューを作成しましょうをクリックします。
メニュー名に「メイン」（なんでもいいです）と入れ、下のメインメニューにチェックを入れて【メニューを作成】ボタンをクリック。
メニュー項目を追加の下に固定ページから選べるようになっています。
すべてを表示タブを押すべて表示タブにすると固定ページがすべて表示されます。今回作成したページでメインメニューに入れたいページを選択し、【メニューに追加】ボタンをクリック。
すると右側にページが表示されました。よければこれで【メニューを保存】をクリック。
メニューの並び順は入れ替えることができます。移動させたいメニューをドラッグアンドドロップ（マウスでクリックしたまま動かすことが）できるので表示させたい順序に並び替えてみてください。
メニューは同列での表示と「入れ子」にもできます。
同列での表示はこうですね。
メニュー設定でこのように段差を作ると、
このようにマウスをのせたときに展開されるメニューにすることもできます。
フッターメニューも同じ様に作ってみましょう。
これでメニューは完成です。
ホームページの外観デザイン（テーマ）
はい、これからホームページで大切な見た目のデザインについて説明していきますね。ワードプレス（WordPress）では外観デザインのパッケージを「テーマ」と呼びます。
事業用のホームページにするなら最初の設定のままではブログのような見た目になっているのでビジネスのホームページのような見た目に変えていく必要があります。
そのためにテーマをインストールする必要があります。
このデザイン部分は選ぶテーマによって設定方法が変わってくるので、インストールするテーマのマニュアルから作成を進めていただきたいと思います。
デザインテーマの種類やインストール方法については詳しい記事がたくさんあります。検索して探してみてくださいね。
ウィジェット
ワードプレス（WordPress）では、ページの右側（サイドバー）や下の方（フッター）に共通のパーツを設置できる機能をウィジェットといいます。テーマによって設定できる種類が変わってきますが、今回はフッターに会社情報を設置してみます。
ダッシュボード＞外観＞ウィジェット
固定ページと同じ様にブロックエディタで編集していきます。
最初から用意されている不要なウィジェットを削除します。
削除するウィジェットを選択し、右端の【・・・】をクリック、【ブロック削除】を押します。
【＋】を押してブロックエディタの【段落】を選択。
直接入力していきます。普通にエンター（改行）を押すと一行文隙間ができるので、シフトボタンを押しながらエンター（改行）を押すとキレイに改行されます。
入力したら右上の【更新】ボタンをクリック。表示されました。
ホームページをチェック・公開する
さて、いよいよホームページを公開するときがやってきました！最後に行うのは、メンテナンスモードの解除です。
メンテナンス解除
一番最初に設定したメンテナンスモードにするプラグイン『WP Maintenance Mode』を無効化します。
ダッシュボード＞設定＞WP Maintenance Modeをクリックします。
ステータスの【無効化】にチェックを入れて下の【保存】ぼたんをクリックすると公開されます。
ホームページ公開後は再度チェック
URLをスマートフォンや別のブラウザに入力して表示されるかをチェックしましょう。メニューやページのリンクなどが動作するかチェックしましょう。
お疲れさまでした、これでホームページは完成です！いや〜大変でしたね。
ホームページは公開しただけでは誰も訪れてはくれないものです。
名刺やパンフレットなどに展開してホームページの入口を作りましょう。
それとSNSアカウントのURLなどに設置したり、シェアして見てもらうきっかけを作っていきましょう。
これからこのページの続きでホームページを広げるための施策を追記していきますのでまたのぞいてみいてくださいね。
WordPressホームページを今すぐ立ち上げる
エックスサーバーでは初心者でも10分でWordPressを始められる「クイックスタート」という機能があります。ドメインとサーバーを紐付けたり、WordPressをドメインにインストールしたりという手間が省かれ、入力していくだけでWordPressが立ち上げられるんです。
右上の申込みボタンから進んでみてくださいね。
エックスサーバー
コメント