ワードプレスで会社のホームページを自分で作成する手順、初心者でも簡単!

スポンサーリンク

ワードプレス

初めてのホームページ作成は有料ソフトが必要。PCインストール型の「ホームページビルダー」「dreamweaver」などが有名です。

ところが、クラウド型CMSを利用すれば、ソフトを購入することなく無料でホームページが作成できます。

CMSとはContents Management System。有名なのは「WordPress(ワードプレス)」です。

この記事では「ワードプレス」を使った、簡易な会社ホームページ(コーポレートサイト)の作成手順を記します。

目的は、社名検索で自社のホームページをヒットさせる

○○○株式会社
検索

インターネットで会社の存在が確認できる。その程度のホームページで構わない方が対象となります。今どき会社のホームページがないのは、ちょっとレアですから。

簡易なホームページといえどもスマホ対応

単なるスマホ対応ではなくレスポンシブルデザイン。プラットフォームだけは時代の先端です。

まずは、暫定ホームページを公開。
その後、ワードプレスのカスタマイズ方法をマスターすれば、もっと素敵なホームページにリニュアルできます。

コーポレートサイトのサンプル
簡易なホームページであれば自分で1日で作れます。検索で会社名が表示されるよう、早期にサイトの公開をお勧めします。
この程度なら簡単に作れます

ワードプレスは無料のソフトですが、利用するにはワードプレス対応のレンタルサーバーを契約しなければなりません。

まだ契約されていない方でも、無料で体験することができます。

ワードプレスの無料体験にお薦めのサーバーは「ロリポップ!」。
初心者でも扱い易いこのサーバーは、ワードプレスのインストールが最も簡単にできます。

ワードプレスの準備ができたら、ざっくりとホームページを作ってみましょう!

スポンサーリンク

WordPress(ワードプレス)とは

ワードプレス

サイトやブログが作成できる無料のソフトウェア「ワードプレス」。WEB上の約30%がワードプレスで作られているそうです。

レシポンシブデザインでスマホ対策も万全

現在、ワードプレスは2社から提供されています。
ソフトウェア版(wordpress.org)とブログサービス版(wordpress.com)。ソフトウェア版は各自のサーバーにダウンロードして利用。ブログサービス版はアメブロなどと同じネット上のサービスで、有料プランも提供しています。

ここで紹介するのは、利用度の高いソフトウェア版です。

WordPressをインストール

ワードプレスは公式サイトからダウンロードできます。

FTP(File Transfer Protocol)ソフトを使用してレンタルサーバーにアップロード。MySQLでデータベースを作成します。

レンタルサーバーの管理画面に「WordPressインストール」機能があれば、以上のことは簡単にできます。

\インストール方法も紹介/
ワードプレスを無料体験できる、初心者におすすめの最安レンタルサーバーを紹介
サイトやブログが簡単に作成できる「ワードプレス」。無料のソフトですが、利用するにはワードプレス対応のレンタルサーバーが必要です。 一度、試してみたい方。 現在契約中のレンタルサーバーが対応していない又はレ...

WordPressでホームページ作成

ワードプレスのインストール完了後

ホームページを作成または再開するには、ワードプレスへログインします。

URLの末尾に wp-login.php を付け加えると、ログイン画面に移動します。

例えば、otamesi.comなら
https://otamesi.com/wp-login.php

ログイン画面から
先に設定したアカウントとパスワードを入力、ワードプレスの管理画面に移動します。

 

ダッシュボード

WordPressの管理画面にまず表示されるのは「ダッシュボード」。
ここでは特になにもしません。

左側にメニュー。ここから各画面に移動します。

テーマ

テーマ

管理画面の「外観」>「テーマ

ワードプレスは「テーマ」があって初めて機能します。テーマとはデザインテンプレートのようなもの。

2018年はテーマ「Twenty Seventeen」がデフォルト。
※毎年更新されます(現在は「Twenty Twenty」)

管理画面「外観」>「テーマ」からはインストール済みのテーマと選択中(有効)のテーマが確認できます。
上部にある「新規追加」をクリックすると、他にもたくさんのテーマをインストールすることが可能です。

各テーマは書体・文字装飾・大きさ・色・レイアウトなどが異なり、ホームページの印象を大きく変えます。

テーマ選びは、WordPressに慣れてからでも大丈夫。作成後でも変更可能なので、先にコンテンツ作りを進めましょう。

パーマリンク設定

パーマリンク設定

始めにパーマリンクの設定を行います。
後からでも変更できますが、以前のアドレスでアクセス(LINK)するとページが表示されません。一度決めたら変更しないのが無難です。

デフォルトでは「基本」に設定されています。このままでも問題はありません。

各ページのアドレスになるので、自由に編集できる一番下の「投稿名」がお薦めです。※「カスタム構造」でもOK

ホームページ作成前に、パーマリンク設定をどうするか?
必ず決めてください

パーマリンク「カスタム構造」の設定

パーマリンク

空欄に「利用可能なタグ」をドラッグ。複数の組み合わせも可能です。
投稿または固定ページ画面、タイトル欄下に設定したパーマリンクが自動に表示されます。このアドレスをタイトルに合わせたURLに編集することができます。

固定ページ

固定ページ初期

管理画面の「固定ページ」>「固定ページ一覧

企業サイトは「固定ページ」から作成。
この記事では以下の作成手順を紹介します。

  1. 「トップページ」
  2. 「会社概要」
  3. 「お問い合わせ」
  4. 「BLOG」

用意されている「サンプルページ」は不要なので削除します。

2018年5月にリリースされた「WordPress 4.9.6」からGDPR(EU一般データ保護規則)対応として「プライバシーポリシー」も用意されています。

EU向けに情報発信をされる方は要チェックですが、ここでは下書きのまま。興味のある方は内容を確認し、プライバシーポリシーガイドを参照の上、完成させてください。

プライバシーポリシーガイド

それでは固定ページの作成に入ります。

WordPress 5.0からはエディタが「Gutenberg」になりました
従来のエディタを利用するにはプラグイン「Classic Editor」が必要です
新規固定ページ

<Classic Editor>

Gutenberg

<Gutenberg>

タイトルを入力して、一旦「下書きとして保存」。

上述の「パーマリンク設定」で◎投稿名またはカスタム構造を選択すると
タイトル欄の上または下にパーマリンクが表示され、編集できます。※投稿も同じ

パーマリンク

<Classic Editor>

Gutenberg

<Gutenberg>

ここでは、トップページなので「top」にしました。

同様にして、残りページもタイトルだけ先に作成。
トップページ会社概要お問い合わせBLOGの4ページ、タイトルだけのダミーページを「公開」(保存)します。

コンテンツは後から作成します。

重要 固定ページ「BLOG」だけは、タイトル以外は空欄で構いません。

投稿

投稿一覧初期

管理画面の「投稿」>「投稿一覧

投稿一覧には「Hello world!」、最初の投稿が用意されています。編集もしくは削除してブログを始めます。

メニュー

メニュー

管理画面の「外観」>「メニュー

通常はヘッダー下に表示される「メニュー」を作成。
メニュー名欄に何かしらを入力し 「メニューを作成」 クリック。

メニュー作成

左欄が鮮明になったら
固定ページ」すべて選択して「メニューに追加」クリック。

固定ページ選択

メニュー構造

メニュー構造
好みに合わせメニューの表示名(ラベル)を編集し、位置をドラッグして変更
メニュー設定
メニューの位置をチェックして 「メニューを保存」 クリック。

ラベル

メニュー保存

※「メニューの位置」チェックを忘れるとメニューは表示されません

ウィジェット

ウィジェット初期

管理画面の「外観」>「ウィジェット

固定ページ&投稿の表示画面は、作成したコンテツを中心にヘッダー(上)、サイドバー(横)、フッター(下)で構成されます。

サイドバーに表示する情報はウィジェットから挿入します。

ウィジェット削除

ブログサイドバーはデフォルトで、いくつかのウィジェットが既にセットされています。

企業サイトには全部不要なので、すべて削除しても構いません。

①②の手順で削除してください。取り敢えず「検索」だけ残しました。


利用できるウィジェット
から カスタムHTMLをドラッグして「検索」上に挿入。

ウィジェットテキスト

同じウィジェットを何個でも追加できます。

ウィジェットテキスト記入
ウィジェットの
カスタムHTML
を開いて、タイトルと内容を記入。
ウィジェット内では改行位置に<br>を入れます。

ホームページの表示設定

表示設定

管理画面の「設定」>「表示設定

ホームページの表示は、●固定ページを選択。①
下段の
ホームページ:は、固定ページの「トップページ」を選択。②
投稿ページ:は、固定ページの「BLOG」を選択。③

ここでの「ホームページ」は一番最初に表示されるページ(トップページ)、ホームページ本来の意味
現在ではウェブサイトをホームページと呼ぶことが広く浸透しています
③の投稿ページで固定ページを選択すると、選択されたページ(URL)には投稿の一覧が表示されます。固定ページの内容は表示されません

ホームページのプレビュー

作成中のホームページをパソコンのブラウザーから確認してみます。

テーマ「Twenty Sixteen」

完成HP1

デフォルトのテーマ「Twenty Seventeen」は少々クセがあるので、比較的オーソドックスな「Twenty Sixteen」に変更しました。メニューをヘッダーのタイトル下に表示するテーマが多いですが、このテーマは横並びです。

もちろんレシポンシブデザイン。
画面幅をドラックするとレイアウト表示が変わります。スマホで見ると
メニューはボタン化され、サイドバーはメインコンテツの下にレイアウト変更されます。
スマホ画面

テーマ「Twenty Seventeen」

twentyseventeen

少々クセがあるテーマ「Twenty Seventeen」に変更。

サイドバーが表示されません。

投稿ページのみサイドバーが表示されます。固定ページはサイドバーを表示しない仕様です。

この様にテーマによって、まったく違った見え方になるのがワードプレスです。

ワードプレスでホームページを完成

以上で各ページ(ダミー)とパーツは仮完成。

後は各ページのコンテツを作成。編集画面のエディタより文章を作成し、「メディアを追加」ボタンから写真を挿入して完成です。

いかがでしたか、簡単ですよね?

コンテツの作成、エディタの使い方などが分からない方は
書籍などをご参考にして下さいm(_ _)m

\ブロックエディターに対応/
いちばんやさしいWordPressの教本
インプレス
第4版 人気講師が教 える本格Webサイトの作り方

会社・お店のホームページを拡散させる

ホームページの完成後は「Googleマイビジネス」の登録も忘れずに。無料でGoogleマップに掲載、会社存在をアピールして顧客を呼び込むことができます。

Google マイビジネス - Google で顧客エンゲージメントを促進
Google マイビジネスの無料のビジネス プロフィールを使うと、Google 検索や Google マップで近隣ユーザーによる顧客エンゲージメントを促進できます。

Googleマイビジネスは営業時間や電話番号、ホームページのURLも表示できます。

Googleマイビジネスに登録して検索結果ページで会社を目立たせる方法
貴方の会社、「Googleマイビジネス」に登録してますか? Googleマイビジネスは無料のビジネスリスティング。 登録後は、Googleマップで貴方の会社・お店を表示します。 Googleマイ...

会社のアピールはSNSも有効な手段。SNSではホームページURLも登録できます。

ブログを書いたらSNSで情報発信!

ホームページを登録する

ホームページが完成したら
Googleの「Search Console」と「Analytics」に登録しましょう。

Google Search Console
Google Marketing Platform - Unified Advertising and Analytics
Introducing Google Marketing Platform, a unified marketing and analytics platform for smarter marketing measurement and better results.

内容を理解するのは、ずっと先でも良いので、ホームページ完成後は直ぐに登録するのがお薦めです。データが集まれば(半年後ぐらい)、ホームページのアクセス解析や診断に役立ちます。


ホームページのスマホ対応(レスポンシブル)とhttps化は必須!
2015年4月、Googleはスマホ対応のウェブサイト(モバイルフレンドリー)は、モバイル検索結果で優遇するアルゴリズム変更を適用しました。 翌年(2016年)の5月に、モバイルフレンドリーアルゴリズムを更に強...
スポンサーリンク
関連記事
サイト作成
記事をシェアする
スポンサーリンク
noma

有限会社ノマド。名古屋の建築設計&不動産会社。主に一級建築士と宅地建物取引主任士のスタッフが記事をしたためています。

Amazonランキング大賞2018

数億種類の取り扱い商品からAmazonでの販売データをもとに集計
年間のカテゴリー別
「Amazonランキング大賞2018」
ちょっと気になりませんか?

のまろぐ2.0
タイトルとURLをコピーしました