【ホームページの作り方】初心者におすすめのおしゃれなコーポレートサイトの自作方法を徹底解説

URLをコピーする
URLをコピーしました!
  • お店や会社を始めたからホームページが欲しい
  • 見積もりを見ても高いのか安いのかわからない
  • スタートアップに数十万円のコストはかけられない

起業、開業は人生の中でも大きな門出の1つです。そこで「ホームページを作ろう」と考えるのは至極当然のことだと思います。

ところが、いざ情報を集めてみると想像以上に制作費用の見積もりが高かったり、見積もりの内容がわからず不安になったり「結局納期の関係でよくわかないまま制作を依頼してしまった」といったことは少なくありません。そしてこういったパターンで制作したホームページは結果につながらないことがほとんどです。

僕は今から約15年ほど前にブログのカスタマイズから始めて、自分用に多くのホームページを作ってきました。そこで得た1つの答えは「あまりにも凝った特殊なサイトでない限り、プロとそん色ない(場合によっては個人デザイナー以上の)サイトは簡単に自作できる」ということ。

そこで飲食店経営者でWEB制作者の僕が、初心者(しかもパソコンとか超苦手であろう飲食店経営者)でも、お店や会社のブランディングになるような、おしゃれでかっこいい最新のホームページを持てるように自作方法、さらにその努力が無駄にならないよう売上につながる活用方法までまとめて解説します。

この記事を読めば本当に何もわからない状態でも「おしゃれなホームページの自作方法や店舗のブランディングまでに必要な手順」がすべてわかります。もちろんそれなりの努力は必要ですが今後、あなたのビジネスが継続される限り必要な情報ですので是非ご覧になってみてください。

目次

ホームページとはなに?その仕組みは?

まずホームページを「このご時世だしとりあえずあったほうがいいかな」程度になんとなく考えてはいませんでしょうか?なんとなくのものが数千円程度でサクっと手に入るものならいいですが、ホームページは業者に依頼すると最低でも数十万円はかかる高額なものです。

そのホームページがどんなものなのか、もっと言えば「自社の経費がなんのためのコストで、そこからいくらの利益を生み出せる投資なのか」を考えなければなりません。費用対効果ですね。

で、その「ホームページ」ですが近年では特に「WEBサイト」と呼ばれることが増えました。本来「ホームページ」とは「WEBサイトのトップ(ホーム)ページ」のことで、サイトのメインとなる最初に閲覧されることを想定された「表紙」にあたるページのことを指します。

ただし、その呼び名がとくに初心者の方の中では一般化されているので「ホームページ=WEBサイト」とここでは定義させていただきます。

ホームページとインターネットの仕組み

ホームページは「インターネット上にアップロードされたHTMLコードをブラウザを介してPCやスマホで表示する」という仕組みになっています。

何が何だかわかりませんよね?わざと専門用語を多く使いました。

悪意があるわけではなく、この先多少なりともこのような専門用語と付き合わねばならず、ある程度は理化しておく必要があるとの判断で書かせていただきました。それぞれを少し解説すると

  • インターネット:世界中の情報機器を回線で相互接続するデータ通信網
  • HTMLコード:インターネット上で使用される専用の言語
  • ブラウザ:インターネット上のWEBページを閲覧するためのアプリ。「翻訳」の意味

となります。

HTMLとは

もう少し具体的に説明すると、インターネットという4次元的な空間があり世界共通です。

そのインターネットの世界では英語や日本語と同じように「HTML」という言語が使われています。HTMLを見たければ試しにこのサイト上でPCから

「マウスの右クリック ⇒ ページのソースを表示」

とクリックしてみてください。

<html lang="ja" data-loaded="false" data-scrolled="false" data-spmenu="closed">
<head>
<meta charset="utf-8">

こんなようなわけのわからない文字化けのようなテキストが表示されたと思います。これがHTMLで、文字化けのように見えて実はちゃんと文法になっています。

ブラウザとは

ただ、このHTMLのままだと何がなんだかわからないので「ブラウザ(「翻訳」の意味)」を介することで閲覧する個人に合わせた表示に代わり、今まさに見ているこのサイトのような見た目になります。「ブラウザ」というとわかりにくいかもしれませんが、代表的なものはAppleのSafariやMicro SoftのInternet Expolerなどですね。

代表的なブラウザ
  • Chrome:Googleの開発するブラウザ。Androidスマホデフォルト
  • Safari:Appleの開発するブラウザ。iPhoneデフォルト
  • Microsoft Edge:Microsoftの開発するブラウザ。Windows PCデフォルト
  • Internet Exploler:Micosoftの旧ブラウザ。現在は開発終了
  • Firefox:Mozilla Foundationの開発するブラウザ。エンジニア系にユーザーが多い印象

いまだにユーザーの多いInternet Explorerですが、すでに開発の終了した古いブラウザです。多くのWEBサイトも対応しなくなってきているので使用はやめましょう。

銀河のアイコン画像銀河

おすすめはGoogle Chromeです。もっともユーザーの多いWindows PCとiPhoneというOSの違いをシームレスに連携できます。

ホームページは本当に必要なの?

結論から言うと「経営方針次第」と言えます。ただし、ほとんどの場合において「あったほうがいい」と思っています。

もちろんホームページにもメリット、デメリットがありますので以下に羅列してみました。

ホームページのメリット

  • ブランディングができる
  • 信用が獲得できる
  • 売上アップにつなげられる
  • 情報発信の基盤にできる
  • 求人につなげられる

ホームページのデメリット

  • 機会損失につながる
  • コストがかかる
  • 更新作業が必要
  • 担当者が必要
  • 用途をはっきりさせないと効果が出ない

ホームページを作ることの目的はもちろん「利益の向上」ですよね。利益を上げるためには当然、売上を上げてコストを下げることが必要です。

  • 売上のアップ
    • 新規顧客の獲得
    • リピート率の向上
    • 客単価のアップ
  • コストの削減
    • グルメサイトや地元フリーペーパーなどの広告費
    • 求人サイトや地元求人誌などの掲載費

ホームページを作ることにより上記にはつなげられる可能性があると言えます。デメリットといえば通常業務のほかに管理する必要が出てくるので労働時間が増えるか担当者(人件費)が増えるということが挙げられます。

銀河のアイコン画像銀河

上記をしっかりと理解していないとお金も時間も無駄になります。

ホームページの種類は何があるの?

一言で「ホームページ」といってもいくつかの種類があります。具体的には以下の通り。

ホームページの種類
  • コーポレートサイト:会社のホームページ
  • サービスサイト:会社のサービスに特化したホームページ。「ブランドサイト」とも呼ばれる
  • ブログサイト:個人ブログ。または会社の場合は「オウンドメディア」などとも呼ばれる
  • リクルートサイト:顧客獲得ではなく求人採用にターゲットを絞ったサイト
  • ECサイト:通販サイト。ネットショップ
  • プロモーションサイト:期間限定のイベントなどプロモーションに特化したサイト
  • ポータルサイト:旅行サイトなどに代表される情報の検索窓口となるサイト
  • ランディングページ(LP):「購入」、「申し込み」など1つの目的に特化した訴求力の強い独立した単体ページ

いろいろありますが、今はとくにすべてをはっきりと覚える必要はありません。「用途によってサイトを使い分けるという戦略もある」というイメージを持っていただければOKです。

銀河のアイコン画像銀河

まずは飲食店舗では「サービスサイト」、会社では「コーポレートサイト」を作りましょう。

ホームページの自作にはなにが必要なの?費用はどれくらい?

ホームページの自作には以下のものが必要です。

ホームページの自作に必要なもの
  • パソコン:15万円くらいの価格帯のスペック推奨
  • カメラ:スマホでOK
  • サーバー・ドメイン
  • WordPressとテーマ

基本的にはこの2つがあれば大丈夫です。この2つなしで開業、起業するひとはあまりいないと思いますので、自作のためにこれといって新しく用意するものはありません。

ホームページの編集を行うパソコン

パソコンは絶対に必要です。スマホだけでなんとかならない?とかタブレットは?とか不必要な質問です。

デスクトップかノートかはどちらでもいいですが、スペックはそこそこ高いほうがいいです。価格帯の目安で言えば15万円前後。

安いやつでも作業はできますが、動作が遅く生産性が悪いしストレスにもなるのでここにはお金かけたほうがいいかなと思います。

ホームページに使用する写真を撮影するカメラ

会社や店舗のブランディングに必要不可欠なのはオリジナルの写真です。カメラは高画質なものがあるにこしたことはありませんが、最近のスマホのカメラのスペックは非常に高いのでスマホでじゅうぶん。

むしろ数万円ぐらいの安いデジカメ買うぐらいならその分iPhoneやGalaxyなどカメラの性能のいいスマホを買ったほうがいいです。それよりも構図の勉強のほうが大事。

あとは照明。暗いだけで画質は下がるので場合によっては照明の購入を検討しましょう。

ちなみにインターネットから検索して保存するといういわゆる「拾い画像」は著作権の侵害にあたりますので絶対にやめましょう。拾い画像はすぐにわかりますし、会社や店舗のホームページで使ったりしたら信用を大きく下げかねません。

とくにこのあたりは意識が低く「ちょっと使っただけで悪意はなかった」という声もよく聞きます。ですが掲載期間から高額の請求をされても支払う義務が出てきますので本当に気を付けてください。

サイトで使う画像や写真が欲しければ著作権フリーのサイトでダウンロードしましょう。ちなみに僕はShutterstockというサイトから購入していますが、

  • 6,000円 /月で画像10枚(1枚あたり600円)
  • 15,000円 / 月で画像50枚(1枚あたり300円)
  • 25,000円 / 月で画像350枚(1枚あたり71円)
  • 30,000円 / 月で画像750枚(1枚あたり40円

となかなか高額です。もしも無料の著作権フリーの画像を探しているのであれば

なんかがあります。クオリティ的にもおすすめなのは写真ACですね。

あとはO-DANというサイトは海外の40以上のフリーサイトからまとめて検索できるので便利ですよ。ただ、無料=利用者が多いのでできれば自分で撮影したものが望ましいです。

写真のセンスがなくて難しければ、サイトのブランディングのためにShutterstockのようなハイクオリティの優良サイトを利用するのがいいかなと思います。Shutterstockに関しては月額6,000円の10枚プランの無料トライアルがあるので、まずはこちらから試してみるのもおすすめです。

\ 無料トライアルもできます /

銀河のアイコン画像銀河

写真がダサいとホームページはかっこよくなりません

ホームページを動かすためのサーバーとドメイン

サーバーとドメインは自作しなくてもホームページを作るうえで必要なものです。サーバーとはインターネット上のハードディスクのようなもので、この中のフォルダにホームページのデータファイルを保存していきます。

ドメインとは簡単に言えば「○○.com」のようなURLのことです。こちらは世界に1つしかなくて早い者勝ちですので例えばうちで使っている「pc11.co.jp」は欲しくても手に入れることはできません。

鉄板焼葉山のドメインも本当は「hayama.com」のほうが短くてわかりやすいですが、すでに取得されてしまっていたので「steak-hayama.com」にしました。

ホームページを制作するソフトのWordPress

必要だと思われているのかよく聞かれる「ホームページビルダー」や「プログラミングの知識」は必要ありません。ホームページを作る=ホームページビルダーだと思ってる人が多いようですが、僕のおすすめは断然WordPress。

WordPressについては後ほど説明しますが、このWordPressのおかげでホームページビルダーもプログラミングの知識も専用のソフトも不必要となりました。プログラミングの知識だけはあるとさらに強いですが、絶対に必要なものではないので安心してください。

銀河のアイコン画像銀河

これといった追加で必要な費用も、購入しなければならない機材やソフトもありません。

ホームページを自作するメリットとデメリットは?

僕は中小企業や個人事業主に対してホームページを自作することを強く推奨します。そのメリットとデメリットは以下の通り。

自作のメリット

  • 制作・維持コストの削減
  • 社内で知識がつく
  • (ある程度)自分の好きにできる

自作のデメリット

  • 勉強する時間が必要
  • PCが苦手だったら苦痛でしかない
  • 慣れてこないと「素人感」が出てしまう

いろいろ並べましたが、端的に言えば「圧倒的なコストカットと自身も含めた担当スタッフの成長、知識がつくことで自社でやれることやれないこと、それに対して外注時の予算感などを把握できる」という点です。

これらを何も知らないと、例えば「素人にちょっと毛が生えた程度の知り合いのフリーランスに20万円払って依頼したけど、大したものができなかった。しかも高い買い物をしたということにも気づかない」ということになります。

素人に毛が生えた程度でもできるのであればあなたにも絶対にできますWordPressは僕が初めて触った15年前よりも圧倒的にわかりやすく、かつオシャレでかっこいいホームページが簡単に作れるようになりました。

銀河のアイコン画像銀河

そんなことに数十万円の制作費、さらに「保守・管理費用」という名の月々数千から数万円程度ののランニングコストをかけることは非常にもったいないです。

自作による費用面の圧倒的なメリット

例えば制作費用が20万円かかるとしましょう。飲食店の場合、平均的な原価率30%前後と言われていますから20万円の費用を払うために稼がなければならない売上は約60万円。自身の人件費を時給5,000円ほどとするならば120時間働いて稼いだ金額を投資するということです。

120時間もかけなくても自作することは可能ですし、120時間かけて得た技術と知識があれば以降の更新やメンテナンスも行えます。ちなみに業者に依頼するパターンの流れを覚えておいてほしいのですが、20万円の制作費用を支払ったとしても、ホームページに使うための

  • ロゴ画像
  • 料理や内観、外観、スタッフなどの写真
  • ホームページ内に使用するテキスト文章

これはあなたが用意する必要があります。つまり業者はレイアウトを作り、そこにあなたからの画像やテキスト文を入れ込んでいく作業をしていることになります。

で、このレイアウトがお金を払う必要がないほど簡単になったんです。ぶっちゃけ「レイアウトはできてて画像を差し替えたり、テキストコピペするくらいなら俺にもできるわ」って思いませんか?

さらに制作から月日がたてばホームページに追加で記載したい事項や、差し替えたい画像や写真なんかがいろいろとでてきますよね。業者に最初から依頼=ホームページの更新の仕方がわからない=その際も依頼ということになりますので、更新・修正毎に費用がかかります。

繰り返しますが「レイアウトはできてて画像を差し替えたり、テキストコピペするくらいなら俺にもできるわ」って思いませんか?

それから、このあたりも制作会社やデザイナーによくピックアップされていますが、

  • スマホ対応(レスポンシブデザイン)
  • SEO対策
  • SNS連携や埋め込み
  • アクセス解析

なんかも全部自分でできます。簡単です。誰にでもできます。

銀河のアイコン画像銀河

よっぽどの大規模サイトかよほどの予算がない限りは自作したほうがメリットが大きい

結果の出るホームページの自作方法と手順を解説

さて、ここからは実際に手を動かしてホームページを作っていきます。全体的な流れは以下の順番です。

ホームページの自作手順
  1. Google Chromeをインストールして規定ブラウザに設定する
  2. Gメールアドレス(Googleアカウント)を作る
  3. レンタルサーバー(ConoHa WING)を契約する
  4. 独自ドメインを取得する
  5. サーバーとドメインを紐づける
  6. サーバーにWordPressをインストールする
  7. WordPressの初期設定を行う
  8. テーマ(SWELL)をインストールする
  9. 必要なプラグインをインストールする
  10. 必要なページを作成する
  11. その他必要に応じてやるべきことをやる
  12. ブログを書いてアクセスを集める

1. Google Chromeをインストールして規定ブラウザに設定する

インターネットエクスプローラーはとても古いブラウザです。今でも使っている人を多く見かけますが、どんどん非対応のサービスが増えているので今日から使用をやめましょう。

Google Chromeのインストール方法

Google Chromeのインストールと設定はとても簡単です。まずはこちらからGoogle Chromeのページにアクセスしましょう。

STEP
【Chromeをダウンロード】ボタンをクリックしてChromeをダウンロード
STEP
ダウンロードされた【ChromeSetup.exe】というファイルをダブルクリックして開くと自動的にインストールが始まります。
STEP
インストール完了

以上でクロームのインストールは完了です。早速開いてみましょう。

Google Chromeを既定のメインブラウザに設定する方法

クロームのインストールを終えたらクロームを既定のブラウザに設定します。デフォルトではWindowsならInternet ExplorerまたはMicrosoft Edge、MacであればSafariになっているはずです。

繰り返しますが、インターネットエクスプローラーはとても古いブラウザです。今でも使っている人を多く見かけますが、どんどん非対応のサービスが増えているので今日から使用をやめましょう。

STEP
Windowsの設定画面を開く

まず、画面左下のWindowsボタンまたは、キーボードのWindowsキーから歯車ボタン()をクリックしてWindowsの設定画面を開きます。

STEP
【アプリ】をクリック
STEP
「アプリと機能」というページが開くので【既定のアプリ】をクリック
STEP
クロームとは別のブラウザが設定されているので
STEP
【Google Chrome】を選択する
STEP
タスクバーにピン留めする

あとは画面下のタスクバーからクロームのアイコンの上で【右クリック⇒タスクバーにピン留めする】でショートカットを作っておくと以降が楽になります。

これでGoogle Chromeが既定のメインブラウザに変更されました。

スマホにもインストールする

ブラウザはパソコンやiPhone、iPadといった別々のデバイスでもブックマーク等を同期できます。なのでパソコンのブラウザをクロームに変更したと同時にスマホのブラウザもクロームに変更しておきましょう。

2. Gメールアドレス(Googleアカウント)を作る

Gメールは○○@gmail.comのアドレスで利用できるメールサービスです。メールアドレスにGメールを使用してもいいのですが、せっかく独自ドメインをとるのですからメインのアドレスにはinfo@○○.comのような独自ドメインのメールアドレスを使用しましょう。

ではこのGメールはなんのために使うのかというとGメールアドレスを作ることでGoogleアカウントが発行されます。そしてこのGoogleアカウントではホームページを活用するために必要な以下のサービスをすべて無料で使うことができます。

Googleアカウントで利用できるサービス
  • Gメール:メールボックスとして非常に優秀
  • Google マイビジネス:店舗ビジネス経営者には必須
  • Googleマップ:同様
  • Googleアナリティクス:超高機能のアクセス解析
  • Googleサーチコンソール:サイトの診断に必須
  • Googleアドワーズ:検索ボリュームの調査に。SEO・コンテンツマーケティングに便利
  • Google ドライブ:MicrosoftのWord・Excel・Power Pointにあたるソフトが無料で使えてクラウドに保存できる
  • Google フォト:無制限で写真の保存ができる
  • YouTube:説明不要の動画配信サービスでチャンネル開設できる

これらを使うのにGoogleアカウントの取得は絶対です。また、PCのメールはOutlookを使用している場合が多いと思いますが、こちらもブラウザと同じくOS間を気にすることなくシームレスに連携できることからGメールを推奨しています。

Gメールアドレス(Googleアカウント)の作り方

STEP
アカウントの作成

まずはGoogleアカウントのトップページにアクセスし【アカウントを作成】をクリックします。

STEP
必要情報の入力

名前や希望のメールアドレス、パスワード、生年月日、性別は入力必須となっています。スパム防止のためのキャプチャ画像に表示されているテキストを入力し、利用規約とプライバシーポリシーに同意するにチェックを入れ【次のステップ】をクリックします。

STEP
アカウントの確認

携帯電話のキャリアメールやYahoo!メールなど現在使っているメールアドレスを入力し【次へ】をクリックします。

STEP
認証コードの入力

入力したメールアドレス宛にGoogleから確認コード付きのメールが届くので、入力して【次へ】をクリックします。

STEP
アカウント作成の完了

「ようこそ!」と表示されてGmailアドレスの取得は完了です。【Gmailに移動】をクリックしてさっそくGmailを開いてみましょう。

このように表示されればOKです。

これでGメールアドレスの取得および、googleアカウントの作成が完了しました。

3. レンタルサーバー(ConoHa WING)を契約する

レンタルサーバーはConoHa WINGが超おすすめ

ConoHa WINGが初心者に超おすすめな理由
  • WordPressのインストールが超簡単
  • サイトセキュリティを上げる独自SSLの設定も超簡単で無料
  • 通常年間1,000円ほどかかる独自ドメインの維持費も永年無料
  • 大手GMOの運営で安心
  • 超高速の処理速度
  • それでいて安い

多くのレンタルサーバーがありますが、2020年現在もっともおすすめなのはConoHa WING

  • 独自SSLの設定:http://をhttps://に変える作業。作業自体は難しくないけど専門用語いっぱいでてきて初心者がその作業の意味を理解するのが難しい
  • ドメインとサーバーの紐づけ:このドメインをこのサーバーで動かしますよーという設定、「ネームサーバーを変更する」という設定を行うのですがこれも作業の意味を理解するのが難しい

上記の面倒というよりも意味が分かりにくい作業もほぼすべて自動で終わる超強力なサービス。エックスサーバーやロリポップなどには無く、初心者には完全にConoHa WING一択。

ConoHa WINGの申込方法

STEP
ConoHaアカウントを作成する

こちらからConoHa WINGの申し込みページにアクセスし、ConoHaアカウントを作成していきます。

\ 最大60%OFFキャンペーン中 /

STEP
【今すぐお申し込み】をクリック
STEP
メールアドレスを入力してパスワードを設定する
  1. メールアドレスを入力
  2. 確認のため再度メールアドレスを入力
  3. 任意のパスワードを入力
  4. 【次へ】ボタンをクリック
STEP
申し込みプランを選択する
  1. 料金タイプ:「WINGパック」を選択
  2. 契約期間:「12か月」がおすすめ
  3. プラン:「ベーシック」でじゅうぶん
  4. 初期ドメイン:なんでもいいです
  5. サーバー名:そのままでOK
  6. 入力を終えたら【次へ】ボタンをクリック

2020年6月2日、「WordPressかんたんセットアップ」機能がリリースされ、さらに簡単にWordPressが始められるようになりました。このマニュアル執筆時にこの機能はなかったため、利用する場合はこちらのConoHa WING公式サイトから手順をご覧ください。

STEP
契約者情報を入力
  1. 名前や住所など必要事項を入力
  2. 入力し終えたら【次へ】をクリック
STEP
SMS / 電話認証を行う

SMS認証とは電話を使った本人確認です。

  • SMS認証:認証番号がショートメールで送られてくる
  • 電話認証:自動音声電話がかかってきて認証番号を伝えられる

SMS認証はショートメールなので固定電話ではなくスマホの電話番号を入力してください

STEP
決済方法を入力
  1. 支払方法の選択:クレジットカードがおすすめ
  2. カード情報を入力
  3. 【お申し込み】ボタンをクリック

これでレンタルサーバーの契約が完了しました。

4. 独自ドメインを契約する

独自ドメインとは簡単に言うと「○○.com」のようなサイトのURLのことです。このドメインは世界中で1つしか存在しないので早い者勝ちです。

ちなみにドメインの取得には本来、取得費用や維持費がかかるのですが、ConoHa WINGを利用し続けるだけで永久に無料で保持できます。

ConoHa WINGのドメイン取得手順

【サーバー管理⇒契約情報⇒無料独自ドメイン⇒未設定】から取得できます

【サーバー管理】ではなく【ドメイン】から進んでしまうと通常取得(有料)になってしまうので注意して下さい。

STEP
ConoHa WINGから新規ドメインを取得する

【ドメイン新規取得】にチェックして【追加する】をクリック

STEP
取得したいドメインを検索

【ドメイン名】の箇所に店舗名など任意の文字列を入力して検索します。

STEP
取得したいドメインをカートに入れる

取得したいドメインが表示されたら【カートに追加】ボタンをクリックします。

繰り返しますが、ドメインは世界で1つしかないので、すでに誰かに取得されているドメインは契約できません。その場合は、文字列を変えるか、ハイフンを入れるか、数字や他の単語を足したりしてください。また、.comや.netなど複数の種類がありますが、特にどれを使っても問題ありません。ですができれば馴染みのある.comで取れるといいかなと思います。

STEP
カートから決済画面へ進む

ドメインをカートに追加したら【次へ】ボタンをクリックしてください。

STEP
契約者情報を入力

名前や住所など契約者情報を入力します。さきほどサーバー契約のときにも入力しましたが、今回はドメインの契約なので別です。

ただ、サーバーの契約者情報がある程度自動的に入力されているはずなので確認しながら進めてください。入力し終えたら【次へ】をクリック

STEP
少し時間がかかります
STEP
申し込みを完了させる

上記のページが開いたら【決定】をクリックしてください。

STEP
サーバーにセットされるのを待ちます

再び画面が暗くなるので100%になるまで少し待機してください。

STEP
ドメインの契約完了

上記の画面に戻ったらドメインの契約が完了です。

STEP
ドメイン認証を行う

ドメインの契約が完了したら、契約時に入力したメールアドレス宛にConoHa WINGから「【重要】[ConoHa]ドメイン情報認証のお願い」という件名でメールが届きます。このメールを開き記載されているURLをクリックして認証を行ってください。

この認証を期限内に行わないとドメインが機能しなくなり、ホームページやメールが使用できなくなります。

これで独自ドメインの契約が完了しました。

5. サーバーとドメインを紐づける

ConoHa WINGは自動で紐づけされるので作業の必要なし

レンタルサーバーの契約時とドメインの取得時に、両方で契約者情報を入力する必要があったかと思いますが、本来サーバーとドメインは分かれています。そこでどのドメインをどのサーバーで動かすのかという紐づけの作業が必要になるのですが、ConoHa WINGではその必要がありません。

これもConoHa WINGをおすすめする大きな理由の1つです。

6. サーバーにWordPressをインストールする

いよいよWordPressのインストールです。こちらも以下の手順通りに進めていただければ非常に簡単です。

ConoHa WINGのWordPressインストール手順

STEP
【サイト管理】をクリック

管理画面左のメニューから【サイト管理】をクリックします。

STEP
WordPressをインストールするドメインに切り替える

デフォルトが「○○.conohawing.comになっているので【切り替え】ボタンをクリックしてドメインを切り替えます。

STEP
WordPressをインストールするドメインを選択

先ほど取得した独澍ドメインの左側にある【切り替え】ボタンをクリックしてください。

STEP
【+アプリケーション】をクリック

設定対象が独自ドメインに切り替わっていることを確認して【+アプリケーション】ボタンをクリック

STEP
必要情報の入力
  1. アプリケーション:「WordPress」を選択
  2. インストール方法:「新規インストール」を選択
  3. バージョン:「5.4.1」を選択
  4. URL:どちらでもOK(wwwありのが若干かっこいい)
  5. インストール先:空欄でOK
  6. サイト名:店舗名などを入力(あとから変えられます)
  7. メールアドレス;取得したGメールを入力
  8. ユーザー名:任意の文字列を入力(ログインに必要なのでメモ)
  9. パスワード:任意の文字列を入力(ログインに必要なのでメモ)
  10. データベース名:そのままでOK
  11. ユーザー名:そのままでOK
  12. パスワード:任意の文字列を入力
  13. コントロールプラグイン:そのままでOK
  14. 自動キャッシュクリアプラグイン:そのままでOK

入力を終えたら【作成する】ボタンをクリック

STEP
WordPressがインストールされたことを確認する

アプリケーションインストールの画面に「WordPress」が表示されていればOKです。

STEP
サイトを開いてみる

「サイトURL」の箇所のURLをクリックしてホームページを開いてみます。

STEP
ページが開かれればホームページ開設成功

「Hello world!」が開かれれば、あなたのURLであなたのお店のホームページが全世界に公開されたことになります。

これでWordPressのインストールは完了です

7. WordPressに最低限必要な初期設定を行う

ホームページが無事に開設されましたが、デザインを整えたり、必要なページを作成する前に「絶対に最初にやっておくべき初期設定」があります。後回しにすると非常にデメリットが大きくなるので、あともう少しだけ作業してください。

7-1. 管理画面にログインしてブックマークする

STEP
管理画面URLをクリック

まず、ConoHa WINGの管理画面から【管理画面URL】をクリックします。

STEP
ログイン情報を入力

WordPressインストール時に設定したログイン情報を入力して【ログイン】ボタンをクリック

「ログイン状態を保存する」にチェックを入れておくと今後が楽です。

STEP
管理画面へログイン完了

こちらがWordPress(ホームページ)の管理画面になります。このページをブックマークしておいてください。

7-2. ドメインに独自SSLを設定する

次にドメインにSSLというサイトセキュリティの設定を行います。SSLを設定したサイトはURLが「http://○○.com」ではなく「https://○○.com」になります。

先ほど開設されたホームページを見てみてください。「保護されていない通信」と表示されているはずです。

なのでSSLの設定をしてサイトのセキュリティを強化します。

ホームページへの通信を暗号化することでサイト訪問者の情報漏洩を防ぐ必須の設定です。

STEP
ConoHa WINGの管理画面を開く

【サイト情報⇒サイト設定⇒かんたんSSL化の【SSL有効化】がグレーアウトしているのがわかるかと思います。

STEP
【サイトセキュリティ】をクリック
STEP
【無料独自SSL】をクリック
STEP
【ON】をクリック
STEP
SSL有効化が青くなればOK(少し時間かかります)

長いと30分ほどかかることもあるようですが、数分で青くなるはずです。【サイトURL】をクリックしてホームページを確認してみましょう。

STEP
【保護されていない通信】が消えていればOK
STEP
鍵のアイコンがついていればOK
STEP
サイトのURLをhttpsに変更

管理画面にログインし、設定⇒一般から一般設定を開きます。

  • WordPressアドレス(URL)
  • サイトアドレス(URL)

の両方ともhttpsに変更します

STEP
ページ下部の【変更を保存】をクリック

【変更を保存】ボタンを押して設定を保存します。

これででSSL化は完了です

7-3. パーマリンクの設定をする

パーマリンクとはページ単体に振られるURLのことです。○○.com/△△△のように表示されます。

これも途中で変更すると作業が大変な上に、シェア数がリセットされたり、SEOの評価が下がったりとデメリットしかないので必ず先にやっておきましょう。

STEP
WordPressのダッシュボードからパーマリンク設定画面を開く

WordPressにログインし、設定⇒パーマリンク設定をクリックします。

STEP
【投稿名】を選択

【投稿名】を選択して【変更を保存】ボタンをクリック

よく【変更を保存】のクリックを忘れてしまう方がいるので注意してください。

これでパーマリンクの設定は完了です

銀河のアイコン画像銀河

これでホームページの基盤が完成しました。あとは業種や形態に合わせて必要機能を追加していきます。目に見えて変わってきますので面白くなってくるはずです。

テーマのインストール

ここまでで全員共通の作業は終わりです。これからいよいよ本格的にホームページの制作に入っていくわけですが、デザインを変更するためテーマ(テンプレート)をインストールします。

テーマは無数にありますが、ホームページを作るうえでおすすめのテーマはこのサイトも使用しているSWELL』一択です。僕はこれまで20個以上、総額数十万円のテーマを購入したり、こだわりが強すぎて完全オリジナルテーマの自作したりもしましたが、SWELLを使うのがベストだと判断しています。

もちろん100%完璧に納得できるわけではありません。 SWELLに変えてからも「やっぱこっちのテーマのほうがいいかな」と何度も思って実際に変更したりしましたが、結局戻ってくるという最強にトータルバランスに優れたテーマです。

\ 本サイトでも使用中 /

ただし、SWELLは有料のテーマとなりますので、少しでも出費を抑えたいなど無料のテーマを使いたい場合は『Cocoon』というテーマがおすすめです。

これから先は『SWELL』を使用して飲食店のホームページを実際に作っていきます。慣れない作業だとは思いますが、記事の手順通りに進めていただければイケてるおしゃれなデザインのホームページを必ず作ることができます。

銀河のアイコン画像銀河

有料ならSWELL。無料ならCocoon。それ以外に気になるテーマがあれば購入前にご相談ください。

SWELLの購入とインストール手順

まずはWordPressテーマ『SWELLのダウンロードページ』からSWELLを購入します。購入とインストール手順は以下の通りです。

SWELLの購入(ダウンロード)手順

STEP
SWELLをダウンロード

まずはSWELLのダウンロードページからSWELLを購入します。購入方法はクレジットカードと銀行振込の2つです。

ここではクレジットカードでの購入を例とします。

STEP
クレジットカード情報の入力

カード情報を入力し、【\17,600 支払う】ボタンをクリックします。

STEP
メールを確認してSWELLをダウンロード

購入時に入力したメールアドレス宛にSWELLからメールが届きますので、記載されているダウンロードリンクから購入者パスワードを入力してダウンロードします。

STEP
SWELL子テーマのダウンロード

再びSWELLのダウンロードページからSWELLの子テーマをダウンロードします。子テーマとはSWELL本体と連動したカスタマイズ用のテーマファイルだと思ってもらえれば大丈夫です。

これでSWELLの購入とダウンロードは完了です。

SWELLのインストール手順

STEP
ダッシュボードのテーマページを開く

WordPressのダッシュボードから「外観」⇒「テーマ」と進みます。

STEP
【新規追加】をクリック
STEP
SWELLの親テーマのアップロード
  1. 【テーマのアップロード】ボタンをクリック
  2. アップローダーが開くので【ファイルを選択】からSWELLのファイルを選択
  3. 【今すぐインストール】ボタンをクリック

展開せずに圧縮済みの.zip形式のファイルのままアップロードしてください。

STEP
有効化せずにテーマのページに戻る

まだ有効化せずに【テーマのページに戻る】をクリックします。

STEP
SWELLの子テーマをインストールする

さきほどと同様の手順で今度はSWELLの子テーマをインストールします。

STEP
SWELLの子テーマを有効化する

子テーマのインストールが終わったら【有効化】をクリックします。

STEP
サイトの表示を確認する

ダッシュボード左上にあるサイト名をクリックしてサイトを開きます。

STEP
SWELLが適用されていればOK

このような表示になっていればOKです。

これでSWELLのインストールは完了です。

不要なテーマを削除する

SWELLを適用させたら、不要なテーマは削除しておきましょう。不要なテーマが入っていると無駄にサーバーの容量を使いますし、不必要なアップデートの通知が来たりして邪魔になります。

STEP
テーマのページを開く

外観⇒テーマからテーマのページを開きます。

STEP
テーマのインストール状況を確認

デフォルトで3つのテーマが入っているのですべて削除します。

STEP
【テーマの詳細】をクリック

不要なテーマにカーソルを合わせ【テーマの詳細】をクリックします。

STEP
【削除】をクリック

少しわかりづらいですが、ページ右下にある【削除】をクリックします。

STEP
【OK】をクリック

確認のウインドウが開くので【OK】をクリック

STEP
すべて削除する

同様に残りの2つも削除します。SWELLの本体(親テーマ)と子テーマ(こっちを有効化)だけ残せばOKです。

これで不要テーマの削除は完了です。

テーマの更新

ついでにSWELLにあらたなバージョンがあるので更新しておきます。SWELLは開発者が頻繁にアップデートを行い、新機能が追加されたりバグが修正されたりします。

アップデート情報については開発者のTwitterをチェックしておくと理解が深まりますよ。

STEP
【今すぐ更新】をクリック
STEP
自動で更新完了

これでテーマの更新は完了です。

銀河のアイコン画像銀河

SWELLをインストールしたことで大きく見た目が変更されます。

必要なプラグインのインストール

初期設定も終わり、テーマもインストールしたことで見た目も大きく変わりました。そのあとは多くの方がやりたがるのが

  • ロゴ画像の変更
  • 色の変更
  • グローバルメニューの作成
  • フォントや文字サイズの変更
  • メインビジュアルの変更

などです。見た目に大きく影響する部分なので気持ちはわかりますが、何も中身がないのにデザインの部分を変更しようとしても効率が悪いので先に中身を作っていきましょう。

WordPressは「プラグイン」といってあなたにとって必要な機能をサイトに追加して、強化していくことができます。ホームページを作るのに入れておくべきプラグインは以下の通りです。

インストールするプラグイン

  • BackWPup
  • Google XML Sitemaps
  • SEO SIMPLE PACK
  • Snow Monkey Forms
  • WebSub/PubSubHubbub
  • Wordfence Security
  • WP Multibyte Patch
  • WP Revisions Control

定番だけど不要なプラグイン

  • AddQuicktag
  • Akismet Anti-Spam
  • All in One SEO Pack
  • Classic Editor
  • Contact Form 7
  • EWWW Image Optimizer
  • Jetpack
  • Lazy Load
  • Speech bubble
  • Table of Contents Plus
  • TinyMCE Advanced
  • WordPress Popular Posts

インストールするプラグイン

BackWPup

BackWPupは万が一のためのバックアップを設定できるプラグインです。管理画面から簡単に設定でき、ドロップボックスに保存できたりなど非常に便利。

Google XML Sitemaps

Google XML Sitemapsはクローラー(検索エンジン)にサイト情報をインデックスさせる通知の設定を行えるプラグインです。

プラグインの設定方法については別記事で詳しく解説しています。

SEO SIMPLE PACK

SEO SIMPLE PACKはSWELLと同じ開発者による国産のSEO対策プラグインです。SEO対策の定番プラグイン「All in One SEO Pack」よりも簡単に必要な設定を簡単に行うことができるのでおすすめです。

プラグインの設定方法については別記事で詳しく解説しています。

Snow Monkey Forms

お問い合わせページに必要なフォームはプラグインで作る必要があります。定番は「Contact Form 7」ですが、「Snow Monkey Form」のほうが簡単でイケてるフォームが作れるのでおすすめです。

詳細はSWELLとSnow Monkey Formsでのお問い合わせフォームとページの作り方を参考にしてください。

WebSub/PubSubHubbub

初心者によくある勘違いなのですが、ページを公開したりホームページを公開しても直後からすぐに検索ヒットするわけではありません。検索エンジンにインデックスされて初めて検索ヒットするようになります。

例えるなら大きな図書館に新しく本が入荷したとします。入荷しても直後に図書館の検索機で検索してもヒットしませんよね。

検索機にその本を登録して初めて検索ヒットするようになります。このプラグインは毎日世界中で追加される新たなページに埋もれることなく自身のページをより早くインデックスしてもらうよう通知する機能を持っています。

また、例えばあなたの書いたブログ記事を、どこかの悪質なブロガーや業者がまるまるパクって自身のサイトにコピペしたとします。そちらのページが先にインデックスされてしまうと、あなたの記事が逆にパクり記事とみなされる危険性もあるのでそのあたりを軽減する意味も含めて推奨しています。

Wordfence Security

セキュリティを強化してくれるプラグイン。スパム対策では「Akismet」が有名ですが、こちらのほうが設定も楽だしreCaptchaのv3も導入できるのですすめです。

WP Multibyte Patch

WordPressを日本語で正しく動作させるためのプラグイン。WordPressのインストール時に自動でインストールされ、設定は有効化するだけなので特になんらかの理由がない限りは入れておけばいいかなと思います。

WP Revisions Control

ページの作成中に放っておくとどんどんたまっていくリビジョンデータを制限できるプラグイン。これ入れてないと不要なデータで容量圧迫しまくるので全員必須です。

定番だけど不要なプラグイン

AddQuicktag

「ショートコード」と呼ばれる短いタグを設定することで、複雑で長くなりがちな記事装飾機能を簡単に呼び出すことができるプラグイン。旧エディタ(クラシックエディタ)時代の定番プラグインでしたが、僕は新エディタ(Gutenberg・ブロックエディタ)の使用を推奨しているので不要。

Akismet Anti-Spam

お問い合わせフォームや記事コメントをスパムから守るセキュリティプラグイン。WordPress.comへの登録など手間が多いし、「reCaptcha v3」を導入すればいいだけなので不要。

All in One SEO Pack

SEO対策に人気のプラグイン。高機能ゆえ設定が複雑でわかりにくく、しかもその機能の大半が不要なので。

前述した「SEO SIMPLE PACK」がおすすめ。

Classic Editor

新エディタ(Gutenberg・ブロックエディタ)を強制的に旧エディタに戻すプラグイン。僕は新エディタ(Gutenberg・ブロックエディタ)の使用を推奨しているので不要。

Contact Form 7

問い合わせフォーム作成のド定番プラグイン。ド定番ですが見た目のデザインがしょぼく、カスタマイズしようと思うとHTMLやCSSの知識が必要になります。

その他に、送信前の確認ページがなかったりスパムが多かったりと、しっかり使おうと思うと何かと手間がかかるので「Snow Monkey Form」を推奨。

EWWW Image Optimizer

サイトに使う画像を圧縮して軽くしてくれるプラグイン。圧縮率が高くないわりに時間がかかるので、キモいパンダ(TinyPNG)が圧倒的に便利。

pngって書いてあるけどjpgも圧縮できるのでご安心ください。

で画像サイズを小さく(横幅1,000pxほどでもいいけどフルHDサイズの1,920px推奨)してから、パンダで圧縮するとさらに軽くなります。

Jetpack

アクセス解析やSNS連携など一見すると便利な機能がパッケージになったプラグイン。ただしめちゃくちゃ容量が大きい上にほとんどの機能は別で実装できるので不要。

Lazy Load

画像の読み込みを遅らせることでページそのものの表示を早くさせるプラグイン。SWELLには純正で備わっているので不要。

Speech bubble

LINEのような吹き出しを追加できるプラグイン。SWELLには純正で備わっているので不要。

Table of Contents Plus

ブログ記事に目次を追加できるプラグイン。SWELLには純正で備わっているので不要。

TinyMCE Advanced

旧エディタを強化できるプラグイン。僕は新エディタ(Gutenberg・ブロックエディタ)の使用を推奨しているので不要。

WordPress Popular Posts

サイドバーなどにアクセス数順などで人気記事ランキングを表示できるプラグイン。SWELLには純正で備わっているので不要。

銀河のアイコン画像銀河

プラグインは便利な反面、入れすぎるとサイトが重くなったり、プラグイン同士が干渉しあってバグが起きたりします。不要なプラグインは入れないようにしましょう。

コーポレートサイトに必要なページを作成する

ここではコーポレートサイトを例にしますが、飲食店サイトや別の業種でも置き換えられますので是非参考にしてみてください。

必要なページ一覧
  • 会社案内ページ
  • 事業内容ページ
  • お知らせ・ブログページ
  • 採用ページ
  • お問い合わせページ
  • トップページ

会社案内ページを作成する

まずは会社の案内ページを作成します。ページの内容は以下の一覧にあるような項目が多く入ります。

内容が多くなるようだったらページを独立させたりなど、必要に応じて選んで作成してください。

会社案内ページの項目
  • 企業理念
  • 社名の由来
  • ミッション
  • クレド
  • 役員紹介
  • 代表挨拶
  • 沿革
  • 会社概要
  • 拠点一覧
  • アクセス

ページの作成方法については別記事で詳しく解説しています。

事業内容ページを作成する

事業内容ページはその名の通り、提供しているサービスの説明をしたり、一覧で表示したりするページです。

  • 写真や画像
  • ミッション、仕事への想い
  • 導入実績やお客様の声

などを交えながら作りましょう。プレゼン資料などがあれば参考にしてみるといいと思います。

ページの作成方法については別記事で詳しく解説しています。

ブログ(お知らせ)ページを作成する

ページの作成方法については別記事で詳しく解説しています。

採用ページを作成する

ページの作成方法については別記事で詳しく解説しています。

お問い合わせページを作成する

お問い合わせページに必要なフォームはプラグインで作る必要があります。定番は「Contact Form 7」ですが、「Snow Monkey Form」のほうが簡単でイケてるフォームが作れるのでおすすめです。

詳細はSWELLとSnow Monkey Formsでのお問い合わせフォームとページの作り方を参考にしてください。

トップページを作成する

ページの作成方法については別記事で詳しく解説しています。

SWELLのカスタマイズと設定を行う

本講座で使用しているテーマ『SWELL』では膨大なカスタマイズ項目があります。どこを触ると何が変わるのか、すべての項目を別記事にて詳しく解説しておりますので用途に合わせて設定してみてください。

ホームページ完成しましたか?

以上でホームページ自作講座を終わります。長い間本当にお疲れさまでした。

無事に完成させることはできましたでしょうか?講座内容で不明な点がありましたらTwitterまたはYouTubeのコメント欄でお気軽にご質問ください。

その他必要に応じてやるべきこと

「ホームページの自作」とは少し内容がずれるので書きませんでしたが、SNSのアカウントを作成してリンクさせたり、Googleマップや検索結果で重要となるマイビジネスの設定をしたり、独自ドメインのメールアドレスを作成したりと必要に応じて行ってください。

  • SNSアカウントの作成
    • Facebookページ
    • Instagramビジネスアカウント
    • Twitter
    • LINE公式アカウント(旧LINE@)
    • YouTube
  • MEO(グーグルマイビジネス)の設定
  • 独自ドメインのメールアドレスの作成

ブログを書いてアクセスを集める

最後に、やっと完成したホームページも「完成=ゴール」ではなく「完成=スタート」です。完成しなければ存在していないのと同じなので完成して公開後からが本番となります。

ここからSNSやブログで情報を発信し、ホームページにアクセスを集め、顧客や人材の獲得に活用してください。ブログの書き方については別のコンテンツ「ブログ記事の書き方」で解説しています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

この記事を書いた人

野口 銀河 野口 銀河 代表取締役

PC11株式会社代表取締役。静岡県三島市在住。沼津市でステーキハウス&レストラン「鉄板焼葉山」を経営し、そのノウハウを活かして飲食店専門のWEB集客支援サービスを展開。さらにその傍らで地元ポータルサイト「伊豆駿東まっぷ」や音楽ポータルサイト「KICROSS」などのブログを運営。個人では「ダンディなライフスタイル」をテーマにブログやYouTubeでも情報を発信している。

目次
閉じる