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

スポンサーリンク

ワードプレス

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

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

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

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

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

○○○株式会社
検索

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

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

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

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

この程度なら簡単にできます!

SAMPLEサイト

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

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

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

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

スポンサーリンク

WordPress(ワードプレス)とは

ワードプレス

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

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

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

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

WordPressをインストール

WordPressは公式サイトからダウンロードできます。

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

MySQL?データベースを作成?

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

\インストール方法も紹介/
WordPressを無料体験、初心者におすすめのレンタルサーバーを紹介
サイトやブログが簡単に作成できる「WordPress(ワードプレス)」。 無料のソフトですが、インストール先はパソコンではありません。WordPressは契約したレンタルサーバーにインストールして利用できます。...

WordPressでホームページを仮作成

WordPressのインストール完了後

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

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

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

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

 

ダッシュボード

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

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

テーマ

テーマ

2018年のWordPress管理画面「テーマ」

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

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

WordPress標準テーマ、2018年は「Twenty Seventeen」。
※毎年更新されます(2020年は「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)には投稿の一覧が表示されます。固定ページ内の本文は表示されません

WordPressをプレビュー

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

テーマ「Twenty Sixteen」

完成HP1

テーマ「Twenty Seventeen」は少々クセがあるので、比較的オーソドックスな「Twenty Sixteen」に変更しました。

ヘッダー下にメニューを配置するテーマが多いですが、このテーマはサイト名とメニューが横並びです。

Twenty Sixteenは現在、インストール済みテーマに含まれていません。「新規追加」から検索、インストールできます

テーマ「Twenty Sixteen」はレシポンシブデザインです。

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

スマホ画面

テーマ「Twenty Seventeen」

twentyseventeen

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

このテーマ、固定ページはサイドバーを表示しない(1カラム)仕様です。投稿ページに移動すると、サイドバー表示(2カラム)になります。

この様に「テーマ」はサイトのデザイン、見せ方を大きく変えます。

WordPressでホームページを完成させる

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

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

 

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

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

コーポレートサイト向け、おすすめWordPress公式テーマ

Lightning

企業・コーポレートサイトを作成するなら、テーマはWordPress公式の「Lightning」がおすすめです。

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

新規追加からインストールできます。

作成者は株式会社ベクトル。代表取締役は上記で紹介「いちばんやさしいWordPressの教本」の著者でもあります。

\コーポレートサイトsample作りました/
コーポレートサイト
sample

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

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

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

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

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

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

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

ホームページをGoogleサービスに登録する

ホームページが完成したら
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

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

ギフト券チャージで1,000ポイント get!

初回限定 キャンペーン
5,000円チャージで1,000ポイントがもらえる!

さらに
チャージするたび最大2.5%ポイント貯まる

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