初めてWebサイトを作ってみる!WordPressの使い方【起業家必見!】

    
2017/02/01
    

スクリーンショット 2017-01-31 15.06.45
これから起業しようと思っている方に向けて、「WordPressを用いたWebサイトの作り方」について詳しくご紹介します。

今回は、初心者の方でも簡単に操作していただけるように、実際のWordPressの管理画面などを用いた操作説明だけでなく、一番最初のサーバー(レンタルサーバー)を借りて設定をするところから説明しています。

 

WordPressは、企業のコーポレートサイトやブログサイトなどを作る場合、レンタルホームページやレンタルブログと違って、無料版でもGoogle AdSense等の広告が表示されず、Googleが認める程SEOにも強く、更新作業も簡単です。

非常に使い勝手のいいサービスですので、ぜひご覧いただき、ご活用ください。

 

WordPressとは

WordPressとは、ブログやWebサイトを制作するための無料のツールのことです。WordPressはCMS(コンテンツ・マネジメント・システム)の一つであり、簡単な操作で本格的なWebサイトを制作することが可能です。

また、WordPressはオープンソースであるため、世界中の技術者たちが開発に加わり、日々バージョンアップが行われています。

 

WordPressは、個人のブログから企業のサイトまで、様々なWebサイトで利用されています。世界中のWebサイトのうち4分の1はWordPressで作成されていると言われ、ブログシステムの中では世界一のユーザー数を誇ると言われています。

WordPressを使用すれば、難しい技術を使わずにWordを使っているイメージでブログやWebサイトを作成することができるでしょう。

 

WordPressのインストール

WordPressを利用するためには、いくつか準備をしておく必要があります。まず、Webサイトを作成して公開するためには、「サーバー」と「ドメイン」が必要になります。

Webサイトを作成するには、サーバーにデータを保存しておく必要があります。「ロリポップ!」「さくらインターネット」「ミニバード」「エックスサーバー」など、様々な会社がサーバーをレンタルしているので、これらを利用します。無料でレンタルできるものと有料になるものが存在し、有料のものは、容量や機能によってレンタル料が異なります。

数あるレンタルサーバーの中でも「WordPress簡単インストール」が用意されているサーバーと契約すると、とても簡単にWordPressのインストールが行えます。レンタルサーバーの管理画面から、指示に従ってクリックしていくだけでOKです。

 

レンタルサーバーと契約したら、次はドメインを取得します。ドメインとは「yahoo.co.jp」などのインターネット上の住所のようなものです。その住所にサーバーを設置することでサイト開設をすることができます。

レンタルサーバーと同じように、ドメインも様々な会社が販売しています。年単位で販売していることが多く、年額1000円程度から販売されています。

ここからは「ミニバード」を例にして、WordPressを導入する流れを解説していきます。まず、ミニバードにアクセスし、左下にある「ドメイン設定」をクリックします。すると次のような画面が現れます。

wordpress-5-620x284
スタードメインのドメインを取得している場合は、「スタードメイン管理のドメインを追加する」をクリック。他の会社のドメインを取得している場合は、「他社管理のドメインを追加する」をクリックします。

スタードメインのドメインを取得していると、登録が簡単になります。ドメイン名を入力して確認することで設定が完了します。

wordpress-12-620x400
続いて、WordPressのインストールを行います。管理画面の中央にある「簡単インストール」を選択します。

追加インストール」をクリックすると、次のような画面が現れます。

wordpress-6-620x462
次にWordPressの横にある「インストール設定」をクリックします。

wordpress-11-620x425
インストール先や、ブログ名、ユーザー名などを入力するページが現れますので、それぞれ入力します。データベースに関しては、「自動でデータベースを作成する」にチェックを入れてください。チェックを入れることで、WordPressに利用するデータベースの設定が自動で行われます。

必要事項を入力したら、「確認画面」をクリックします。次のページで情報を確認し、「確定」をクリックします。これでWordPressのインストールは完了です。

次のページにWordPressのログイン画面にアクセスするURLが記載されていますので、ログインIDとパスワードを入力すると、WordPressが使えるようになります。

wordpress-10-620x358
 

管理画面の基本設定および投稿方法

81a8830050380c804bab619654c90adb-620x254
WordPressの管理画面にログインすると、画面左に様々なメニューが表示されています。中央辺りにある「外観」→「カスタマイズ」をクリックすると、レイアウト、ヘッダー、背景画像など、サイトのデザインの編集を行うことができます。

テーマ」で、Webサイトの基本的なデザインを決定しましょう。

 

投稿

この「投稿」で作成するのは、ブログやお知らせなどで、頻繁に情報の更新があるページです。

会社やお店の情報など、頻繁に更新する必要がなく、Webサイトの決まった場所に常に表示させるページを作る場合は、後述の「固定ページ」を使います。

記事の投稿を行うには、「投稿」→「新規追加」をクリックします。

wordpress-7-620x125
すると、ブログを執筆するページが現れます。タイトル欄にタイトルを入力し、その下にある大きな空欄の枠に記事を執筆していきます。

文字のフォントやサイズを調整したり、画像を追加したりすることもできます。

wordpress-8-620x190
記事の作成が完了すると、画面右にある「公開」をクリックします。すると、記事が作成されます。

wordpress-13-620x387
まだ記事作成が途中で公開したくない場合は、「下書きとして保存」をクリックしましょう。

ちなみに間違って公開ボタンを押してしまっても「下書き」の状態に戻せるので、安心してください。

スクリーンショット 2017-01-27 17.33.21
また、公開する日時を任意に設定することもできます。

「すぐに公開する」項目を編集すると、日時を設定する項目が表示されます。

スクリーンショット 2017-01-30 14.32.39
ここで、公開したい日時を入れ、「OK」ボタンを押すと、下の「公開」ボタンが「予約投稿」ボタンに変わります。

スクリーンショット 2017-01-31 14.45.24
この「予約投稿」ボタンをクリックすることで、予約の設定が完了します。

「明日の早朝、定時前に公開したい」といった時に使用できるので、とても便利ですね。

 

固定ページ

WordPressには、「投稿」の他に、「固定ページ」が用意されています。

固定ページとは、会社やお店の情報など、頻繁に更新する必要がなく、Webサイトの決まった場所に常に表示させるページのことです。

固定ページ」→「新規追加」をクリックすることで、固定ページの作成ができます。

基本的な使い方は投稿ページと同じで、ページの様々な執筆・編集が行えるようになっています。

wordpress-9-620x207
記事の作成が完了すると、画面右にある「公開」をクリックします。すると、固定ページが作成されます。

このように、会社概要や店舗概要、自分のプロフィールなど、記事とは別途必要になるページの作成も簡単に行えます。

wordpress-14-620x407
 

ユーザーの追加

WordPressでは、作成した時に登録された管理者とは別のユーザーを追加することができます。「ユーザー」→「ユーザー一覧」では、現在登録されているユーザーを確認することができます。ユーザー名、メールアドレス、プロフィールなどが表示されます。

wordpress-15-620x295
新たにユーザーを追加する場合は、「ユーザー」→「新規追加」をクリックします。

スクリーンショット 2017-01-30 14.58.14
ユーザー名、メールアドレスなど必須の情報を入力して、新規ユーザーを登録することができます。

スクリーンショット 2017-01-30 15.00.26
 

テーマの設定方法

WordPressには、サイトのデザインとレイアウトを決めるテーマと呼ばれるテンプレートが用意されています。写真をうまく活用したレイアウト、シンプルさを基調としたデザイン、SEO対策に優れているなど、テーマにはそれぞれ特徴があります。

また、テーマには無料のものと有料のものが用意されています。

wordpress-16-620x211
テーマを設定するには、「外観」→「テーマ」をクリックします。「新規追加」をクリックすると、注目、人気、最新、特徴フィルターからテーマを検索することができます。

使いたいテーマが決まったら、インストールをクリックして、インストールします。インストール後、「有効化」をクリックすることで、そのテーマが採用されます。

また、「外観」→「テーマの変更」をクリックすることで、スタイルシートを変更することもできます。

 

無料で使えるおすすめのテーマ

Twenty Fifteen

658ec0660f7419f872ca3f3a200aa027-620x442
WordPressのデフォルトとなっているテーマです。セキュリティに優れ、機能も豊富です。デザインはシンプルで使いやすいものになっています。

スマートフォン・タブレット・ノートまたはデスクトップパソコンのどれを使ってサイトに訪れても、最適な表示がされるようになっています。

 

Hueman

ec210452cfd1a5b127b685d33d4b3a7b-620x441
Hueman はブログ、マガジン、ビジネスのWebサイトのためのテーマです。モバイルフレンドリーな設計になっており、一度に多くの記事を表示させることができます。

無料テーマの中でもTOPクラスの人気を誇り、世界で7万以上のWebサイトで使用されています。

 

Simplicity

スクリーンショット 2017-01-27 17.44.10
SimplicityはWordPress公式のテーマではありませんが、SEO対策に優れ、人気のテーマの一つとなっています。

その特徴は、シンプルなデザイン、内部SEO施策済み、SNS等の拡散の仕組みが優れている、カスタマイズがしやすいなどです。

 

プラグインの設定方法

WordPressには、テーマの他に「プラグイン」というものが用意されています。プラグインとは、WordPressの機能も拡張させるものです。

SEO対策をするプラグインやソーシャルメディアの共有ボタンを表示する、画像を一括圧縮する、お問い合わせフォームを設置する等、便利な機能を備えた様々なプラグインがあります。

プラグインは、管理画面の「プラグイン」→「新規追加」をクリックすることで、インストールすることができます。

wordpress-17-620x203
 

最初に入れておきたいおすすめのプラグイン

All in One SEO Pack

SEO対策を総合的に行えるプラグインです。検索エンジンの検索結果に表示される内容を最適化でき、とても便利なプラグインです。「メタキーワード」や「OGP」、「XML Sitemaps」などの設定が行え、SEO対策には欠かせません。

All in One SEO Packの使い方

 

WP Social Bookmarking Light

ソーシャルメディアの共有ボタンを表示できるようにします。TwitterやFacebook、はてなブックマークなど、主要なソーシャルメディアに対応しているので、最初に追加しておきたいプラグインです。

WP Social Bookmarking Lightの使い方

 

TinyMCE Advanced

記事を投稿する際のビジュアル・エディターを拡張することができます。

文字のサイズを変更したり、太字にしたり、続きを読むタグを挿入したり表を作成したりボタン1つで様々ことが行えるようになります。 

TinyMCE Advancedの使い方

 

EWWW Image Optimizer

画像ファイルを圧縮してくれます。過去にアップロードした画像に対しても、一括圧縮が可能。画像が軽くなると、表示も速くなり、ユーザビリティが向上します。

EWWW Image Optimizerの使い方

 

Contact Form 7

簡単にお問い合わせフォームやアンケートフォーム、応募フォームなどを作成することができます。お問い合わせフォームがあると、Webサイトの信頼性が向上します。

Contact Form 7の使い方

 

以上、WordPressの導入から実際の作成方法について解説しました。

特別なスキルがなくても自分のWebサイトをとても簡単に作れるのがWordPressの大きな特徴です。利用できるテーマの数も年々増えているので、イメージした通りのWebサイトを手軽に作ることができるはずです。

今まで使い方が分からず利用してこなかった人も、これからWebサイトを立ち上げたい人も、ぜひ参考にしてみてください。

(執筆:小嶋大貴、編集:マツイ)

icon

・著者紹介

執筆:TechAcademyマガジン 編集長 小嶋 大貴

 

・メディア紹介

オンラインのプログラミングスクールTechAcademyが運営しているTechAcademyマガジンでは、EdTech(エドテック)を切り口に、プログラミングやデザインなどの最新トレンド、IT教育の関連情報を紹介するWebメディアです。IT業界の第一線で活躍する方のインタビューなどもご覧になれます。

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2017 mixi recruitment, Inc. all rights reserved.